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

李　藝　李世國

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

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

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

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

人性化設(shè)計的概念及特點

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在對圖形圖像元素進行設(shè)計時，要根據(jù)網(wǎng)頁對圖像的不同要求進行尺寸或色彩飽和度的優(yōu)化。比如：大的圖形圖像容易形成視覺焦點，感染力強，傳達的情感較為強烈；小的圖形圖像常用在文字內(nèi)容的配圖上，顯得簡潔而精致，有點綴和呼

應(yīng)頁面主題內(nèi)容的作用。圖像的大小不僅決定著主從關(guān)系，也控制著頁面的均衡與運動。大小對比強烈，給人跳躍感，使主角更突出；大小對比減弱，則頁面穩(wěn)定、安靜。這是因為訪問者在瀏覽頁面時，首先會注意到大圖像，然后再看到較小的圖像，這種由大到小的視覺引導(dǎo)，會使瀏覽者的視線在頁面上流動。

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

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

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

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

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

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

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

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

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

結(jié)語

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

編校：鄭艷