基于尼康公司網站的界面設計研究

陳慧潔 胡巧紅

浙江樹人大學藝術學院，浙江 杭州 310053

?

基于尼康公司網站的界面設計研究

陳慧潔*胡巧紅*

浙江樹人大學藝術學院，浙江 杭州 310053

網頁設計作為新興的設計領域，是視覺傳達與動畫的融合。不同于傳統的視覺傳達以靜態的視覺為傳達方式，網頁界面設計更具有綜合性和跨學科性。本文以尼康公司網頁設計為研究對象，分析作為優秀網站，其網站是如何架構，分析界面設計中的亮點，以及界面中的動態效果設計，這幾個方面出發，研究網頁界面設計的設計方法與設計思路。

界面設計；交互設計；網頁設計

一、網頁設計項目背景

網頁設計，融合了藝術與技術兩種特性，是一門橫跨學科的交叉學科，具有很強的綜合性。[1]作為網頁設計師，需要在網頁設計之初，對于整個網站如何構架，進行深入研究，了解客戶的需求與市場的定位，從而制定出網站的框架。該網站是Nikon官方網站中，體驗Nikon一項中的子網站，名為Universcale。公司用這個網站來宣傳自身的產品特點。該網站以尺度為主題，比較世間萬物的大小，小到顯微鏡下的細胞，大到整個宇宙星系，都被囊括進了這個網站中。該網站的互動效果獨具特色，側重虛擬體驗。該網站整個制作歷時數月，制作嚴謹，尺度精確，文字內容詳實，風格獨特。通過該網站Nikon公司達到了預期的宣傳效果，既普及了科普知識又宣傳了相機的特性，給每一個訪問該網站的用戶帶來了虛擬體驗的樂趣。

二、網站構架的項目流程

網站的構架是網站前期設計環節中十分重要的一環，對于網站內容的構建，并非一朝一夕能夠完成的，往往需要傾注設計團隊大量的心血和汗水。合理、有效的項目流程，將會對網站設計起到事半功倍的效果。

該公司的網站Universcale，其項目的開發流程包括：前期策劃、創意構思、制定網站框架、網站界面設計、動態效果設計與制作、添加多媒體元素(視頻、音效)、上傳與維護。整個流程清晰、有序合理，可以使項目能夠順利地進行下去。在設計Nikon公司網站前，需要先了解網站的整體定位，進行框架搭建和創意構思。具體步驟如下：

(一)了解網站內容。通過和客戶溝通，了解網站的內容是宣傳Nikon公司的設備。需要突出相機的性能。

(二)收集相關資料。收集并整理相關文字與圖片資料。收集微觀物體和宏觀物體的圖片，以及尺寸和相關的文字資料。

(三)整理相關資料。按照尺度大小來分類整理各種圖片和文字資料。進行有選擇性地篩選，挑選出有代表性的圖片。

三、設計形式語言表達

(一)創意構思

富有創意的設計將會另網站富有獨特的魅力，能吸引更多的用戶來訪問。[2]鑒于該公司已經有自身的官方網站，所以這個網站是區別于官方網站的，形式應該新穎獨特，并加入豐富的互動效果。考慮到能夠更好地突出相機鏡頭的特性，于是，確定由宏觀到微觀展示世間萬物這一構思。

(二)網站界面設計

Nikon網站的界面設計，采用矢量二維圖形設計風格，結合圖片、文字來進行編排。

1.色調與風格

網站的整體色調為灰色調，局部加強明度對比，如鼠標經過的圖形，和文字都采用白色。

由深到淺的漸變色襯托了網站想要營造的氛圍，黑色的水平線上是蒼茫的夜空。整個色調的設計使訪客沉浸在茫茫的宇宙中。

2.界面插圖設計

網站中的矢量圖形設計，將寫實的圖片，勾勒成平面剪影的矢量效果。圖片都經過設計師的精心篩選和處理，使物體都保持統一角度，再挑選出造型好、適合剪影圖形表現的圖形來進行矢量圖的制作。

而網站中設計了豐富的手繪插圖。物體放大呈現的圖案，是經過精心繪制而成的。設計師并沒有選用素材攝影圖片，而是為網站量身定做了插圖，不怕繁瑣只求達到最好效果。

3.適當的編排設計

圖形和文字的編排采用以水平為主的分割形式，將標尺位于下方，圖形排列在中心部分，文字說明部分采用白色塊襯托，并進行分割，使內容緊湊、有序。

4.細節設計

頁面中每一處按鈕都需要經過精心地設計。畫面中的色塊和細線都需經過細心地琢磨。

(三)動態效果設計

1.片頭動畫設計

進入Flash網站，我們通常會看到一段片頭動畫，這段動畫是網站設計中的一環，起到介紹和宣傳網站內容與特點的作用。Nikon網站在進入后，我們可以看到連綿的山脈和字幕，仿佛電影的開場一樣，隨著鏡頭的逐步推進，水平線上遠處的物體緩緩地移動、放大。這時我們會感覺到自己已經完全沉浸在了這片虛擬世界中，最后鏡頭定格，浮現出網站的標題——“Uiverscale”。這正是設計師獨具匠心之處，靈活地運用了影視鏡頭語言，使平面二維的圖像變得生動。可見，網頁設計交叉學科、綜合學科知識的重要性。

2.流暢的Flash動態設計

設計師通過Flash軟件來進行動畫的制作，設計流暢地移動動畫。點擊標尺上不同單位的按鈕，就可以迅速流動地查看到該尺度的物體。而不點擊按鈕時，位于標尺上的物體會依次緩慢地移動、放大，就仿佛鏡頭在逐步地向前推進。圖形移動隨著訪客鼠標的點擊快慢相間、大小相生，整個動態效果雖然簡單，卻富有節奏和韻律。這種動態的節奏和韻律感正是設計師需要細心把握的關鍵。

3.按鈕設計

位于界面兩側的兩個按鈕，起到了功能補充的作用，使訪客也可以在水平線上逐個查看更小或更大的物體。最下方的按鈕是關于各種單位的解釋，如mm、nm、ly的概念。整段的文字都是居中編排，以水平分割法來處理色塊、文字、圖形的關系。

四、網頁界面設計的發展

隨著互聯網網絡速度的大幅提升，新技術層出不窮，在各種新興技術的支撐下，網頁界面設計將會呈現更加多元化的視覺面貌，同時，也對界面設計師也提出了更高更具有挑戰性的設計要求。

[1]黃春蓉.計算機圖像技術應用于網頁設計研究[J].計算機光盤軟件與應用，2013(20)：265-266.

[2]苗蘋.淺析網頁的視覺與審美的整合設計[J].數位時尚(新視覺藝術)，2013(02)：135-136.

陳慧潔(1995-)，女，漢族，浙江杭州人，浙江樹人大學，本科，主攻動畫藝術設計方向；胡巧紅(1976-)，女，浙江金華人，碩士，浙江樹人大學，講師，主要從事動畫理論研究。

TP

A

1006-0049-(2017)11-0265-01