如何搭建完整的網站架構并設計出一個出色的網站?關于這個問題，我們很(hěn)難提出一個絕對權威和正确的設計思路，但任何網站的設計都需要遵循一個循序漸進的步驟。那麽，一個完善的網站建設過程就是什麽樣的呢(ne)？

網站設計是一門新(xīn)興的邊緣性職業，既要從外觀上進行創意，又(yòu)要結合圖形和版面設計，交互設計等諸多(duō)相關原理(lǐ)，這使得網站設計變成了一門獨特的藝術。

良好的網站設計能(néng)使網站在同類站點中(zhōng)獨具(jù)特色，優秀的創意和表現方式能(néng)給浏覽者留下深刻的印象，使網站訪問流量增加甚至直接增加網站收入。 因此，在設計的初始階段就規劃好網站的設計步驟是非常重要的，通常情況下網站設計步驟分(fēn)為(wèi)模型構建、審美及交互設計、風格設計、代碼設計、可(kě)用(yòng)性測試等幾大方面。

        首先我們由以下四個步驟來了解一下網站模型設計中(zhōng)的内涵與重點。

一、網站設計，不僅僅是美術設計

你的工(gōng)作(zuò)究竟屬于設計師還是美工(gōng)?那得看你做的活是真正的設計，還是點綴頁(yè)面使之更好看的操作(zuò)。設計師的工(gōng)作(zuò)是高屋建瓴的，而美工(gōng)隻是軟件工(gōng)具(jù)的使用(yòng)者。

很(hěn)多(duō)人把在網站中(zhōng)的設計定義為(wèi)美術設計，認為(wèi)設計師的工(gōng)作(zuò)任務(wù)就是使用(yòng)Photoshop一類的繪圖軟件把需要展示的頁(yè)面畫出來，其實這是很(hěn)狹義的理(lǐ)解。合格的設計師應該立足于整個網站的全局，在規劃上對整個網站進行完整的設計，在宏觀上把握設計風格導向，微觀上再針對該網站的具(jù)體(tǐ)定位來決定如何對設計進行元素上的細化。當然，網站設計還包括了數據庫設計及程序設計，在這裏，我僅以我的從業經驗，舉例談談網站前端設計。

我們先來舉兩個奧運類型網站的例子：

奧運會官網：如圖，這是一個設計得非常成功的例子，設計師并沒有(yǒu)像一般涉及奧運主題的設計一樣使用(yòng)大量紅色，而是把頁(yè)面風格完全國(guó)際化，其中(zhōng)把各種資訊和功能(néng)模塊都恰到好處地融合在一起，粗毛筆(bǐ)一般的元素設計使網站得到了豐富的整體(tǐ)效果。

新(xīn)浪奧運頻道：如圖，我們可(kě)以看到設計師的創意僅僅被壓縮在頁(yè)面滾屏幾次後看到的内容區(qū)塊上，使用(yòng)了奧運五環色彩來進行設計。頁(yè)面頭部基本是套在任何一個專題網站都能(néng)使用(yòng)的結構素材，而新(xīn)浪的資訊系統一定是能(néng)支持實現一個更脫離内容專題模闆的好設計的，可(kě)見其并沒有(yǒu)從網站設計的角度出發去處理(lǐ)這個項目。

二、設計人員在需求階段介入，影響需求，而不幹預需求

我們常聽到有(yǒu)設計師抱怨：“這個設計讓我改了十多(duō)遍怎麽還不能(néng)定稿?”，也常聽到産(chǎn)品經理(lǐ)說：“這個設計師怎麽就是把握不住要點?”

不論設計在網站的實現過程中(zhōng)有(yǒu)多(duō)麽重要，網站該是什麽模樣，還是必須由需求決定。所以網站項目的前期需求是至關重要的環節，也可(kě)以理(lǐ)解成房屋建築的地基。需求也許是經過若幹調查，将結果彙總後産(chǎn)生的報告，也可(kě)能(néng)是領導或老闆的一時沖動而引發的大讨論。

在需求的确立過程中(zhōng)，遺憾的是，網站設計人員的決定權是極其有(yǒu)限的，産(chǎn)品經理(lǐ)、頻道主管、某級領導的想法往往直接決定着需求的最終形态。但是設計人員在需求階段的介入還是很(hěn)有(yǒu)必要的，設計師能(néng)以自己專業獨到的眼光，提出科(kē)學(xué)合理(lǐ)的建議，影響需求的細節。這樣做的結果是能(néng)在最大限度上取得需求方和設計方的思想一緻，而不至于在設計過程中(zhōng)面對着有(yǒu)意見卻不讓更改的需求問題而大發牢騷。

三、學(xué)會掌控用(yòng)戶路徑

用(yòng)戶從哪個頁(yè)面來?他(tā)最有(yǒu)可(kě)能(néng)點哪個鏈接或者按鈕?他(tā)使用(yòng)了搜索框嗎?他(tā)下一頁(yè)去哪裏?最後哪個頁(yè)面會被他(tā)打印輸出?

站在整個網站的角度出發，這些流程也許隻是産(chǎn)品經理(lǐ)需要把握的，設計師拿(ná)到UE圖隻管一個接一個繪制頁(yè)面就行。其實不然，好的設計師往往能(néng)承擔一部分(fēn)産(chǎn)品經理(lǐ)的職責，設計出一個典型的用(yòng)戶路徑，這對網站頁(yè)面流程有(yǒu)着很(hěn)大的影響。

頁(yè)面和頁(yè)面之間有(yǒu)很(hěn)多(duō)關聯，成片的超鏈接把流程頁(yè)面和外部頁(yè)面混亂地串在一起，區(qū)域A的文(wén)字鏈接要鏈到頁(yè)面2，區(qū)域B的圖片鏈接是指向頁(yè)面3，側邊的一個位置顯著的大按鈕其實是鏈接到網站X……頁(yè)面和頁(yè)面之間也是有(yǒu)繼承關系的，繼承的過程要讓用(yòng)戶覺得理(lǐ)所當然，在視覺上實現平滑過渡，這就是設計師要考慮的具(jù)體(tǐ)問題。從一個頁(yè)面到另一個頁(yè)面的路徑組成裏，哪些模塊要原樣保留，哪些控件要發生變化?頁(yè)面結構是否可(kě)以變動，頁(yè)面色彩是否可(kě)以更換?這些都是需要參照用(yòng)戶路徑進行設計的地方。把自己想象成為(wèi)一個普通用(yòng)戶，一頁(yè)一頁(yè)地點進來，你就能(néng)明白用(yòng)戶需要的是什麽樣的合理(lǐ)設計。

四、初步實現UE産(chǎn)品模型，并審核

設計師需要以什麽作(zuò)為(wèi)參考來進行頁(yè)面設計?所有(yǒu)的元素和流程都在腦子裏，這個時候設計師需要稍加整理(lǐ)把它們簡要地畫出來，畫出線(xiàn)框和注釋就可(kě)以了。

我們可(kě)以把UE模型理(lǐ)解為(wèi)設計草(cǎo)圖，在UE階段，設計師主要根據用(yòng)戶路徑得來的線(xiàn)索，加上對用(yòng)戶交互習慣的探索，進而整理(lǐ)出一個大概的模型框架。這個框架裏，要明确畫出有(yǒu)幾個關鍵頁(yè)面，每個關鍵頁(yè)面的關鍵元素和模塊有(yǒu)哪些，這些關鍵元素和模塊哪些是必須以某種特定位置排列或者是務(wù)必要強調突出的。

其中(zhōng)，網站的首頁(yè)、最終頁(yè)面是最重要的兩級頁(yè)面，首頁(yè)會是用(yòng)戶使用(yòng)網站的第一站，在首頁(yè)的體(tǐ)驗好壞，直接決定着他(tā)的去留;而最終頁(yè)面是用(yòng)戶想要獲得信息的具(jù)體(tǐ)頁(yè)面，他(tā)會在這個頁(yè)面停留最久，可(kě)能(néng)會進行仔細的閱讀，或是打印出這一頁(yè)備用(yòng)。通常在繪制完UE模型之後，會有(yǒu)一個開發小(xiǎo)組來讨論并且審核這個模型，這時候就需要着重确定首頁(yè)和最終頁(yè)的大概模樣，每個讨論參與者對此都很(hěn)關心。UE模型通過之後，傳統意義的設計終于派上用(yòng)場，要進行具(jù)體(tǐ)的頁(yè)面設計了。