葉媛

摘 要：視覺上的感受在用戶體驗中是最直觀的一部分，我們從藝術(shù)的角度，通過合理并富有創(chuàng)意的設(shè)計可以提升界面的可用性和可操作性。良好的視覺設(shè)計不僅能帶給用戶很好的瀏覽體驗，也能使用戶操作更便捷，最大限度地滿足用戶需求。

關(guān)鍵詞：用戶體驗；視覺設(shè)計；設(shè)計要素

“用戶體驗”一詞早在20世紀(jì)90年代就得到了大家的廣泛認(rèn)知，隨著物聯(lián)網(wǎng)時代的到來，用戶體驗在貫穿設(shè)計創(chuàng)新以及信息交互的過程中占有越來越重要的地位。當(dāng)今科技發(fā)展日新月異，在新形勢下，互聯(lián)網(wǎng)的發(fā)展迎來了機(jī)遇和挑戰(zhàn)。GUI的設(shè)計風(fēng)格呈現(xiàn)多元化特征，使眾多網(wǎng)站不斷追求更貼近用戶的體驗設(shè)計。

1 用戶體驗的重要性

用戶體驗（user experience）簡稱UE，是用戶群體在使用一個產(chǎn)品（服務(wù)）的過程中建立起來的一種純主觀的心理感受。用戶體驗無處不在，我們判定一個設(shè)計是否成功，最重要的就是在設(shè)計中是否以用戶為中心，是否遵循“以人為本”的設(shè)計原則。用戶體驗的核心和本質(zhì)就是研究人在特定場景下的思維模式和行為模式，然后順應(yīng)和利用它。因此，用戶體驗需要觀察和記錄用戶平常狀態(tài)下的行為，從而進(jìn)行分析、研究、思考。事實上，這正是很多機(jī)構(gòu)和公司研究用戶體驗的方法。

設(shè)計的核心意義和價值就在于信息的交互與傳達(dá)，從而達(dá)到用戶的根本需求。視覺設(shè)計在產(chǎn)品的呈現(xiàn)中是最先被用戶接觸到的，直接影響到用戶對產(chǎn)品的第一印象。用戶在瀏覽過程中，布局的合理性、內(nèi)容的豐富性、色彩的舒適性等都會使用戶產(chǎn)生不同的情緒，一旦產(chǎn)生了不良情緒，用戶的瀏覽很容易被迫中斷。我們可以通過用戶體驗的反饋結(jié)果對設(shè)計進(jìn)行適當(dāng)?shù)恼{(diào)整，因此用戶體驗在產(chǎn)品設(shè)計中起到了至關(guān)重要的作用。

在用戶體驗領(lǐng)域，視覺設(shè)計師需要解決什么問題？解決的問題可以提高哪些價值？在用戶體驗領(lǐng)域里，視覺設(shè)計師要解決的問題是體驗的舒適性、合理性以及美觀性。它所帶來的價值，站在商業(yè)角度來看，是更優(yōu)雅和更直觀地傳達(dá)產(chǎn)品的價值；站在用戶角度，則是擁有更高的用戶使用率，讓用戶更加喜愛產(chǎn)品，并對其產(chǎn)生情感上的依賴。在體驗設(shè)計的領(lǐng)域，視覺設(shè)計師要解決的是最普遍的問題。一般來說，用視覺設(shè)計的方法來解決實際問題需要從深度和廣度兩個維度拓展。從深度上來說，視覺設(shè)計僅僅滿足合理、舒適和好看這幾方面，還遠(yuǎn)遠(yuǎn)不夠。更核心的點是你需要讓用戶發(fā)自內(nèi)心地感受到愉悅。只有情感上的愛不釋手，才真正能更有力量地幫助產(chǎn)品獲得成功。從廣度來說，視覺設(shè)計師需要試著去解決傳統(tǒng)意義上的非視覺問題。例如，討論時我們是否可以試著用圖形草圖幫助同事整理思路？或者匯報時通過動態(tài)的圖形來演示，使得大家的思路更加清晰？或者當(dāng)父母老了想學(xué)習(xí)用微信時，是否我們可以做一份微信的手繪說明書幫助他們學(xué)習(xí)？

2 影響用戶體驗的視覺元素

人們?nèi)粘Ｋ@得的信息中，有將近80%都來自視覺，隨著時代的進(jìn)步與技術(shù)的發(fā)展，視覺已經(jīng)成了一種溝通現(xiàn)實世界與虛擬世界的橋梁。在新時代的互聯(lián)網(wǎng)行業(yè)中，視覺早已不再是傳統(tǒng)的、單純的視覺感受，而是承載著諸多產(chǎn)品功能及數(shù)據(jù)的媒介。良好的視覺設(shè)計應(yīng)該能夠做到視覺表達(dá)與產(chǎn)品功能的統(tǒng)一，想要贏得更多的用戶，吸引更多用戶的注意，就必須了解用戶，了解滿足用戶需求需要達(dá)到什么樣的功能，而這些功能要如何通過視覺化的體驗高效傳達(dá)給用戶。

那么，怎樣的設(shè)計才是優(yōu)秀的界面設(shè)計？優(yōu)秀的界面視覺設(shè)計首先是能非常明確地傳達(dá)這個產(chǎn)品的主旨。簡單說，就是這個產(chǎn)品是用來做什么的。產(chǎn)品必須是一個有機(jī)統(tǒng)一的整體，產(chǎn)品的設(shè)計必須由內(nèi)而外都是協(xié)調(diào)統(tǒng)一的。因此，在色彩、文字、排版、布局等的選擇必須與產(chǎn)品的功能、情感相呼應(yīng)，務(wù)必做到一脈相承，良好地傳達(dá)產(chǎn)品的設(shè)計理念。

優(yōu)秀的界面視覺設(shè)計應(yīng)當(dāng)是獨(dú)特的、吸引人的，特別是最初的直觀感受。當(dāng)然這必須先滿足之前的先決條件，而不是單純地為了博眼球、搏出位。整個設(shè)計過程會是一場微妙的博弈與平衡，以達(dá)到一種有魅力的、素雅的、耐看的境界。

而優(yōu)秀的視覺設(shè)計師是能夠感受和接納用戶的。每作出一個決定的時候，都是從用戶的角度出發(fā)，而不能總是陷入無限的自我陶醉或者情懷當(dāng)中。

其次，優(yōu)秀的視覺設(shè)計師是熟悉、精通多種風(fēng)格的。用戶是多樣的、需求是多種的，流行是會隨著時間變化的，界面的視覺元素也應(yīng)隨時代發(fā)展而進(jìn)步。

最后，優(yōu)秀的視覺設(shè)計師是有自己的理念的。這種理念不會是狹隘的扁平化或者擬物化，這些只是表象的手段。這種理念應(yīng)當(dāng)是基于它對用戶有何益處，又或者給用戶帶來什么樣的好處，獲得了什么樣的啟發(fā)，或許是生理上的，或許是情感上的。

“用戶的視線首先落在什么地方？設(shè)計要素如何才能引起用戶的注意？我們所要向用戶表達(dá)的信息是否會成為他們關(guān)注的焦點？設(shè)計的整體布局是否合理，結(jié)構(gòu)是否優(yōu)化？層次是否清晰明確？”在設(shè)計之前我們所要考慮及分析的方面有很多，需要有足夠的用戶分析作為設(shè)計的支撐。

2.1 文字內(nèi)容

文字在界面設(shè)計中是最重要的部分，是不可缺少的一部分。在界面設(shè)計中，對于文字有其特定的規(guī)范。網(wǎng)頁當(dāng)中的文字與界面整體的風(fēng)格設(shè)計息息相關(guān)，字體尤其獨(dú)特，在設(shè)計中采用不同的文字會產(chǎn)生風(fēng)格迥異的視覺體驗。文字可以有不同的功能及表現(xiàn)形式，具體體現(xiàn)在字體、字號、行距、色彩、排版形式等方面，標(biāo)題文字或slogan，我們可以使用一些富有創(chuàng)意的文字字體和排版形式，按照層級的遞減關(guān)系來編排界面中文字的大小，層級越高，字號就越大。正文的文字通常會影響用戶的閱讀效率，在PC端我們通常采用微軟雅黑的字體以及不小于14號的字號，而在移動端通常會根據(jù)不同的系統(tǒng)和屏幕尺寸來進(jìn)行相應(yīng)的調(diào)整，使之達(dá)到讓用戶閱讀起來最舒適的效果。

2.2 圖片展示

人們所獲得的信息將近80%是來自視覺的，而圖文并茂通常是用戶最容易接受的表達(dá)形式，圖形是人與人進(jìn)行交流與溝通的最直接的視覺傳達(dá)方式，因此圖片信息在界面設(shè)計中也是尤為重要的一部分。

圖片的使用可以使得畫面更加豐富飽滿，在信息傳遞方面的表達(dá)更加的直觀和生動，更加容易集中用戶的注意力，從而更好地引導(dǎo)用戶，實現(xiàn)目標(biāo)。富有創(chuàng)意的圖片往往具有烘托氣氛的作用，可以讓用戶感受到整體的設(shè)計氛圍。與此同時，富有視覺沖擊力的圖片可以幫助企業(yè)樹立品牌形象。

2.3 色彩搭配

色彩本身會說話，它可以表達(dá)出豐富的情感。世界萬物都要通過色彩作為媒介才能夠被人們所感知，不同的色系、不同的明度、不同的純度以及不同的色彩搭配都能給人帶來不一樣的心情。例如，紅色帶給人熱情，藍(lán)色帶給人安靜，綠色具有頑強(qiáng)的生命力，紫色充滿了夢幻。巧妙的色彩搭配往往能給用戶以強(qiáng)大的視覺沖擊力，這些富有強(qiáng)大感染力的色彩能給用戶留下極為深刻的視覺印象，強(qiáng)化信息交互，留住用戶的視線。

2.4 版式布局

布局設(shè)計是從宏觀的角度去考慮產(chǎn)品的結(jié)構(gòu)與功能，運(yùn)用合理的版式設(shè)計原理，將界面上的視覺元素進(jìn)行富有層次的排列組合，使得界面的內(nèi)容表達(dá)更加直觀，使復(fù)雜的內(nèi)容簡單化。布局的目的就是實現(xiàn)信息傳達(dá)的清晰化、合理化，從而提高用戶瀏覽時的舒適度。布局設(shè)計是系統(tǒng)化的，能引導(dǎo)用戶的視覺動線，起到統(tǒng)籌作用，雖然沒有圖片及文字那樣給人帶來直觀的印象，但卻是必不可少的。

3 如何提升用戶體驗

當(dāng)我們在使用一款產(chǎn)品時，顯而易見的，我們最先接觸到的就是視覺上的體現(xiàn)，用戶可以通過界面上的排版布局通過各種操作按鈕去完成想要的操作，當(dāng)我們非常順利地完成計劃時，自然會對產(chǎn)品產(chǎn)生好感。

用戶在使用或瀏覽界面的過程，不僅僅是信息交互的過程，也是與用戶之間建立信任關(guān)系的過程。產(chǎn)品中影響用戶體驗的因素有很多，如使用環(huán)境、品牌形象、信息內(nèi)容、加載速度等，而視覺設(shè)計是諸多影響體驗因素之一，但卻是至關(guān)重要的一個環(huán)節(jié)，視覺設(shè)計會直接影響用戶對產(chǎn)品建立信任的程度和初步印象。主題明確、結(jié)構(gòu)主次分明、色彩搭配舒適的界面能更快吸引用戶的目光。因此，就要求設(shè)計師在進(jìn)行視覺設(shè)計時，從用戶的角度考慮問題，要想獲得更高的用戶黏度，除了要抓住用戶的“痛點”，還要考慮到用戶群體的操作習(xí)慣、思維方式和使用環(huán)境，用最優(yōu)的色彩、文字排版形式來提升網(wǎng)站可用性，為用戶帶來愉悅的瀏覽體驗，從而給用戶留下深刻印象，吸引用戶再次訪問。

3.1 結(jié)構(gòu)清晰 閱讀舒適

設(shè)計的核心意義和價值在于能夠向用戶輸送信息，引導(dǎo)用戶的操作行為，從而達(dá)到滿足用戶需求的目的。設(shè)計與純藝術(shù)是有一定差別的，設(shè)計的本質(zhì)是為大眾服務(wù)，所以視覺層面上信息傳達(dá)是否清晰、體驗是否舒服尤為重要。因此，也要求設(shè)計師在著手進(jìn)行設(shè)計之前，進(jìn)行充分的用戶研究，盡可能避免因視覺上的某些不合理性而影響到用戶對產(chǎn)品的整體印象，產(chǎn)生抵觸情緒。例如，圖1中的兩個產(chǎn)品界面設(shè)計，界面主色色調(diào)較淺，上面的白色文字閱讀性很差，閱讀會很費(fèi)力，左邊界面，每個圖片的主題文字和發(fā)布時間閱讀性相對都較弱，右邊界面，層次相對不是很清晰，推薦一下、關(guān)注、分享的引導(dǎo)性較弱，整體的用戶體驗會大打折扣。

3.2 化繁為簡 易于接受

隨著技術(shù)的飛速發(fā)展，越來越多的用戶群體習(xí)慣在網(wǎng)上查找資料、瀏覽新聞、購物等。人們對于生活品質(zhì)的要求也隨之提高，新的交互設(shè)計形式層出不窮，越來越多的創(chuàng)新思維被應(yīng)用到實際項目中。這些設(shè)計形式往往可以使產(chǎn)品變得更加生動和富有趣味性，但有些時候設(shè)計的裝飾性過度，掩蓋了原本的內(nèi)容及功能性，用戶在瀏覽操作上相對難以找到需求點，用戶體驗往往會大打折扣。設(shè)計沒有非常統(tǒng)一的標(biāo)準(zhǔn)去評判其優(yōu)劣，只有在用戶的使用過程中，通過用戶的體驗反饋，才能夠得知產(chǎn)品是否被大眾所喜愛，大眾易于接受的產(chǎn)品才能算得上是優(yōu)秀的產(chǎn)品。產(chǎn)品的設(shè)計中會涉及很多的操作行為，如果界面上有多余的元素很有可能就會形成誤導(dǎo)和阻礙。所以，在設(shè)計時不應(yīng)過分關(guān)注多余的裝飾，要化繁為簡，突出重點內(nèi)容，簡化界面，使之簡潔明了，排除了用戶的諸多閱讀障礙，體驗感自然隨之提高！例如，圖2所示的界面設(shè)計，界面簡潔明快，沒有多余的設(shè)計元素，在色彩、文字、按鈕、圖片上都進(jìn)行了精細(xì)處理，可以說是一款用戶體驗良好的產(chǎn)品。

4 結(jié)語

用戶體驗無處不在，在科學(xué)技術(shù)迅猛發(fā)展的時代背景下，用戶對于產(chǎn)品的需求越來越高。這大大提高了設(shè)計出更具吸引力的、用戶體驗更好的產(chǎn)品的難度。面對復(fù)雜多變的外部環(huán)境，傳統(tǒng)的產(chǎn)品設(shè)計方法已經(jīng)不能適應(yīng)當(dāng)今的社會發(fā)展形勢，設(shè)計師們要擁有產(chǎn)品思維，做設(shè)計早已不再是單純地從審美角度出發(fā)，更需要全方位、多角度地去考慮實際問題，為用戶提供更加便捷高效的解決方案，這才是產(chǎn)品本身所應(yīng)關(guān)注的問題。

參考文獻(xiàn)：

[1] 余小芬.網(wǎng)頁設(shè)計風(fēng)格的審美效應(yīng)[J].大眾文藝，2012.

[2] 特里斯（美），阿伯特（美）.用戶體驗度量[M].周榮剛，譯.機(jī)械工業(yè)出版社，2009.

[3] 霍夫曼（美）.瞬間之美：Web界面設(shè)計如何讓用戶心動[M].向怡寧，譯.人民郵電出版社，2009.

[4] 隋涌.互聯(lián)網(wǎng)產(chǎn)品視覺設(shè)計[M].清華大學(xué)出版社，2015.