網頁設計中視覺元素的功能與運用研究

摘? 要：在網頁設計中，視覺元素影響著內容表達和風格展現。為在網頁設計中實現視覺元素的合理運用，使視覺元素功能得到充分發(fā)揮，文章對網頁設計中視覺元素的分類組成進行了分析，并對視覺元素具備的心理呼應、信息導向、輔助傳遞等功能進行了探討。結合高校網頁設計實踐，對視覺元素在界面布局、人機交互等方面的運用進行了探究，對網頁設計中視覺元素選擇和應用提出了建議，為網頁中的視覺元素設計提供參考。

關鍵詞：網頁設計;視覺元素;信息傳遞;審美特征

Abstract：In web design，visual elements affect content expression and style presentation. In order to realize the rational use of visual elements in web design and make the functions of visual elements give full play to，the classification and composition of visual elements in web design are analyzed，and the psychological response，information orientation，and auxiliary transmission functions of visual elements are carried out. Combining the practice of college webpage design，the application of visual elements in interface layout and human-computer interaction is explored，and suggestions are made for the selection and application of visual elements in web design，and it provides a reference for the design of visual elements in web pages.

Keywords：web design;visual elements;information transmission;aesthetic characteristics

0? 引? 言

在互聯網得到普遍應用的背景下，網站頁面成為了新興的大眾信息傳播方式，通過網頁設計對文本、聲音、圖像等視覺元素進行綜合運用完成信息傳遞。所以想要做好網頁設計，還要重視視覺元素功能發(fā)揮，通過合理組合、編排呈現良好視覺效果。不同網頁設計在內容和主題表達上存在明顯差異，因此想要實現高校網頁合理設計，還要對網頁設計中視覺元素的功能與運用問題展開研究，進一步了解網頁視覺要素構成，提出有效運用視覺元素傳達信息的網頁設計方法。

1? 網頁設計中視覺元素分析

作為可視化表達形式，視覺元素實際為視覺對象中心集合點，是人們用于信息傳遞接收的媒介。在網頁設計中，包含的視覺元素主要可以劃分為二維平面和視聽兩類。其中，二維平面視覺元素包含文字、圖形、色彩、版式等，通過實現各種元素組合來承載信息與表現風格。視聽元素主要包含動畫和視音頻等流媒體，能夠在視覺與聽覺上對用戶產生強烈吸引力，傳遞豐富信息。網頁設計需要對多種視覺元素進行堆積，基于一定視覺表現形式，立足信息傳達，使各種元素相互協(xié)調，最終形成能夠符合人們視知覺習慣的網頁。

2? 網頁設計中視覺元素的功能

2.1? 加強心理呼應

瀏覽不同風格的網頁獲得不同的感受，與視覺元素被賦予的情感有關。對于用戶來講，網頁傳遞的信息包含理性和感性兩類。理性信息主要通過文字傳遞，能夠表達主題。而感性信息可以通過色彩、圖案、版式等傳遞，與視覺元素運用密切相關。如在色彩運用上，紅色給用戶帶來喜慶、興奮的感受，但也容易引起視覺疲勞;藍色可以給用戶帶來平和、冷靜感受;紫色可以給用戶帶來神秘、奇妙的感受[1]。在網頁設計中，設計者需要利用各種視覺元素使頁面呈現出視覺流動的效果，在心理上與瀏覽者形成呼應，確保用戶能夠享受瀏覽過程。用戶在觀看網頁時，視線會不停地移動，遵循人的視線移動規(guī)律進行視覺元素組合，能夠建立心理上的聯系，使用戶感到輕松。合理進行視覺元素組合，能夠使瀏覽者主動接受網頁傳遞的信息。

2.2? 提供信息導向

對于不同瀏覽者來講，想要從網頁上獲取的信息只有一少部分，其余信息則為無用信息，不值得花費過多時間閱讀。因此在頁面設計上，需要運用視覺元素提供信息導向，體現頁面的指示性，確保用戶能夠迅速找到需求信息，排除無關信息干擾。搜索網頁會同時跳出多條相關或無關信息，不同于傳統(tǒng)報紙排版依靠文字提示，網頁需要在適當位置添加圖片類的視覺元素，及時吸引瀏覽者目光，使信息瀏覽速度加快。相較于文字，圖片能夠將信息更直觀地展現出來，并憑借獨特風格產生視覺烘托效果，發(fā)揮引導閱讀的功能。此外，考慮到網頁中圖片較多，為避免瀏覽者受到視覺干擾，需要保證頁面整體構圖清晰。因此運用圖片提供信息導向，需要突出重點的同時，保持頁面風格統(tǒng)一，確保瀏覽者獲得指示后迅速完成信息搜索。

2.3? 輔助信息傳遞

網頁主體部分主要由文字、圖片等二維平面視覺元素構成，使傳遞的信息量受到了限制。運用視聽類視覺元素，能夠在瀏覽者產生信息深入獲取需求時輔助網頁完成信息傳遞。根據個人的需求，用戶可以通過點擊網頁有順序的觀看信息，保證信息內容得到完整、全面展示。在網頁設計中，靈活運用視覺元素能夠突破屏幕二維空間局限性，借助各種動態(tài)的視覺因素賦予網頁三維的結構和形態(tài)，給用戶的大腦帶來強烈的刺激感[2]。如運用動畫使頁面更富動感，能夠在視覺上給人帶來更加愉悅的感受，在完成信息閱讀后依然能夠產生回味。正因為如此，相較于報紙、書籍，網頁可以傳遞更多的信息，在網絡時代更容易被人們接受。視覺元素的合理運用可以使瀏覽者在閱讀過程中，獲得更多的趣味，對網頁內容產生更深刻的記憶。

2.4? 體現審美特征

網頁設計需要體現審美性，其中視覺元素就帶有審美特征，無論是文字還是圖片都需要按照視覺審美規(guī)律進行運用，在保證各元素相互協(xié)調的同時，還需要保持風格特色統(tǒng)一。在網絡融入日常生活后，人們?yōu)g覽網頁不僅僅希望獲得信息，更希望能夠得到審美上的滿足。在網頁排版中，更需要從審美角度進行字體大小調整、圖案搭配等各種元素間的協(xié)調，同時考慮內容和審美需求完成網頁配色，保證整個頁面清晰、內容有序，能夠給用戶帶來美的感受。對各種視覺元素進行梳理的過程中，設計者還要在自身審美與瀏覽者審美間尋求平衡，在體現網頁審美風格的同時，迎合受眾需求，以便從審美上給用戶帶來良好印象，從而提高網頁點擊量。如美妝、服飾等頁面瀏覽者主要為女性，通常搭配紫色、輕粉等受女性歡迎的色調，帶有明顯審美特征。

3? 網頁設計中視覺元素的運用

3.1? 在界面布局上的運用

在網頁設計中運用視覺元素，還要做好界面布局。在網頁中包含大小各異、形態(tài)不同的文字和圖片，無序排列將給人雜亂無章的感受，因此需要遵照一定秩序美感實現布局，使界面有機結合，提高整體性。學校網頁設計多采用上下“T”型布局，符合人自上而下、自左向右的視覺習慣，確保瀏覽者能夠快速獲取需要的信息?！癟”型上部主要為校園風景圖和學校標志，屬于宣傳區(qū)域。下半部劃分為兩個區(qū)域，右邊為學校新聞，左邊為互動、查詢服務。

廣州大學松田學院圖書館網頁在下方設置讀者服務、相關下載等多個專題和鏈接區(qū)域，形成了上中下“國”字布局結構，如圖1所示。實際“國”字型布局中間空間較大，約占60%，接近黃金分割比例，能夠使視覺在信息集中區(qū)域得到匯集，同時又給用戶留下了一定自由瀏覽空間[3]。但圖1在圖界面布局中間空間與上、下空間占比接近，主次不夠分明。在后續(xù)優(yōu)化中，還應突出重點，以便在布局上給用戶帶來較好心理體驗。在頁面中央偏上位置，主要安排重要文章和圖片。學校網頁多采用規(guī)范文字，給人帶來莊重、典雅、古樸等感受，整體風格優(yōu)美、清新。以文字和圖片為主導，在頁面上凸顯重點，能夠較好傳達網頁主題，樹立高校形象。

3.2? 在人機交互上的運用

為提供信息導向，網頁設計需要重視人機交互視覺元素運用。學校網頁多采用導航和鏈接的方式實現資源共享和信息交流，確保用戶能夠完成信息快速搜索，及時進行影像資料交換。導航設計風格需要與網頁整體風格一致，保證色彩搭配能夠做到和諧統(tǒng)一，在視覺上引起關注的同時，不能過分突出。

導航設計可以采用有底色獨立模塊，點擊欄目時將跳出不同色塊，多為純色、漸變或半透明，能夠在視覺上起到引導作用。導航欄實際就是列表，多采用圖形化視覺表達方式，可以采用下拉式，不占據頁面過多空間，通過進行功能展示。此外，也可以采用無底色文字與網頁共用背景，但點擊欄目會出現顏色不同的字體，引導用戶做出選擇。為給瀏覽者帶來更好的交互式體驗，部分重點區(qū)域也會運用動態(tài)FALSH插畫，給用戶帶來有趣的感覺，如圖2所示，廣州大學松田學院獨立學院發(fā)展研究中心頁面在校園風景圖設計上就采用了動態(tài)設計形式。在文字運用上，也可以在正常文字中穿插一些裝飾性字形，使導航帶有一定美感。考慮到頁面能夠展示的新聞、資訊等信息有限，后續(xù)還應通過設計超鏈接滿足用戶深入閱讀需求，點擊對應欄目后可以跳轉至相應頁面，進行文章閱讀或視音頻瀏覽。

3.3? 在語言傳遞上的運用

實現語言的順利傳遞，關鍵在于視覺元素的良好運用。在網頁設計過程中，網頁所顯示的文字還應完成易讀性編排。學校網頁作為標題和鏈接的集合，應將文字作為主體，需要從大小、色彩上增強對比效果，確保重點信息、標題能夠得到突出。在圖片選擇上，還需要先對頁面底色進行確認，保證圖片色彩與背景顏色能夠很好地區(qū)分，同時能夠與字體顏色形成有機搭配。從視覺上來看，文字和圖片應形成相互補充效果，文字過多將造成頁面死板、沉悶。因此長標題的內容需要保持一定距離，應通過長短錯落排列，使內容更加易讀，確保信息能夠有效傳遞，如圖3所示，廣州大學松田學院網絡中心網頁設計就實現了標題文字的長短錯落排列，使內容更加易讀，確保信息能夠有效傳遞。

從視覺平衡角度來看，文字多采用左對齊，右側布置顏色明亮的圖片。但在各個區(qū)域間，文字排列超出區(qū)域范圍，顯得較為密集，后續(xù)還應增加空白區(qū)域，使頁面顯得簡潔，避免給瀏覽者帶來過大心理壓力。目前的網頁設計大多采用Web 2.0技術進行頁面設計，欄目通常使用方塊的圓角邊框，圖標帶有光滑反光效果，色彩的純度較高，字形較大，這樣的設計能夠使頁面特色鮮明[4]。但由于高校官網的曝光度較高，同時高校需要一定的社會認同，所以應避免所設計的網頁與其他高校過于雷同，結合學校網頁各自風格特色進行各種視覺元素的合理組合，盡量選用給用戶帶來高雅感覺的色彩和規(guī)范文字，使內容區(qū)、標簽區(qū)文字、圖片等擁有各自的辨識度，保證主題風格得到精練展示。

3.4? 在效果呈現上的運用

在網頁視覺效果呈現方面，還應重視審美功能的發(fā)揮。在色彩運用上，應對標識性、引導性和功能性的色彩進行區(qū)分，在引導用戶操作的同時，保證色彩搭配統(tǒng)一，避免給用戶造成眼花繚亂的感受。在學校網頁設計中，主色調多采用藍色、紫色、綠色等清新、高雅色調，與學校代表色相呼應，需要在各級界面中得到貫穿使用，確保形成的視覺形象辨識度、統(tǒng)一程度較高。在輔助色層上，也需要選擇色調一致的顏色，增加色層，體現畫面層次感的同時，保證風格一致。相較于主色調，輔助色顏色應適當降低飽和度，保證畫面主次分明。從用戶角度來講，圖片色彩應避免帶來強烈視覺刺激，同時需要展現學校文化底蘊，因此需要盡量選用溫和顏色。此外，網頁還應適量添加動態(tài)元素，給用戶帶來一定視覺沖擊力和親和力。如添加視頻影像資料讓瀏覽者解放雙手和雙眼，在短時間內獲得身臨其境的感受，獲取有價值的聲音和影像信息。設計含有動態(tài)元素的網頁，還應從輔助信息傳遞角度進行搭配，依然以文字和圖片為主體，保證網頁風格得到較好展現。

4? 結? 論

在網頁設計中運用視覺元素，還應通過合理排版、配色帶來愉悅和舒適體驗，引導瀏覽者快速獲取關鍵信息，保證信息得到有效傳遞的同時，滿足用戶審美需求。在實踐設計時，還應遵循視覺傳達規(guī)律完成界面布局，確保視覺要素組成能夠起到互動和信息傳遞作用，盡可能呈現完美視覺效果，進而給瀏覽者留下深刻記憶。

參考文獻：

[1] 李泗蘭，郭雅.視覺空間元素在網頁設計中的應用研究 [J].電腦知識與技術，2019，15（29）：212-214.

[2] 孫聰妮.視覺元素在網頁設計中的應用與研究 [J].衛(wèi)星電視與寬帶多媒體，2019（19）：56-57.

[3] 張穎.平面視覺元素在網頁設計中的應用 [J].電子技術與軟件工程，2019（5）：59.

[4] 王曉俊.基于用戶體驗的網頁界面視覺元素設計研究 [J].吉林工程技術師范學院學報，2019，35（1）：71-73.

作者簡介：楊凱瀾（1981—），男，漢族，陜西咸陽人，助理實驗師，本科，研究方向：網站開發(fā)、Web前端設計、計算機硬件技術。