基于用戶體驗(yàn)的移動端UI設(shè)計研究

馬文杰+韓帆

【摘 要】本文以塑造良好的用戶體驗(yàn)為基本理念，通過對具體案例進(jìn)行分析，并結(jié)合平日設(shè)計實(shí)踐，總結(jié)出幾點(diǎn)以良好用戶體驗(yàn)為導(dǎo)向的UI設(shè)計思路。從而打破了傳統(tǒng)UI設(shè)計重功能輕體驗(yàn)的設(shè)計原則，使移動端UI設(shè)計更加“打動人心”，對基于用戶體驗(yàn)的移動端UI設(shè)計具有指導(dǎo)作用和借鑒意義。

【關(guān)鍵詞】移動端UI設(shè)計；用戶體驗(yàn)；情感化設(shè)計

中圖分類號：TP302 文獻(xiàn)標(biāo)志碼：A 文章編號：1007-0125（2017）22-0218-02

隨著移動技術(shù)的迅猛發(fā)展，3G、4G等通信技術(shù)的廣泛應(yīng)用，移動數(shù)字媒體技術(shù)迎來了空前的發(fā)展。在此背景下，手機(jī)等移動終端正逐漸改變?nèi)祟惖纳罘绞?，無論是學(xué)習(xí)、閱讀，還是交際、購物，甚至是理財，都由最初的線下轉(zhuǎn)向了流行的移動終端。為了滿足用戶的需要，移動端各類APP的功能愈加豐富，但是，面對這些錯綜復(fù)雜功能，步驟繁瑣的操作，用戶常常無所適從。如何既可以合理容納APP中各類復(fù)雜的功能，便于用戶理解，又可以使操作更加便捷呢？設(shè)計合理且美觀的UI界面，無疑是一種有效的解決方式。所以如何讓用戶感受更加舒適的使用體驗(yàn)應(yīng)是當(dāng)今移動端UI設(shè)計的重要研究方向。

一、何為“用戶體驗(yàn)”

用戶體驗(yàn)（User Experience，簡稱UE）是用戶在使用產(chǎn)品過程中對產(chǎn)品產(chǎn)生的直觀感受。這一概念是由20世紀(jì)90年代中期的一位用戶體驗(yàn)設(shè)計師唐納德·諾曼提出的，并最早被廣泛認(rèn)知。用戶體驗(yàn)涉及的范圍很廣，大到一個城市公交車線路的規(guī)劃、展館內(nèi)展區(qū)位置的安排、圖書館內(nèi)導(dǎo)視系統(tǒng)的設(shè)計，小至屋內(nèi)桌椅高度差的確定、數(shù)碼產(chǎn)品不同功能的按鈕位置的次序、網(wǎng)頁表單填寫后信息的反饋。從移動端UI設(shè)計來講，“用戶體驗(yàn)”就是，用戶在使用一款移動端APP時的使用體驗(yàn)，如它的頁面布局用起來是否方便？它的界面是否通俗易懂？它的整體界面用起來感覺如何？好的視覺體驗(yàn)不僅可以吸引更多的新用戶，還能促使用戶二次光顧。因此可以說，好的“用戶體驗(yàn)”可以帶來不可限量的商機(jī)。

二、多平臺移動端UI設(shè)計

UI即User Interface（用戶界面）的簡稱。UI設(shè)計是基于人機(jī)交互、操作流程、界面美觀的整體性設(shè)計，其中涉及的理論知識也是多種多樣，例如，用戶心理學(xué)、色彩心理學(xué)、設(shè)計學(xué)等。好的UI設(shè)計不僅可以滿足用戶對于數(shù)字媒體產(chǎn)品的視覺需求，同時也可以提升產(chǎn)品檔次，增強(qiáng)產(chǎn)品的識別度，還能使操作更加舒適、方便。隨著移動媒體的迅猛發(fā)展，移動端也向著多平臺化演變。移動端已不僅僅局限于手機(jī)、平板電腦，如蘋果公司于2014年9月發(fā)布的iwatch、谷歌公司于2012年4月發(fā)布的Google Project Glass等，這些設(shè)備也對UI設(shè)計提出了更高的要求，界面不僅是傳統(tǒng)的比例，一些傳統(tǒng)的界面設(shè)計原則也將不再適用。因此，對于移動端的UI設(shè)計進(jìn)行深入研究勢在必行。

三、用戶情感因素對移動端UI設(shè)計的影響

說到用戶體驗(yàn)，就要從用戶的情感因素出發(fā)，對產(chǎn)品界面進(jìn)行策劃。凱文·凱利在《失控》中提到：“機(jī)器，正在生物化；而生物，正在機(jī)器化?！毙畔r代，人機(jī)交互逐漸代替人與人之間傳統(tǒng)的面對面交流，當(dāng)人們不再面對面交流時，對界面的情感要求越來越高。優(yōu)秀的移動端UI設(shè)計，應(yīng)該從用戶體驗(yàn)的表現(xiàn)層、框架層、結(jié)構(gòu)層、范圍層、戰(zhàn)略層進(jìn)行細(xì)致策劃，使產(chǎn)品可以與用戶產(chǎn)生“親切”溝通，與人的情感產(chǎn)生“碰撞”，使數(shù)字媒體產(chǎn)品不再是一個冷冰冰的“物”，而是一個更懂得用戶的“老友”。

充分考慮用戶情感因素的UI設(shè)計，可以為數(shù)字媒體產(chǎn)品帶來更多的商機(jī)，在用戶使用產(chǎn)品時，良好的情感化設(shè)計可以為用戶帶來更強(qiáng)的幸福感和更深的代入感。一次良好的用戶體驗(yàn)，不僅可以吸引用戶二次光顧，還可以成為產(chǎn)品的傳播者，在這個人人都是自媒體的時代，每個人都具有強(qiáng)大的信息傳播能力，由于一次良好的體驗(yàn)，會為產(chǎn)品帶來更多新的用戶。

四、如何通過移動端UI設(shè)計“打動人心”

隨著技術(shù)的不斷發(fā)展，數(shù)字媒體產(chǎn)品的開發(fā)周期越來越短，這就出現(xiàn)在同一類產(chǎn)品中存在多個品牌。如何從競爭中脫穎而出，除了增加新穎的產(chǎn)品功能外，能夠與用戶建立情感溝通的UI設(shè)計也是一個行之有效的方法。那么如何才能令移動端UI設(shè)計更能“打動人心”？

（一）提高用戶的操作效率。首先，提高用戶做出正確操作的幾率，減少不必要的操作，以最為簡潔的方式完成用戶的操作目的。其中最簡單的方法就是遵從用戶的操作習(xí)慣。由于大多數(shù)用戶在此之前都使用過各類軟件，從而形成一個習(xí)慣的操作模式。例如，“返回”按鈕大多在界面左上角，而一些拓展菜單則大多在界面右上角。由于長時間的操作習(xí)慣，在操作時，用戶會本能在左上角尋找“返回”按鈕。

其次，要減少用戶的點(diǎn)擊次數(shù)。如圖1所示，這是時下兩款流行的點(diǎn)餐軟件——餓了么和美團(tuán)的點(diǎn)餐頁面，如果想要使用訂單查詢這一功能，由于美團(tuán)導(dǎo)航頁位于界面下方，因此只需點(diǎn)擊一次，而餓了么則是抽屜式菜單，因此需要點(diǎn)擊兩次。雖然相比傳統(tǒng)導(dǎo)航，抽屜式導(dǎo)航更加節(jié)省頁面，但是也增加了用戶的操作次數(shù)，對一些不熟悉此功能的用戶造成了不必要的操作障礙，降低了用戶體驗(yàn)。

最后，并不是所有用戶網(wǎng)絡(luò)狀況都良好，某些地方可能無法正常接收4G信號，這些用戶想要用有限的流量瀏覽一些圖片就會很困難，優(yōu)秀的用戶體驗(yàn)就應(yīng)照顧到這一群體，如，再刷新一篇文章時可以先刷新出一些關(guān)鍵性的，或者占用流量較少的信息，而一些視頻圖片等需要占用大流量的信息則可以隨后刷出或者不刷新。

（二）降低用戶的犯錯幾率。每一個用戶在使用軟件時都會出現(xiàn)錯誤，如何減少用戶的犯錯幾率，或者給予錯誤一些挽回的方式，也會有效提高用戶體驗(yàn)。例如，遵從用戶的使用習(xí)慣，降低界面的復(fù)雜度，就是一個有效且直接的方法。此外，在推出一個新功能時，簡潔明了的功能引導(dǎo)頁也是行之有效的方法，這些功能引導(dǎo)不但可以使有經(jīng)驗(yàn)的用戶盡快熟悉新功能，也可以讓一部分新用戶了解此軟件的操作方式。好的引導(dǎo)頁可以大大增加用戶的操作效率，提升用戶體驗(yàn)。如圖2所示，由于產(chǎn)品加入一些新的功能按鈕和操作方式，因此在新版本更新后，打開軟件會出現(xiàn)一個使用說明類的引導(dǎo)頁。頁面介紹簡單明了，可以讓用戶快速了解新功能，避免操作錯誤，同時引導(dǎo)頁字體使用手寫體，更具親近感，在情感上拉近了產(chǎn)品與用戶的距離。

除了必要的引導(dǎo)頁，逃生按鈕也可以使操作界面更加“打動人心”。每一個用戶在操作時出現(xiàn)失誤是在所難免的，這時逃生按鈕就顯得至關(guān)重要，它可以使用戶撤銷此次操作，返回上一步重新開始。

（三）簡潔直觀的操作界面。用戶在認(rèn)識一款移動端產(chǎn)品時，除了產(chǎn)品的具體功能，第一印象往往來自于產(chǎn)品的外觀。在進(jìn)行界面設(shè)計前，應(yīng)做好充分的市場調(diào)研，了解用戶的喜好和操作習(xí)慣。根據(jù)調(diào)研結(jié)果，選擇好一個產(chǎn)品的主色調(diào)至關(guān)重要，例如，商務(wù)型產(chǎn)品就應(yīng)選擇穩(wěn)重深沉的配色，而針對年輕人的產(chǎn)品，色調(diào)則應(yīng)活潑，彰顯青春。當(dāng)下各類移動端產(chǎn)品都找到一個屬于自己的品牌色調(diào)，如淘寶橙、美團(tuán)綠、ofo黃，這些品牌色不僅符合此品牌的產(chǎn)品理念，同時也迎合了產(chǎn)品受眾的喜好，使用戶對該品牌留下了深刻的影響。有了一個合適的主色調(diào)，合理的界面布局也就必不可少。例如，手機(jī)是最常用的移動端設(shè)備，人們在操作手機(jī)時大多使用拇指，由于手的大小限制，手機(jī)界面操作的熱區(qū)大多集中在界面右下角，因此在界面設(shè)計時，就需要把主要功能、常用功能放入操作熱區(qū)，使大多數(shù)操作可以一手完成。

（四）為設(shè)計注入情懷。設(shè)計本身就是一項(xiàng)具有情懷的工作，“打動人心”的設(shè)計會在某些情感點(diǎn)上觸動用戶的內(nèi)心。越來越多的用戶已不僅僅滿足于完善齊備的功能，更會在意移動應(yīng)用背后的故事，產(chǎn)品的視覺設(shè)計是否可以引起共鳴。好的設(shè)計在策劃之初就會被注入情懷，在設(shè)計的同時，不光關(guān)注用戶的操作體驗(yàn)，更要關(guān)注用戶的情感體驗(yàn)。例如，時下火爆的音樂播放器網(wǎng)易云音樂，它在每首歌的下方設(shè)置了評論區(qū)，每一位聽到歌曲的人在評論區(qū)寫下自己的感悟，而這些感悟又會激起更多用戶的共鳴。此時這款產(chǎn)品不僅是聽音樂的平臺，更是寄托了無數(shù)用戶的情懷。

如圖3所示，這是一款照片編輯軟件，同時也可以制作屬于自己的明信片，就軟件本身的功能而言，就極具情懷，可以讓用戶輕松制作出具有藝術(shù)感的明信片，同時在界面設(shè)計上大量留白，刪掉了不必要的按鈕，使界面干凈清新，意味深刻，頗有佛家禪意。這樣別具一格的設(shè)計，令用戶眼前一亮，關(guān)注點(diǎn)不僅是產(chǎn)品本身的功能，更有產(chǎn)品為用戶帶來的情感觸動。

五、結(jié)語

UI設(shè)計在移動端的數(shù)字媒體產(chǎn)品設(shè)計中是關(guān)鍵的一環(huán)。面對技術(shù)的不斷更新、用戶需求的不斷提高，需要設(shè)計師在設(shè)計時關(guān)注用戶體驗(yàn)，并基于用戶的情感因素，對設(shè)計進(jìn)行修改與革新，以符合不同時期、不同用戶的需求。

UI設(shè)計的最終目的就是令用戶操作起來更加方便，其形式是區(qū)域簡潔化、實(shí)用化，在此基礎(chǔ)上注重設(shè)計的美感。照此趨勢，最終UI設(shè)計就是省去不必要的界面，讓用戶在體驗(yàn)功能的同時享受快樂。

感謝以下項(xiàng)目支持：

江蘇省社科應(yīng)用研究精品工程課題，17SYA-033。

江蘇省大學(xué)生實(shí)踐創(chuàng)新訓(xùn)練計劃重點(diǎn)項(xiàng)目，201710300009。

參考文獻(xiàn)：

[1]周峰，李秀梅.以用戶體驗(yàn)為導(dǎo)向的電商界面情感化設(shè)計[M].設(shè)計， 2015，（3）：122-123.

[2]肖施然.設(shè)計與用戶體驗(yàn)[M].金田，2015（5）.

[3] 賀景衛(wèi)，成文昊.以接受美學(xué)的角度探討用戶體驗(yàn)設(shè)計[M].藝術(shù)科技，2015，（6）：11.

[4]趙森，王婷.如何提高網(wǎng)站的用戶體驗(yàn)[M].城市建設(shè)理論研究（電子版），2011（14）.

[5]李雪蓮，楊真，許佳. c2c電子商務(wù)平臺用戶體驗(yàn)設(shè)計研究[M].美術(shù)界，2013，（6）：102.

[6]羅毅.閉合用戶體驗(yàn)研究[M].華東理工大學(xué)學(xué)報（社會科學(xué)版），2011，26（2）：111-116.