融入用戶特征的網(wǎng)站界面藝術(shù)設(shè)計研究

何沐遙

摘 要： 針對傳統(tǒng)網(wǎng)站界面設(shè)計存在兼容性弱、瀏覽速度慢、視覺效果差，無法滿足用戶需求等問題，提出融入用戶特征的方法對網(wǎng)站界面藝術(shù)性進(jìn)行設(shè)計。以訪問者視覺信息傳達(dá)為導(dǎo)向，結(jié)合網(wǎng)站界面設(shè)計的基本原則，從頁面背景、導(dǎo)航、版面、文字、圖像等方面進(jìn)行深入研究與設(shè)計；合理安排界面圖形、顏色與文字標(biāo)記的重要信息，將網(wǎng)站界面調(diào)整得更加條理化，并進(jìn)行實驗，驗證網(wǎng)站界面藝術(shù)設(shè)計的合理性。實驗結(jié)果表明，該網(wǎng)站界面藝術(shù)設(shè)計具有兼容性較強的特性，不但提高了上訪者的瀏覽速度，而且節(jié)省了瀏覽時間。

關(guān)鍵詞： 融入； 用戶特征； 網(wǎng)站界面； 藝術(shù)設(shè)計； 視覺效果； 適應(yīng)度

中圖分類號： TN02?34； TB472 文獻(xiàn)標(biāo)識碼： A 文章編號： 1004?373X（2018）13?0133?05

Abstract： The traditional Web interface design has the problems of poor compatibility， slow browsing speed and poor visual effect， which can′t meet the demand of users. Therefore， the method integrating user characteristics is proposed to design the artistry of the Website interface. By taking the visitors′ visual information transmission as a guide， the page background， navigation， layout， text， images and other aspects are deeply researched and designed in combination with the basic principle of Web interface design. The important information such as interface graphics， color and text marking is arranged reasonably to make the Web interface more visual. The rationality of Web interface art design is verified with experiment. The experimental results show that the Web interface art design has strong compatibility， and can improve the browsing speed of the visitors and save the browsing time.

Keywords： integration； user characteristic； website interface； art design； visual effect； fitness

0 引 言

網(wǎng)站界面藝術(shù)設(shè)計是一個整體概念，具有一定的目的性，進(jìn)行每一個頁面藝術(shù)設(shè)計不但需要對運營手段進(jìn)行綜合運用，還需融入用戶特征。網(wǎng)站策劃需要明確建設(shè)的目標(biāo)，對上訪者進(jìn)行研究與分析，確定網(wǎng)站設(shè)計的方向。根據(jù)融入的用戶特征，對網(wǎng)站設(shè)計內(nèi)容進(jìn)行修改，以滿足不同需求，并進(jìn)行交互流程設(shè)計。網(wǎng)站界面作為信息傳達(dá)的媒介，在設(shè)計上需要與其他傳達(dá)媒介具有共同之處，但是不同之處在于網(wǎng)站界面自身獨特的表現(xiàn)形式具備了其他媒介無法觸及的傳播范圍和速度，具有交互化的優(yōu)勢。為了能夠吸引上訪者的注意力，爭取較多的瀏覽量，網(wǎng)站界面設(shè)計趨向視覺方面的傳達(dá)，提升自身信息的表達(dá)能力，拓展可持續(xù)發(fā)展的未來之路。通過界面設(shè)計實現(xiàn)網(wǎng)站最終的視覺效果，當(dāng)網(wǎng)站策劃有具體方向時，需要用戶審核通過，設(shè)計者與用戶之間不斷溝通才能達(dá)到良好的效果。而傳統(tǒng)網(wǎng)站界面設(shè)計存在兼容性弱、瀏覽速度慢、視覺效果差等問題，無法在各種瀏覽器下清晰地展示出網(wǎng)站界面的設(shè)計，基于此，本文設(shè)計了融入用戶特征的網(wǎng)站界面。設(shè)計實驗，證明該網(wǎng)站界面藝術(shù)設(shè)計具有兼容性較強的特性，不但提高了上訪者的瀏覽速度，還大大節(jié)省了瀏覽時間。

1 網(wǎng)站界面藝術(shù)設(shè)計基本內(nèi)容

1.1 界面背景

融入用戶特征的網(wǎng)站界面背景被稱為整體背景，也是最核心的背景層，該層次由圖片、材質(zhì)和其他元素共同構(gòu)成；而內(nèi)容背景由文本、圖案和基本數(shù)據(jù)信息組成[1]。

1） 主要內(nèi)容與背景分層。多層背景結(jié)構(gòu)是該頁面主背景，呈現(xiàn)在最底部，而內(nèi)容背景呈現(xiàn)在最頂層。根據(jù)用戶特征，將背景設(shè)置為一個大圖片，在圖片中采用實心背景，頭部采用半透明背景。界面背景設(shè)計需要通過視覺元素實現(xiàn)整個內(nèi)容的傳達(dá)，為了達(dá)到最好的傳達(dá)效果，該界面設(shè)計必須適應(yīng)大眾的視覺流向特征[2]，確定構(gòu)成視覺的各種元素。在設(shè)計時應(yīng)該重視各種元素之間的距離與位置，進(jìn)而確定流程。

視覺流程需要根據(jù)用戶特征實現(xiàn)，用戶對背景欣賞程度取決于人類的視覺特性，人眼視線沿著水平方向運動比垂直方向運動速度更快，并且不易疲勞[3]。由于大部分用戶視覺特征是按照從左到右、從上到下的順序進(jìn)行運動，經(jīng)過調(diào)查發(fā)現(xiàn)，用戶視區(qū)范圍內(nèi)的上方比下方注目程度要高，且左側(cè)比右側(cè)更容易，對于頁面設(shè)計需要遵循用戶視區(qū)內(nèi)對頁面背景的注目程度，結(jié)果如圖1所示。

根據(jù)圖1可知，圖像的上方和中上方被稱為最佳視域，也是最為優(yōu)質(zhì)的地方，通常將界面設(shè)計突出數(shù)據(jù)信息放置在此位置。

2） 內(nèi)容與背景圖案或紋理的結(jié)合。當(dāng)主背景是由材質(zhì)、圖片和各種復(fù)雜的圖案構(gòu)成時，通常采用內(nèi)容與背景圖案或紋理結(jié)合的方式[4]。該方式技巧較難把握，一般以圖片為背景，注重顏色平衡搭配，取得良好的視覺效果，進(jìn)而保證背景與文字之間的對比度清晰，獲得良好可讀性。

3） 內(nèi)容與主體背景共用。主背景最基本、最簡單的結(jié)構(gòu)就是內(nèi)容的背景[5]，通常采用單種色系或者幾種顏色較少色系作為該結(jié)構(gòu)的色彩調(diào)度方案。

1.2 導(dǎo)航設(shè)計

融入用戶特征網(wǎng)站界面中特定的有效導(dǎo)航能夠讓上訪者在復(fù)雜的信息數(shù)據(jù)中安全、快速地找到想要搜索的文件。在創(chuàng)建界面導(dǎo)航時，需要確保導(dǎo)航設(shè)計以用戶為出發(fā)點，而不是以整個系統(tǒng)為出發(fā)點。為了增加該網(wǎng)站導(dǎo)航特色，在左側(cè)導(dǎo)航的基礎(chǔ)上，設(shè)計具有搜索特色的右側(cè)導(dǎo)航。

1） 左欄導(dǎo)航。網(wǎng)站左欄導(dǎo)航的設(shè)計靈感來自于互聯(lián)網(wǎng)方便的網(wǎng)頁布局結(jié)構(gòu)，左欄導(dǎo)航設(shè)計是大多數(shù)界面網(wǎng)站采用的模式，該布局對于網(wǎng)站用戶來說相對安全，且左側(cè)導(dǎo)航能夠有效彌補內(nèi)容網(wǎng)站的空洞感，但缺乏創(chuàng)新。按照慣例在界面的左側(cè)設(shè)計導(dǎo)航，在中間位置加入圖片素材，并在右下方留下聯(lián)系方式，以便用戶與上訪者之間方便溝通，設(shè)計結(jié)果如圖2所示。

2） 右欄導(dǎo)航。在界面網(wǎng)站中設(shè)計右側(cè)導(dǎo)航的網(wǎng)頁布局結(jié)構(gòu)，是使用頻率較低的結(jié)構(gòu)，缺點在于：上訪者對信息進(jìn)行閱讀時，一般從左側(cè)頂部開始閱讀，而采用右側(cè)導(dǎo)航結(jié)構(gòu)不易引起上訪者的關(guān)注[6]。在對融入用戶特征的網(wǎng)站界面右側(cè)導(dǎo)航中加入搜索引擎后，上訪者能更加方便地找到想要搜索的目標(biāo)，設(shè)計結(jié)果如圖3所示。

1.3 版面設(shè)計

無論任何形式的網(wǎng)站設(shè)計，其主頁既需要文字，又需要圖片。文字有大小之分，文本有正標(biāo)題和副標(biāo)題之分，而圖片大小各異、形態(tài)不同，有橫豎之別。圖片文字通過版面呈現(xiàn)給上訪者，需要根據(jù)用戶的特征，將圖片文字按照一定秩序進(jìn)行合理編排，組合成一個有機體呈現(xiàn)給上訪者。該版面需要具備主次分明、中心突出，首尾呼應(yīng)、顏色搭配得當(dāng)，圖文并茂、相得益彰的特點[7]。

根據(jù)版面設(shè)計的視覺效果，在有限的空間屏幕里將元素按照排列組合規(guī)律，突出用戶特征。運用“非遺”類APP界面版式增加整個頁面設(shè)計的平衡、和諧和莊重之美[8]；而文字自上而下，以豎行形式排列在文字結(jié)尾處，并以紅色印章相配，更具有均衡界面設(shè)計的效果。

為了合理安排版面，設(shè)計橫豎排信息權(quán)重圖，結(jié)果如圖4所示。由圖4中展示的信息權(quán)重關(guān)系，協(xié)調(diào)界面各種視覺要素，促使界面設(shè)計結(jié)果圖更加協(xié)調(diào)且美觀，寬松布局也會使界面變得更加時尚與清新，使用戶瀏覽起來富有強烈節(jié)奏感。

1.4 文字設(shè)計

網(wǎng)站界面文字的設(shè)計是視覺信息傳達(dá)的主要媒介，除了內(nèi)容本身的傳達(dá)，還包括情感的激發(fā)與心理各個因素的碰撞，不同文字在形象的傳達(dá)上具有潛移默化的影響[9?10]。在整個界面設(shè)計的過程中，必須重視文字的使用與不同版式的編排，根據(jù)選定的大小、顏色和行距，使用戶網(wǎng)站的上訪者能產(chǎn)生愉悅感，進(jìn)而更好地完成信息搜索。充分利用字體大小、粗細(xì)程度來引導(dǎo)人們的視覺，重點突出內(nèi)容與主題，確保上訪者用最短的時間精準(zhǔn)地找到想要搜索的目標(biāo)信息。文字的編排密度也十分重要，比如字與字之間的距離、行與行之間的距離也會影響訪問者視覺感官，良好的編排可以幫助上訪者梳理閱讀路線，進(jìn)而方便在海量信息中流暢地選擇搜索目標(biāo)。

1.5 圖像設(shè)計

網(wǎng)站界面藝術(shù)圖像設(shè)計相對于文字信息傳達(dá)來說，更為直觀與生動。與傳統(tǒng)網(wǎng)站界面設(shè)計不同的是，上訪者對網(wǎng)頁進(jìn)行瀏覽是連續(xù)且可選擇的，而用戶接收的信息是非單線性的。界面信息隱藏、凸顯以及跳轉(zhuǎn)在較大程度上需要依賴圖像引導(dǎo)。融入用戶特征，充分考慮用戶認(rèn)知心理，從圖像整體構(gòu)造與色彩角度出發(fā)，注意圖像語義表達(dá)的精準(zhǔn)性，確保圖像與用戶認(rèn)知度相適應(yīng)。比如，在網(wǎng)站界面設(shè)計過程中向左或向右進(jìn)行翻頁時，可以使用上訪者熟悉的箭頭來引導(dǎo)，幫助上訪者根據(jù)自己的需求對內(nèi)容進(jìn)行讀取或關(guān)閉，進(jìn)而保持頁面整潔。

2 實驗結(jié)果與分析

為了驗證融入用戶特征的網(wǎng)站界面藝術(shù)設(shè)計的有效性，選擇某市的多媒體旅游信息系統(tǒng)進(jìn)行實驗。

2.1 實驗環(huán)境

網(wǎng)站界面設(shè)計在VC++平臺下實現(xiàn)，擺脫了傳統(tǒng)的Windows界面風(fēng)格，使用生動美觀的界面，使操作變得更加簡單、靈敏。對該頁面進(jìn)行設(shè)計時，融合視覺傳達(dá)的設(shè)計理念，遵守設(shè)計原則，對界面中的文字、圖片以及封面進(jìn)行如下設(shè)計：

1） 文字。針對文字設(shè)計是用戶顯示主題的核心步驟，采用藝術(shù)字體與黑體相互結(jié)合的方式，使字體對比性較強、跳躍性明朗。

2） 圖片。圖片應(yīng)用在界面上是為了說明網(wǎng)站設(shè)計的內(nèi)容與用途，如圖5所示。整個界面由這六大要素和主界面共同組成，主界面沒有放置大圖片，只有操作圖標(biāo)。

3） 色彩。該界面不但需要展示該市的旅游特色，還應(yīng)展示該市的良好風(fēng)貌，因此在對圖片進(jìn)行設(shè)計時，應(yīng)設(shè)計出具有代表性的圖片，如圖6所示。

2.2 結(jié)果與分析

2.2.1 兼容性對比

根據(jù)上述實驗內(nèi)容，將傳統(tǒng)網(wǎng)站設(shè)計與融入用戶特征的網(wǎng)站界面藝術(shù)設(shè)計的兼容性進(jìn)行對比，結(jié)果如表1所示。

由表1可知：由于傳統(tǒng)方法存在兼容性差的問題，導(dǎo)致文字、圖片以及封面不能在不同瀏覽器下正常地展現(xiàn)出來；而設(shè)計的融入用戶特征的網(wǎng)站界面兼容性較強，能夠?qū)D像信息、文字信息完整地展現(xiàn)在界面上。

2.2.2 適應(yīng)度值對比

采用改進(jìn)方法與傳統(tǒng)方法為對比進(jìn)行最優(yōu)特征的融入，當(dāng)適應(yīng)度值不再變化或迭代次數(shù)最大時，結(jié)束融入用戶特征。最大適應(yīng)度值對應(yīng)的被搜索的用戶特征即為獲得最優(yōu)網(wǎng)站界面藝術(shù)效果的關(guān)鍵因素，得到的對比結(jié)果如圖7所示。

由圖7可以看出，改進(jìn)方法相比傳統(tǒng)方法能夠更快達(dá)到最大適應(yīng)度值，且改進(jìn)方法的適應(yīng)度值大于傳統(tǒng)方法。由此可知，改進(jìn)方法在融入最優(yōu)用戶特征時，速度要比傳統(tǒng)方法快，且使用改進(jìn)方法融入的特征進(jìn)行網(wǎng)站界面設(shè)計時，能夠獲得更高的適應(yīng)度，網(wǎng)站界面藝術(shù)性更強。而適應(yīng)度的設(shè)定是用戶特征融入對網(wǎng)站界面藝術(shù)表現(xiàn)的綜合指標(biāo)，適應(yīng)度值越高，說明融入效果越好。

2.2.3 不同用戶特征選取對比

在將用戶特征融入到網(wǎng)站界面時，其用戶特征的選取是影響網(wǎng)站界面藝術(shù)效果的最直接因素，需要對提取性能進(jìn)行驗證。驗證過程中共給出用戶的4個特征，選取其中的特征2，結(jié)果如圖8所示。由圖8可知，采用傳統(tǒng)方法時，選取特征2出現(xiàn)選取不全，選取的特征中存在其他特征的現(xiàn)象，導(dǎo)致出現(xiàn)網(wǎng)站界面藝術(shù)效果不佳的問題；采用改進(jìn)方法時，對特征2的選取準(zhǔn)確，雖然存在特征4，但其量較少，對網(wǎng)站界面藝術(shù)效果影響較低，具有一定的優(yōu)勢。

3 結(jié) 論

融入用戶特征的網(wǎng)站界面藝術(shù)設(shè)計具有兼容性較強的特性，能夠?qū)⑽淖?、圖像信息清晰地展示在用戶面前，并且方便上訪者對用戶網(wǎng)站界面的瀏覽。該頁面設(shè)計不但提高了上訪者的瀏覽速度，還大大節(jié)省了瀏覽的時間，美觀且合理的藝術(shù)設(shè)計更是提高網(wǎng)站瀏覽量的重要因素。通過運用視覺傳達(dá)原理設(shè)計網(wǎng)站界面有助于提高界面設(shè)計的視覺效果與實際應(yīng)用價值。

參考文獻(xiàn)

[1] 熊英，張明利.基于用戶體驗的互聯(lián)網(wǎng)產(chǎn)品界面設(shè)計分析[J].包裝工程，2016，37（4）：88?91.

XIONG Ying， ZHANG Mingli. Design and analysis of Internet product interface based on user experience [J]. Packaging engineering， 2016， 37（4）： 88?91.

[2] 王成舜，陳毓芬，鄭束蕾，等.基于眼動數(shù)據(jù)的網(wǎng)絡(luò)地圖界面用戶興趣分析方法[J].地理與地理信息科學(xué)，2017，33（2）：57?62.

WANG Chengshun， CHEN Yufen， ZHENG Shulei， et al. User interest analysis method of Web map interface based on eye movement data [J]. Geography and geo?information science， 2017， 33（2）： 57?62.

[3] 譚坤，劉正宏，李穎.“非遺”傳承創(chuàng)新語境下的APP界面設(shè)計研究[J].包裝工程，2015，36（8）：60?63.

TAN Kun， LIU Zhenghong， LI Ying. Research on APP interface design in the context of "nonlegacy" inheritance and innovation [J]. Packaging engineering， 2015， 36（8）： 60?63.

[4] 翟佳佳，張輝.“數(shù)字唐陵”用戶界面的設(shè)計原則研究[J].包裝工程，2016，37（18）：67?71.

ZHAI Jiajia， ZHANG Hui. Research on the design principles of the user interface of "digital Tang tombs" [J]. Packaging engineering， 2016， 37（18）： 67?71.

[5] 周睿.啟動時態(tài)界面中動效的交互設(shè)計研究[J].包裝工程，2015，36（8）：83?86.

ZHOU Rui. Research on interactive design of dynamic effect in starting temporal interface [J]. Packaging engineering， 2015， 36（8）： 83?86.

[6] 姚江，封冰.體驗視角下老年人信息產(chǎn)品的界面交互設(shè)計研究[J].包裝工程，2015，36（2）：67?71.

YAO Jiang， FENG Bing. Research on interface interaction design of information products of old people from the perspective of experience [J]. Packaging engineering， 2015， 36（2）： 67?71.

[7] 譚浩，劉進(jìn)，譚征宇.基于意象的交互界面動效設(shè)計方法研究[J].包裝工程，2016，37（6）：53?56.

TAN Hao， LIU Jin， TAN Zhengyu. Research on dynamic effect design method of image based interactive interface [J]. Packaging engineering， 2016， 37（6）： 53?56.

[8] 馬云，虎雅東.“互聯(lián)網(wǎng)+”背景下的品牌設(shè)計與推廣特點研究[J].包裝工程，2016，37（10）：17?20.

MA Yun， HU Yadong. Research on brand design and promotion of Internet plus background [J]. Packaging engineering， 2016， 37（10）： 17?20.

[9] 周睿.“互聯(lián)網(wǎng)+”背景下新媒體品牌形象建構(gòu)研究：以新聞資訊App為例[J].出版科學(xué)，2015，23（6）：75?79.

ZHOU Rui. Research on App news to build new media brand image Internet plus background [J]. Publishing journal， 2015， 23（6）： 75?79.

[10] 孫彩紅.運動視覺跟蹤的三維虛擬平臺設(shè)計與實現(xiàn)[J].現(xiàn)代電子技術(shù)，2017，40（2）：39?42.

SUN Caihong. Design and implementation of 3D virtual platform for moving visual tracking [J]. Modern electronics technique， 2017， 40（2）： 39?42.