摘 要：本文探討了平面視覺元素及網(wǎng)頁設(shè)計(jì)，分析了平面視覺元素在網(wǎng)頁設(shè)計(jì)中的基本應(yīng)用現(xiàn)狀，提出了平面視覺元素在網(wǎng)頁設(shè)計(jì)中的優(yōu)化策略，研究了平面視覺元素在網(wǎng)頁設(shè)計(jì)中的具體應(yīng)用，以供參考。

關(guān)鍵詞：平面;視覺元素;網(wǎng)頁設(shè)計(jì);應(yīng)用

中圖分類號：TP393.0 文獻(xiàn)標(biāo)識碼：A DOI：10.3969/j.issn.1003-6970.2021.02.046

本文著錄格式：余紅珍.平面視覺元素在網(wǎng)頁設(shè)計(jì)中的應(yīng)用研究[J].軟件，2021，42（02）：147-149

Research on the Application of Plane Visual Elements in Web Design

YU Hongzhen

（Jiangxi Institute Of Fashion Technology， Nanchang? Jiangxi? 330201）

【Abstract】：This paper discusses the plane visual elements and web design， analyzes the basic application status of plane visual elements in web design， puts forward the optimization strategy of plane visual elements in web design， and studies the specific application of plane visual elements in web design， for reference.

【Key words】：plane;visual elements;web design;application

1 平面視覺元素及網(wǎng)頁設(shè)計(jì)概述

1.1 平面視覺元素及網(wǎng)頁設(shè)計(jì)的主要內(nèi)容

所謂平面視覺元素，主要指的就是對圖形圖像、文字以及色彩等多種元素進(jìn)行組合，形成相應(yīng)的設(shè)計(jì)，從而向受眾表達(dá)出設(shè)計(jì)內(nèi)容及反映的真實(shí)信息，在不同程度上增強(qiáng)觀者對產(chǎn)品的認(rèn)可及了解。網(wǎng)頁設(shè)計(jì)作為平面設(shè)計(jì)的分支之一，通常包含形象網(wǎng)頁設(shè)計(jì)、信息型網(wǎng)頁設(shè)計(jì)以及功能型網(wǎng)頁設(shè)計(jì)。隨著近年來信息網(wǎng)絡(luò)技術(shù)的不斷進(jìn)步，網(wǎng)頁設(shè)計(jì)也正在由最初單純的計(jì)算機(jī)技術(shù)朝著藝術(shù)設(shè)計(jì)的方向逐步發(fā)展，通過在網(wǎng)頁設(shè)計(jì)中加入平面視覺元素，將給受眾帶來全新的視覺體驗(yàn)。

1.2 平面視覺元素在網(wǎng)頁設(shè)計(jì)中的應(yīng)用優(yōu)勢

在平面視覺元素的應(yīng)用過程中，通過對色彩、圖形以及文字進(jìn)行綜合運(yùn)用，網(wǎng)站的整體建設(shè)效果將更加具有先進(jìn)性及個性化的特性，從而給網(wǎng)頁瀏覽者帶來不一樣的視覺沖擊享受。因此，在網(wǎng)頁設(shè)計(jì)中合理利用平面視覺元素，能夠在一定程度上提升用戶瀏覽數(shù)據(jù)，并進(jìn)一步促進(jìn)企業(yè)網(wǎng)站的建設(shè)和經(jīng)營，使得企業(yè)的理念文化、產(chǎn)品信息、服務(wù)情況及用戶資料都能夠在全新的領(lǐng)域上得到傳遞。除此之外，網(wǎng)頁設(shè)計(jì)工作的開展，也將在極大程度上刺激平面軟件設(shè)計(jì)人才的發(fā)展，從而有效推動整個社會水平的提升。

2 平面視覺元素在網(wǎng)頁設(shè)計(jì)中的基本應(yīng)用現(xiàn)狀分析

2.1 網(wǎng)頁整體編排存在不合理性

在網(wǎng)頁設(shè)計(jì)過程中，網(wǎng)頁整體界面的編排是所有設(shè)計(jì)工作的基礎(chǔ)，在各項(xiàng)工作中發(fā)揮了至關(guān)重要的影響作用。一般情況下，網(wǎng)站頁面編排的需要以網(wǎng)站的內(nèi)容信息為出發(fā)點(diǎn)，具有較強(qiáng)的概括性，整體簡單明了。同時，頁面設(shè)計(jì)編排環(huán)節(jié)中，設(shè)計(jì)人員還需要站在受眾的角度，以他們的視角為依據(jù)，確保網(wǎng)頁整體編排的合理性。然而，就目前來看，在現(xiàn)有的網(wǎng)頁編排設(shè)計(jì)案例中，多數(shù)設(shè)計(jì)人員為了提升界面內(nèi)容的豐富程度，而不斷地對頁面內(nèi)容進(jìn)行堆砌，這樣反而會導(dǎo)致頁面整體編排雜亂無章，失去條理性。與此同時，還有部分設(shè)計(jì)人員在網(wǎng)頁設(shè)計(jì)編排過程中并未抓住頁面的核心，從而導(dǎo)致主要內(nèi)容未能得到突出，反而將廣告等無關(guān)緊要的內(nèi)容放在了顯眼的位置，從而對網(wǎng)頁整體的美觀性產(chǎn)生了影響[1]。

2.2 網(wǎng)頁整體色彩搭配不夠恰當(dāng)

一般情況下，用戶在瀏覽網(wǎng)頁的過程中，往往對色彩搭配比較敏感，很容易被頁面的色彩所吸引。網(wǎng)頁界面設(shè)計(jì)的成功與否，通常需要根據(jù)設(shè)計(jì)人員對色彩搭配的熟練程度來進(jìn)行判斷。從根本上來看，網(wǎng)頁設(shè)計(jì)需要作為平面效果設(shè)計(jì)的一大分支，對于色彩搭配有著極高的要求。然而當(dāng)前國內(nèi)部分網(wǎng)站為了盡可能引起受眾的視覺沖擊感，而偏向于大量使用暖色和一些相對比較艷麗的顏色，從而使得整個頁面顯得大紅大紫。這種做法往往不僅無法有效吸引用戶的目光，反而會對他們的觀感體驗(yàn)造成不良的影響，導(dǎo)致用戶對網(wǎng)頁內(nèi)容的觀看受到不同程度的影響，并進(jìn)一步影響他們對網(wǎng)頁的瀏覽速度，給頁面瀏覽帶來了不必要的消極影響。

2.3 網(wǎng)頁文字編輯存在問題

在界面設(shè)計(jì)工作中，文字編輯也具有相當(dāng)重要的作用。受眾可以通過觀察文字內(nèi)容來對網(wǎng)頁進(jìn)行了解分析，從而清晰直觀地找到自己需要的信息。然而就目前來看，在大部分網(wǎng)頁文字編輯工作中，設(shè)計(jì)人員往往都會過分偏向于對文字的藝術(shù)形式進(jìn)行設(shè)計(jì)，而忽略了文字內(nèi)容的直觀體現(xiàn)，從而導(dǎo)致網(wǎng)頁文字過分藝術(shù)化，受眾無法準(zhǔn)確辨認(rèn)判斷文字內(nèi)容，反而給受眾帶來較差的觀感。與此同時，設(shè)計(jì)師在對字體的布局及行距進(jìn)行設(shè)計(jì)時，也會出現(xiàn)不夠合理的問題，從而導(dǎo)致網(wǎng)頁文字編輯的實(shí)際效果無法得到充分體現(xiàn)。

3 平面視覺元素在網(wǎng)頁設(shè)計(jì)中的優(yōu)化策略

3.1 對網(wǎng)頁版面進(jìn)行合理安排

優(yōu)秀的網(wǎng)頁設(shè)計(jì)，往往需要具備出彩的版面，才能更加吸引瀏覽者的注意力。同時，在確保版面設(shè)計(jì)新穎的同時，設(shè)計(jì)人員還需要保證平面視覺元素能夠合理融入網(wǎng)頁頁面，在豐富網(wǎng)頁內(nèi)容和畫面感的同時，也能清晰明了地突出設(shè)計(jì)重點(diǎn)所在，給瀏覽者帶來全面、細(xì)致且視覺效果較好的頁面觀感。因此，在網(wǎng)頁版面設(shè)計(jì)過程中，設(shè)計(jì)人員首先需要做好風(fēng)格的選擇，并根據(jù)所涉及的信息類型，對整體色彩進(jìn)行選擇，確保能夠在滿足受眾視覺需求的同時，提升頁面整體的亮點(diǎn)，從而進(jìn)一步有效提升網(wǎng)頁瀏覽率。此外，在頁面版面的排版設(shè)計(jì)過程中，設(shè)計(jì)人員還需要仔細(xì)研究排版內(nèi)容以及相關(guān)結(jié)構(gòu)之間的聯(lián)系，熟練掌握色彩的運(yùn)用技巧，并通過對專業(yè)知識研究進(jìn)行綜合運(yùn)用，科學(xué)優(yōu)化改善網(wǎng)頁排版方式[2]。

3.2 科學(xué)編輯網(wǎng)頁文字

相較于其他設(shè)計(jì)步驟來看，網(wǎng)頁文字的編輯設(shè)計(jì)是整個網(wǎng)頁設(shè)計(jì)工作的核心。網(wǎng)頁設(shè)計(jì)需要通過文字來傳遞信息，清晰直觀的文字表達(dá)能夠在一定程度上提升受眾的瀏覽興趣。網(wǎng)頁文字編輯主要包括字體編輯、文字編排以及字體選擇。因此，在實(shí)際的網(wǎng)頁設(shè)計(jì)過程中，設(shè)計(jì)人員需要提前考慮好最終呈現(xiàn)出來的視覺效果，盡可能采用默認(rèn)標(biāo)準(zhǔn)的字體，為用戶的閱讀帶來更多便利。與此同時，設(shè)計(jì)人員還需要注意文字布局的安排設(shè)計(jì)，一般情況下，網(wǎng)頁瀏覽者在閱讀頁面的過程中，往往會受到各方面的限制，出現(xiàn)網(wǎng)頁文字不能直接展示出來等問題，從而導(dǎo)致瀏覽者無法對網(wǎng)頁內(nèi)容進(jìn)行準(zhǔn)確的認(rèn)識。因此，設(shè)計(jì)人員在設(shè)計(jì)過程中，應(yīng)考慮選擇常見的、簡練的字體結(jié)構(gòu)，字體大小也應(yīng)調(diào)整為適中，避免采用繁體字、藝術(shù)字，保證瀏覽者能夠更快更準(zhǔn)確地下載到自己需要的材料。

3.3 全面提升整體與局部的協(xié)調(diào)性

在網(wǎng)頁設(shè)計(jì)中，設(shè)計(jì)人員需要做好整體與局部的協(xié)調(diào)設(shè)計(jì)，即做好頁面整體與區(qū)域色彩、畫面及文字內(nèi)容的合理搭配。不同的色彩往往能搭配組成不同的頁面效果，設(shè)計(jì)人員需要從瀏覽者的角度出發(fā)，根據(jù)人類與色彩搭配之間的感知規(guī)律，開展科學(xué)的色彩搭配方案設(shè)計(jì)。據(jù)相關(guān)數(shù)據(jù)統(tǒng)計(jì)表明，暖色調(diào)的色彩搭配設(shè)計(jì)往往比冷色調(diào)更加容易吸引他人注意，因此，設(shè)計(jì)人員應(yīng)牢牢把握受眾的心理，盡可能選擇暖色調(diào)的搭配方案，確保給瀏覽者留下良好的第一印象。此外，為提升頁面整體與局部設(shè)計(jì)的協(xié)調(diào)性，設(shè)計(jì)人員可以通過建立一個固定的色彩應(yīng)用模式，進(jìn)一步增強(qiáng)網(wǎng)頁整體的布局風(fēng)格及設(shè)計(jì)效果。

3.4 圖像視覺元素的設(shè)計(jì)和調(diào)整

圖像視覺元素的應(yīng)用，往往能夠帶給受眾更加形象直觀的視覺體驗(yàn)。因此，在網(wǎng)頁設(shè)計(jì)工作中，設(shè)計(jì)人員可以通過圖文綜合的形式來對界面進(jìn)行設(shè)置，網(wǎng)站圖像往往需要較低分辨率的圖片，即可達(dá)到最佳的顯示效果。在圖像選擇過程中，設(shè)計(jì)人員應(yīng)盡可能選擇網(wǎng)絡(luò)傳輸字節(jié)較小的圖片，避免在傳輸過程中圖片因字節(jié)數(shù)過大而受到帶寬限制，或?qū)е聢D片下載速度過慢，在網(wǎng)頁中無法快速打開，給瀏覽者帶來不必要的麻煩。除此之外，在圖片位置及數(shù)量的安排過程中，設(shè)計(jì)人員需要考慮圖片能否與網(wǎng)頁界面保持協(xié)調(diào)，避免出現(xiàn)頁面混雜、不美觀等狀況，給受眾帶來不佳的瀏覽體驗(yàn)。

4 平面視覺元素在網(wǎng)頁設(shè)計(jì)中的具體應(yīng)用

4.1 應(yīng)用于網(wǎng)頁版式調(diào)整設(shè)計(jì)

所謂的網(wǎng)頁版式設(shè)計(jì)，就是通過對已有的多媒體元素進(jìn)行組合，使其協(xié)調(diào)地展現(xiàn)在有限的屏幕空間。網(wǎng)頁的版式設(shè)計(jì)需要以網(wǎng)站的特點(diǎn)及性質(zhì)為出發(fā)點(diǎn)，一般情況下，整體的設(shè)計(jì)風(fēng)格需要和網(wǎng)站的內(nèi)容保持一致，根據(jù)主題內(nèi)容來對元素進(jìn)行配置，之后再通過對各種組合元素的律動性和均衡性進(jìn)行調(diào)整，從而形成有效的視覺關(guān)聯(lián)。同時，在網(wǎng)頁元素的搭配環(huán)節(jié)中，設(shè)計(jì)人員應(yīng)該綜合考慮不同元素的形態(tài)色彩、大小以及其變化節(jié)奏的統(tǒng)一性，同時還應(yīng)選擇適當(dāng)?shù)牧舭?，以進(jìn)一步提升頁面的視覺平衡，從而有效增進(jìn)瀏覽者對頁面信息的記憶[3]。

4.2 應(yīng)用于網(wǎng)頁文字的編排設(shè)計(jì)

文字編排在網(wǎng)頁界面設(shè)計(jì)中也發(fā)揮著極為重要的作用，在實(shí)際操作過程中，設(shè)計(jì)人員需要確保文字風(fēng)格與設(shè)計(jì)核心相同。例如個人主頁的設(shè)計(jì)，可以根據(jù)個人的性格以及愛好來選擇清新、簡潔或可愛型的字體，充分展現(xiàn)個性化;對于教育類及歷史文化型的頁面設(shè)計(jì)，設(shè)計(jì)人員需要側(cè)重于選擇端莊典雅的字體，提升網(wǎng)站頁面整體的莊嚴(yán)感;對于商業(yè)網(wǎng)站的頁面設(shè)計(jì)，設(shè)計(jì)人員可以根據(jù)企業(yè)的核心價值觀、行業(yè)性質(zhì)、產(chǎn)品特點(diǎn)等方面因素來設(shè)計(jì)字體，突出企業(yè)的特征。作為一類特殊的藝術(shù)符號，不同的字體，往往能給瀏覽者帶來不同的風(fēng)格及情感體驗(yàn)。同時，能否準(zhǔn)確選擇恰當(dāng)?shù)淖煮w，將對網(wǎng)頁界面的美觀性產(chǎn)生直接的影響，設(shè)計(jì)人員需要根據(jù)不同的情景，科學(xué)選擇運(yùn)用字體，盡可能避免采用三種以上的字體類型，給頁面觀賞效果產(chǎn)生影響[4]。

4.3 應(yīng)用于網(wǎng)頁圖像的處理設(shè)計(jì)

網(wǎng)頁圖像處理是網(wǎng)頁設(shè)計(jì)工作中一個十分必要的環(huán)節(jié)，一張信息表達(dá)準(zhǔn)確、設(shè)計(jì)精妙的圖像，往往要比單一的文字表達(dá)更具有說服力。網(wǎng)頁圖片的設(shè)置不僅能夠使整個頁面的畫面感更加豐富，進(jìn)一步提升用戶的體驗(yàn)感，同時還能有效增強(qiáng)網(wǎng)站頁面的吸引力，提升網(wǎng)頁瀏覽的趣味性。一般情況下，網(wǎng)頁上設(shè)置的圖像形式多為gif或jpg格式，設(shè)計(jì)人員可以通過利用相應(yīng)的PS軟件來對平面圖像進(jìn)行制作處理。在網(wǎng)頁圖像的選擇和設(shè)置過程中，設(shè)計(jì)人員應(yīng)選擇空間占用較小、格式合適的圖像，避免網(wǎng)頁圖片加載過慢給用戶帶來不佳的瀏覽體驗(yàn)。此外，在圖像數(shù)量以及圖像的擺放過程中，設(shè)計(jì)人員也需要予以控制，避免因圖像數(shù)量過多而導(dǎo)致出現(xiàn)頁面凌亂或打開過慢的情況?？偟膩碚f，在網(wǎng)頁圖像處理工作中，設(shè)計(jì)人員需要綜合考慮圖片的形式、位置以及數(shù)量等多方面影響因素，確保整個網(wǎng)頁能夠保持統(tǒng)一協(xié)調(diào)，更加高效地表達(dá)出頁面設(shè)計(jì)思想[5]。

4.4 應(yīng)用于網(wǎng)頁色彩的搭配設(shè)計(jì)

在網(wǎng)頁設(shè)計(jì)環(huán)節(jié)，設(shè)計(jì)人員需要重點(diǎn)關(guān)注色彩搭配效果，網(wǎng)頁設(shè)計(jì)水平在很大程度上取決于界面色彩的搭配和運(yùn)用。不同的色彩，往往象征的意義也存在一定的區(qū)別，舉例來看，紅色往往都象征著熱血、熱情;綠色象征著青春、活力;紫色象征著高貴典雅;粉色象征著可愛甜美等。在實(shí)際的網(wǎng)頁色彩搭配過程中，設(shè)計(jì)人員需要注意以下幾個方面：首先，要保證頁面色彩搭配的鮮明性，盡可能避免選擇壓抑沉悶的暗黑色系，而多選用鮮艷明亮的色彩搭配。一般情況下，彩色的網(wǎng)頁界面往往對瀏覽者的吸引力更強(qiáng)一些。第二，要確保網(wǎng)頁色彩搭配的獨(dú)特性，設(shè)計(jì)人員需要盡可能增加一些新穎的元素和想法，增加頁面的特色，只有做到與眾不同才能進(jìn)一步給受眾帶來全新的體驗(yàn)，留下深刻的印象。第三，要增強(qiáng)頁面設(shè)計(jì)的針對性，在界面主色調(diào)的選擇方面，設(shè)計(jì)人員應(yīng)依照網(wǎng)站主題的性質(zhì)類型，選擇恰當(dāng)?shù)纳{(diào)，避免出現(xiàn)網(wǎng)頁色彩與主題完全不搭的情況，給瀏覽者帶來不佳的體驗(yàn)感。

5 結(jié)語

綜上所述，隨著近年來國內(nèi)社會發(fā)展水平的不斷提升，平面視覺元素的應(yīng)用率也在不斷提升。想要全面提升網(wǎng)頁瀏覽用戶的體驗(yàn)感，設(shè)計(jì)人員需要做到對網(wǎng)頁版面進(jìn)行合理安排、對網(wǎng)頁文字進(jìn)行科學(xué)編輯、全面提升整體與局部的協(xié)調(diào)性、做好圖像視覺元素的設(shè)計(jì)和調(diào)整，創(chuàng)造更加高質(zhì)量的網(wǎng)頁設(shè)計(jì)成果。

參考文獻(xiàn)

[1] 初良艷.平面視覺元素在網(wǎng)頁設(shè)計(jì)中的應(yīng)用分析與探索[J].電子技術(shù)與軟件工程，2020（23）：114-115.

[2] 和曉娟.平面視覺元素在網(wǎng)頁設(shè)計(jì)中的應(yīng)用研究[J].電腦編程技巧與維護(hù)，2014（10）：68-69.

[3] 宋秀賢.淺析平面視覺元素在網(wǎng)頁界面設(shè)計(jì)中的應(yīng)用[J].科技創(chuàng)新與應(yīng)用，2015（29）：98.

[4] 楊艷霞.平面視覺元素在網(wǎng)頁設(shè)計(jì)中的應(yīng)用研究[J].電子技術(shù)與軟件工程，2020（23）：56-57.

[5] 李宇.探究平面視覺元素在網(wǎng)頁設(shè)計(jì)中的應(yīng)用[J].新聞文化建設(shè)，2020（8）：111-112.