它山之石

汪俊

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

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

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

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

1 文字

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

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

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

2 版面

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

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

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

3 圖像

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

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

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

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

4 色彩

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

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

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

參考文獻(xiàn)：

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

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

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

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

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

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

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