它山之石

汪俊

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

關鍵詞：視覺設計準則；網站視覺設計；網頁設計經驗

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

本文通過文獻首先整理出網站視覺設計的項目，包含文字、版面、圖像、色彩燈四個項目，然后搜集各項目的相關設計準則，簡略敘述如下。

1 文字

我們分別針對內文編排及字體設計來整理與文字相關的設計準則，內容如下所列。

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

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

2 版面

我們將網站版面的設計分為版面分割及版面配置兩個子項目。

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

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

3 圖像

圖像的呈現方式可分為靜態圖像和動態圖像兩種類型，以下為其相關設計準則：

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

（2）靜態圖像。

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

4 色彩

我們依文字色彩、背景色彩兩個子項目來分別整理有關網站色彩設計準則。

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

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

參考文獻：

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

[2] 黃朝盟，趙美慧.網站規劃與設計[M].臺北：商鼎文化出版社，2007.

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

[4] 內田廣由紀.簡明版面設計[M].北京：中國建筑工業出版社，2005.

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

[6] 魏澤群.使用者最大——從優使性出發的界面設計[M].臺北：網奕信息，2005.

[7] 梁景紅.設計師談網頁設計思維[M].北京：電子工業出版社，2006.