何沐遙

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

關鍵詞： 融入； 用戶特征； 網站界面； 藝術設計； 視覺效果； 適應度

中圖分類號： TN02?34； TB472 文獻標識碼： 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 引 言

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

1 網站界面藝術設計基本內容

1.1 界面背景

融入用戶特征的網站界面背景被稱為整體背景，也是最核心的背景層，該層次由圖片、材質和其他元素共同構成；而內容背景由文本、圖案和基本數據信息組成[1]。

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

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

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

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

3） 內容與主體背景共用。主背景最基本、最簡單的結構就是內容的背景[5]，通常采用單種色系或者幾種顏色較少色系作為該結構的色彩調度方案。

1.2 導航設計

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

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

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

1.3 版面設計

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

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

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

1.4 文字設計

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

1.5 圖像設計

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

2 實驗結果與分析

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

2.1 實驗環(huán)境

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

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

2） 圖片。圖片應用在界面上是為了說明網站設計的內容與用途，如圖5所示。整個界面由這六大要素和主界面共同組成，主界面沒有放置大圖片，只有操作圖標。

3） 色彩。該界面不但需要展示該市的旅游特色，還應展示該市的良好風貌，因此在對圖片進行設計時，應設計出具有代表性的圖片，如圖6所示。

2.2 結果與分析

2.2.1 兼容性對比

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

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

2.2.2 適應度值對比

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

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

2.2.3 不同用戶特征選取對比

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

3 結 論

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

參考文獻

[1] 熊英，張明利.基于用戶體驗的互聯網產品界面設計分析[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] 王成舜，陳毓芬，鄭束蕾，等.基于眼動數據的網絡地圖界面用戶興趣分析方法[J].地理與地理信息科學，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界面設計研究[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] 翟佳佳，張輝.“數字唐陵”用戶界面的設計原則研究[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)界面中動效的交互設計研究[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] 姚江，封冰.體驗視角下老年人信息產品的界面交互設計研究[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].包裝工程，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] 馬云，虎雅東.“互聯網+”背景下的品牌設計與推廣特點研究[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] 周睿.“互聯網+”背景下新媒體品牌形象建構研究：以新聞資訊App為例[J].出版科學，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] 孫彩紅.運動視覺跟蹤的三維虛擬平臺設計與實現[J].現代電子技術，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.