樓 琦 胡巧紅

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

?

基于耐克公司網(wǎng)站Nikegenealogy的設(shè)計(jì)研究

樓 琦*胡巧紅*

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

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

網(wǎng)頁(yè)界面設(shè)計(jì)；交互設(shè)計(jì)；網(wǎng)站架構(gòu)

一、網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目背景

網(wǎng)頁(yè)設(shè)計(jì)是一門(mén)交叉的學(xué)科，融合了藝術(shù)與技術(shù)兩種特性。作為網(wǎng)頁(yè)設(shè)計(jì)師，需要在網(wǎng)頁(yè)設(shè)計(jì)之初，對(duì)于整個(gè)網(wǎng)站如何構(gòu)架，進(jìn)行深入研究，了解客戶(hù)的需求與市場(chǎng)的定位，從而制定出網(wǎng)站的框架。

以耐克公司的產(chǎn)品網(wǎng)站Nikegenealogy為例，該網(wǎng)站是關(guān)于Nike公司的產(chǎn)品運(yùn)動(dòng)鞋發(fā)展歷史的網(wǎng)站，內(nèi)容涵蓋廣泛，講述了從1966年發(fā)展到現(xiàn)在的歷史過(guò)程，網(wǎng)站的交互性很強(qiáng)。其中，鞋子的三維旋轉(zhuǎn)效果格外地吸引人。

該網(wǎng)站集合了視頻、可轉(zhuǎn)動(dòng)的圖片和豐富的Nike大事記錄。例如Bill Bowerman發(fā)明的第一個(gè)應(yīng)用于跑鞋的鞋底。瀏覽者可以通過(guò)運(yùn)動(dòng)、事跡線(xiàn)索、系譜和相關(guān)正文的搜索來(lái)了解具體內(nèi)容，整個(gè)網(wǎng)站容納了200多個(gè)Nike鞋產(chǎn)品，同時(shí)個(gè)別的產(chǎn)品還設(shè)有豐富的交互體驗(yàn)。在這個(gè)站點(diǎn)的創(chuàng)作中，AKQA設(shè)計(jì)團(tuán)隊(duì)加工和追蹤了1500個(gè)獨(dú)立的元素，其中包括：副本、標(biāo)題和照片。運(yùn)用Flash軟件，并結(jié)合一個(gè)Flash目錄處理系統(tǒng)，使得全部的站點(diǎn)內(nèi)容根據(jù)瀏覽者的點(diǎn)擊作精彩的互動(dòng)展示。整個(gè)網(wǎng)站由網(wǎng)站開(kāi)發(fā)者中的8個(gè)核心成員花費(fèi)了3個(gè)月才完成了這些工作。這個(gè)模塊化的網(wǎng)站結(jié)構(gòu)包含了10種不同語(yǔ)言，保證能夠被全球使用不同語(yǔ)言的訪(fǎng)客瀏覽。

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

網(wǎng)站的構(gòu)建，并非一朝一夕能夠完成的，往往需要傾注設(shè)計(jì)團(tuán)隊(duì)大量的心血和汗水。合理、有效的項(xiàng)目流程，將會(huì)對(duì)網(wǎng)站設(shè)計(jì)起到事半功倍的效果。

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

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

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

創(chuàng)意構(gòu)思是網(wǎng)站設(shè)計(jì)中十分重要的一環(huán)。對(duì)比同類(lèi)網(wǎng)站和Nike官方網(wǎng)站，需要將網(wǎng)站設(shè)計(jì)出特色和新意，設(shè)計(jì)師經(jīng)過(guò)精心考慮后，確定一種構(gòu)思方案，即設(shè)計(jì)一種虛擬現(xiàn)實(shí)的互動(dòng)效果，使瀏覽者可以任意轉(zhuǎn)動(dòng)從各個(gè)角度查看鞋子。

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

確定網(wǎng)站構(gòu)思后，我們就著手開(kāi)始進(jìn)行網(wǎng)站界面設(shè)計(jì)。其中需要考慮到多種關(guān)系，包括色調(diào)、界面的插圖設(shè)計(jì)、編排設(shè)計(jì)等。

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

設(shè)計(jì)師選用淺灰綠色調(diào)，清新淡雅，適用于制鞋歷史這一主題。風(fēng)格定位為簡(jiǎn)潔、明快。局部采用鮮艷的補(bǔ)色——大紅色，對(duì)比鮮明。

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

網(wǎng)站的界面插圖設(shè)計(jì)是整個(gè)網(wǎng)站界面設(shè)計(jì)中特別突出的部分，富有立體動(dòng)感的插圖設(shè)計(jì)，增強(qiáng)了網(wǎng)站的視覺(jué)效果。在耐克網(wǎng)站中，曲線(xiàn)狀的插圖，富有立體感的設(shè)計(jì)，視覺(jué)效果集中、強(qiáng)烈，突出鞋子運(yùn)動(dòng)感、流暢感。如果沒(méi)有這樣精致的插圖，這個(gè)網(wǎng)站的頁(yè)面也就會(huì)顯得平淡無(wú)奇了。

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

在網(wǎng)頁(yè)設(shè)計(jì)中，普遍會(huì)采用四周留白的形式，即背景底紋頁(yè)面和主題頁(yè)面疊加，主題頁(yè)面置于背景頁(yè)面之上，主題頁(yè)面稍小于顯示屏幕的尺寸，如圖中黑線(xiàn)所示，這樣設(shè)計(jì)視覺(jué)效果較為集中。同時(shí)，采用網(wǎng)格分割的形式，使頁(yè)面分區(qū)明確。如圖紅線(xiàn)所示，左邊是按鈕導(dǎo)航菜單，右邊是信息內(nèi)容。在右邊的內(nèi)容又進(jìn)行了橫向的分割，使文字、圖片和按鈕整齊排列。

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

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

(三)虛擬現(xiàn)實(shí)的互動(dòng)設(shè)計(jì)

網(wǎng)站采用虛擬現(xiàn)實(shí)的互動(dòng)效果，使訪(fǎng)客從各個(gè)角度來(lái)瀏覽Nike鞋產(chǎn)品，增強(qiáng)了用戶(hù)的虛擬體驗(yàn)感。歷史圖譜的設(shè)計(jì)，條理清晰，動(dòng)態(tài)效果精致而有趣。不同歷史年代的關(guān)系通過(guò)網(wǎng)絡(luò)狀、鏈狀的互動(dòng)效果表現(xiàn)，結(jié)合Flash動(dòng)畫(huà)和一定的編程，使得不同鞋子間的關(guān)系清晰而明確。如何展示Nike鞋的產(chǎn)品，是該網(wǎng)站互動(dòng)設(shè)計(jì)中需要重點(diǎn)考慮的，經(jīng)過(guò)多種方案的斟酌和篩選，最后確定采用虛擬現(xiàn)實(shí)的互動(dòng)技術(shù)，通過(guò)鼠標(biāo)點(diǎn)擊360度旋轉(zhuǎn)鞋子，這樣可以使訪(fǎng)客從不同角度查看鞋子的外觀(guān)效果。

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

隨著計(jì)算機(jī)技術(shù)的不斷進(jìn)步，互聯(lián)網(wǎng)網(wǎng)絡(luò)速度的大幅提升，在越來(lái)越多的新技術(shù)的支撐下，網(wǎng)頁(yè)界面設(shè)計(jì)將會(huì)呈現(xiàn)更加多元化的視覺(jué)面貌，對(duì)界面設(shè)計(jì)師也提出了更高更具有挑戰(zhàn)性的設(shè)計(jì)要求。

[1]王君.網(wǎng)頁(yè)設(shè)計(jì)在平面設(shè)計(jì)中的運(yùn)用[J].包裝工程，2012(8)：140-142.

[2]鬲波飛.網(wǎng)頁(yè)設(shè)計(jì)之視覺(jué)信息傳達(dá)分析[J].湖南大學(xué)學(xué)報(bào)(社會(huì)科學(xué)版)，2001(12)：187-189.

樓琦(1994-)，女，漢族，浙江諸暨人，浙江樹(shù)人大學(xué)，本科，主攻動(dòng)畫(huà)藝術(shù)設(shè)計(jì)方向；胡巧紅(1976-)，女，浙江金華人，碩士，浙江樹(shù)人大學(xué)，講師，主要從事動(dòng)畫(huà)理論研究。

F

A

1006-0049-(2017)10-0291-01