網頁視覺元素的人性化設計探索

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

關鍵詞：網頁 視覺元素 人性化設計

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

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

人性化設計的概念及特點

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

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

網頁視覺元素進行人性化設計需要考慮的因素

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

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

網頁視覺元素的人性化設計

在網頁發展初期，網頁只是由一些文字組成的文本格式供人們瀏覽。經過幾年互聯網技術的快速發展，圖像、聲音、動畫、視頻等多媒體元素開始在網頁中出現。現階段，網頁中的視覺元素主要包括文字、圖形圖像、動畫、視頻、色彩等。

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

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

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

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

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

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

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

在對圖形圖像元素進行設計時，要根據網頁對圖像的不同要求進行尺寸或色彩飽和度的優化。比如：大的圖形圖像容易形成視覺焦點，感染力強，傳達的情感較為強烈；小的圖形圖像常用在文字內容的配圖上，顯得簡潔而精致，有點綴和呼應頁面主題內容的作用。圖像的大小不僅決定著主從關系，也控制著頁面的均衡與運動。大小對比強烈，給人跳躍感，使主角更突出；大小對比減弱，則頁面穩定、安靜。這是因為訪問者在瀏覽頁面時，首先會注意到大圖像，然后再看到較小的圖像，這種由大到小的視覺引導，會使瀏覽者的視線在頁面上流動。

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

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

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

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

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

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

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

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

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

結語

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

編校：鄭 艷