網(wǎng)頁(yè)視覺元素的人性化設(shè)計(jì)探索

摘要：本文從人性化設(shè)計(jì)的角度，總結(jié)了影響視覺元素人性化設(shè)計(jì)的因素，對(duì)網(wǎng)頁(yè)中的文字、圖形圖像、動(dòng)畫、色彩等基本視覺元素的人性化設(shè)計(jì)方法進(jìn)行了分析探討，為網(wǎng)頁(yè)的人性化設(shè)計(jì)進(jìn)一步深入研究提供參考依據(jù)。

關(guān)鍵詞：網(wǎng)頁(yè) 視覺元素 人性化設(shè)計(jì)

網(wǎng)頁(yè)是互聯(lián)網(wǎng)進(jìn)行信息傳播的載體。是人們利用互聯(lián)網(wǎng)進(jìn)行工作、學(xué)習(xí)、生活必不可少的重要媒介。人們每天都會(huì)瀏覽大量的網(wǎng)頁(yè)，有些網(wǎng)頁(yè)人們流連忘返，有很高的訪問量；有些網(wǎng)頁(yè)人們匆匆掠過，無(wú)人問津。那么，到底什么樣的網(wǎng)頁(yè)才是人們所樂于接受和喜愛的?

網(wǎng)頁(yè)給人的第一印象來(lái)自視覺印象，可以說(shuō)，網(wǎng)頁(yè)中起著視覺傳達(dá)作用的視覺元素，其設(shè)計(jì)的人性化與否將直接影響著網(wǎng)頁(yè)的訪問量。如何使網(wǎng)頁(yè)的視覺元素符合人性化設(shè)計(jì)的標(biāo)準(zhǔn)，滿足人們的視覺需求，是網(wǎng)頁(yè)設(shè)計(jì)師們需要不斷深入研究和探索的重要課題之一。

人性化設(shè)計(jì)的概念及特點(diǎn)

首先，什么是“人性化”?百度百科里這樣解釋：人性化是指廠家在設(shè)計(jì)產(chǎn)品時(shí)力求從人體工程學(xué)、生態(tài)學(xué)和美學(xué)等角度達(dá)到完美，從而真正實(shí)現(xiàn)科技以人為本的目的。一位設(shè)計(jì)師將人性化設(shè)計(jì)歸納為：以人的心理為圓心，人的生理為半徑，建立一種人和物的最佳和諧關(guān)系，來(lái)達(dá)到保護(hù)人的健康，挖掘人的潛能，提高人和物的工作效率。

人性化設(shè)計(jì)不是產(chǎn)品的造型如何新穎夸張、功能如何豐富強(qiáng)大、視覺效果如何絢麗多姿，而是產(chǎn)品上的每一個(gè)元素和功能都有其存在的理由和用途，并且能夠使用戶在使用過程中安全合理、有效便捷、舒服自然地完成各項(xiàng)操作。只有站在用戶的角度審視和理解人的心理特點(diǎn)及行為屬性，才能在產(chǎn)品的設(shè)計(jì)中更加準(zhǔn)確地把握用戶的生理、心理及思維方式的特點(diǎn)，設(shè)計(jì)出更貼近用戶人性本質(zhì)需求的產(chǎn)品來(lái)。

網(wǎng)頁(yè)視覺元素進(jìn)行人性化設(shè)計(jì)需要考慮的因素

首先，人性化設(shè)計(jì)的核心是人。人性化設(shè)計(jì)是為了滿足人的各種需要而存在的。人的需要是進(jìn)行人性化設(shè)計(jì)首先要考慮的因素。網(wǎng)頁(yè)主要是通過視覺元素的引人注目而實(shí)現(xiàn)信息內(nèi)容的傳達(dá)功能。視覺元素的人性化設(shè)計(jì)一定要考慮人的視覺需要。視覺需要指的是人們對(duì)網(wǎng)頁(yè)元素的大小、顏色、形式等因素的視覺需求。由于用戶年齡的不同，對(duì)網(wǎng)頁(yè)視覺元素的類型及大小方面要區(qū)別考慮。在人性化設(shè)計(jì)時(shí)，只有調(diào)查分析不同用戶的需求，針對(duì)性地解決和滿足不同用戶的需求問題，才能設(shè)計(jì)出真正符合“人性化”的網(wǎng)頁(yè)來(lái)。

其次，機(jī)的因素影響并制約著網(wǎng)頁(yè)人性化設(shè)計(jì)的深度和廣度。機(jī)的因素主要是指網(wǎng)絡(luò)傳播信息的輸出設(shè)備——計(jì)算機(jī)以及網(wǎng)絡(luò)的技術(shù)因素。對(duì)網(wǎng)頁(yè)產(chǎn)生直接影響的機(jī)的因素主要是顯示器屏幕尺寸、Web安全色以及網(wǎng)絡(luò)傳輸速度等方面的因素。例如：在網(wǎng)頁(yè)設(shè)計(jì)時(shí)，要首先確定網(wǎng)站界面的尺寸。網(wǎng)站界面的大小尺寸的確定要按照市場(chǎng)顯示器分辨率使用率占市場(chǎng)最大比例的分辨率尺寸決定。從W3Counter于2006年11月12日發(fā)布的全球統(tǒng)計(jì)數(shù)據(jù)得出：1024×768分辨率的使用率占了絕大部分。因此網(wǎng)頁(yè)尺寸的界定，就需要按照1024×768分辨率大小來(lái)進(jìn)行設(shè)計(jì)，這樣網(wǎng)頁(yè)才能符合大多數(shù)用戶的機(jī)的因素，滿足大多數(shù)用戶的視覺需要。

網(wǎng)頁(yè)視覺元素的人性化設(shè)計(jì)

在網(wǎng)頁(yè)發(fā)展初期，網(wǎng)頁(yè)只是由一些文字組成的文本格式供人們?yōu)g覽。經(jīng)過幾年互聯(lián)網(wǎng)技術(shù)的快速發(fā)展，圖像、聲音、動(dòng)畫、視頻等多媒體元素開始在網(wǎng)頁(yè)中出現(xiàn)。現(xiàn)階段，網(wǎng)頁(yè)中的視覺元素主要包括文字、圖形圖像、動(dòng)畫、視頻、色彩等。

文字元素的人性化設(shè)計(jì)。文字是網(wǎng)頁(yè)進(jìn)行信息傳達(dá)的最基本的視覺元素。在網(wǎng)頁(yè)中，文字仍是其他視覺元素所取代不了的，在視覺傳達(dá)方面仍然占據(jù)著主要位置，發(fā)揮著較大的作用。文字的人性化設(shè)計(jì)主要從文字的幾個(gè)方面的屬性人手，文字元素的屬性包括字體、樣式、字號(hào)、色彩等。

(1)字體：默認(rèn)的IE瀏覽器定義的標(biāo)準(zhǔn)字體是中文宋體和英文times new Ro-ma字體。也就是說(shuō)，如果你沒有設(shè)置任何字體，網(wǎng)頁(yè)將以這兩種標(biāo)準(zhǔn)字體顯示。同時(shí)，這兩種字體也可以在任何操作系統(tǒng)和瀏覽器里正確顯示。Windows另外自帶了40多種英文字體和5種中文字體。凡是使用Windows操作系統(tǒng)的瀏覽器都可以正確顯示這些字體，但在其他操作系統(tǒng)里，如unix則不能完全正確顯示。為保證網(wǎng)頁(yè)的信息能夠正常地呈現(xiàn)在每一個(gè)用戶的面前，通常情況下，宜采用宋體、黑體、楷體這三種字體或各種操作系統(tǒng)都能正常顯示的字體。

(2)樣式：文字的樣式有四種，即正常體、斜體、粗體、粗斜體。在網(wǎng)頁(yè)的設(shè)計(jì)中，根據(jù)文字內(nèi)容需要，在需要突出、有變化的文字信息部分，可采用斜體、粗體等樣式予以區(qū)分，會(huì)引起瀏覽者的視覺注意，達(dá)到傳達(dá)的目的。但是這種樣式上的變化越少越好，畢竟斜體使人難以閱讀。

(3)字號(hào)：字號(hào)是表達(dá)文字大小的專業(yè)術(shù)語(yǔ)。在網(wǎng)頁(yè)中選用大字號(hào)會(huì)產(chǎn)生視覺上的強(qiáng)烈沖擊，而小字號(hào)則造成視覺上連續(xù)的吸引。避免因字號(hào)大小選用不當(dāng)而造成瀏覽者的視覺疲勞，影響網(wǎng)頁(yè)信息傳達(dá)的功能。

隨著電腦技術(shù)的不斷提高，顯示器的尺寸在逐漸變大，分辨率也在逐步提高。在分辨率大于1024×768的顯示器上瀏覽網(wǎng)頁(yè)時(shí)，瀏覽者會(huì)發(fā)現(xiàn)大部分網(wǎng)頁(yè)上的文字看上去越來(lái)越小，人的正常視力都無(wú)法輕松地識(shí)別出信息內(nèi)容來(lái)了。如何使每一位瀏覽者都能輕松自如地閱讀文字，是較費(fèi)腦筋的一件事情。目前，大多網(wǎng)頁(yè)多增加閱讀信息文字的增大與縮小字號(hào)的功能，在一定程度上方便了不同用戶的閱讀需求。

(4)色彩：文字的色彩通常根據(jù)網(wǎng)頁(yè)的整體色調(diào)或標(biāo)準(zhǔn)色來(lái)定，選用色彩的標(biāo)準(zhǔn)是滿足人眼的可視需要。一般情況下，為了讓瀏覽者對(duì)某一信息產(chǎn)生視覺注意力，常把該信息標(biāo)題文字的色彩選用飽和度高、視覺跳躍率高的色彩。內(nèi)容文字的色彩多采用與背景色形成對(duì)比數(shù)值較大的色彩，使文字與背景有比較大的對(duì)比以利于文字內(nèi)容的閱讀。盡管在深色背景上使用亮些的字可以讓文字容易閱讀些，但實(shí)踐及事實(shí)證明，在深色背景上閱讀色彩明度對(duì)比度較大的文字會(huì)讓眼睛非常疲勞，不符合“人性化”的設(shè)計(jì)原則。通常，大部分網(wǎng)站都采用在淺色背景上常用黑色或深色的文字。比如：新浪網(wǎng)、搜狐網(wǎng)、中國(guó)教育網(wǎng)等著名網(wǎng)站都使用白色背景，黑色、深藍(lán)色等深色字體作為內(nèi)容字體，紅色、橙色作為熱點(diǎn)信息的標(biāo)題，等等。

圖形圖像元素的人性化設(shè)計(jì)。相對(duì)于文字來(lái)講，圖形圖像由于傳情達(dá)意更為直觀、醒目，沒有語(yǔ)言障礙，更易被用戶所注目。

在對(duì)圖形圖像元素進(jìn)行設(shè)計(jì)時(shí)，要根據(jù)網(wǎng)頁(yè)對(duì)圖像的不同要求進(jìn)行尺寸或色彩飽和度的優(yōu)化。比如：大的圖形圖像容易形成視覺焦點(diǎn)，感染力強(qiáng)，傳達(dá)的情感較為強(qiáng)烈；小的圖形圖像常用在文字內(nèi)容的配圖上，顯得簡(jiǎn)潔而精致，有點(diǎn)綴和呼應(yīng)頁(yè)面主題內(nèi)容的作用。圖像的大小不僅決定著主從關(guān)系，也控制著頁(yè)面的均衡與運(yùn)動(dòng)。大小對(duì)比強(qiáng)烈，給人跳躍感，使主角更突出；大小對(duì)比減弱，則頁(yè)面穩(wěn)定、安靜。這是因?yàn)樵L問者在瀏覽頁(yè)面時(shí)，首先會(huì)注意到大圖像，然后再看到較小的圖像，這種由大到小的視覺引導(dǎo)，會(huì)使瀏覽者的視線在頁(yè)面上流動(dòng)。

由于網(wǎng)絡(luò)傳輸速度的限制，網(wǎng)頁(yè)中的圖形圖像需要對(duì)圖像的格式大小進(jìn)行優(yōu)化設(shè)計(jì)。目前網(wǎng)頁(yè)通常使用兩種圖像格式：GIF和JPEG。除此以外，還有兩種適合網(wǎng)絡(luò)傳播但沒有被廣泛應(yīng)用的圖像格式：PNG和MNG。這幾種圖形圖像格式壓縮比例比較高，下載速度快，具有跨平臺(tái)的特性，使用戶在瀏覽圖形圖像時(shí)不需要安裝插件即可直接瀏覽。

動(dòng)畫元素的人性化設(shè)計(jì)。動(dòng)畫極具變化性的特點(diǎn)，對(duì)視覺有極強(qiáng)的沖擊力。在網(wǎng)頁(yè)中，動(dòng)畫多應(yīng)用到廣告、形象展示、導(dǎo)航、圖標(biāo)及按鈕設(shè)計(jì)上。動(dòng)畫的人性化設(shè)計(jì)能提高人們的視覺注意力，增添網(wǎng)頁(yè)的趣味性，加深用戶瀏覽網(wǎng)頁(yè)的興趣。

比如靜態(tài)的圖標(biāo)平淡無(wú)奇，若將圖標(biāo)處理為動(dòng)態(tài)效果，如發(fā)光、變色、抖動(dòng)等動(dòng)態(tài)效果，將會(huì)使它成為閃爍的“亮點(diǎn)”，吸引用戶視覺注意，增添網(wǎng)頁(yè)的趣味性。在做動(dòng)態(tài)處理時(shí)，也應(yīng)當(dāng)注意到：動(dòng)態(tài)與靜態(tài)部分要有密切關(guān)系，搭配和諧；動(dòng)態(tài)變化不能過多，否則會(huì)削弱網(wǎng)頁(yè)的整體視覺美感，分散瀏覽者的注意力。

同樣，導(dǎo)航條和按鈕動(dòng)畫效果也會(huì)使用戶增添瀏覽的興趣。目前，有許多網(wǎng)站將頁(yè)面的導(dǎo)航條做成了Flash動(dòng)畫，視覺效果很理想。但是值得注意的是，盡量不要使用Flash形式的導(dǎo)航條，如果有些用戶沒有安裝Flash插件，他們就不能快速而正常地瀏覽你的網(wǎng)頁(yè)。

視頻元素的人性化設(shè)計(jì)。視頻在網(wǎng)頁(yè)中比靜態(tài)圖像表現(xiàn)更靈活、生動(dòng)和深刻，在表現(xiàn)形式上可以做到集時(shí)間與空間、視覺與聽覺、表現(xiàn)與再現(xiàn)于一身，使瀏覽者如身臨其境一般地獲得視覺和藝術(shù)的享受。但是在網(wǎng)頁(yè)中應(yīng)根據(jù)需要來(lái)使用視頻，因?yàn)檫^多地使用視頻會(huì)以犧牲網(wǎng)頁(yè)瀏覽速度為代價(jià)。隨著互聯(lián)網(wǎng)流媒體技術(shù)的日益成熟，當(dāng)網(wǎng)絡(luò)速度不再是問題的時(shí)候，視頻在網(wǎng)頁(yè)中的應(yīng)用也越來(lái)越普及。

視頻元素的人性化設(shè)計(jì)主要體現(xiàn)在對(duì)視頻的尺寸、壓縮、位置布局上。通常情況下，為不影響視頻流暢的視覺效果，視頻的尺寸要控制在500px×500px之內(nèi)，視頻的格式也要經(jīng)轉(zhuǎn)換或壓縮成網(wǎng)絡(luò)通用的視頻格式，如ASF、WMV、RM、RMVB以及當(dāng)前網(wǎng)絡(luò)上最流行的FLV視頻格式。這些格式的視頻在網(wǎng)頁(yè)上的播放比較清晰流暢。一個(gè)網(wǎng)頁(yè)最好只布局一個(gè)視頻窗口，在位置的布局方面，通常位于視覺注意度高的網(wǎng)頁(yè)中上部區(qū)域，這樣才能使用戶不受干擾地欣賞他所需要的視頻，獲得最大的視覺享受。

色彩元素的人性化設(shè)計(jì)。無(wú)論是平面設(shè)計(jì)還是網(wǎng)頁(yè)設(shè)計(jì)，色彩永遠(yuǎn)是最重要的環(huán)節(jié)之一。色彩是一種對(duì)瀏覽者有強(qiáng)烈情感影響和心理暗示作用的視覺因素。色彩設(shè)計(jì)在營(yíng)造視覺沖擊力、吸引用戶注意力上起著重要作用。馬克思說(shuō)：“色彩的感覺是一般美感中最大眾化的形式。”色彩被分為冷色調(diào)、暖色調(diào)和中間色調(diào)。心理學(xué)研究表明，冷色調(diào)會(huì)減緩人們的感知反應(yīng)時(shí)間，從而使人們對(duì)事物的知覺注意力得到持續(xù)；反之，雖然暖色調(diào)容易引起視覺注意，但是由于其加快了人們的時(shí)間知覺，長(zhǎng)時(shí)間注意容易使人們產(chǎn)生視覺疲勞；而中間色調(diào)具有比較穩(wěn)定的情緒特征。

色彩是豐富多彩的，但在網(wǎng)頁(yè)的色彩設(shè)計(jì)方面卻不能隨心所欲。我們通常所用的計(jì)算機(jī)顯示設(shè)備能夠顯示出24位真彩色，并不能保證所有顯示設(shè)備都能正常顯示出來(lái)，而使用216種網(wǎng)頁(yè)安全色進(jìn)行網(wǎng)頁(yè)配色可以避免色彩失真問題。216種網(wǎng)頁(yè)安全色是指在不同硬件環(huán)境、不同操作系統(tǒng)、不同瀏覽器中都能夠正常顯示的顏色集合，也就是說(shuō)，這些顏色在任何終端瀏覽用戶顯示設(shè)備上的顯示效果都是相同的。如果網(wǎng)頁(yè)中沒有使用網(wǎng)頁(yè)安全顏色時(shí)，有的顯示設(shè)備系統(tǒng)就會(huì)自動(dòng)對(duì)超出216種范圍的顏色進(jìn)行相應(yīng)的處理，系統(tǒng)會(huì)選擇兩個(gè)類似的網(wǎng)頁(yè)安全顏色進(jìn)行交叉顯示，而此時(shí)的色彩影像效果常常是比較模糊的，不利于圖形圖像的視覺傳達(dá)。

目前由于顯示設(shè)備技術(shù)的不斷提高，Web安全色不再是唯一的選擇，但由于圖片中包含的色彩越來(lái)越影響其存儲(chǔ)的大小，建議仍應(yīng)根據(jù)需要選用色彩。在色彩元素的人性化設(shè)計(jì)中，應(yīng)分析不同社會(huì)背景用戶的心理特征，合理地選用及搭配網(wǎng)頁(yè)色彩的色相、明度和純度，使色彩能夠充分地展現(xiàn)出網(wǎng)頁(yè)的特色，獲得用戶情感和心理上的認(rèn)知。

結(jié)語(yǔ)

總之，人性化設(shè)計(jì)是要注重人的需求，運(yùn)用多學(xué)科知識(shí)，對(duì)網(wǎng)頁(yè)功能的內(nèi)涵加以擴(kuò)展，使網(wǎng)頁(yè)更具生命力。呈現(xiàn)“人性化”的視覺效果。所以，網(wǎng)頁(yè)視覺元素的人性化設(shè)計(jì)需要網(wǎng)頁(yè)設(shè)計(jì)師從人的視覺特點(diǎn)和心理需要出發(fā)，在網(wǎng)絡(luò)技術(shù)因素支持的情況下，細(xì)致入微地考慮到每一個(gè)設(shè)計(jì)環(huán)節(jié)，關(guān)注人的內(nèi)心感受，設(shè)計(jì)出人們所真正需要的人性化的網(wǎng)頁(yè)產(chǎn)品來(lái)。無(wú)論社會(huì)和科技如何變化和發(fā)展，對(duì)于人們所使用的任何產(chǎn)品來(lái)說(shuō)，人性化的設(shè)計(jì)理念是始終不會(huì)改變的。

編校：鄭 艷