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

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

良好的網站設計能使網站在同類站點中獨具特色，優秀的創意和表現方式能給瀏覽者留下深刻的印象，使網站訪問流量增加甚至直接增加網站收入。 因此，在設計的初始階段就規劃好網站的設計步驟是非常重要的，通常情況下網站設計步驟分為模型構建、審美及交互設計、風格設計、代碼設計、可用性測試等幾大方面。首先我們由以下四個步驟來了解一下網站模型設計中的內涵與重點。

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

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

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

北京奧運會即將開幕，我們先來舉兩個奧運類型網站的例子：

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

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

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

我們常聽到有設計師抱怨：“這個設計讓我改了十多遍怎么還不能定稿?”，也常聽到產品經理說：“這個設計師怎么就是把握不住要點?”

不論設計在網站的實現過程中有多么重要，網站該是什么模樣，還是必須由需求決定。所以網站項目的前期需求是至關重要的環節，也可以理解成房屋建筑的地基。需求也許是經過若干調查，將結果匯總后產生的報告，也可能是領導或老板的一時沖動而引發的大討論。

在需求的確立過程中，遺憾的是，網站設計人員的分量是極其有限的，產品經理、頻道主管、某級領導的想法往往直接決定著需求的最終形態。但是設計人員在需求階段的介入還是很有必要的，設計師能以自己專業獨到的眼光，提出科學合理的建議，影響需求的細節。這樣做的結果是能在大限度上取得需求方和設計方的思想一致，而不至于在設計過程中面對著有意見卻不讓更改的需求問題而大發牢騷。

三、學會掌控用戶路徑

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

站在整個網站的角度出發，這些流程也許只是產品經理需要把握的，設計師拿到UE圖只管一個接一個繪制頁面就行。其實不然，好的設計師往往能承擔一部分產品經理的職責，設計出一個典型的用戶路徑，這對網站頁面流程有著很大的影響。

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

四、初步實現UE產品模型，并審核

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

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

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

鏈接1 網站設計中可能存在的誤區〖EOF〗

誤區一：設計師就是美工。

事實上，兩者幾乎完全不同，設計師存在主觀因素上的設計，而美工很有可能只是被動執行。

誤區二：用什么做圖軟件對設計師來說很重要。

其實設計師對做圖軟件沒有什么嚴格要求，很多學習繪圖軟件很久的人習慣用photoshop來畫頁面，而更多專職面向網頁設計的人習慣使用fireworks，因為其更偏網頁化的操作能帶來更高的效率。

誤區三：做平面設計和網頁設計其實是互通的。

雖然都是設計，但兩者的很多設計規矩是不一樣的，我認為兩者大的區別是思想上的區別：平面設計講究留白和視覺沖擊，而網頁設計則寸土寸金，頁面元素的整齊協調更是至關重要的。

誤區四：我改變不了領導和用戶的需求。

設計師要做的只是提出自己對于設計上的看法，決定權仍然在于領導。

誤區五：我經驗不足，提不了任何建議。

對設計師來說，了解需求也是很重要的，不光是需要讀懂文檔，更需要真正明白大家在做的是一個什么樣的具體的東西，這樣在動手操作的時候，才不會手足無措或者是理解偏差。

誤區六：設計師直接出設計稿就行了，有問題就改。

設計師需要先搭建出UE模型，UE只需要以簡單線框模式展現，效率高而且適合隨時調整修改，往往在這個階段需要修改的地方是很多的，如果直接就以設計稿來探討，每修改一處都是一個工程，毫無效率可言。

誤區七: 每個頁面都很重要，都要認真研究探討。

其實大部分網站頁面都是一樣的框架，只是內容顯示不同，同一個級別的頁面基本都是一致的，除了關鍵頁面之外，其他頁面用戶也許只是經過一次，停留時間甚至可以忽略，論優先級來說，同等效率下自然要保證關鍵頁面。

鏈接2 相關名詞

MRD(Market Requirements Document)，

是指市場需求文檔。MRD文檔主要側重于市場機會的分析，得出類似于 “就當前市場情況而言，我們可以做什么”的結論;

PRD(Product Requirements Document)，

是指產品需求文檔。PRD側重于整個產品的規劃，比 MRD文檔要細化一些;

UI(User Interface)設計，

用戶界面設計，用戶界面設計的三大原則是: 置界面于用戶的控制之下、減少用戶的記憶負擔、保持界面的一致性;

UE(User Experience)，

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

網頁設計的規范

理解并遵循網頁設計的規范是網頁界面設計的基礎，網頁設計的規范在行業中通常被稱為設計的“一貫性”。一個優秀的、有經驗的設計師能把網頁設計的基本規范自然而本能地融入作品中。在顯示器的方寸顯示空間里，用戶需要以被限定的分辨率來瀏覽頁面、以鍵盤和鼠標來交互控制界面、繼而在有限的網絡傳輸速度下一個個層級地瀏覽整個站點，可想而知其中有多少要素需要規范化。

形象標志(LOGO)、導航、搜索、內容區塊、頁面長度、字體字號等元素是這些規范中至關重要的部分。這些元素中大部分都表現在網站的頭部或者是第一屏能顯示的區域內：一般的網站通常會在頭部顯著位置顯示網站LOGO，以合理的層級關系及最普通的字體字號來展現導航以及設計合理的搜索功能塊。

在這里我們需要注意的是除非非常必要，網站的LOGO盡量不要以flash動畫展示，同時導航也盡量不要以flash動畫或圖片來表現，因為瀏覽器有攔截flash的可能;同時，不同終端設備上瀏覽器對flash和圖片的不支持也可能造成網站無法繼續訪問或者根本無法識別。

我們可以通過以下幾個例子對比一下網頁設計規范在實際應用中的效果：圖1，汽車之家的導航設計，圖文結合，非常出色;圖2，貴州省人民政府網站，網站標題和LOGO全部制作到flash動畫中，當瀏覽器屏蔽flash的時候，網站將無法識別;圖3，伊利集團網站，導航flash也很漂亮，同樣的，當瀏覽器屏蔽flash的時候，導航將不可見，網站無法被繼續訪問;圖4，廣東省人民政府網站，非常優秀的設計，導航欄全部以非圖片形式制作，既保證了美觀，又體現了實用性。

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

遵循簡潔為美原則

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

很多設計師認為畫出美妙絕倫的頁面才是設計，其實不然，要在有限的元素和色彩里表達出風格才是更有難度也更有層次的設計。經過嚴謹的思考和漫長的推敲，最終只花幾分鐘為頁面畫下一個簡單的圓角框或者一條兩像素的實線，其效果也許比涂滿了色彩和組合了數十個分層的畫面更好。設計最終將上升到思想的層面，而不是僅僅停留在工具和素材的使用。

簡單就是美的設計理念使得Web設計中的簡約風格意向逐步明朗，在體驗了復雜煩瑣的顏色和圖片堆砌之后，主流設計開始返璞歸真。畢竟網站是給用戶使用的，而不是光用來看的，簡約的設計能給人以輕松的視覺體驗，更好的突出網站功能主題，更適用于網站文字內容的資料表達。

通過以下幾個例子我們可以很好地對比簡單和復雜的網頁設計所體現的不同效果：如圖6，互聯網上最著名的相冊Flickr，采用了最簡約的設計;圖7，中國SNS的典型代表校內網，以色塊和線條構成主體，網站結構上極少使用圖片;圖8，安徽省政府網站，首頁使用了極少見的縱向4欄分割設計，極其煩瑣。

重視交互性和用戶體驗

在界面設計方面，很重要的一點就是要站在用戶的立場去進行設計。如果網站的畫面既不美觀大方，使用起來也不方便，那么這個網頁的界面設計是失敗的。既能給用戶帶來方便，又兼備視覺的沖擊力的網頁界面設計，才是每個網頁設計人員應該思考并追求的東西。

在網頁界面設計方面，設計師尤其應該考慮使用的便利性和視覺效果這兩方面的問題。在使用方法方面，可能的話應該遵循網站設計的普遍規律，界面的構成不能太復雜，主要內容應該設計在引人注目的地方，所有操作性按鈕位置應該科學，讓用戶容易適應;同時，要考慮符合網站主體的色彩系統，去除不必要的內容，把信息塊分類設計得成體系，讓用戶很容易就能找到想要的內容。

如果不是追求藝術美感和試驗性的特殊網站，無論設計師想表達的東西是多么新穎多么富有創意，假如把網站頭部設計得很復雜很難以理解，進而影響了用戶的操作，那么它就很難成為一個優秀的網站。例如以下幾個網頁，在設計中就存在著一些因為不夠重視交互性和用戶體驗而存在的問題：如圖9，湖南省人民政府網站，所有同級內容無區分重復堆砌，容易讓人視覺疲勞;圖10，知名女性用品網站果皮網，右側列表過于冗長，用戶體驗極差;圖11，Sandisk中國總代宏衢網站，在簡單的頁面上采用了過多的煩瑣的圖片設計。

營造統一的獨特風格

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

說到風格，我們先來談談構成網頁風格的三個基本要素，它們是：顏色、線條和形狀、版式。

協調運用顏色：不同的色彩影響著人們對網站的第一感覺，紅色系象征著激烈、興奮，灰色系象征著平淡和低調。因此，旅游和園林類型的網站使用綠色系比較多，藍色則被譽為是企業色確實很多企業和政府機關都偏愛使用沉穩而大方的藍色。另外也有幾種顏色在網頁設計中是很少被大面積使用的，比如紫色。

一個網站不可能單一地運用一種顏色，這會讓人感覺單調，乏味;但也不可能將所有的顏色都運用到網站中，給人感覺輕浮、花俏。一個網站必須有一種或兩種主題色，既不至于讓客戶迷失方向，也不至于單調、乏味。所以確定網站的主題色也是設計者必須考慮的問題之一。

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

適當選擇線條和形狀：

文字、標題、圖片等的組合，會在頁面上形成各種各樣的線條和形狀。這些線條與形狀的組合，構成了主頁的總體藝術效果。必須注意藝術地搭配好這些線條和形狀，才能增強頁面的藝術魅力。以下我們來探討一下幾種不同線條和形狀的使用方法。

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

曲線(弧形)的應用。曲線的效果是流動、活躍，具有動感的，曲線和弧形在頁面上的重復組合可以呈現流暢、輕快、富有活力的視覺效果。一般應用于青春、活潑的主頁題材。

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

我們可以通過以下幾個例子具體了解一下線條和形狀的實際應用，圖3是功能型網站校內網，直線為主的同時應用了不對稱形狀;圖4是專業類網站藍色理想，全站都采用了直線設計;圖5是保加利亞知名珠寶網站，曲線的使用達到淋漓盡致。

均衡的分割版式：

在網頁設計中，頁面因為內容元素的需要被分割成很多區塊，區塊之間的均衡就是版式設計上需要著重考慮的問題。均衡并非簡單理性的等量不等形的計算，一幅好的、均衡的網頁版面設計，是布局、重心、對比等多種形式原理創造性全面應用的結果，是對設計師的藝術修養、藝術感受力的一種檢驗。在面積對比強烈(不等形)而又均衡(等量)的設計中，我們可以看到對比法則的成功參與;而在一些對比不十分強烈、典雅的不對稱設計中，我們則可感受到設計者儒雅的學者風范。

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

強調UI統籌：

除開宏觀的色彩版面設計，頁面設計里還有一個很重要的環節UI元素的設計。在設計人員的理解層面上，所有界面上可視范圍內的東西，都可以并入UI里，但是單說UI設計，則更側重于Tab標簽、小圖標、按鈕、控件等。這些細節的優化，通過使用元素來影響整站風格，制造整體性及連續性，能統一整個站點的形象，并且在精致中表達網站的整體格調。具體的UI元素設計是見仁見智的，這里推薦一些優秀的作品給大家參考學習。圖8，銀華基金網站的icon(小圖標)細節;圖9，開心網的icon設計細節。

適當美化 去除冗余

在必要的元素都設計完成之后，回顧整個頁面，根據整站的風格需要，也許你會覺得設計得過于復雜了，或者是設計得不夠好，不能突出想要的風格。這個時候就需要適當調整對頁面的美化控制。

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

如何進行規范的代碼設計

相信很少有人會在網頁設計的過程中把代碼設計單獨拿出來說，雖然在軟件設計中代碼設計很受重視，但在web設計里，大家更關心網站結構設計、數據庫設計、頁面視覺設計，很少有人會真正關心前端代碼設計。這恰恰是因為代碼設計的優劣不是一般用戶所能感覺出來的，設計得差的前端代碼，在用戶使用過程中也許毫無影響，卻能將前端工程師和web程序員弄得一塌糊涂。

說到前端代碼，不能不說DIV架構。目前主流的網站頁面架構方式已經轉向DIV+CSS的結構層和表現層脫離的方式，這個過程也叫做網站的標準化。這與以往的利用表格定位的方式完全不同，更加強調了界面元素的模塊化定位，由DIV確定模塊的界限，再由CSS代碼表現該DIV元素的表現形式。

在DIV的布局方式中，我們更多強調的是規范，因為DIV的ID名稱和CLASS類名稱是能夠由代碼編寫者自行定義的，所以有明確規范的DIV設計是前端代碼設計的前提。如今的web工作往往牽涉到一個團隊中的多人進行協作開發，代碼被閱讀和被修改的次數遠遠多于它被編寫的次數，而保持代碼易讀、易修改的關鍵，就在于在代碼編寫前期確定能被認同的代碼規范。

首先我們先了解DIV架構中的命名規則，DIV的許多規范要點體現在ID或者CLASS的命名中，絕大多數設計師習慣使用屬性命名方式：即顯示綠色14號字的類就命名為green14，藍色背景區域的類就命名為blueBg。這樣命名也未嘗不可，但是這樣的命名方式對于合作的其他職能部門的同事來說，是毫無意義的。PHP程序員不會關心這個類的字是什么顏色，他只管這塊區域應該和哪個程序模塊接口;模板編輯也不會關心背景究竟該是什么顏色，他只管哪個區域是用來顯示頭圖、哪個區域顯示全站導航和全站通用底部。所以我們比較倡導表意命名方式和接口命名方式，比如pageHead和loginArea這樣的命名，pageHead明確表示了這塊區域的意思，而loginArea指代了這是個登錄區域的接口。不管這兩個類里的字號顏色等將來因為改版發生了什么改變，它們起到的作用和所定義的固定區域是不會改變的。

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

CSS整站規劃——網站設計的重中之重題

說過DIV當然要說說CSS，CSS使現代網站大放異彩。符合標準化的網站，僅僅通過更換一個不同的CSS文件，就可以瞬間實現整站所有頁面改變更新的顯示效果。CSS統一了網頁的表現層，而不影響網站結構和數據傳輸。

而CSS的書寫方式也因設計師的不同而各有千秋，在此，我們強調CSS的設計關鍵在于代碼的縮略與復用：縮略能使CSS代碼更加簡明扼要，CSS文件也能縮小體積;復用則是提高代碼的利用率，以最少的代碼實現高的重復使用效率。如圖3所示，騰訊網的CSS設計就十分優秀。

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

畢竟，編輯器是按照一定的程序運算而提供出來的CSS樣式，它能自動實現預期效果的CSS樣式，而絕不會自動精簡代碼。這個過程還是需要人的干預，而且對于不同的應用場合，CSS代碼中的縮略方式也會有所不同，而取誰舍誰，則完全看具體情況而定了。

其次，我們來了解CSS的復用。同樣是復用，CSS的復用情況和DIV很不同。設計中我們需要盡量實現CSS代碼的復用，盡量多利用CSS的繼承和層疊，而不是到處定義新的CSS類。在繁瑣的CSS設計中，也許會遇見兩個大部分屬性一致而只有某一兩個細節不同的類，那么可以考慮這兩個類是否是繼承關系，或者說將它們相同的屬性提煉出來，形成另一個可供公用的類。

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

之前說的都是代碼編寫的前期規范，而頁面完成之后，代碼的后期整理對于今后的修改維護“可持續發展”也非常重要。在這里，我們需要注意以下幾個方面的內容。

1.樣式表統一：樣式表分為內聯樣式表和外聯樣式表，成型的網站架構要求對樣式表統一管理，所有的樣式表都需要獨立出來，作為一個或幾個外聯樣式表文件;除非是極特殊的情況，該CSS只在這一個頁面中出現，不會有另外的頁面需要復用它，那么可以考慮使用內聯，而內聯樣式很多時候會被視為極不專業的做法。如圖5，色影無忌網站的設計從外觀看很符合標準化設計，我們可以看出色影無忌的代碼設計非常混亂。

2.注釋：再科學、再規范的代碼，也不見得能一眼就被其他人讀懂，所以這個時候需要代碼注釋。CSS的注釋很簡單，在HTML里的DIV注釋因為其層級嵌套關系的問題，需要使用和的方式進行包含處理，這樣能使代碼更加模塊化。如圖7所示，新浪的頁面注釋就很整齊。

3.空格：關于CSS代碼中的空格問題一直被激烈地討論著，我的主張是，在頁面發布之前，因為代碼的規整而產生的空格是沒有問題的，這樣更便于編輯與調試，而在網站定稿上線后，可以將CSS類里的空格換行都刪除，每個定義類都并成一行代碼，這樣既能壓縮文件空間，也能使所有類的名稱整齊劃一，便于查找。

4.其他：有些編輯器產生的CSS代碼會出現大寫字符，建議統一修改成小寫，而對color:#666666之類的顏色代碼，可以縮寫為color:#666。這對維護沒增加什么困難，而且確實減小了文件體積。

名詞解釋

CSS是英語Cascading Style Sheets(層疊樣式表單)的縮寫，它是一種用來表現 HTML 或 XML 等文件式樣的計算機語言。

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

DIV+CSS是網站標準(或稱“Web標準”)中常用的術語之一，通常為了說明與HTML網頁設計語言中的表格(table)定位方式的區別，因為XHTML網站設計標準中，不再使用表格定位技術，而是采用DIV+CSS的方式實現各種定位。

鏈接

CSS標準化在頁面應用的補充

摒棄table布局不是說禁止使用table，table標簽仍可以用在容納表格型數據的場合，而不用于頁面布局的目的。

頁面中的標簽都是帶有結構含義的，盡量少因為布局的目的引入額外的div標簽。

頁面中的結構與表現完全分離，結構位于html文件中，表現位于css文件中。

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

操作流程中的用戶體驗

這里我們從幾個失敗的例子，來看看界面設計是如何影響用戶體驗的。

網站為了吸引新用戶注冊，或者是為了商業回報，主觀上希望某些元素被突出體現，由于設計上處理不當，難免使有些原本對于用戶操作來說更重要的元素被淹沒，以上這些設計正說明了這點。而如果把“注冊”按鈕從登錄的區域拿出來，或者以不同于“登錄”按鈕的形式表達，也許效果就會好很多。

導向性的用戶體驗設計

用戶體驗的導向性，一般體現在希望對用戶的行為方式有明顯影響干預的網站，典型的代表就是購物網站。

淘寶網的用戶體驗在業內應該算是典范，作為國內最成功的C2C網站，淘寶的用戶體驗設計也在不斷地完善之中。由圖4我們可以了解淘寶網的商品細節展示及購買引導設計，以淘寶的產品展示頁為例，從單件出售物品的信息傳遞來看，產品照片右側清晰寫明了一口價和運費，緊接下來就是一個碩大的“立刻購買”按鈕，然后再將需要寫明白的物品信息及參數等等一一羅列。這個頁面就具有很明顯的用戶誘導性，因為淘寶需要的就是貨品的成交量。

不要給用戶思考的機會

《Don’t make me think》是用戶體驗及可用性測試方面一本很有名的著作，好的用戶體驗就應該把用戶當做不會思考的傻子，只會沿著你計劃好的路徑一步步往下走。用戶猶豫得越久，越能說明這個網站的設計體驗化還不夠。

用戶體驗 細節決定成敗

一般用戶很難記住網站流程中好的部分，他們會認為做得好的地方都是應該的;相反，他們特別容易記住一些影響了全局的細節，一個讓人吃驚的微小細節，都可能影響用戶對整個網站的評判。以下是幾個用戶體驗細節的例子。

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

其實用戶體驗無一定之規，沒有確切的章法來規定說這么做就是好的、那么做就是不好的。只要用戶操作起來沒有障礙，能一氣呵成，操作之后沒有怨言，那就是設計得不差的用戶體驗。在進行了科學的可用性測試，掌握一般用戶和核心用戶的體驗報告之后，設計師就需要以用戶體驗報告來對設計進行分析調整、完善網站，實現可用性測試對網站設計的折回補充作用，用以實現更具有用戶親和力和操作便利性的操作界面。

網站欄目：制作一個優質網站該如何搭建完整的網站架構？
當前地址：http://vcdvsql.cn/news30/197930.html

成都網站建設公司_創新互聯，為您提供企業建站、網站導航、做網站、品牌網站設計、App開發、網站排名

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯