基于耐克公司網站Nikegenealogy的設計研究

樓 琦 胡巧紅

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

?

基于耐克公司網站Nikegenealogy的設計研究

樓 琦*胡巧紅*

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

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

網頁界面設計；交互設計；網站架構

一、網頁設計項目背景

網頁設計是一門交叉的學科，融合了藝術與技術兩種特性。作為網頁設計師，需要在網頁設計之初，對于整個網站如何構架，進行深入研究，了解客戶的需求與市場的定位，從而制定出網站的框架。

以耐克公司的產品網站Nikegenealogy為例，該網站是關于Nike公司的產品運動鞋發展歷史的網站，內容涵蓋廣泛，講述了從1966年發展到現在的歷史過程，網站的交互性很強。其中，鞋子的三維旋轉效果格外地吸引人。

該網站集合了視頻、可轉動的圖片和豐富的Nike大事記錄。例如Bill Bowerman發明的第一個應用于跑鞋的鞋底。瀏覽者可以通過運動、事跡線索、系譜和相關正文的搜索來了解具體內容，整個網站容納了200多個Nike鞋產品，同時個別的產品還設有豐富的交互體驗。在這個站點的創作中，AKQA設計團隊加工和追蹤了1500個獨立的元素，其中包括：副本、標題和照片。運用Flash軟件，并結合一個Flash目錄處理系統，使得全部的站點內容根據瀏覽者的點擊作精彩的互動展示。整個網站由網站開發者中的8個核心成員花費了3個月才完成了這些工作。這個模塊化的網站結構包含了10種不同語言，保證能夠被全球使用不同語言的訪客瀏覽。

二、網站構架的項目流程

網站的構建，并非一朝一夕能夠完成的，往往需要傾注設計團隊大量的心血和汗水。合理、有效的項目流程，將會對網站設計起到事半功倍的效果。

耐克公司的網站Nikegenealogy，其項目的開發流程包括：前期策劃、制定網站框架、創意構思、網站界面設計、動態效果設計與制作、添加多媒體元素(視頻、音效)、上傳與維護。整個流程清晰、有序合理，可以使項目能夠順利地進行下去。

三、設計形式語言表達

(一)創意構思

創意構思是網站設計中十分重要的一環。對比同類網站和Nike官方網站，需要將網站設計出特色和新意，設計師經過精心考慮后，確定一種構思方案，即設計一種虛擬現實的互動效果，使瀏覽者可以任意轉動從各個角度查看鞋子。

(二)網站界面設計

確定網站構思后，我們就著手開始進行網站界面設計。其中需要考慮到多種關系，包括色調、界面的插圖設計、編排設計等。

1.色調與風格

設計師選用淺灰綠色調，清新淡雅，適用于制鞋歷史這一主題。風格定位為簡潔、明快。局部采用鮮艷的補色——大紅色，對比鮮明。

2.界面插圖設計

網站的界面插圖設計是整個網站界面設計中特別突出的部分，富有立體動感的插圖設計，增強了網站的視覺效果。在耐克網站中，曲線狀的插圖，富有立體感的設計，視覺效果集中、強烈，突出鞋子運動感、流暢感。如果沒有這樣精致的插圖，這個網站的頁面也就會顯得平淡無奇了。

3.適當的編排設計

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

4.細節設計

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

(三)虛擬現實的互動設計

網站采用虛擬現實的互動效果，使訪客從各個角度來瀏覽Nike鞋產品，增強了用戶的虛擬體驗感。歷史圖譜的設計，條理清晰，動態效果精致而有趣。不同歷史年代的關系通過網絡狀、鏈狀的互動效果表現，結合Flash動畫和一定的編程，使得不同鞋子間的關系清晰而明確。如何展示Nike鞋的產品，是該網站互動設計中需要重點考慮的，經過多種方案的斟酌和篩選，最后確定采用虛擬現實的互動技術，通過鼠標點擊360度旋轉鞋子，這樣可以使訪客從不同角度查看鞋子的外觀效果。

四、網頁界面設計的發展

隨著計算機技術的不斷進步，互聯網網絡速度的大幅提升，在越來越多的新技術的支撐下，網頁界面設計將會呈現更加多元化的視覺面貌，對界面設計師也提出了更高更具有挑戰性的設計要求。

[1]王君.網頁設計在平面設計中的運用[J].包裝工程，2012(8)：140-142.

[2]鬲波飛.網頁設計之視覺信息傳達分析[J].湖南大學學報(社會科學版)，2001(12)：187-189.

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

F

A

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