基于尼康公司網(wǎng)站的界面設(shè)計研究

陳慧潔 胡巧紅

浙江樹人大學(xué)藝術(shù)學(xué)院，浙江 杭州 310053

?

基于尼康公司網(wǎng)站的界面設(shè)計研究

陳慧潔*胡巧紅*

浙江樹人大學(xué)藝術(shù)學(xué)院，浙江 杭州 310053

網(wǎng)頁設(shè)計作為新興的設(shè)計領(lǐng)域，是視覺傳達(dá)與動畫的融合。不同于傳統(tǒng)的視覺傳達(dá)以靜態(tài)的視覺為傳達(dá)方式，網(wǎng)頁界面設(shè)計更具有綜合性和跨學(xué)科性。本文以尼康公司網(wǎng)頁設(shè)計為研究對象，分析作為優(yōu)秀網(wǎng)站，其網(wǎng)站是如何架構(gòu)，分析界面設(shè)計中的亮點，以及界面中的動態(tài)效果設(shè)計，這幾個方面出發(fā)，研究網(wǎng)頁界面設(shè)計的設(shè)計方法與設(shè)計思路。

界面設(shè)計；交互設(shè)計；網(wǎng)頁設(shè)計

一、網(wǎng)頁設(shè)計項目背景

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

二、網(wǎng)站構(gòu)架的項目流程

網(wǎng)站的構(gòu)架是網(wǎng)站前期設(shè)計環(huán)節(jié)中十分重要的一環(huán)，對于網(wǎng)站內(nèi)容的構(gòu)建，并非一朝一夕能夠完成的，往往需要傾注設(shè)計團(tuán)隊大量的心血和汗水。合理、有效的項目流程，將會對網(wǎng)站設(shè)計起到事半功倍的效果。

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

(一)了解網(wǎng)站內(nèi)容。通過和客戶溝通，了解網(wǎng)站的內(nèi)容是宣傳Nikon公司的設(shè)備。需要突出相機(jī)的性能。

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

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

三、設(shè)計形式語言表達(dá)

(一)創(chuàng)意構(gòu)思

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

(二)網(wǎng)站界面設(shè)計

Nikon網(wǎng)站的界面設(shè)計，采用矢量二維圖形設(shè)計風(fēng)格，結(jié)合圖片、文字來進(jìn)行編排。

1.色調(diào)與風(fēng)格

網(wǎng)站的整體色調(diào)為灰色調(diào)，局部加強(qiáng)明度對比，如鼠標(biāo)經(jīng)過的圖形，和文字都采用白色。

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

2.界面插圖設(shè)計

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

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

3.適當(dāng)?shù)木幣旁O(shè)計

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

4.細(xì)節(jié)設(shè)計

頁面中每一處按鈕都需要經(jīng)過精心地設(shè)計。畫面中的色塊和細(xì)線都需經(jīng)過細(xì)心地琢磨。

(三)動態(tài)效果設(shè)計

1.片頭動畫設(shè)計

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

2.流暢的Flash動態(tài)設(shè)計

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

3.按鈕設(shè)計

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

四、網(wǎng)頁界面設(shè)計的發(fā)展

隨著互聯(lián)網(wǎng)網(wǎng)絡(luò)速度的大幅提升，新技術(shù)層出不窮，在各種新興技術(shù)的支撐下，網(wǎng)頁界面設(shè)計將會呈現(xiàn)更加多元化的視覺面貌，同時，也對界面設(shè)計師也提出了更高更具有挑戰(zhàn)性的設(shè)計要求。

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

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

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

TP

A

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