1.1 網(wǎng)頁設(shè)計基礎(chǔ)知識

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

1.1.1 網(wǎng)頁設(shè)計的概念

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

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

1．用戶界面設(shè)計

用戶界面設(shè)計分為結(jié)構(gòu)設(shè)計、交互設(shè)計、視覺設(shè)計3個部分（如圖1-4～圖1-7所示）。

（1）結(jié)構(gòu)設(shè)計：是網(wǎng)頁界面設(shè)計中的骨架，通過對網(wǎng)頁內(nèi)容及用戶群的分析與研究，制作出整體結(jié)構(gòu)。設(shè)計時要以用戶為中心，設(shè)計內(nèi)容及構(gòu)思要以便于用戶理解和操作為前提。這樣，用戶在使用界面的時候才能夠得心應(yīng)手。

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

① 語言易懂，便于理解。

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

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

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

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

⑥ 導(dǎo)航中的內(nèi)容可以簡單快速地進(jìn)行切換。

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

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

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

●在引導(dǎo)用戶視覺的時候，可以盡量使用圖形而非文字，因?yàn)閳D形比文字更容易使人記住。

●界面協(xié)調(diào)統(tǒng)一，閱讀指示符號要根據(jù)人們的閱讀習(xí)慣設(shè)計。

2．網(wǎng)頁界面的設(shè)計

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

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

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

1.1.2 網(wǎng)頁設(shè)計界面的基本構(gòu)成元素

網(wǎng)站界面中的基本構(gòu)成要素包括文本、靜態(tài)圖像、動畫、表單。下面簡單介紹一下每個要素。

1．文本

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

2．靜態(tài)圖像

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

（1）標(biāo)志

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

（2）橫幅圖像

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

（3）背景圖像

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

3．動畫

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

4．表單

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

1.1.3 網(wǎng)頁的信息表現(xiàn)類型

1．檢索型

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

2．均衡型

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

3．印象型

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

4．超印象型

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