基于人機工程學的網頁界面設計淺析

齊玲玲　房慧

摘 要：探討了網頁人機界面中字符文本、色彩搭配、菜單導航等設計內容對用戶體驗的影響，提出了網頁中的文本、圖形與圖像、動畫及流媒體、色彩等界面設計要素的人機工程學設計要求，為網頁的人機設計提供了借鑒和參考。

關鍵詞：網頁設計；人機界面；人機工程

網頁是在計算機技術和網絡發展的基礎上應運而生的。網絡的出現催生出網站的出現，也預征著網頁設計的開始。1991年，Tim Berners博士創建出世界上第一個網站http：//info.cern.ch。雖然它只是一個純文字型的網頁，并且限于當時的技術條件，網頁設計缺乏藝術美感，但是它卻標志著網頁設計時代的到來，具有劃時代的意義。以計算機為平臺的網頁設計最初被歸類到計算機學科而非設計藝術學下，這使得網頁設計的研究多集中在技術性而缺少藝術性。

網頁藝術設計的實質是將網絡多媒體信息元按照不同的設計標準、合理的位置布局組合而成，這些信息元包括文本信息、圖形信息、動畫及視頻、音頻等。而科學合理的網頁設計就必須滿足工效學基本要求，符合人們的審美和認知習慣，因此，有必要對這些信息元的工效學設計要求進行分析研究。

1文本設計

文本中的信息是網頁設計中最基本的元素，也因其直觀明了的特點，成為網頁信息最主要的傳遞者。而且文字所占用的存儲空間小，每個英文字符只占用1Bytes，每個漢字占用2Bytes，打開一個純文字的網頁只需1到2秒的時間，這是其他網頁設計元素無法比擬的優勢。但是，在網頁設計中，文字的運用并非越多越好，文字過多會讓瀏覽者感到厭煩，而太少又無法傳遞足夠的信息，因此，文本元素的設計就應該受到足夠重視。

1.1文字的字體

字體沒有統一的格式要求，可依據網頁的風格和排版的要求具體而定，但總原則是使網頁和諧統一，美觀舒適。例如政府網站等莊重正式的網頁標題可使用黑體；博物館等與歷史有關的網站標題偏向于魏碑體；其他內容則選擇宋體、楷體即可。一般來說，一個頁面的字體種類最多不宜超過四個，字體太多易使瀏覽者感到雜亂無章，難以找到重點信息。同時，頁面上的字體需要本地計算機的字體庫提供支持，采用一些特殊字體可能在其他計算機上無法識別，因此設計時盡量采用常用字體。如果非要使用特殊的字體或者手寫體，可通過將其轉化為圖片的形式在網頁上顯示。

1.2文字的字號

字號大小需要根據頁面的主題以及版面布局而定，文字越大給瀏覽者的視覺沖擊越強，一般用于需要強調的地方，如標題等；文字越小越顯得精致細膩，容易形成面，整體性較強，但易使瀏覽者產生視覺疲勞，因此一般可用于頁腳等地方，起輔助作用。有研究表明，網頁頁面最適合的字體大小為12磅左右，如果需要顯示的文字內容較多，也可采用9磅左右的字號。

2圖形與圖像設計

網頁設計中的圖形與圖像既包括主題圖，如新聞圖片、人物照片等，也包括輔助圖，如小圖標、標志、導航圖標、banner（橫幅）圖形等。由于人們對直觀的圖形圖像的興趣往往大于對文字的興趣，因此在網頁設計時應注重多考慮圖形與圖像的運用，以豐富網頁版面的趣味性，吸引瀏覽者的注意力。

2.1圖形與圖像的設計原則

首先，確定頁面圖形圖像與其他設計元素的面積比例。通常情況，瀏覽者視覺最先注視到最大的圖像，然后才是其它元素。因此，主題圖像的大小應居于領導地位，其它圖像應處于從屬地位，起輔助功能，這樣主次分明、大小穿插的組合形式才能構成最佳的視覺效果。

其次，注意圖像的大小和數量對瀏覽速度的影響。人們在瀏覽網頁時最不愿意的就是過多的等待時間，而圖像的大小和數量是除了網絡傳輸速度外，影響網頁打開速度最主要的因素。因此，合理的圖像數量和大小就是設計者應著重考慮的要素。

最后，圖形與圖像的使用應使頁面整體風格統一，具備良好的審美性。圖形與圖像是頁面設計的點綴，應以最直觀的形式向使用者展示網頁的思想內涵，傳達設計者所要表達的意思。

2.2圖形與圖像格式的選擇

在網頁設計中，最常用的圖形與圖像的格式是GIF和JPEG，其次是PNG。它們都是經過壓縮后的圖片格式，根據設計場合選擇格式。

GIF格式是使用最多的網頁圖像格式，是經過無損壓縮而得到的，壓縮的原理在不降低圖像質量的前提下，減少色彩顯示的數量，最多可支持256種顏色的顯示。這種格式還可實現圖像背景透明的功能，方便圖像與頁面更好的融合。此外，這種格式還可將靜止的圖像轉化成動畫圖像，在網頁的標志等處使用較多。

JPEG格式是使用非常精確的算法對圖像進行壓縮，雖然它是一種有損壓縮形式，但是由于它的壓縮程度低，因此色彩還原性好，大約可呈現1670萬種顏色。因此，對于色彩豐富且又不想影響瀏覽者訪問頁面的效率，JPEG格式是一個很好的選擇。

PNG格式是一種無專利限制的格式，其中，PNG-8最多支持256種顏色，與GIF相當；PNG-24支持RGB模式，可呈現品質較高的畫面；PNG-32在PNG-24的基礎上，可根據需要增加了alpha通道，設置透明的效果。在以往的網頁設計中，PNG格式使用并不廣泛，主要是因為IE6及以下版本的瀏覽器對PNG的兼容性不強，但后來的IE7和IE8瀏覽器中已經全面支持PNG格式。PNG格式既有GIF的圖像背景透明的功能，也有JPEG清晰度高，效果好的特點，因此在未來的網頁設計中，PNG格式潛力很大。

3動畫及流媒體設計

動畫及流媒體是多媒體網頁與其他平面印刷媒體最大的區別。網絡帶寬的擴大和計算機顯示技術的發展，使得網頁上的動畫及其他流媒體的呈現成為可能。人們生活水平的提高和娛樂需求的增長也促進了多媒體網頁的發展，目前，國內比較大的多媒體視頻網站有優酷網，土豆網，六房間等。

網頁動畫最初出現過GIF動畫、Applet動畫等，但都由于一些自身的不足而沒有成為主流，直到Flash動畫的出現，網絡動畫才開始廣泛的應用。網頁Flash動畫可用于網頁形象設計、功能導航按鈕、網頁廣告等地方，在網頁設計中起畫龍點睛的作用。從功能上講，Flash動畫的設計應該最大限度給用戶提供便捷的操作界面和功能按鈕；從審美角度上講，Flash動畫應該遵循平面設計的基本原理，符合人們的審美需求，根據網頁的風格有針對性的進行設計，使得網頁中圖像的“靜”與Flash的“動”相結合，體現出網頁的空間層次感和藝術性。

流媒體是指數據在網絡上按時間先后順序傳輸并播放的連續視頻和音頻數據流。由于它包含了聲音及視頻信息，導致它數據量大，對帶寬要求較高，所以，在設計時，應考慮網絡傳輸速度這一主要因素。除此之外，流媒體網頁中設計元素可分為兩類：一是需要用戶手動點擊方可執行文件的被動式流媒體文件；二是打開網頁即可激發文件運行的自發式流媒體文件。在網頁設計時，應充分考慮訪問者的瀏覽習慣，因為強迫式的讓用戶瀏覽自動彈出的廣告或者其它內容可能會使用戶產生厭煩情緒，不利于網頁與用戶之間的交互。

4色彩設計

色彩是視覺傳達的重要手段和途徑，也是網頁設計中重要的組成部分。色彩如果運用合理，能使網頁設計錦上添花，更具吸引力。因此，在網頁設計時，要注重色彩對網頁設計的影響，遵循“總體協調，局部對比”的總設計原則，具體可從以下方面考慮：

4.1要與網頁主題相協調

網頁設計要突出主題，運用色彩設計突出網頁主題。例如：餐飲企業的網站多以橘紅、橙黃色系為主，目的是使人產生食欲，加深對企業的印象。

4.2體現出網頁的風格特點

網頁色彩只有與眾不同、突出自身獨有的風格特點，才能在眾多的網頁設計中彰顯個性，給用戶留下深刻的印象。例如：可口可樂公司的主色調一貫是紅色，給人一種激情的感覺。

4.3符合瀏覽者的心理行為習慣

色彩與人的心理感受和行為習慣都有一定的關系，不同的色彩對于瀏覽者有不同的情感象征，因此，網頁色彩設計應充分考慮瀏覽者的心理行為習慣。紅色代表激情、活力、吉祥和溫暖等，容易引起人們的注意。但使用過多則容易使人視覺疲勞。灰色代表謙虛、中庸和平凡等，屬于中性色彩，能被大多數人接受，一直是流行的主要顏色等。

5結語

科學、合理的網頁人機界面設計既要體現時代的審美特性，也要符合人機工程學的設計原則。本文重點對文本、圖形與圖像、動畫及流媒體、色彩等網頁界面設計要素進行研究，從人機工程學的角度提出了詳細的設計要求，具有較強的操作性和借鑒意義。

參考文獻：

[1] 柯和平.Web網頁基本元素的設計原則與技巧[J].中國電化教育，2001（8）：64-67.

[2] 張思望.網頁設計中視覺元素的功能與審美性研究[D].西安：西北大學，2006.

[3] 吳昊晨.網頁中的文字設計淺談[J].黑龍江科技信息，2010.

[4] 陳麗霞，黃卓順.淺談校園網網頁色彩的設計[J].湖北廣播電視大學學報，2010，30（4）：97-98.