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

關(guān)鍵詞：網(wǎng)頁設(shè)計(jì);視覺元素;信息傳遞;審美特征

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? 引? 言

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

1? 網(wǎng)頁設(shè)計(jì)中視覺元素分析

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

2? 網(wǎng)頁設(shè)計(jì)中視覺元素的功能

2.1? 加強(qiáng)心理呼應(yīng)

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

2.2? 提供信息導(dǎo)向

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

2.3? 輔助信息傳遞

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

2.4? 體現(xiàn)審美特征

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

3? 網(wǎng)頁設(shè)計(jì)中視覺元素的運(yùn)用

3.1? 在界面布局上的運(yùn)用

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

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

3.2? 在人機(jī)交互上的運(yùn)用

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

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

3.3? 在語言傳遞上的運(yùn)用

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

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

3.4? 在效果呈現(xiàn)上的運(yùn)用

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

4? 結(jié)? 論

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

參考文獻(xiàn)：

[1] 李泗蘭，郭雅.視覺空間元素在網(wǎng)頁設(shè)計(jì)中的應(yīng)用研究 [J].電腦知識(shí)與技術(shù)，2019，15（29）：212-214.

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

[3] 張穎.平面視覺元素在網(wǎng)頁設(shè)計(jì)中的應(yīng)用 [J].電子技術(shù)與軟件工程，2019（5）：59.

[4] 王曉俊.基于用戶體驗(yàn)的網(wǎng)頁界面視覺元素設(shè)計(jì)研究 [J].吉林工程技術(shù)師范學(xué)院學(xué)報(bào)，2019，35（1）：71-73.

作者簡(jiǎn)介：楊凱瀾（1981—），男，漢族，陜西咸陽人，助理實(shí)驗(yàn)師，本科，研究方向：網(wǎng)站開發(fā)、Web前端設(shè)計(jì)、計(jì)算機(jī)硬件技術(shù)。