尹涓　崔曉曦

摘要：網(wǎng)頁(yè)設(shè)計(jì)就是通過(guò)對(duì)各種元素的設(shè)計(jì)來(lái)實(shí)現(xiàn)信息內(nèi)容的有效傳播。就網(wǎng)頁(yè)設(shè)計(jì)而言，其信息內(nèi)容的有效傳達(dá)是通過(guò)各種構(gòu)成要素的設(shè)計(jì)編排來(lái)實(shí)現(xiàn)的；其使用用戶的視覺(jué)感受則是通過(guò)視覺(jué)設(shè)計(jì)來(lái)強(qiáng)調(diào)。該文對(duì)網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)進(jìn)行了總結(jié)，探討了設(shè)計(jì)過(guò)程中所遇到的實(shí)際問(wèn)題。

關(guān)鍵詞：網(wǎng)頁(yè)設(shè)計(jì)；視覺(jué)設(shè)計(jì)；布局原則；色彩

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2015）15-0204-02

網(wǎng)頁(yè)設(shè)計(jì)的目的，是以最佳視覺(jué)效果來(lái)呈現(xiàn)網(wǎng)站的內(nèi)容并最大限度地吸引游客的注意力，使得他們能首先關(guān)注，進(jìn)而說(shuō)服他們使用網(wǎng)頁(yè)提供的項(xiàng)目。網(wǎng)絡(luò)用戶是繁忙的，沒(méi)有時(shí)間留下來(lái)欣賞網(wǎng)站的設(shè)計(jì)美感，因此盡管高水準(zhǔn)的美術(shù)設(shè)計(jì)非常重要，但是它并不能充分激發(fā)訪客的點(diǎn)擊行為。雅虎有一個(gè)“眼動(dòng)跟蹤研究”的項(xiàng)目，它證明，人的眼睛掃描網(wǎng)頁(yè)，以確定是否值得停留較長(zhǎng)的時(shí)間，整個(gè)決定時(shí)間不到3秒。之后如果決定再看看，他首要關(guān)注的是頁(yè)面的上半部分，然后閱讀，真正開(kāi)始瀏覽。

因此，在網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)過(guò)程中，要注重用戶體驗(yàn)，遵循各種設(shè)計(jì)樣式和布局原則，只有這樣，才能最終創(chuàng)作出既能滿足基本功能需要又具有視覺(jué)吸引力的網(wǎng)頁(yè)。結(jié)合多次設(shè)計(jì)實(shí)踐與論證，本文主要分析以下幾個(gè)問(wèn)題。

1 網(wǎng)頁(yè)組成要素

1.1 標(biāo)題

標(biāo)題不是一個(gè)具體的元素，它更多的用于網(wǎng)頁(yè)頂部，放置標(biāo)志，導(dǎo)航，定位口號(hào)等。

1.2 標(biāo)志

標(biāo)志是身份和品牌的象征，最常見(jiàn)的位置是在標(biāo)題欄，左對(duì)齊。人的視覺(jué)習(xí)慣是從左至右，從上到下，所以左上方的的標(biāo)志，將最有可能成為被訪問(wèn)者看的第一個(gè)元素。

1.3 導(dǎo)航

導(dǎo)航對(duì)頁(yè)面起著非常重要的作用，使用導(dǎo)航是為了給訪問(wèn)者提供超鏈接，跳過(guò)頁(yè)面，直接向他們展現(xiàn)想要顯示的明確信息。因此，導(dǎo)航是網(wǎng)站的關(guān)鍵，制作用戶友好的導(dǎo)航非常關(guān)鍵。一個(gè)基本的經(jīng)驗(yàn)法則是，網(wǎng)站的任何頁(yè)面都必須保證訪問(wèn)者最多點(diǎn)擊三次就能訪問(wèn)到，即遵循“三單擊”原則。訪客需要使用網(wǎng)站提供的各個(gè)頁(yè)面版塊，它應(yīng)該很容易找到和使用，這就是為什么導(dǎo)航幾乎總是位于頁(yè)眉或至少在網(wǎng)頁(yè)的頂部附近。

導(dǎo)航類型分為水平和垂直兩種，水平的即一系列環(huán)節(jié)內(nèi)聯(lián)顯示，通常被稱為“導(dǎo)航”；垂直的即一系列鏈接顯示為一個(gè)垂直堆疊，通常被稱為“菜單”。

1.4 主要內(nèi)容

內(nèi)容是一切的根本所在，當(dāng)人們?cè)L問(wèn)你的網(wǎng)站，這是他們想看的主要元素。它應(yīng)該是一個(gè)Web頁(yè)面的焦點(diǎn)，所以設(shè)計(jì)的一個(gè)任務(wù)就是，滿足游客能快速找到他們所尋找內(nèi)容的需求。

1.5 側(cè)邊欄

側(cè)邊欄是網(wǎng)頁(yè)的第二內(nèi)容，有廣告、網(wǎng)站搜索、訂閱鏈接、聯(lián)系方式等。這些元素在網(wǎng)站中不是所有人都需要使用它。布局最常見(jiàn)的是右對(duì)齊，但也可以左對(duì)齊或兩個(gè)（邊欄）并存，只要不擾亂主要內(nèi)容的瀏覽。網(wǎng)站使用水平和垂直導(dǎo)航欄。

1.6 頁(yè)腳

設(shè)計(jì)一個(gè)頁(yè)面時(shí)，使用頁(yè)腳來(lái)讓你的訪客知道他們已經(jīng)到了你的網(wǎng)頁(yè)底部。頁(yè)眉和頁(yè)腳并不真正是一個(gè)特定的元素，只是包含在其它元素中。在頁(yè)腳的位置安排放置版權(quán)、法律和主要的聯(lián)系方式，以及幾個(gè)鏈接（可以鏈接到網(wǎng)站中最重要部分的主頁(yè)）。還可以把一些重要信息和材料也放置在這個(gè)地方。

1.7 “空白”

這是一個(gè)網(wǎng)頁(yè)中，不被其它任何內(nèi)容覆蓋的區(qū)域。為什么放著空白的頁(yè)面而不是去填滿內(nèi)容？空白部分也是一個(gè)網(wǎng)頁(yè)設(shè)計(jì)的組成內(nèi)容，一個(gè)網(wǎng)站有效使用“空白”，可以幫助訪問(wèn)者更有效地瀏覽網(wǎng)頁(yè)內(nèi)容，“空白”制造了內(nèi)容之間的分離感，創(chuàng)造了新的平衡。

2 視覺(jué)效果的設(shè)計(jì)技巧

2.1 黃金比例和使用網(wǎng)格

黃金比例廣泛運(yùn)用于數(shù)學(xué)和藝術(shù)作品，運(yùn)用黃金比例的設(shè)計(jì)最具有視覺(jué)吸引力。使用黃金分割可以輕松得到一些數(shù)據(jù)用于網(wǎng)頁(yè)中的各種元素的寬度、高度等，進(jìn)而產(chǎn)生美觀的視覺(jué)比例。

為了簡(jiǎn)化這一過(guò)程，可以用一個(gè)簡(jiǎn)單的網(wǎng)格，它的三分之二處就是寬度或高度的合適位置。很多受歡迎的網(wǎng)站，其元素的布局都遵守黃金比例，在設(shè)計(jì)中使用網(wǎng)格。

2.2 分割布局的應(yīng)用

分割布局設(shè)計(jì)就是把一個(gè)頁(yè)面簡(jiǎn)單地劃分為相等的兩部分，這個(gè)基本的布局是非常有效的。 人的眼睛在注視一個(gè)頁(yè)面時(shí)，往往按照 “鋸齒形”的運(yùn)動(dòng)軌跡來(lái)快速瀏覽。 如果眼睛做后續(xù)的水平直線運(yùn)動(dòng)，說(shuō)明他/她正在集中（或嘗試）深入閱讀。在一個(gè)一目了然的頁(yè)面，提供盡可能多的信息，以科學(xué)的方式設(shè)計(jì)略讀模式，應(yīng)該能夠抓住更多的游客的注意力。這個(gè)現(xiàn)象的原理是：瀏覽過(guò)程，用戶有進(jìn)行短暫停頓的需求，并且在停頓的同時(shí)，大腦會(huì)進(jìn)行快照的拍攝。按照“鋸齒形”的運(yùn)動(dòng)軌跡來(lái)進(jìn)行布局設(shè)計(jì)，把很多重要的信息分布在各個(gè)“暫停點(diǎn)”上，大腦的每一次快照拍攝就會(huì)吸收一些細(xì)節(jié)。這種有效利用了科學(xué)規(guī)律的布局設(shè)計(jì)，可以向訪問(wèn)者最高效地推薦指定的產(chǎn)品、服務(wù)或更重要的功能。

分割布局設(shè)計(jì)的應(yīng)用是很簡(jiǎn)單的，因?yàn)橹恍鑼㈨?yè)面劃分成相等的兩部分，因?yàn)殇忼X形端點(diǎn)或多或少都對(duì)準(zhǔn)這些部分的中心。把重要內(nèi)容的位置調(diào)整在 “鋸齒形”的結(jié)束點(diǎn)，可以充分突出布局的中心。這種布局還會(huì)使頁(yè)面看起來(lái)優(yōu)雅而整潔，體現(xiàn)了簡(jiǎn)單實(shí)用的設(shè)計(jì)原則。

2.3 色彩的運(yùn)用

色彩影響著視覺(jué)效果，是網(wǎng)頁(yè)設(shè)計(jì)的重要因素。色彩的運(yùn)用要遵循和諧、均衡和重點(diǎn)突出的原則。色彩對(duì)觀看者情緒的影響非常大，人們看到不同色彩會(huì)有不同的心理感受。例如，紅色是最引人注目的顏色，代表興奮、喜悅和激情，也容易產(chǎn)生視覺(jué)疲勞；綠色是視覺(jué)最容易接受的色彩，令人放松和冷靜，代表友好、安全、和平；灰色作為背景色，適用于搭配各種顏色。使用淺灰色替代白色或者用暗灰色替代黑色，能夠賦予網(wǎng)頁(yè)與眾不同的高雅之感。金屬灰色是很有科技感的顏色，代表速度和進(jìn)步。以實(shí)例來(lái)說(shuō)，如果我們做一個(gè)虛擬冷飲店的頁(yè)面設(shè)計(jì)，應(yīng)該運(yùn)用清爽、活潑的顏色，使人在心理上感覺(jué)更涼快，激發(fā)顧客的購(gòu)買欲望，使在線營(yíng)銷能得到很好的實(shí)踐效果。

同時(shí)要注意的還有網(wǎng)頁(yè)色彩的應(yīng)用，不能過(guò)多的使用顏色，應(yīng)該有所節(jié)制。正常情況下，應(yīng)該首先確定符合整體風(fēng)格的主色調(diào)，然后搭配出一組顏色。

在設(shè)計(jì)過(guò)程中還要注意，色彩的選擇要充分考慮到地域差異與文化差異，因?yàn)椴煌膰?guó)家、民族、宗教信仰對(duì)顏色的感受和理解是完全不同的。根據(jù)不同的受眾群，選擇符合他們喜好的不同顏色，奠定了設(shè)計(jì)中色彩運(yùn)用的第一步。

3 設(shè)計(jì)中遇到的小問(wèn)題

3.1 圖像與文本

圖像與文本的比重，是每個(gè)站點(diǎn)都必須面對(duì)的問(wèn)題，無(wú)論二者的關(guān)系怎么建構(gòu)，都要遵守兩個(gè)原則：一是圖像要小，文本段落要短；二是所有圖像文件最好采用alt.標(biāo)簽。

3.2 顏色與圖像

如果一個(gè)頁(yè)面設(shè)計(jì)減少圖像的數(shù)量，就容易造成頁(yè)面效果呆板、單調(diào)，缺乏吸引力，運(yùn)用背景色塊可以解決這個(gè)問(wèn)題。放棄背景圖片而使用背景色塊，可以消除一些技術(shù)問(wèn)題，流暢地訪問(wèn)網(wǎng)頁(yè)，輕松地閱讀文本，也不會(huì)模糊整個(gè)站點(diǎn)的主旨。

3.3 動(dòng)畫(huà)圖像

動(dòng)畫(huà)是很搶眼的，有很好的視覺(jué)效果，容易吸引人的眼球，但要盡量縮減動(dòng)畫(huà)的大小，并注意把握分寸，避免畫(huà)蛇添足。

4 總結(jié)

本文圍繞網(wǎng)頁(yè)視覺(jué)效果的設(shè)計(jì)過(guò)程中的幾個(gè)方面，分析了網(wǎng)頁(yè)的主要元素，總結(jié)了設(shè)計(jì)技巧，提出了實(shí)際設(shè)計(jì)中遇到的小問(wèn)題。

參考文獻(xiàn)：

[1]崔絨花，等.動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)與實(shí)現(xiàn)[J]. 軟件導(dǎo)刊，2013（11）.

[2]陳欣，等.網(wǎng)頁(yè)設(shè)計(jì)中的視覺(jué)傳達(dá)探析[J].金田，2013（8）.

[3]蒲波，等.色彩在網(wǎng)頁(yè)設(shè)計(jì)中的作用[J].藝術(shù)科技，2013（8）.