基于人機(jī)工程學(xué)的網(wǎng)頁(yè)界面設(shè)計(jì)淺析

齊玲玲　房慧

摘 要：探討了網(wǎng)頁(yè)人機(jī)界面中字符文本、色彩搭配、菜單導(dǎo)航等設(shè)計(jì)內(nèi)容對(duì)用戶體驗(yàn)的影響，提出了網(wǎng)頁(yè)中的文本、圖形與圖像、動(dòng)畫及流媒體、色彩等界面設(shè)計(jì)要素的人機(jī)工程學(xué)設(shè)計(jì)要求，為網(wǎng)頁(yè)的人機(jī)設(shè)計(jì)提供了借鑒和參考。

關(guān)鍵詞：網(wǎng)頁(yè)設(shè)計(jì)；人機(jī)界面；人機(jī)工程

網(wǎng)頁(yè)是在計(jì)算機(jī)技術(shù)和網(wǎng)絡(luò)發(fā)展的基礎(chǔ)上應(yīng)運(yùn)而生的。網(wǎng)絡(luò)的出現(xiàn)催生出網(wǎng)站的出現(xiàn)，也預(yù)征著網(wǎng)頁(yè)設(shè)計(jì)的開始。1991年，Tim Berners博士創(chuàng)建出世界上第一個(gè)網(wǎng)站http：//info.cern.ch。雖然它只是一個(gè)純文字型的網(wǎng)頁(yè)，并且限于當(dāng)時(shí)的技術(shù)條件，網(wǎng)頁(yè)設(shè)計(jì)缺乏藝術(shù)美感，但是它卻標(biāo)志著網(wǎng)頁(yè)設(shè)計(jì)時(shí)代的到來(lái)，具有劃時(shí)代的意義。以計(jì)算機(jī)為平臺(tái)的網(wǎng)頁(yè)設(shè)計(jì)最初被歸類到計(jì)算機(jī)學(xué)科而非設(shè)計(jì)藝術(shù)學(xué)下，這使得網(wǎng)頁(yè)設(shè)計(jì)的研究多集中在技術(shù)性而缺少藝術(shù)性。

網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)的實(shí)質(zhì)是將網(wǎng)絡(luò)多媒體信息元按照不同的設(shè)計(jì)標(biāo)準(zhǔn)、合理的位置布局組合而成，這些信息元包括文本信息、圖形信息、動(dòng)畫及視頻、音頻等。而科學(xué)合理的網(wǎng)頁(yè)設(shè)計(jì)就必須滿足工效學(xué)基本要求，符合人們的審美和認(rèn)知習(xí)慣，因此，有必要對(duì)這些信息元的工效學(xué)設(shè)計(jì)要求進(jìn)行分析研究。

1文本設(shè)計(jì)

文本中的信息是網(wǎng)頁(yè)設(shè)計(jì)中最基本的元素，也因其直觀明了的特點(diǎn)，成為網(wǎng)頁(yè)信息最主要的傳遞者。而且文字所占用的存儲(chǔ)空間小，每個(gè)英文字符只占用1Bytes，每個(gè)漢字占用2Bytes，打開一個(gè)純文字的網(wǎng)頁(yè)只需1到2秒的時(shí)間，這是其他網(wǎng)頁(yè)設(shè)計(jì)元素?zé)o法比擬的優(yōu)勢(shì)。但是，在網(wǎng)頁(yè)設(shè)計(jì)中，文字的運(yùn)用并非越多越好，文字過(guò)多會(huì)讓瀏覽者感到厭煩，而太少又無(wú)法傳遞足夠的信息，因此，文本元素的設(shè)計(jì)就應(yīng)該受到足夠重視。

1.1文字的字體

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

1.2文字的字號(hào)

字號(hào)大小需要根據(jù)頁(yè)面的主題以及版面布局而定，文字越大給瀏覽者的視覺(jué)沖擊越強(qiáng)，一般用于需要強(qiáng)調(diào)的地方，如標(biāo)題等；文字越小越顯得精致細(xì)膩，容易形成面，整體性較強(qiáng)，但易使瀏覽者產(chǎn)生視覺(jué)疲勞，因此一般可用于頁(yè)腳等地方，起輔助作用。有研究表明，網(wǎng)頁(yè)頁(yè)面最適合的字體大小為12磅左右，如果需要顯示的文字內(nèi)容較多，也可采用9磅左右的字號(hào)。

2圖形與圖像設(shè)計(jì)

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

2.1圖形與圖像的設(shè)計(jì)原則

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

其次，注意圖像的大小和數(shù)量對(duì)瀏覽速度的影響。人們?cè)跒g覽網(wǎng)頁(yè)時(shí)最不愿意的就是過(guò)多的等待時(shí)間，而圖像的大小和數(shù)量是除了網(wǎng)絡(luò)傳輸速度外，影響網(wǎng)頁(yè)打開速度最主要的因素。因此，合理的圖像數(shù)量和大小就是設(shè)計(jì)者應(yīng)著重考慮的要素。

最后，圖形與圖像的使用應(yīng)使頁(yè)面整體風(fēng)格統(tǒng)一，具備良好的審美性。圖形與圖像是頁(yè)面設(shè)計(jì)的點(diǎn)綴，應(yīng)以最直觀的形式向使用者展示網(wǎng)頁(yè)的思想內(nèi)涵，傳達(dá)設(shè)計(jì)者所要表達(dá)的意思。

2.2圖形與圖像格式的選擇

在網(wǎng)頁(yè)設(shè)計(jì)中，最常用的圖形與圖像的格式是GIF和JPEG，其次是PNG。它們都是經(jīng)過(guò)壓縮后的圖片格式，根據(jù)設(shè)計(jì)場(chǎng)合選擇格式。

GIF格式是使用最多的網(wǎng)頁(yè)圖像格式，是經(jīng)過(guò)無(wú)損壓縮而得到的，壓縮的原理在不降低圖像質(zhì)量的前提下，減少色彩顯示的數(shù)量，最多可支持256種顏色的顯示。這種格式還可實(shí)現(xiàn)圖像背景透明的功能，方便圖像與頁(yè)面更好的融合。此外，這種格式還可將靜止的圖像轉(zhuǎn)化成動(dòng)畫圖像，在網(wǎng)頁(yè)的標(biāo)志等處使用較多。

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

PNG格式是一種無(wú)專利限制的格式，其中，PNG-8最多支持256種顏色，與GIF相當(dāng)；PNG-24支持RGB模式，可呈現(xiàn)品質(zhì)較高的畫面；PNG-32在PNG-24的基礎(chǔ)上，可根據(jù)需要增加了alpha通道，設(shè)置透明的效果。在以往的網(wǎng)頁(yè)設(shè)計(jì)中，PNG格式使用并不廣泛，主要是因?yàn)镮E6及以下版本的瀏覽器對(duì)PNG的兼容性不強(qiáng)，但后來(lái)的IE7和IE8瀏覽器中已經(jīng)全面支持PNG格式。PNG格式既有GIF的圖像背景透明的功能，也有JPEG清晰度高，效果好的特點(diǎn)，因此在未來(lái)的網(wǎng)頁(yè)設(shè)計(jì)中，PNG格式潛力很大。

3動(dòng)畫及流媒體設(shè)計(jì)

動(dòng)畫及流媒體是多媒體網(wǎng)頁(yè)與其他平面印刷媒體最大的區(qū)別。網(wǎng)絡(luò)帶寬的擴(kuò)大和計(jì)算機(jī)顯示技術(shù)的發(fā)展，使得網(wǎng)頁(yè)上的動(dòng)畫及其他流媒體的呈現(xiàn)成為可能。人們生活水平的提高和娛樂(lè)需求的增長(zhǎng)也促進(jìn)了多媒體網(wǎng)頁(yè)的發(fā)展，目前，國(guó)內(nèi)比較大的多媒體視頻網(wǎng)站有優(yōu)酷網(wǎng)，土豆網(wǎng)，六房間等。

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

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

4色彩設(shè)計(jì)

色彩是視覺(jué)傳達(dá)的重要手段和途徑，也是網(wǎng)頁(yè)設(shè)計(jì)中重要的組成部分。色彩如果運(yùn)用合理，能使網(wǎng)頁(yè)設(shè)計(jì)錦上添花，更具吸引力。因此，在網(wǎng)頁(yè)設(shè)計(jì)時(shí)，要注重色彩對(duì)網(wǎng)頁(yè)設(shè)計(jì)的影響，遵循“總體協(xié)調(diào)，局部對(duì)比”的總設(shè)計(jì)原則，具體可從以下方面考慮：

4.1要與網(wǎng)頁(yè)主題相協(xié)調(diào)

網(wǎng)頁(yè)設(shè)計(jì)要突出主題，運(yùn)用色彩設(shè)計(jì)突出網(wǎng)頁(yè)主題。例如：餐飲企業(yè)的網(wǎng)站多以橘紅、橙黃色系為主，目的是使人產(chǎn)生食欲，加深對(duì)企業(yè)的印象。

4.2體現(xiàn)出網(wǎng)頁(yè)的風(fēng)格特點(diǎn)

網(wǎng)頁(yè)色彩只有與眾不同、突出自身獨(dú)有的風(fēng)格特點(diǎn)，才能在眾多的網(wǎng)頁(yè)設(shè)計(jì)中彰顯個(gè)性，給用戶留下深刻的印象。例如：可口可樂(lè)公司的主色調(diào)一貫是紅色，給人一種激情的感覺(jué)。

4.3符合瀏覽者的心理行為習(xí)慣

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

5結(jié)語(yǔ)

科學(xué)、合理的網(wǎng)頁(yè)人機(jī)界面設(shè)計(jì)既要體現(xiàn)時(shí)代的審美特性，也要符合人機(jī)工程學(xué)的設(shè)計(jì)原則。本文重點(diǎn)對(duì)文本、圖形與圖像、動(dòng)畫及流媒體、色彩等網(wǎng)頁(yè)界面設(shè)計(jì)要素進(jìn)行研究，從人機(jī)工程學(xué)的角度提出了詳細(xì)的設(shè)計(jì)要求，具有較強(qiáng)的操作性和借鑒意義。

參考文獻(xiàn)：

[1] 柯和平.Web網(wǎng)頁(yè)基本元素的設(shè)計(jì)原則與技巧[J].中國(guó)電化教育，2001（8）：64-67.

[2] 張思望.網(wǎng)頁(yè)設(shè)計(jì)中視覺(jué)元素的功能與審美性研究[D].西安：西北大學(xué)，2006.

[3] 吳昊晨.網(wǎng)頁(yè)中的文字設(shè)計(jì)淺談[J].黑龍江科技信息，2010.

[4] 陳麗霞，黃卓順.淺談校園網(wǎng)網(wǎng)頁(yè)色彩的設(shè)計(jì)[J].湖北廣播電視大學(xué)學(xué)報(bào)，2010，30（4）：97-98.