如何搭建完整的網(wǎng)站架構(gòu)并設(shè)計(jì)出一個(gè)出色的網(wǎng)站?關(guān)于這個(gè)問題，我們很難提出一個(gè)絕對(duì)權(quán)威和正確的設(shè)計(jì)思路，但任何網(wǎng)站的設(shè)計(jì)都需要遵循一個(gè)循序漸進(jìn)的步驟。那么，一個(gè)完善的網(wǎng)站建設(shè)過程就是什么樣的呢？

網(wǎng)站設(shè)計(jì)是一門新興的邊緣性職業(yè)，既要從外觀上進(jìn)行創(chuàng)意，又要結(jié)合圖形和版面設(shè)計(jì)，交互設(shè)計(jì)等諸多相關(guān)原理，這使得網(wǎng)站設(shè)計(jì)變成了一門獨(dú)特的藝術(shù)。

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

首先我們由以下四個(gè)步驟來了解一下網(wǎng)站模型設(shè)計(jì)中的內(nèi)涵與重點(diǎn)。

一、網(wǎng)站設(shè)計(jì)，不僅僅是美術(shù)設(shè)計(jì)

你的工作究竟屬于設(shè)計(jì)師還是美工?那得看你做的活是真正的設(shè)計(jì)，還是點(diǎn)綴頁面使之更好看的操作。設(shè)計(jì)師的工作是高屋建瓴的，而美工只是軟件工具的使用者。

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

我們先來舉兩個(gè)奧運(yùn)類型網(wǎng)站的例子：

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

新浪奧運(yùn)頻道：如圖，我們可以看到設(shè)計(jì)師的創(chuàng)意僅僅被壓縮在頁面滾屏幾次后看到的內(nèi)容區(qū)塊上，使用了奧運(yùn)五環(huán)色彩來進(jìn)行設(shè)計(jì)。頁面頭部基本是套在任何一個(gè)專題網(wǎng)站都能使用的結(jié)構(gòu)素材，而新浪的資訊系統(tǒng)一定是能支持實(shí)現(xiàn)一個(gè)更脫離內(nèi)容專題模板的好設(shè)計(jì)的，可見其并沒有從網(wǎng)站設(shè)計(jì)的角度出發(fā)去處理這個(gè)項(xiàng)目。

二、設(shè)計(jì)人員在需求階段介入，影響需求，而不干預(yù)需求

我們常聽到有設(shè)計(jì)師抱怨：“這個(gè)設(shè)計(jì)讓我改了十多遍怎么還不能定稿?”，也常聽到產(chǎn)品經(jīng)理說：“這個(gè)設(shè)計(jì)師怎么就是把握不住要點(diǎn)?”

不論設(shè)計(jì)在網(wǎng)站的實(shí)現(xiàn)過程中有多么重要，網(wǎng)站該是什么模樣，還是必須由需求決定。所以網(wǎng)站項(xiàng)目的前期需求是至關(guān)重要的環(huán)節(jié)，也可以理解成房屋建筑的地基。需求也許是經(jīng)過若干調(diào)查，將結(jié)果匯總后產(chǎn)生的報(bào)告，也可能是領(lǐng)導(dǎo)或老板的一時(shí)沖動(dòng)而引發(fā)的大討論。

在需求的確立過程中，遺憾的是，網(wǎng)站設(shè)計(jì)人員的決定權(quán)是極其有限的，產(chǎn)品經(jīng)理、頻道主管、某級(jí)領(lǐng)導(dǎo)的想法往往直接決定著需求的最終形態(tài)。但是設(shè)計(jì)人員在需求階段的介入還是很有必要的，設(shè)計(jì)師能以自己專業(yè)獨(dú)到的眼光，提出科學(xué)合理的建議，影響需求的細(xì)節(jié)。這樣做的結(jié)果是能在大限度上取得需求方和設(shè)計(jì)方的思想一致，而不至于在設(shè)計(jì)過程中面對(duì)著有意見卻不讓更改的需求問題而大發(fā)牢騷。

三、學(xué)會(huì)掌控用戶路徑

用戶從哪個(gè)頁面來?他最有可能點(diǎn)哪個(gè)鏈接或者按鈕?他使用了搜索框嗎?他下一頁去哪里?最后哪個(gè)頁面會(huì)被他打印輸出?

站在整個(gè)網(wǎng)站的角度出發(fā)，這些流程也許只是產(chǎn)品經(jīng)理需要把握的，設(shè)計(jì)師拿到UE圖只管一個(gè)接一個(gè)繪制頁面就行。其實(shí)不然，好的設(shè)計(jì)師往往能承擔(dān)一部分產(chǎn)品經(jīng)理的職責(zé)，設(shè)計(jì)出一個(gè)典型的用戶路徑，這對(duì)網(wǎng)站頁面流程有著很大的影響。

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

四、初步實(shí)現(xiàn)UE產(chǎn)品模型，并審核

設(shè)計(jì)師需要以什么作為參考來進(jìn)行頁面設(shè)計(jì)?所有的元素和流程都在腦子里，這個(gè)時(shí)候設(shè)計(jì)師需要稍加整理把它們簡要地畫出來，畫出線框和注釋就可以了。

我們可以把UE模型理解為設(shè)計(jì)草圖，在UE階段，設(shè)計(jì)師主要根據(jù)用戶路徑得來的線索，加上對(duì)用戶交互習(xí)慣的探索，進(jìn)而整理出一個(gè)大概的模型框架。這個(gè)框架里，要明確畫出有幾個(gè)關(guān)鍵頁面，每個(gè)關(guān)鍵頁面的關(guān)鍵元素和模塊有哪些，這些關(guān)鍵元素和模塊哪些是必須以某種特定位置排列或者是務(wù)必要強(qiáng)調(diào)突出的。

其中，網(wǎng)站的首頁、最終頁面是最重要的兩級(jí)頁面，首頁會(huì)是用戶使用網(wǎng)站的第一站，在首頁的體驗(yàn)好壞，直接決定著他的去留;而最終頁面是用戶想要獲得信息的具體頁面，他會(huì)在這個(gè)頁面停留最久，可能會(huì)進(jìn)行仔細(xì)的閱讀，或是打印出這一頁備用。通常在繪制完UE模型之后，會(huì)有一個(gè)開發(fā)小組來討論并且審核這個(gè)模型，這時(shí)候就需要著重確定首頁和最終頁的大概模樣，每個(gè)討論參與者對(duì)此都很關(guān)心。UE模型通過之后，傳統(tǒng)意義的設(shè)計(jì)終于派上用場，要進(jìn)行具體的頁面設(shè)計(jì)了。