何沐遙

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

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

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

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

1.1 界面背景

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

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

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

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

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

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

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

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

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

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

1.3 版面設(shè)計(jì)

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

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

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

1.4 文字設(shè)計(jì)

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

1.5 圖像設(shè)計(jì)

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

2 實(shí)驗(yàn)結(jié)果與分析

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

2.1 實(shí)驗(yàn)環(huán)境

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

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

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

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

2.2 結(jié)果與分析

2.2.1 兼容性對(duì)比

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

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

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

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

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

2.2.3 不同用戶特征選取對(duì)比

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

3 結(jié) 論

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

參考文獻(xiàn)

[1] 熊英，張明利.基于用戶體驗(yàn)的互聯(lián)網(wǎng)產(chǎn)品界面設(shè)計(jì)分析[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] 王成舜，陳毓芬，鄭束蕾，等.基于眼動(dòng)數(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)新語(yǔ)境下的APP界面設(shè)計(jì)研究[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ì)原則研究[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] 周睿.啟動(dòng)時(shí)態(tài)界面中動(dòng)效的交互設(shè)計(jì)研究[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] 姚江，封冰.體驗(yàn)視角下老年人信息產(chǎn)品的界面交互設(shè)計(jì)研究[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)，譚征宇.基于意象的交互界面動(dòng)效設(shè)計(jì)方法研究[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ì)與推廣特點(diǎn)研究[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] 孫彩紅.運(yùn)動(dòng)視覺跟蹤的三維虛擬平臺(tái)設(shè)計(jì)與實(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.