制作一個(gè)優(yōu)質(zhì)網(wǎng)站該如何搭建完整的網(wǎng)站架構(gòu)？

如何搭建完整的網(wǎng)站架構(gòu)并設(shè)計(jì)出一個(gè)出色的網(wǎng)站?關(guān)于這個(gè)問(wèn)題，我們很難提出一個(gè)絕對(duì)權(quán)威和正確的設(shè)計(jì)思路，但任何網(wǎng)站的設(shè)計(jì)都需要遵循一個(gè)循序漸進(jìn)的步驟。此次IT設(shè)計(jì)欄目特別邀請(qǐng)網(wǎng)站設(shè)計(jì)專業(yè)人士，自本期起進(jìn)行為期5期的連載，分別從網(wǎng)站模型構(gòu)建、審美與交互設(shè)計(jì)、風(fēng)格設(shè)計(jì)、代碼設(shè)計(jì)、可用性測(cè)試及對(duì)設(shè)計(jì)的折回補(bǔ)充等五方面，詳細(xì)闡述如何設(shè)計(jì)一個(gè)優(yōu)秀的網(wǎng)站，敬請(qǐng)讀者關(guān)注。

網(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èn)流量增加甚至直接增加網(wǎng)站收入。 因此，在設(shè)計(jì)的初始階段就規(guī)劃好網(wǎng)站的設(shè)計(jì)步驟是非常重要的，通常情況下網(wǎng)站設(shè)計(jì)步驟分為模型構(gòu)建、審美及交互設(shè)計(jì)、風(fēng)格設(shè)計(jì)、代碼設(shè)計(jì)、可用性測(cè)試等幾大方面。首先我們由以下四個(gè)步驟來(lái)了解一下網(wǎng)站模型設(shè)計(jì)中的內(nèi)涵與重點(diǎn)。

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

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

很多人把在網(wǎng)站中的設(shè)計(jì)定義為美術(shù)設(shè)計(jì)，認(rèn)為設(shè)計(jì)師的工作任務(wù)就是使用Photoshop一類的繪圖軟件把需要展示的頁(yè)面畫出來(lái)，其實(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)站的具體定位來(lái)決定如何對(duì)設(shè)計(jì)進(jìn)行元素上的細(xì)化。當(dāng)然，網(wǎng)站設(shè)計(jì)還包括了數(shù)據(jù)庫(kù)設(shè)計(jì)及程序設(shè)計(jì)，在這里，我僅以我的從業(yè)經(jīng)驗(yàn)，舉例談?wù)劸W(wǎng)站前端設(shè)計(jì)。

北京奧運(yùn)會(huì)即將開幕，我們先來(lái)舉兩個(gè)奧運(yùn)類型網(wǎng)站的例子：

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

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

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

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

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

在需求的確立過(guò)程中，遺憾的是，網(wǎng)站設(shè)計(jì)人員的分量是極其有限的，產(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ì)過(guò)程中面對(duì)著有意見(jiàn)卻不讓更改的需求問(wèn)題而大發(fā)牢騷。

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

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

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

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

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

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

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

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

鏈接1 網(wǎng)站設(shè)計(jì)中可能存在的誤區(qū)〖EOF〗

誤區(qū)一：設(shè)計(jì)師就是美工。

事實(shí)上，兩者幾乎完全不同，設(shè)計(jì)師存在主觀因素上的設(shè)計(jì)，而美工很有可能只是被動(dòng)執(zhí)行。

誤區(qū)二：用什么做圖軟件對(duì)設(shè)計(jì)師來(lái)說(shuō)很重要。

其實(shí)設(shè)計(jì)師對(duì)做圖軟件沒(méi)有什么嚴(yán)格要求，很多學(xué)習(xí)繪圖軟件很久的人習(xí)慣用photoshop來(lái)畫頁(yè)面，而更多專職面向網(wǎng)頁(yè)設(shè)計(jì)的人習(xí)慣使用fireworks，因?yàn)槠涓W(wǎng)頁(yè)化的操作能帶來(lái)更高的效率。

誤區(qū)三：做平面設(shè)計(jì)和網(wǎng)頁(yè)設(shè)計(jì)其實(shí)是互通的。

雖然都是設(shè)計(jì)，但兩者的很多設(shè)計(jì)規(guī)矩是不一樣的，我認(rèn)為兩者大的區(qū)別是思想上的區(qū)別：平面設(shè)計(jì)講究留白和視覺(jué)沖擊，而網(wǎng)頁(yè)設(shè)計(jì)則寸土寸金，頁(yè)面元素的整齊協(xié)調(diào)更是至關(guān)重要的。

誤區(qū)四：我改變不了領(lǐng)導(dǎo)和用戶的需求。

設(shè)計(jì)師要做的只是提出自己對(duì)于設(shè)計(jì)上的看法，決定權(quán)仍然在于領(lǐng)導(dǎo)。

誤區(qū)五：我經(jīng)驗(yàn)不足，提不了任何建議。

對(duì)設(shè)計(jì)師來(lái)說(shuō)，了解需求也是很重要的，不光是需要讀懂文檔，更需要真正明白大家在做的是一個(gè)什么樣的具體的東西，這樣在動(dòng)手操作的時(shí)候，才不會(huì)手足無(wú)措或者是理解偏差。

誤區(qū)六：設(shè)計(jì)師直接出設(shè)計(jì)稿就行了，有問(wèn)題就改。

設(shè)計(jì)師需要先搭建出UE模型，UE只需要以簡(jiǎn)單線框模式展現(xiàn)，效率高而且適合隨時(shí)調(diào)整修改，往往在這個(gè)階段需要修改的地方是很多的，如果直接就以設(shè)計(jì)稿來(lái)探討，每修改一處都是一個(gè)工程，毫無(wú)效率可言。

誤區(qū)七: 每個(gè)頁(yè)面都很重要，都要認(rèn)真研究探討。

其實(shí)大部分網(wǎng)站頁(yè)面都是一樣的框架，只是內(nèi)容顯示不同，同一個(gè)級(jí)別的頁(yè)面基本都是一致的，除了關(guān)鍵頁(yè)面之外，其他頁(yè)面用戶也許只是經(jīng)過(guò)一次，停留時(shí)間甚至可以忽略，論優(yōu)先級(jí)來(lái)說(shuō)，同等效率下自然要保證關(guān)鍵頁(yè)面。

鏈接2 相關(guān)名詞

MRD(Market Requirements Document)，

是指市場(chǎng)需求文檔。MRD文檔主要側(cè)重于市場(chǎng)機(jī)會(huì)的分析，得出類似于 “就當(dāng)前市場(chǎng)情況而言，我們可以做什么”的結(jié)論;

PRD(Product Requirements Document)，

是指產(chǎn)品需求文檔。PRD側(cè)重于整個(gè)產(chǎn)品的規(guī)劃，比 MRD文檔要細(xì)化一些;

UI(User Interface)設(shè)計(jì)，

用戶界面設(shè)計(jì)，用戶界面設(shè)計(jì)的三大原則是: 置界面于用戶的控制之下、減少用戶的記憶負(fù)擔(dān)、保持界面的一致性;

UE(User Experience)，

用戶體驗(yàn)，成形的用戶體驗(yàn)可表示為框架化的頁(yè)面草圖，有些人習(xí)慣用紙筆畫UE，有些人習(xí)慣用word或其他行業(yè)軟件，總之能展現(xiàn)頁(yè)面概要示例即可。

網(wǎng)頁(yè)設(shè)計(jì)的規(guī)范

理解并遵循網(wǎng)頁(yè)設(shè)計(jì)的規(guī)范是網(wǎng)頁(yè)界面設(shè)計(jì)的基礎(chǔ)，網(wǎng)頁(yè)設(shè)計(jì)的規(guī)范在行業(yè)中通常被稱為設(shè)計(jì)的“一貫性”。一個(gè)優(yōu)秀的、有經(jīng)驗(yàn)的設(shè)計(jì)師能把網(wǎng)頁(yè)設(shè)計(jì)的基本規(guī)范自然而本能地融入作品中。在顯示器的方寸顯示空間里，用戶需要以被限定的分辨率來(lái)瀏覽頁(yè)面、以鍵盤和鼠標(biāo)來(lái)交互控制界面、繼而在有限的網(wǎng)絡(luò)傳輸速度下一個(gè)個(gè)層級(jí)地瀏覽整個(gè)站點(diǎn)，可想而知其中有多少要素需要規(guī)范化。

形象標(biāo)志(LOGO)、導(dǎo)航、搜索、內(nèi)容區(qū)塊、頁(yè)面長(zhǎng)度、字體字號(hào)等元素是這些規(guī)范中至關(guān)重要的部分。這些元素中大部分都表現(xiàn)在網(wǎng)站的頭部或者是第一屏能顯示的區(qū)域內(nèi)：一般的網(wǎng)站通常會(huì)在頭部顯著位置顯示網(wǎng)站LOGO，以合理的層級(jí)關(guān)系及最普通的字體字號(hào)來(lái)展現(xiàn)導(dǎo)航以及設(shè)計(jì)合理的搜索功能塊。

在這里我們需要注意的是除非非常必要，網(wǎng)站的LOGO盡量不要以flash動(dòng)畫展示，同時(shí)導(dǎo)航也盡量不要以flash動(dòng)畫或圖片來(lái)表現(xiàn)，因?yàn)闉g覽器有攔截flash的可能;同時(shí)，不同終端設(shè)備上瀏覽器對(duì)flash和圖片的不支持也可能造成網(wǎng)站無(wú)法繼續(xù)訪問(wèn)或者根本無(wú)法識(shí)別。

我們可以通過(guò)以下幾個(gè)例子對(duì)比一下網(wǎng)頁(yè)設(shè)計(jì)規(guī)范在實(shí)際應(yīng)用中的效果：圖1，汽車之家的導(dǎo)航設(shè)計(jì)，圖文結(jié)合，非常出色;圖2，貴州省人民政府網(wǎng)站，網(wǎng)站標(biāo)題和LOGO全部制作到flash動(dòng)畫中，當(dāng)瀏覽器屏蔽flash的時(shí)候，網(wǎng)站將無(wú)法識(shí)別;圖3，伊利集團(tuán)網(wǎng)站，導(dǎo)航flash也很漂亮，同樣的，當(dāng)瀏覽器屏蔽flash的時(shí)候，導(dǎo)航將不可見(jiàn)，網(wǎng)站無(wú)法被繼續(xù)訪問(wèn);圖4，廣東省人民政府網(wǎng)站，非常優(yōu)秀的設(shè)計(jì)，導(dǎo)航欄全部以非圖片形式制作，既保證了美觀，又體現(xiàn)了實(shí)用性。

除此之外，網(wǎng)站的各內(nèi)容區(qū)塊應(yīng)切割明顯，讓用戶能很容易地判斷內(nèi)容塊的起始。如果不是門戶類型網(wǎng)站，網(wǎng)站頁(yè)面長(zhǎng)度盡量不要超過(guò)三屏(因?yàn)椴煌@示器分辨率參數(shù)不同，三屏的說(shuō)法不一定適用于所有設(shè)計(jì))，即不要讓用戶在同一頁(yè)面上過(guò)多滾動(dòng)鼠標(biāo)滾輪。中文網(wǎng)站設(shè)計(jì)時(shí)應(yīng)注意內(nèi)容區(qū)域文字盡量使用12像素、14像素等偶數(shù)字號(hào)，以準(zhǔn)確表達(dá)中文字體的整齊切割，正文漢字部分應(yīng)嚴(yán)格使用宋體，保證用戶最好的閱讀感受。標(biāo)題部分可以稍微增大字號(hào)，頁(yè)面上除裝飾性圖片或廣告之外的地方最多使用兩種字體。如圖5所示的方正字庫(kù)網(wǎng)站，就是一個(gè)很好的例子，左側(cè)列表使用13像素宋體，右側(cè)列表使用12像素宋體，同時(shí)除廣告外還出現(xiàn)了黑體和行楷等數(shù)種字體。

遵循簡(jiǎn)潔為美原則

網(wǎng)頁(yè)設(shè)計(jì)不是僅僅使用戶在顯示器上看到漂亮的裝飾性畫面那么簡(jiǎn)單。比起華麗的畫面裝飾，網(wǎng)頁(yè)設(shè)計(jì)應(yīng)該在更有效地傳達(dá)信息方面多下些工夫。這必須有對(duì)布局設(shè)計(jì)和色彩的正確理解和相關(guān)知識(shí)，要熟知網(wǎng)頁(yè)物理系統(tǒng)的特性，并具備應(yīng)對(duì)各種情況的能力。在具備人性化界面的網(wǎng)站設(shè)計(jì)中，我們不難發(fā)現(xiàn)其表現(xiàn)出來(lái)的功能性和自然美。多數(shù)設(shè)計(jì)得比較好的網(wǎng)站，都考慮了多媒體的特性，色彩設(shè)計(jì)和信息按照一定秩序排列，能更有效地向用戶傳達(dá)內(nèi)容。

很多設(shè)計(jì)師認(rèn)為畫出美妙絕倫的頁(yè)面才是設(shè)計(jì)，其實(shí)不然，要在有限的元素和色彩里表達(dá)出風(fēng)格才是更有難度也更有層次的設(shè)計(jì)。經(jīng)過(guò)嚴(yán)謹(jǐn)?shù)乃伎己吐L(zhǎng)的推敲，最終只花幾分鐘為頁(yè)面畫下一個(gè)簡(jiǎn)單的圓角框或者一條兩像素的實(shí)線，其效果也許比涂滿了色彩和組合了數(shù)十個(gè)分層的畫面更好。設(shè)計(jì)最終將上升到思想的層面，而不是僅僅停留在工具和素材的使用。

簡(jiǎn)單就是美的設(shè)計(jì)理念使得Web設(shè)計(jì)中的簡(jiǎn)約風(fēng)格意向逐步明朗，在體驗(yàn)了復(fù)雜煩瑣的顏色和圖片堆砌之后，主流設(shè)計(jì)開始返璞歸真。畢竟網(wǎng)站是給用戶使用的，而不是光用來(lái)看的，簡(jiǎn)約的設(shè)計(jì)能給人以輕松的視覺(jué)體驗(yàn)，更好的突出網(wǎng)站功能主題，更適用于網(wǎng)站文字內(nèi)容的資料表達(dá)。

通過(guò)以下幾個(gè)例子我們可以很好地對(duì)比簡(jiǎn)單和復(fù)雜的網(wǎng)頁(yè)設(shè)計(jì)所體現(xiàn)的不同效果：如圖6，互聯(lián)網(wǎng)上最著名的相冊(cè)Flickr，采用了最簡(jiǎn)約的設(shè)計(jì);圖7，中國(guó)SNS的典型代表校內(nèi)網(wǎng)，以色塊和線條構(gòu)成主體，網(wǎng)站結(jié)構(gòu)上極少使用圖片;圖8，安徽省政府網(wǎng)站，首頁(yè)使用了極少見(jiàn)的縱向4欄分割設(shè)計(jì)，極其煩瑣。

重視交互性和用戶體驗(yàn)

在界面設(shè)計(jì)方面，很重要的一點(diǎn)就是要站在用戶的立場(chǎng)去進(jìn)行設(shè)計(jì)。如果網(wǎng)站的畫面既不美觀大方，使用起來(lái)也不方便，那么這個(gè)網(wǎng)頁(yè)的界面設(shè)計(jì)是失敗的。既能給用戶帶來(lái)方便，又兼?zhèn)湟曈X(jué)的沖擊力的網(wǎng)頁(yè)界面設(shè)計(jì)，才是每個(gè)網(wǎng)頁(yè)設(shè)計(jì)人員應(yīng)該思考并追求的東西。

在網(wǎng)頁(yè)界面設(shè)計(jì)方面，設(shè)計(jì)師尤其應(yīng)該考慮使用的便利性和視覺(jué)效果這兩方面的問(wèn)題。在使用方法方面，可能的話應(yīng)該遵循網(wǎng)站設(shè)計(jì)的普遍規(guī)律，界面的構(gòu)成不能太復(fù)雜，主要內(nèi)容應(yīng)該設(shè)計(jì)在引人注目的地方，所有操作性按鈕位置應(yīng)該科學(xué)，讓用戶容易適應(yīng);同時(shí)，要考慮符合網(wǎng)站主體的色彩系統(tǒng)，去除不必要的內(nèi)容，把信息塊分類設(shè)計(jì)得成體系，讓用戶很容易就能找到想要的內(nèi)容。

如果不是追求藝術(shù)美感和試驗(yàn)性的特殊網(wǎng)站，無(wú)論設(shè)計(jì)師想表達(dá)的東西是多么新穎多么富有創(chuàng)意，假如把網(wǎng)站頭部設(shè)計(jì)得很復(fù)雜很難以理解，進(jìn)而影響了用戶的操作，那么它就很難成為一個(gè)優(yōu)秀的網(wǎng)站。例如以下幾個(gè)網(wǎng)頁(yè)，在設(shè)計(jì)中就存在著一些因?yàn)椴粔蛑匾暯换バ院陀脩趔w驗(yàn)而存在的問(wèn)題：如圖9，湖南省人民政府網(wǎng)站，所有同級(jí)內(nèi)容無(wú)區(qū)分重復(fù)堆砌，容易讓人視覺(jué)疲勞;圖10，知名女性用品網(wǎng)站果皮網(wǎng)，右側(cè)列表過(guò)于冗長(zhǎng)，用戶體驗(yàn)極差;圖11，Sandisk中國(guó)總代宏衢網(wǎng)站，在簡(jiǎn)單的頁(yè)面上采用了過(guò)多的煩瑣的圖片設(shè)計(jì)。

營(yíng)造統(tǒng)一的獨(dú)特風(fēng)格

不同的網(wǎng)站有著不同的風(fēng)格，譬如政府類型網(wǎng)站適合使用顏色較深的沉穩(wěn)基調(diào)，各企業(yè)可以依照其產(chǎn)品特性創(chuàng)造獨(dú)有的風(fēng)格，給年輕人使用的網(wǎng)站則可以更加無(wú)拘束地個(gè)性化。在風(fēng)格設(shè)計(jì)階段，設(shè)計(jì)師需要以photoshop或者fireworks等軟件進(jìn)行72DPI的圖像繪制，這是在頁(yè)面生成為HTML代碼前的最后一個(gè)階段。

說(shuō)到風(fēng)格，我們先來(lái)談?wù)剺?gòu)成網(wǎng)頁(yè)風(fēng)格的三個(gè)基本要素，它們是：顏色、線條和形狀、版式。

協(xié)調(diào)運(yùn)用顏色：不同的色彩影響著人們對(duì)網(wǎng)站的第一感覺(jué)，紅色系象征著激烈、興奮，灰色系象征著平淡和低調(diào)。因此，旅游和園林類型的網(wǎng)站使用綠色系比較多，藍(lán)色則被譽(yù)為是企業(yè)色確實(shí)很多企業(yè)和政府機(jī)關(guān)都偏愛(ài)使用沉穩(wěn)而大方的藍(lán)色。另外也有幾種顏色在網(wǎng)頁(yè)設(shè)計(jì)中是很少被大面積使用的，比如紫色。

一個(gè)網(wǎng)站不可能單一地運(yùn)用一種顏色，這會(huì)讓人感覺(jué)單調(diào)，乏味;但也不可能將所有的顏色都運(yùn)用到網(wǎng)站中，給人感覺(jué)輕浮、花俏。一個(gè)網(wǎng)站必須有一種或兩種主題色，既不至于讓客戶迷失方向，也不至于單調(diào)、乏味。所以確定網(wǎng)站的主題色也是設(shè)計(jì)者必須考慮的問(wèn)題之一。

通常情況下，一個(gè)頁(yè)面內(nèi)盡量不要使用超過(guò)4種色彩，太多的色彩容易讓人感覺(jué)沒(méi)有方向、沒(méi)有側(cè)重。當(dāng)主題色確定好以后，考慮其他配色時(shí)，一定要考慮其他配色與主題色的關(guān)系，要體現(xiàn)什么樣的效果;另外還要考慮哪種因素可能占主要地位，是明度、純度還是色相。這里我們推薦兩個(gè)特色突出的網(wǎng)站顏色風(fēng)格:圖1是簡(jiǎn)潔布局中凸顯柔和綠色的網(wǎng)站n詞酷，圖2是色彩豐富主題突出的典型游戲風(fēng)格網(wǎng)站泡泡堂。

適當(dāng)選擇線條和形狀：

文字、標(biāo)題、圖片等的組合，會(huì)在頁(yè)面上形成各種各樣的線條和形狀。這些線條與形狀的組合，構(gòu)成了主頁(yè)的總體藝術(shù)效果。必須注意藝術(shù)地搭配好這些線條和形狀，才能增強(qiáng)頁(yè)面的藝術(shù)魅力。以下我們來(lái)探討一下幾種不同線條和形狀的使用方法。

直線(矩形)的應(yīng)用。直線條的藝術(shù)效果是流暢、挺拔、規(guī)矩、整齊的，也就是所謂的有輪有廓。直線和矩形在頁(yè)面上的重復(fù)組合可以呈現(xiàn)井井有條、涇渭分明的視覺(jué)效果。一般應(yīng)用于比較莊重、嚴(yán)肅的主頁(yè)題材。

曲線(弧形)的應(yīng)用。曲線的效果是流動(dòng)、活躍，具有動(dòng)感的，曲線和弧形在頁(yè)面上的重復(fù)組合可以呈現(xiàn)流暢、輕快、富有活力的視覺(jué)效果。一般應(yīng)用于青春、活潑的主頁(yè)題材。

曲、直線(矩形、弧形)的綜合應(yīng)用。把以上兩種線條和形狀結(jié)合起來(lái)運(yùn)用，可以大大豐富主頁(yè)的表現(xiàn)力，使頁(yè)面呈現(xiàn)更加豐富多彩的藝術(shù)效果。這種形式的主頁(yè)，適應(yīng)的范圍更大，各種主題的主頁(yè)都可以應(yīng)用。但是，在頁(yè)面的編排處理上，難度也會(huì)相應(yīng)大一些，處理得不好會(huì)產(chǎn)生凌亂的效果。最簡(jiǎn)單的途徑是，在一個(gè)頁(yè)面上以一種線條(形狀)為主，只在局部的范圍內(nèi)適當(dāng)用一些其他線條(形狀)。

我們可以通過(guò)以下幾個(gè)例子具體了解一下線條和形狀的實(shí)際應(yīng)用，圖3是功能型網(wǎng)站校內(nèi)網(wǎng)，直線為主的同時(shí)應(yīng)用了不對(duì)稱形狀;圖4是專業(yè)類網(wǎng)站藍(lán)色理想，全站都采用了直線設(shè)計(jì);圖5是保加利亞知名珠寶網(wǎng)站，曲線的使用達(dá)到淋漓盡致。

均衡的分割版式：

在網(wǎng)頁(yè)設(shè)計(jì)中，頁(yè)面因?yàn)閮?nèi)容元素的需要被分割成很多區(qū)塊，區(qū)塊之間的均衡就是版式設(shè)計(jì)上需要著重考慮的問(wèn)題。均衡并非簡(jiǎn)單理性的等量不等形的計(jì)算，一幅好的、均衡的網(wǎng)頁(yè)版面設(shè)計(jì)，是布局、重心、對(duì)比等多種形式原理創(chuàng)造性全面應(yīng)用的結(jié)果，是對(duì)設(shè)計(jì)師的藝術(shù)修養(yǎng)、藝術(shù)感受力的一種檢驗(yàn)。在面積對(duì)比強(qiáng)烈(不等形)而又均衡(等量)的設(shè)計(jì)中，我們可以看到對(duì)比法則的成功參與;而在一些對(duì)比不十分強(qiáng)烈、典雅的不對(duì)稱設(shè)計(jì)中，我們則可感受到設(shè)計(jì)者儒雅的學(xué)者風(fēng)范。

需要注意的是，傳統(tǒng)網(wǎng)頁(yè)設(shè)計(jì)的版式控制都是在不超越大眾顯示器分辨率寬度的前提下，依照內(nèi)容多少縱向延展設(shè)計(jì)。而如今流行的產(chǎn)品型網(wǎng)站，更傾向于在一屏內(nèi)表達(dá)最主要的東西，尤其是首頁(yè)，盡量不出現(xiàn)滾動(dòng)條。這里我們可以參考兩個(gè)例子：圖6，中國(guó)同學(xué)錄5460主頁(yè)面分割，雖缺乏均衡，但還算易用;

強(qiáng)調(diào)UI統(tǒng)籌：

除開宏觀的色彩版面設(shè)計(jì)，頁(yè)面設(shè)計(jì)里還有一個(gè)很重要的環(huán)節(jié)UI元素的設(shè)計(jì)。在設(shè)計(jì)人員的理解層面上，所有界面上可視范圍內(nèi)的東西，都可以并入U(xiǎn)I里，但是單說(shuō)UI設(shè)計(jì)，則更側(cè)重于Tab標(biāo)簽、小圖標(biāo)、按鈕、控件等。這些細(xì)節(jié)的優(yōu)化，通過(guò)使用元素來(lái)影響整站風(fēng)格，制造整體性及連續(xù)性，能統(tǒng)一整個(gè)站點(diǎn)的形象，并且在精致中表達(dá)網(wǎng)站的整體格調(diào)。具體的UI元素設(shè)計(jì)是見(jiàn)仁見(jiàn)智的，這里推薦一些優(yōu)秀的作品給大家參考學(xué)習(xí)。圖8，銀華基金網(wǎng)站的icon(小圖標(biāo))細(xì)節(jié);圖9，開心網(wǎng)的icon設(shè)計(jì)細(xì)節(jié)。

適當(dāng)美化 去除冗余

在必要的元素都設(shè)計(jì)完成之后，回顧整個(gè)頁(yè)面，根據(jù)整站的風(fēng)格需要，也許你會(huì)覺(jué)得設(shè)計(jì)得過(guò)于復(fù)雜了，或者是設(shè)計(jì)得不夠好，不能突出想要的風(fēng)格。這個(gè)時(shí)候就需要適當(dāng)調(diào)整對(duì)頁(yè)面的美化控制。

簡(jiǎn)潔的往往是美的，而美的東西不一定簡(jiǎn)潔。尤其在網(wǎng)頁(yè)設(shè)計(jì)上，對(duì)于內(nèi)容很多的門戶網(wǎng)站，任何多余的修飾都會(huì)加重瀏覽者眼睛的負(fù)擔(dān)，所以可以看到門戶的設(shè)計(jì)往往特別簡(jiǎn)單;而某些專業(yè)型網(wǎng)站，就首頁(yè)來(lái)說(shuō)確實(shí)沒(méi)有什么東西可以展示，那么則需要刻意增加一些點(diǎn)綴而不顯得特別空洞。當(dāng)然，這也不是定理，針對(duì)行業(yè)不同或者突發(fā)性事件，適當(dāng)?shù)貙?duì)設(shè)計(jì)進(jìn)行調(diào)整也能夠起到很好的效果。這里我們就舉兩個(gè)門戶網(wǎng)站的例子: 圖10是奧運(yùn)版的搜狐首頁(yè)，門戶也設(shè)計(jì)得美觀大方;圖11是網(wǎng)易的經(jīng)典首頁(yè)，簡(jiǎn)潔大方堪為業(yè)內(nèi)典范。

如何進(jìn)行規(guī)范的代碼設(shè)計(jì)

相信很少有人會(huì)在網(wǎng)頁(yè)設(shè)計(jì)的過(guò)程中把代碼設(shè)計(jì)單獨(dú)拿出來(lái)說(shuō)，雖然在軟件設(shè)計(jì)中代碼設(shè)計(jì)很受重視，但在web設(shè)計(jì)里，大家更關(guān)心網(wǎng)站結(jié)構(gòu)設(shè)計(jì)、數(shù)據(jù)庫(kù)設(shè)計(jì)、頁(yè)面視覺(jué)設(shè)計(jì)，很少有人會(huì)真正關(guān)心前端代碼設(shè)計(jì)。這恰恰是因?yàn)榇a設(shè)計(jì)的優(yōu)劣不是一般用戶所能感覺(jué)出來(lái)的，設(shè)計(jì)得差的前端代碼，在用戶使用過(guò)程中也許毫無(wú)影響，卻能將前端工程師和web程序員弄得一塌糊涂。

說(shuō)到前端代碼，不能不說(shuō)DIV架構(gòu)。目前主流的網(wǎng)站頁(yè)面架構(gòu)方式已經(jīng)轉(zhuǎn)向DIV+CSS的結(jié)構(gòu)層和表現(xiàn)層脫離的方式，這個(gè)過(guò)程也叫做網(wǎng)站的標(biāo)準(zhǔn)化。這與以往的利用表格定位的方式完全不同，更加強(qiáng)調(diào)了界面元素的模塊化定位，由DIV確定模塊的界限，再由CSS代碼表現(xiàn)該DIV元素的表現(xiàn)形式。

在DIV的布局方式中，我們更多強(qiáng)調(diào)的是規(guī)范，因?yàn)镈IV的ID名稱和CLASS類名稱是能夠由代碼編寫者自行定義的，所以有明確規(guī)范的DIV設(shè)計(jì)是前端代碼設(shè)計(jì)的前提。如今的web工作往往牽涉到一個(gè)團(tuán)隊(duì)中的多人進(jìn)行協(xié)作開發(fā)，代碼被閱讀和被修改的次數(shù)遠(yuǎn)遠(yuǎn)多于它被編寫的次數(shù)，而保持代碼易讀、易修改的關(guān)鍵，就在于在代碼編寫前期確定能被認(rèn)同的代碼規(guī)范。

首先我們先了解DIV架構(gòu)中的命名規(guī)則，DIV的許多規(guī)范要點(diǎn)體現(xiàn)在ID或者CLASS的命名中，絕大多數(shù)設(shè)計(jì)師習(xí)慣使用屬性命名方式：即顯示綠色14號(hào)字的類就命名為green14，藍(lán)色背景區(qū)域的類就命名為blueBg。這樣命名也未嘗不可，但是這樣的命名方式對(duì)于合作的其他職能部門的同事來(lái)說(shuō)，是毫無(wú)意義的。PHP程序員不會(huì)關(guān)心這個(gè)類的字是什么顏色，他只管這塊區(qū)域應(yīng)該和哪個(gè)程序模塊接口;模板編輯也不會(huì)關(guān)心背景究竟該是什么顏色，他只管哪個(gè)區(qū)域是用來(lái)顯示頭圖、哪個(gè)區(qū)域顯示全站導(dǎo)航和全站通用底部。所以我們比較倡導(dǎo)表意命名方式和接口命名方式，比如pageHead和loginArea這樣的命名，pageHead明確表示了這塊區(qū)域的意思，而loginArea指代了這是個(gè)登錄區(qū)域的接口。不管這兩個(gè)類里的字號(hào)顏色等將來(lái)因?yàn)楦陌姘l(fā)生了什么改變，它們起到的作用和所定義的固定區(qū)域是不會(huì)改變的。

其次我們了解一下DIV中類的復(fù)用，同一個(gè)頁(yè)面中，DIV的ID是唯一的，表示該頁(yè)面上獨(dú)一無(wú)二的一種特定表現(xiàn);而CLASS(類)是可以無(wú)限重復(fù)使用的，表現(xiàn)該頁(yè)面上有某些屬性相同的若干區(qū)域，所以DIV的復(fù)用僅僅指的是類。牽涉到復(fù)用的時(shí)候，類的命名應(yīng)該盡量多地表意化，有必要的情況下使用屬性命名也能起到很好的效果。比如頁(yè)面中有很多個(gè)不同的內(nèi)容列表區(qū)塊，但是寬度都是760px，那么使用contList760這樣的類名稱進(jìn)行復(fù)用就比contListA、contListB、contListC……這樣單獨(dú)且表意不明顯的命名要好得多。

CSS整站規(guī)劃——網(wǎng)站設(shè)計(jì)的重中之重題

說(shuō)過(guò)DIV當(dāng)然要說(shuō)說(shuō)CSS，CSS使現(xiàn)代網(wǎng)站大放異彩。符合標(biāo)準(zhǔn)化的網(wǎng)站，僅僅通過(guò)更換一個(gè)不同的CSS文件，就可以瞬間實(shí)現(xiàn)整站所有頁(yè)面改變更新的顯示效果。CSS統(tǒng)一了網(wǎng)頁(yè)的表現(xiàn)層，而不影響網(wǎng)站結(jié)構(gòu)和數(shù)據(jù)傳輸。

而CSS的書寫方式也因設(shè)計(jì)師的不同而各有千秋，在此，我們強(qiáng)調(diào)CSS的設(shè)計(jì)關(guān)鍵在于代碼的縮略與復(fù)用：縮略能使CSS代碼更加簡(jiǎn)明扼要，CSS文件也能縮小體積;復(fù)用則是提高代碼的利用率，以最少的代碼實(shí)現(xiàn)高的重復(fù)使用效率。如圖3所示，騰訊網(wǎng)的CSS設(shè)計(jì)就十分優(yōu)秀。

首先我們來(lái)看代碼的縮略，很多編輯器生成的CSS代碼片段會(huì)像圖4一樣雜亂隨意，而實(shí)際上這段代碼能縮略掉所有不需要的空格，組合起同系列元素，使得代碼行讀起來(lái)更加輕松無(wú)負(fù)擔(dān)。

畢竟，編輯器是按照一定的程序運(yùn)算而提供出來(lái)的CSS樣式，它能自動(dòng)實(shí)現(xiàn)預(yù)期效果的CSS樣式，而絕不會(huì)自動(dòng)精簡(jiǎn)代碼。這個(gè)過(guò)程還是需要人的干預(yù)，而且對(duì)于不同的應(yīng)用場(chǎng)合，CSS代碼中的縮略方式也會(huì)有所不同，而取誰(shuí)舍誰(shuí)，則完全看具體情況而定了。

其次，我們來(lái)了解CSS的復(fù)用。同樣是復(fù)用，CSS的復(fù)用情況和DIV很不同。設(shè)計(jì)中我們需要盡量實(shí)現(xiàn)CSS代碼的復(fù)用，盡量多利用CSS的繼承和層疊，而不是到處定義新的CSS類。在繁瑣的CSS設(shè)計(jì)中，也許會(huì)遇見(jiàn)兩個(gè)大部分屬性一致而只有某一兩個(gè)細(xì)節(jié)不同的類，那么可以考慮這兩個(gè)類是否是繼承關(guān)系，或者說(shuō)將它們相同的屬性提煉出來(lái)，形成另一個(gè)可供公用的類。

后期整理——代碼也可以很美

之前說(shuō)的都是代碼編寫的前期規(guī)范，而頁(yè)面完成之后，代碼的后期整理對(duì)于今后的修改維護(hù)“可持續(xù)發(fā)展”也非常重要。在這里，我們需要注意以下幾個(gè)方面的內(nèi)容。

1.樣式表統(tǒng)一：樣式表分為內(nèi)聯(lián)樣式表和外聯(lián)樣式表，成型的網(wǎng)站架構(gòu)要求對(duì)樣式表統(tǒng)一管理，所有的樣式表都需要獨(dú)立出來(lái)，作為一個(gè)或幾個(gè)外聯(lián)樣式表文件;除非是極特殊的情況，該CSS只在這一個(gè)頁(yè)面中出現(xiàn)，不會(huì)有另外的頁(yè)面需要復(fù)用它，那么可以考慮使用內(nèi)聯(lián)，而內(nèi)聯(lián)樣式很多時(shí)候會(huì)被視為極不專業(yè)的做法。如圖5，色影無(wú)忌網(wǎng)站的設(shè)計(jì)從外觀看很符合標(biāo)準(zhǔn)化設(shè)計(jì)，我們可以看出色影無(wú)忌的代碼設(shè)計(jì)非常混亂。

2.注釋：再科學(xué)、再規(guī)范的代碼，也不見(jiàn)得能一眼就被其他人讀懂，所以這個(gè)時(shí)候需要代碼注釋。CSS的注釋很簡(jiǎn)單，在HTML里的DIV注釋因?yàn)槠鋵蛹?jí)嵌套關(guān)系的問(wèn)題，需要使用和的方式進(jìn)行包含處理，這樣能使代碼更加模塊化。如圖7所示，新浪的頁(yè)面注釋就很整齊。

3.空格：關(guān)于CSS代碼中的空格問(wèn)題一直被激烈地討論著，我的主張是，在頁(yè)面發(fā)布之前，因?yàn)榇a的規(guī)整而產(chǎn)生的空格是沒(méi)有問(wèn)題的，這樣更便于編輯與調(diào)試，而在網(wǎng)站定稿上線后，可以將CSS類里的空格換行都刪除，每個(gè)定義類都并成一行代碼，這樣既能壓縮文件空間，也能使所有類的名稱整齊劃一，便于查找。

4.其他：有些編輯器產(chǎn)生的CSS代碼會(huì)出現(xiàn)大寫字符，建議統(tǒng)一修改成小寫，而對(duì)color:#666666之類的顏色代碼，可以縮寫為color:#666。這對(duì)維護(hù)沒(méi)增加什么困難，而且確實(shí)減小了文件體積。

名詞解釋

CSS是英語(yǔ)Cascading Style Sheets(層疊樣式表單)的縮寫，它是一種用來(lái)表現(xiàn) HTML 或 XML 等文件式樣的計(jì)算機(jī)語(yǔ)言。

DIV元素是用來(lái)為HTML文檔內(nèi)大塊(block-level)的內(nèi)容提供結(jié)構(gòu)和背景的元素。DIV的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來(lái)構(gòu)成這個(gè)塊的，其中所包含元素的特性由DIV標(biāo)簽的屬性來(lái)控制，或者通過(guò)使用樣式表格式化這個(gè)塊來(lái)進(jìn)行控制。

DIV+CSS是網(wǎng)站標(biāo)準(zhǔn)(或稱“Web標(biāo)準(zhǔn)”)中常用的術(shù)語(yǔ)之一，通常為了說(shuō)明與HTML網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言中的表格(table)定位方式的區(qū)別，因?yàn)閄HTML網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中，不再使用表格定位技術(shù)，而是采用DIV+CSS的方式實(shí)現(xiàn)各種定位。

鏈接

CSS標(biāo)準(zhǔn)化在頁(yè)面應(yīng)用的補(bǔ)充

摒棄table布局不是說(shuō)禁止使用table，table標(biāo)簽仍可以用在容納表格型數(shù)據(jù)的場(chǎng)合，而不用于頁(yè)面布局的目的。

頁(yè)面中的標(biāo)簽都是帶有結(jié)構(gòu)含義的，盡量少因?yàn)椴季值哪康囊腩~外的div標(biāo)簽。

頁(yè)面中的結(jié)構(gòu)與表現(xiàn)完全分離，結(jié)構(gòu)位于html文件中，表現(xiàn)位于css文件中。

盡量使用通用的CSS語(yǔ)法，少用特定于某種瀏覽器的CSS語(yǔ)法。必需要用的，則將這類語(yǔ)法隔離在單獨(dú)的css文件中，以便日后瀏覽器升級(jí)后刪除。

操作流程中的用戶體驗(yàn)

這里我們從幾個(gè)失敗的例子，來(lái)看看界面設(shè)計(jì)是如何影響用戶體驗(yàn)的。

網(wǎng)站為了吸引新用戶注冊(cè)，或者是為了商業(yè)回報(bào)，主觀上希望某些元素被突出體現(xiàn)，由于設(shè)計(jì)上處理不當(dāng)，難免使有些原本對(duì)于用戶操作來(lái)說(shuō)更重要的元素被淹沒(méi)，以上這些設(shè)計(jì)正說(shuō)明了這點(diǎn)。而如果把“注冊(cè)”按鈕從登錄的區(qū)域拿出來(lái)，或者以不同于“登錄”按鈕的形式表達(dá)，也許效果就會(huì)好很多。

導(dǎo)向性的用戶體驗(yàn)設(shè)計(jì)

用戶體驗(yàn)的導(dǎo)向性，一般體現(xiàn)在希望對(duì)用戶的行為方式有明顯影響干預(yù)的網(wǎng)站，典型的代表就是購(gòu)物網(wǎng)站。

淘寶網(wǎng)的用戶體驗(yàn)在業(yè)內(nèi)應(yīng)該算是典范，作為國(guó)內(nèi)最成功的C2C網(wǎng)站，淘寶的用戶體驗(yàn)設(shè)計(jì)也在不斷地完善之中。由圖4我們可以了解淘寶網(wǎng)的商品細(xì)節(jié)展示及購(gòu)買引導(dǎo)設(shè)計(jì)，以淘寶的產(chǎn)品展示頁(yè)為例，從單件出售物品的信息傳遞來(lái)看，產(chǎn)品照片右側(cè)清晰寫明了一口價(jià)和運(yùn)費(fèi)，緊接下來(lái)就是一個(gè)碩大的“立刻購(gòu)買”按鈕，然后再將需要寫明白的物品信息及參數(shù)等等一一羅列。這個(gè)頁(yè)面就具有很明顯的用戶誘導(dǎo)性，因?yàn)樘詫毿枰木褪秦浧返某山涣俊?/p>

不要給用戶思考的機(jī)會(huì)

《Don’t make me think》是用戶體驗(yàn)及可用性測(cè)試方面一本很有名的著作，好的用戶體驗(yàn)就應(yīng)該把用戶當(dāng)做不會(huì)思考的傻子，只會(huì)沿著你計(jì)劃好的路徑一步步往下走。用戶猶豫得越久，越能說(shuō)明這個(gè)網(wǎng)站的設(shè)計(jì)體驗(yàn)化還不夠。

用戶體驗(yàn) 細(xì)節(jié)決定成敗

一般用戶很難記住網(wǎng)站流程中好的部分，他們會(huì)認(rèn)為做得好的地方都是應(yīng)該的;相反，他們特別容易記住一些影響了全局的細(xì)節(jié)，一個(gè)讓人吃驚的微小細(xì)節(jié)，都可能影響用戶對(duì)整個(gè)網(wǎng)站的評(píng)判。以下是幾個(gè)用戶體驗(yàn)細(xì)節(jié)的例子。

與之形成鮮明對(duì)比的是微軟的live郵箱，圖9是微軟live郵箱的添加附件操作，被認(rèn)為是公認(rèn)的失敗設(shè)計(jì)。尤其是在編輯郵件狀態(tài)下，點(diǎn)擊曲別針按鈕，按理說(shuō)應(yīng)該可以瀏覽機(jī)器磁盤，并上傳圖片或壓縮包等有限格式的文件。而在live郵箱里，曲別針按鈕右側(cè)有個(gè)可下拉的三角形，上傳附件須先選擇是圖片還是文件。我不知道這樣設(shè)計(jì)的意圖何在，難道圖片就不算是文件的一種嗎

其實(shí)用戶體驗(yàn)無(wú)一定之規(guī)，沒(méi)有確切的章法來(lái)規(guī)定說(shuō)這么做就是好的、那么做就是不好的。只要用戶操作起來(lái)沒(méi)有障礙，能一氣呵成，操作之后沒(méi)有怨言，那就是設(shè)計(jì)得不差的用戶體驗(yàn)。在進(jìn)行了科學(xué)的可用性測(cè)試，掌握一般用戶和核心用戶的體驗(yàn)報(bào)告之后，設(shè)計(jì)師就需要以用戶體驗(yàn)報(bào)告來(lái)對(duì)設(shè)計(jì)進(jìn)行分析調(diào)整、完善網(wǎng)站，實(shí)現(xiàn)可用性測(cè)試對(duì)網(wǎng)站設(shè)計(jì)的折回補(bǔ)充作用，用以實(shí)現(xiàn)更具有用戶親和力和操作便利性的操作界面。

網(wǎng)站欄目：制作一個(gè)優(yōu)質(zhì)網(wǎng)站該如何搭建完整的網(wǎng)站架構(gòu)？
當(dāng)前地址：http://www.muchs.cn/news30/197930.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、網(wǎng)站導(dǎo)航、做網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、App開發(fā)、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)