1.3 Web設(shè)計基礎(chǔ)

1.3.1 Web設(shè)計原則

Web設(shè)計師需要研究如何布局、處理字體和顏色，以及空白的應(yīng)用，并圍繞要表達的信息把這些元素融為一體，構(gòu)成一個網(wǎng)頁乃至網(wǎng)站，從而形成自己的風格。

Web站點所要實現(xiàn)的目標是設(shè)計的最終方向，而頁面的制作僅僅是設(shè)計的具體實現(xiàn)。Web站點的設(shè)計并不是通常認為的網(wǎng)頁制作，而是一個融合了多種設(shè)計原則和設(shè)計過程的系統(tǒng)工程。

1. 明確站點類型

在開始設(shè)計工作之前，確定網(wǎng)站的類型（如銷售類產(chǎn)品或形象宣傳）是首要目標。從一個網(wǎng)站的內(nèi)容和特性來看，網(wǎng)站的類型包括新聞或信息、企業(yè)、商業(yè)、政府、個人、社交、搜索網(wǎng)站等。一個成功的網(wǎng)站必須有自己明確的用戶群、內(nèi)容、功能，以及視覺和體驗的獨特性，才能在浩如煙海的站點中脫穎而出。

1）新聞資訊類站點，如新浪、搜狐等大型門戶網(wǎng)站，主要向訪問者提供大量的信息，涉及經(jīng)濟、政治、人文和生活等方面的內(nèi)容，網(wǎng)站日訪問量巨大，訪問群體范圍較廣，其設(shè)計更注重信息覆蓋的范圍及受眾的廣泛性。因此需注意頁面的分割、結(jié)構(gòu)的合理、頁面的優(yōu)化及界面的親和等問題。如新浪網(wǎng)的設(shè)計特別注重了信息的分類合理，導航清晰，使用戶能迅速在眾多信息中找到自己感興趣的內(nèi)容。同時，色彩選擇較為平淡的基色調(diào)，以減少對用戶的視覺刺激，增長用戶瀏覽網(wǎng)頁的時間。

2）資訊和形象相結(jié)合的網(wǎng)站，如政府網(wǎng)等，主要用于發(fā)布政策規(guī)章制度等信息，提供各種在線政務(wù)服務(wù)。因此，在布局設(shè)計上要求簡單合理，使用戶能夠迅速找到所需信息。常用的功能應(yīng)給予用戶明確、快捷的鏈接，重要的功能應(yīng)給予用戶醒目的提示。在色彩的選擇上，應(yīng)使用中性、溫和的色彩，顏色使用不宜過多和跳躍。整體色彩應(yīng)給用戶傳遞嚴謹、權(quán)威、莊重的心理感覺。

3）形象類網(wǎng)站，比如商業(yè)企業(yè)的對外宣傳網(wǎng)站，是企業(yè)產(chǎn)品和形象宣傳的重要窗口，主要為了讓外界了解企業(yè)自身，樹立良好企業(yè)形象，并適當提供一定的產(chǎn)品服務(wù)。因此，網(wǎng)頁設(shè)計的主要任務(wù)是突出企業(yè)形象。這類網(wǎng)站對設(shè)計者的美工水平要求較高。同時，設(shè)計方法也不拘一格，重點在于新穎、有特色，能夠傳遞出強烈的企業(yè)文化信息。

除了上述網(wǎng)站類型外，還有一些網(wǎng)站具有更多的專業(yè)化設(shè)計。比如瑞麗女性網(wǎng)是為都市女性提供分享時尚與優(yōu)質(zhì)生活的多元化資訊及多樣化服務(wù)的綜合性網(wǎng)站。由于女性具有較高的審美需求和高敏感的顏色感應(yīng)，所以在設(shè)計方面盡量以柔和、明快的暖色作為主色調(diào)，給女性瀏覽者以熱情、柔美的感覺。在頁面構(gòu)成上，要選用大量清晰度高的圖片給用戶以視覺上的沖擊。

2. 保持站點簡潔明確

對于今天的許多企業(yè)而言，網(wǎng)站極有可能是他們和目標客戶之間的第一聯(lián)系方式。因此使客戶能夠清楚地認識網(wǎng)站所要表達的信息或提供的服務(wù)是至關(guān)重要的。一個好的網(wǎng)站設(shè)計應(yīng)該做到主題鮮明突出，布局清晰簡潔，能夠以簡單明確的語言和畫面告訴訪問者站點的主題，使用戶能夠容易地找到他所需的內(nèi)容。

1）界面簡潔：對內(nèi)容文本進行精煉化，保留關(guān)鍵信息；使用一個醒目的標題，常常采用簡潔的圖形來表示；限制所用的字體和顏色的數(shù)目。

2）內(nèi)容明確：使用清晰的消息標識，確保用戶了解此頁面的上下文；使導航元素保持一致，并且對訪問率最高的區(qū)域進行明顯的標記，使它們易于被用戶找到；界面上的所有元素都應(yīng)當有明確的含義和用途，不要試圖用無關(guān)的圖片把界面裝點起來；還要確保界面上的每一個元素都能讓瀏覽者看到。

此外，為保持簡單明確，設(shè)計網(wǎng)頁時盡量減少瀏覽層次。

3. 網(wǎng)頁設(shè)計的一致性

一致性的網(wǎng)頁設(shè)計原則使得訪問者容易理解站點的結(jié)構(gòu)，否則可能導致訪問者陷入困惑。例如，在不同的頁面中使用同樣的布局、字體、色彩和導航結(jié)構(gòu)等表現(xiàn)元素，使得頁面之間既能夠保證協(xié)調(diào)，又不會因頁面風格過于一致而產(chǎn)生視覺疲勞。對優(yōu)秀的Web站點進行分析可以發(fā)現(xiàn)，優(yōu)秀的網(wǎng)頁雖然各有特色，但都遵守最基本的原則，即保持站點內(nèi)部頁面之間的一致性。

要保持一致性，可以從頁面的結(jié)構(gòu)排版入手。

● 通過定義一致的頁面模板，各個頁面使用相同的頁邊距。

● 文本和圖形之間保持相同的間距。

● 主要圖形、標題或符號旁邊留下相同的空白。

● 如果在第一頁的頂部放置了公司標志，那么在其他各頁面中都放上這一標志；如果使用圖標導航，則各個頁面應(yīng)當使用相同的圖標來營造出一種熟悉感。

圖1-2所示為當當網(wǎng)的二級欄目，圖書頻道和其首頁導航條保持一致。這樣使得這些頁面呈現(xiàn)出的視覺形象就是相互聯(lián)系的，也使用戶感知到正在訪問的頁面與此前訪問的該網(wǎng)站的網(wǎng)頁是相互聯(lián)系的。

除了保持布局的最大相似外，在界面元素的設(shè)計上，每個元素與整個頁面及站點都應(yīng)當具有相同的設(shè)計風格。有了結(jié)構(gòu)和視覺的一致性，在用戶的使用模式上保持站點的一致性對于改善用戶的使用體驗也是非常重要的。

4. 注重用戶體驗

用戶體驗是用戶訪問網(wǎng)站時的一種感覺。注重用戶體驗是Web站點設(shè)計時應(yīng)考慮的一個重要方面，它要求把用戶放在第一位，設(shè)計時既要考慮用戶的共性，也要考慮他們的差異性。

（1）研究用戶

可以通過分析用戶的群體特征，了解主要用戶為什么使用網(wǎng)站，以及如何使用網(wǎng)站。例如，雖然在考慮用戶閱讀習慣設(shè)計時，大多數(shù)遵循Z字形設(shè)計或F形結(jié)構(gòu)，但一些特殊文化，如阿拉伯語類的網(wǎng)站可能剛好相反。

（2）有效的導航和位置設(shè)計

合理的導航可以對網(wǎng)站內(nèi)容進行分類，每個網(wǎng)頁除了應(yīng)用同樣的導航設(shè)計之外，還應(yīng)當包括當前的位置提示設(shè)計及一些特殊位置的快速返回鏈接，如在導航或頁面中設(shè)計從任何頁面直接跳轉(zhuǎn)到“首頁”的鏈接。

（3）保持整個網(wǎng)站一致性的設(shè)計

例如，統(tǒng)一的色彩方案、相似的頁面模板，對于同樣的操作、專業(yè)術(shù)語等前后保持一致的定義等。

（4）清晰準確的內(nèi)容設(shè)計

清晰準確的內(nèi)容設(shè)計便于用戶快速獲得所需的信息。例如，通過對比設(shè)計使得文字內(nèi)容突出、避免一頁有太多的內(nèi)容、對內(nèi)容進行準確的分類和布局，以及使得重要的信息總在用戶視覺最集中的地方、保持內(nèi)容間的交叉連接并建立索引等。

這些最基本的準則雖然并不能解決所有問題，但注意它們并積累個人的設(shè)計經(jīng)驗有助于設(shè)計出好的網(wǎng)站，達到吸引用戶多次訪問的目的。

1.3.2 網(wǎng)站結(jié)構(gòu)規(guī)劃

Web站點由一組Web頁面組成，而且這些Web頁面具有一定的分層設(shè)計和組織。在規(guī)劃設(shè)計Web界面時，第一個步驟就是明確網(wǎng)站的目標和用途（如產(chǎn)品銷售），Web設(shè)計的布局、風格和內(nèi)容等都要以這個目標為中心。所謂結(jié)構(gòu)設(shè)計，就是考慮如何將內(nèi)容劃分為清晰合理的層次體系，建立組成Web站點的各個頁面間的關(guān)聯(lián)關(guān)系，構(gòu)建一個組織優(yōu)良的網(wǎng)站整體。

1. 網(wǎng)站欄目規(guī)劃

明確劃分信息群，不讓讀者產(chǎn)生迷惑，使之迅速找到所需要的信息，是欄目規(guī)劃最重要的任務(wù)。欄目的整理決定了網(wǎng)頁的可讀性。事實上，網(wǎng)站欄目的規(guī)劃對于網(wǎng)站來說是決定其成敗的重要因素。欄目的實質(zhì)是一個網(wǎng)站的大綱索引，其作用就如同一本書的目錄一樣，因此索引應(yīng)該將網(wǎng)站的主體明確顯示出來。

在制定欄目時，要仔細考慮，合理安排。好的欄目規(guī)劃結(jié)構(gòu)是網(wǎng)站內(nèi)容的總體概述，它利用導航的形式予以表現(xiàn)，指引瀏覽者在頁面間訪問和跳轉(zhuǎn)。

不同類型的網(wǎng)站其定位和功能也不同，具體問題具體分析，但通常遵循一些通行的準則。

1）欄目內(nèi)容一定要緊扣主題。可以將網(wǎng)站的主題按照一定的方法分類作為網(wǎng)站的主欄目。同時要明確，主欄目的個數(shù)在整個欄目中應(yīng)占有較大比重。

2）欄目的目錄設(shè)計要求簡潔，結(jié)構(gòu)層次清晰，以方便網(wǎng)站的管理。不管網(wǎng)站的內(nèi)容有多精彩，如果缺乏對內(nèi)容的準確提煉和總結(jié)，不能清晰地告訴訪問者所需的信息在哪里，則最終難以引起瀏覽者的關(guān)注。

3）欄目的內(nèi)容要突出重點，對于用戶經(jīng)常要訪問的內(nèi)容應(yīng)直接放入主欄目下。而對于其他的輔助內(nèi)容，如關(guān)于本站、版權(quán)信息等可以不放在主欄目中，以免沖淡主題。盡可能刪除與主題無關(guān)的欄目，盡可能將網(wǎng)站最有價值的內(nèi)容列在欄目上。

4）為方便用戶使用，一般情況下訪問者應(yīng)能夠在單擊3～5次后可查詢到相關(guān)問題。因此應(yīng)對欄目級數(shù)進行控制，網(wǎng)站的頁面級數(shù)最多控制在三級，同時鏈接應(yīng)當是清晰而準確的。

在基于通行準則的指導下，可以針對網(wǎng)站特點和性質(zhì)具體確定欄目設(shè)計。欄目設(shè)計的基線應(yīng)該是以用戶為中心，以一種訪問者容易、直觀、可預期的方式來設(shè)計網(wǎng)站的結(jié)構(gòu)。一般應(yīng)該從網(wǎng)站的類型、希望表達的內(nèi)容、信息的分類及同類網(wǎng)站的設(shè)計等方面考慮。

為了更好地進行欄目設(shè)計，需要收集大量的相關(guān)資料，并對其進行整理。整理以后再找出重點，根據(jù)重點及網(wǎng)站的側(cè)重點，結(jié)合網(wǎng)站定位確定網(wǎng)站的分欄目需要有哪幾項，可以參考其他類似網(wǎng)站的欄目，然后反復比較，最后確定網(wǎng)站相關(guān)的欄目，形成網(wǎng)站欄目的樹狀列表，用以清晰地表達站點結(jié)構(gòu)。

2. 目錄結(jié)構(gòu)規(guī)劃

網(wǎng)站目錄是指建立網(wǎng)站時創(chuàng)建的目錄。目錄結(jié)構(gòu)主要指網(wǎng)站包含的文件所存儲的真實位置所表現(xiàn)出來的結(jié)構(gòu)。目錄結(jié)構(gòu)往往是設(shè)計者容易忽略的問題。大多數(shù)初學者進行站點設(shè)計時都是未經(jīng)規(guī)劃隨意創(chuàng)建子目錄。事實上，目錄結(jié)構(gòu)的好壞對于網(wǎng)站的維護、內(nèi)容的擴充和移植、搜索引擎的訪問等都有重要的影響。

（1）建立目錄的建議

● 不要將所有文件都存放在根目錄下。

● 按欄目內(nèi)容建立子目錄。

● 建立一些特定目錄用于存放公共信息。例如，把圖片文件存放在images目錄中。

（2）目錄規(guī)劃原則

● 目錄的層次不要太深，建議不要超過3層。

● 不要使用中文目錄，否則會影響對網(wǎng)址的正確顯示。

● 不要使用過長的目錄。

● 盡量使用意義明確的目錄，如可以使用images、css、js和bbs等。

● 通常將首頁命名為index，放在根目錄下，每個欄目的首頁也命名為index。