1.1 網頁設計基礎知識

網頁設計是藝術與技術的結晶。它不僅僅包含了“美”，同時也擁有了“功能”，是能夠完成人與機器之間交流的界面。短短十幾年里，網頁設計已經產生了廣泛的影響，也稱得上是一門很具有挑戰性的熱門設計。

1.1.1 網頁設計的概念

網頁是網站中的一頁，是構成網站的基本元素。它能夠起到人與人之間信息溝通的作用，也可以是企業向用戶和網民提供信息（包括產品和服務）的一種方式（如圖1-1～圖1-3所示）。

如今網絡已經成為很普遍的工具之一，無論是查閱資料還是人與人之間的交流都可以用到它。網頁的內容很多，我們要根據主題內容的需要對其界面進行設計，在網頁設計的時候，要考慮到用戶的需求，減少用戶的記憶負擔，保持界面的一致性。設計的時候可以從以下兩點出發。

1．用戶界面設計

用戶界面設計分為結構設計、交互設計、視覺設計3個部分（如圖1-4～圖1-7所示）。

（1）結構設計：是網頁界面設計中的骨架，通過對網頁內容及用戶群的分析與研究，制作出整體結構。設計時要以用戶為中心，設計內容及構思要以便于用戶理解和操作為前提。這樣，用戶在使用界面的時候才能夠得心應手。

（2）交互設計：交互顧名思義就是互相交流，網頁設計是人與機器之間的交互工具，網頁能夠給人們提供產品或服務等信息。因此，交互式設計的目的是簡單易懂，便于用戶使用。交互設計有幾個注意事項，這里簡要地說明一下。

① 語言易懂，便于理解。

② 查閱信息和閱讀信息要方便簡潔。

③ 界面中有清楚的“登錄”“完成”“下一步”這樣的選擇性提示。

④ 便于退出，無論是手機中的網頁界面還是電腦上的網頁界面都應該提供多種退出方法，以便于用戶選擇。

⑤ 提供快速反饋，這樣可以降低用戶在使用的時候出現焦慮情緒。

⑥ 導航中的內容可以簡單快速地進行切換。

（3）視覺設計：視覺設計的主要目的是為了吸引用戶，起到美觀的作用。在完成視覺設計的過程中，顏色、字體、布局是必不可少的因素。另外，在設計的同時，也要考慮到網頁所針對的人群是否能夠接受這樣的視覺效果，要參照目標群體的心理模式進行視覺設計。

●界面的用色通常不要超過5個色系，否則畫面會顯得凌亂；內容要與顏色掛鉤，近似的顏色應表達相同層次的意思。

●界面給人感覺要清晰明了，文字與圖片及布局要條理清晰，內容表達要明確。

●在引導用戶視覺的時候，可以盡量使用圖形而非文字，因為圖形比文字更容易使人記住。

●界面協調統一，閱讀指示符號要根據人們的閱讀習慣設計。

2．網頁界面的設計

網頁界面設計是由色彩、文字、圖像、符號等視覺元素及多媒體元素構成的，是可以向人傳達出特定信息的一種媒介。網頁設計一般以功能性為主要原則，其次考慮到實用性與美觀性等等（如圖1-8和圖1-9所示）。

在網頁界面設計中圖文是必不可少的，這些視覺元素不僅包括：背景、文本、按鈕、圖標、照片、顏色、導航等，而且現在網頁中還添加了音頻、視頻等視聽覺元素，所以在網頁設計中要考慮到如何合理而巧妙地利用視聽元素，從而達到吸引人群、傳播信息的效果。

在網頁的版面布局中，首先要考慮內容的擺放是否合理，如何才能讓用戶瀏覽到更多的內容。在布局時，版面不能太過擁擠，要有適度的留白。版式的布局與其他設計一樣，都是在有限的空間中將信息最有效地傳播出去，在傳播信息的同時給人產生視覺與精神上的享受（如圖1-10～圖1-13所示）。

1.1.2 網頁設計界面的基本構成元素

網站界面中的基本構成要素包括文本、靜態圖像、動畫、表單。下面簡單介紹一下每個要素。

1．文本

網頁中的內容主要以文本的形式展現給讀者，文本的形式由字號、顏色、底紋、邊框等方式來區分。網頁中大標題、小標題及正文、圖注的字號要有區別。一般正文使用9號字體，最大不超過12號，因為過小或過大的字體會導致用戶在閱讀文字時產生視覺疲勞。在顏色上，則不宜使用過多的色彩，否則界面會顯得較為凌亂，也不利于用戶閱讀。另外在底紋與邊框的使用上，也應該稍加注意，只對需要強調的文字加上底紋或者邊框就可以，過多便容易分不出主次，還會影響界面的美觀（如圖1-14～圖1-17所示）。

2．靜態圖像

網頁中，圖像可以美化和豐富頁面，一幅好的圖片直接影響到界面的美觀。在選擇圖片的時候要選擇色調與界面相符的圖片，網頁中圖片也不能太多，否則會影響網頁的打開速度，降低瀏覽者查閱信息的效率。一般網站中的圖片會用以下幾種。

（1）標志

標志代表著一個企業、品牌的形象，標志圖片可以放在引人注目的地方，比如左上角。這樣用戶會首先注意到標志，從而對這個品牌、企業加深印象。另外標志的圖形設計一定要個性突出、簡單明了。

（2）橫幅圖像

橫幅圖像大多數是用來做宣傳的，宣傳某個內容的專題或者是某個活動的廣告。這樣的畫面具有很好的宣傳效果。

（3）背景圖像

頁面中還會用到背景圖，但是背景圖不是很好掌握，添加得好會給頁面帶來不錯的效果，反之會影響網站整體的畫面風格（如圖1-18～圖1-21所示）。

3．動畫

動畫的應用很廣泛，雖然動畫的制作比較復雜、預算也會比較高，但是效果較好，相對于文字與圖片來說，更容易抓住用戶的眼球。

4．表單

表單是用來收集訪問者信息的域集。訪問者填表單的方式包括輸入文本、單擊單選按鈕與復選框等。在填好表單后，站點訪問便會發送出所輸入的數據，該數據會被網站所設置的表單程序以各種不同的方式處理。

1.1.3 網頁的信息表現類型

1．檢索型

檢索型的網頁，以文字信息為主體，圖片比較少，一般只使用按鈕和圖標就可以了。文字居多會增加網頁的新聞性，但會影響網頁的閱讀效率，也需要考驗訪問者的耐心（如圖1-22所示）。

2．均衡型

均衡型的網頁，一般網頁增加了一些圖形要素。文字與圖片的比例為2：1，這樣的頁面在視覺上不會給人壓迫感，反倒看起來輕松愉快（如圖1-23所示）。

3．印象型

印象型的網頁以照片為主，減少了文字信息，傳遞信息較為直接。這樣的網站會給人比較安靜、獨特、自我的視覺印象，個性比較突出（如圖1-24所示）。

4．超印象型

超印象型的網頁，一般文字內容會比較少，最大限度地展現出網頁給人的魅力印象。以圖片、顏色和空白作為頁面的主題，畫面的視覺性最強。這樣的網頁對頁面的布局要求會比較高，頁面中的圖像信息要盡量傳遞出網頁的主題（如圖1-25所示）。