汪俊

摘 要：當(dāng)今市面上也有不少書(shū)籍或文章提出了各種各樣網(wǎng)站視覺(jué)設(shè)計(jì)的相關(guān)準(zhǔn)則，但這些準(zhǔn)則有時(shí)存在著某種模糊性或不一致性，常令非專(zhuān)業(yè)設(shè)計(jì)師或初學(xué)者感到困惑和煩惱。本文旨在整理世界范圍內(nèi)知名網(wǎng)頁(yè)設(shè)計(jì)師的書(shū)籍、論文、訪談的基礎(chǔ)上，對(duì)其設(shè)計(jì)理念及設(shè)計(jì)經(jīng)驗(yàn)進(jìn)行總結(jié)，形成一套相對(duì)權(quán)威而有使用的設(shè)計(jì)準(zhǔn)則，以提供給廣大讀者借鑒、參考、批評(píng)。

關(guān)鍵詞：視覺(jué)設(shè)計(jì)準(zhǔn)則；網(wǎng)站視覺(jué)設(shè)計(jì)；網(wǎng)頁(yè)設(shè)計(jì)經(jīng)驗(yàn)

良好的網(wǎng)站視覺(jué)設(shè)計(jì)，可提升瀏覽者對(duì)網(wǎng)站的深刻印象，強(qiáng)化網(wǎng)站形象的完整性，并增加瀏覽者的訪問(wèn)率。有統(tǒng)計(jì)數(shù)據(jù)顯示，平均一位瀏覽者花不到15秒時(shí)間來(lái)瀏覽一個(gè)網(wǎng)站。許多瀏覽者進(jìn)入一個(gè)陌生網(wǎng)站，通常只以數(shù)秒時(shí)間就決定是否要繼續(xù)瀏覽或離開(kāi)，其中一個(gè)決定因素就是對(duì)這個(gè)網(wǎng)站的第一個(gè)印象，而影響此印象的一個(gè)重要元素，就是該網(wǎng)站的視覺(jué)設(shè)計(jì)。但一般非專(zhuān)業(yè)之網(wǎng)站設(shè)計(jì)人員，往往最缺乏的就是有關(guān)視覺(jué)設(shè)計(jì)方面的專(zhuān)業(yè)知識(shí)與經(jīng)驗(yàn)。雖然大部分知名、出色的網(wǎng)站多是由專(zhuān)業(yè)網(wǎng)站制作公司所完成，但仍有許多小型網(wǎng)站是由一些不具備豐富經(jīng)驗(yàn)的設(shè)計(jì)者所制作。有時(shí)會(huì)有不一致甚至相互矛盾的情形發(fā)生，[1]筆者通過(guò)整理世界范圍內(nèi)知名網(wǎng)頁(yè)設(shè)計(jì)師的書(shū)籍、論文、訪談，初步形成了一套基于經(jīng)驗(yàn)的設(shè)計(jì)準(zhǔn)則，以提供給廣大設(shè)計(jì)師和初學(xué)者借鑒、參考、批評(píng)。

本文通過(guò)文獻(xiàn)首先整理出網(wǎng)站視覺(jué)設(shè)計(jì)的項(xiàng)目，包含文字、版面、圖像、色彩燈四個(gè)項(xiàng)目，然后搜集各項(xiàng)目的相關(guān)設(shè)計(jì)準(zhǔn)則，簡(jiǎn)略敘述如下。

1 文字

我們分別針對(duì)內(nèi)文編排及字體設(shè)計(jì)來(lái)整理與文字相關(guān)的設(shè)計(jì)準(zhǔn)則，內(nèi)容如下所列。

（1）內(nèi)文編排。1）文字量不宜過(guò)多。2）將內(nèi)容進(jìn)行疏密有序的分割排版。3）全文編排得分段。4）主要信息放置于顯眼的頁(yè)面位置上。

（2）字體設(shè)計(jì)。1）最適合閱讀的屏幕文字以10 pt與12 pt的字號(hào)為最佳。2）頁(yè)面一般內(nèi)容的字體最好使用12 pt大小。3）同一頁(yè)面字體最好在三種內(nèi)，以不同的字體區(qū)隔標(biāo)題層次，標(biāo)題與內(nèi)文可用同一字體也可不同。4）字號(hào)變化不宜太多，大約3～6個(gè)層次。5）大標(biāo)題，小內(nèi)文；粗標(biāo)題，細(xì)內(nèi)文。6）標(biāo)題文字要明顯、大且粗。7）使用于內(nèi)容的文字不宜太大，以便于識(shí)別為主，9 px或12 px左右即可。

2 版面

我們將網(wǎng)站版面的設(shè)計(jì)分為版面分割及版面配置兩個(gè)子項(xiàng)目。

（1）版面分割。1）從信息內(nèi)容的角度劃分網(wǎng)頁(yè)，可將其框架結(jié)構(gòu)分為以下三種：分欄式框架結(jié)構(gòu)、區(qū)域排版結(jié)構(gòu)、無(wú)規(guī)律頁(yè)面設(shè)計(jì)。2）以造型和視覺(jué)因素為基礎(chǔ)，對(duì)頁(yè)面作分割，水平分割、垂直分割、水平和垂直交叉分割。3）依視覺(jué)表達(dá)可將網(wǎng)頁(yè)形式區(qū)分為兩種基本頁(yè)面布局（含上下分割型、左右分割型）以及三種較具變化的配置（含半包圍型、全包圍型、自由型）（張楠溪，2007）。4）依使用性的角度將導(dǎo)航條作為網(wǎng)頁(yè)劃分的區(qū)隔，有以下五種劃分的類(lèi)型上方導(dǎo)航條、底部導(dǎo)航條、左側(cè)導(dǎo)航條、右側(cè)導(dǎo)航條、中心導(dǎo)航條。5）依據(jù)內(nèi)容和導(dǎo)航條結(jié)構(gòu)的復(fù)雜程度，將網(wǎng)頁(yè)分為單一結(jié)構(gòu)和復(fù)合結(jié)構(gòu)兩類(lèi)：①單一結(jié)構(gòu)：內(nèi)容較少的網(wǎng)站常使用此結(jié)構(gòu)，包含以下五種類(lèi)型：置中導(dǎo)航條、頂部導(dǎo)航條、左側(cè)導(dǎo)航條、右側(cè)導(dǎo)航條、底部導(dǎo)航條。②復(fù)合結(jié)構(gòu)：包含以下三種類(lèi)型：頂部導(dǎo)航條頁(yè)面分割、左側(cè)導(dǎo)航條頁(yè)面分割、固定區(qū)域分割。6）信息的呈現(xiàn)方式?jīng)Q定網(wǎng)頁(yè)的骨架，可將網(wǎng)頁(yè)以信息表現(xiàn)類(lèi)型劃分為以下幾種：檢索型、均衡型、印象型、超印象型。7）根據(jù)信息量的多寡，可將網(wǎng)站區(qū)分為以下五種形態(tài)：檢索型準(zhǔn)檢索型中庸型，圖像為主型、目錄省略型。8）信息內(nèi)容即使完全相同，經(jīng)由不同的配置也會(huì)營(yíng)造不同的風(fēng)格，以下為八種版面配置的樣式：左右對(duì)齊樣式、全景樣式、衛(wèi)星樣式、照片組合樣式、包圍樣式、散落樣式、齊頭或齊尾樣式、居中樣式。

（2）版面配置。1）用戶(hù)瀏覽網(wǎng)頁(yè)的視覺(jué)動(dòng)線(xiàn)起點(diǎn)為左上角，Logo放置在左上角，可以讓使用者于第一時(shí)間明白所處的網(wǎng)站。2）用戶(hù)最常使用的功能為搜尋，搜尋功能多放置在上方的位置。3）會(huì)員登入功能多放置左上或右上方，避免使用者進(jìn)入頁(yè)面后還需要往下拉才能看到此功能，而增加使用的困難度。4）頁(yè)面的信息內(nèi)容應(yīng)該占整個(gè)頁(yè)面空間的50%到80%。5）頁(yè)面長(zhǎng)度以不超過(guò)三至四個(gè)屏幕頁(yè)面為最佳。6）版面適當(dāng)留白，可以使觀者的視線(xiàn)獲得暫時(shí)緩沖、休息。7）版面配置時(shí)應(yīng)保持頁(yè)面的視覺(jué)平衡，視覺(jué)上的平衡主要有兩種形式：對(duì)稱(chēng)平衡、非對(duì)稱(chēng)平衡。

3 圖像

圖像的呈現(xiàn)方式可分為靜態(tài)圖像和動(dòng)態(tài)圖像兩種類(lèi)型，以下為其相關(guān)設(shè)計(jì)準(zhǔn)則：

（1）動(dòng)態(tài)圖像。1）跑馬燈式的文字不易閱讀，重復(fù)循環(huán)的動(dòng)畫(huà)會(huì)妨礙讀者瀏覽網(wǎng)頁(yè)其他的內(nèi)容。2）閃爍的文字會(huì)造成用戶(hù)頭痛，應(yīng)完全避免使用。3）頁(yè)面中過(guò)多的動(dòng)態(tài)圖形會(huì)造成用戶(hù)閱讀上的困擾。4）過(guò)多或是不間斷的動(dòng)畫(huà)容易眼花繚亂，易造成眼睛容易疲勞。

（2）靜態(tài)圖像。

1）圖示的設(shè)計(jì)要能明確傳達(dá)其功能意涵。2）多數(shù)圖像的功能需能輔助文字訊息說(shuō)明。3）不同按鈕的外觀必須經(jīng)過(guò)一致的圖像處理，各個(gè)網(wǎng)頁(yè)間按鈕的設(shè)計(jì)與位置應(yīng)大致相同。4）按鈕的外觀應(yīng)以精簡(jiǎn)達(dá)意為原則，以免延長(zhǎng)網(wǎng)頁(yè)下載的時(shí)間。5）與內(nèi)容不符合的圖片會(huì)令訊息混亂。6）圖片說(shuō)明字?jǐn)?shù)最好在150字以?xún)?nèi)。

4 色彩

我們依文字色彩、背景色彩兩個(gè)子項(xiàng)目來(lái)分別整理有關(guān)網(wǎng)站色彩設(shè)計(jì)準(zhǔn)則。

（1）文字色彩。1）文字的色彩越繽紛，閱讀上越困難。2）字體與背景的亮度對(duì)比愈小，易讀性愈低。3）亮眼的顏色用于少數(shù)重點(diǎn)文字。4）文字色彩與背景色彩避免使用相似的色系，以免造成瀏覽者閱讀困難。5）可讀性指文字是否易于閱讀，背景與文字色彩的明度反差程度愈高，可讀性愈高。

（2）背景色彩。1）基本色的功用為做出整體感覺(jué)的色彩，輔助色為輔助基本色的顏色，強(qiáng)調(diào)色為讓重點(diǎn)更醒目的顏色。2）基本色、輔助色、強(qiáng)調(diào)色全部加起來(lái)盡量不要超過(guò)6種。3）基本色、輔助色、強(qiáng)調(diào)色三種，一般使用大多以基本色70%、輔助色25%、強(qiáng)調(diào)色5%的比例為主。4）背景的色彩越繽紛，閱讀上越困難。5）同一網(wǎng)站中，應(yīng)只使用幾個(gè)特定的顏色與字體。復(fù)雜的字體或過(guò)多的顏色，會(huì)造成視覺(jué)凌亂。6）背景應(yīng)盡量避免采用過(guò)于明亮的顏色。7）網(wǎng)頁(yè)背景與內(nèi)容間應(yīng)產(chǎn)生適當(dāng)?shù)膶?duì)比，提高對(duì)比度。8）背景色彩數(shù)量最好限制在4種以?xún)?nèi)。9）網(wǎng)頁(yè)設(shè)計(jì)常使用白色和灰色來(lái)做背景色，因?yàn)閷?duì)視覺(jué)刺激較低，適合閱讀。10）色彩設(shè)計(jì)必須符合網(wǎng)站的可視性、適合閱讀功能為主要目的。白紙黑字的閱讀效果為最佳。11）亮色比較強(qiáng)烈，易視覺(jué)疲勞而放棄瀏覽。

參考文獻(xiàn)：

[1] McIntire，2007；Nielsen，1999；Syed，2004.

[2] 黃朝盟，趙美慧.網(wǎng)站規(guī)劃與設(shè)計(jì)[M].臺(tái)北：商鼎文化出版社，2007.

[3] エ ビスコム テック ラボ，2004.

[4] 內(nèi)田廣由紀(jì).簡(jiǎn)明版面設(shè)計(jì)[M].北京：中國(guó)建筑工業(yè)出版社，2005.

[5] 胡崧.DreamWeaver網(wǎng)頁(yè)制作[M].北京：中國(guó)青年出版社，2008.

[6] 魏澤群.使用者最大——從優(yōu)使性出發(fā)的界面設(shè)計(jì)[M].臺(tái)北：網(wǎng)奕信息，2005.

[7] 梁景紅.設(shè)計(jì)師談網(wǎng)頁(yè)設(shè)計(jì)思維[M].北京：電子工業(yè)出版社，2006.