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

1、    基于用戶體驗的移動端ui設(shè)計研究    馬文杰+韓帆【摘 要】本文以塑造良好的用戶體驗為基本理念，通過對具體案例進行分析，并結(jié)合平日設(shè)計實踐，總結(jié)出幾點以良好用戶體驗為導向的ui設(shè)計思路。從而打破了傳統(tǒng)ui設(shè)計重功能輕體驗的設(shè)計原則，使移動端ui設(shè)計更加“打動人心”，對基于用戶體驗的移動端ui設(shè)計具有指導作用和借鑒意義?！娟P(guān)鍵詞】移動端ui設(shè)計；用戶體驗；情感化設(shè)計：tp302 文獻標志碼：a ：1007-0125（2017）22-0218-02隨著移動技術(shù)的迅猛發(fā)展，3g、4g等通信技術(shù)的廣泛應(yīng)用，移動數(shù)字媒體技術(shù)迎來了空前的發(fā)展。在此背景下，

2、手機等移動終端正逐漸改變?nèi)祟惖纳罘绞剑瑹o論是學習、閱讀，還是交際、購物，甚至是理財，都由最初的線下轉(zhuǎn)向了流行的移動終端。為了滿足用戶的需要，移動端各類app的功能愈加豐富，但是，面對這些錯綜復雜功能，步驟繁瑣的操作，用戶常常無所適從。如何既可以合理容納app中各類復雜的功能，便于用戶理解，又可以使操作更加便捷呢？設(shè)計合理且美觀的ui界面，無疑是一種有效的解決方式。所以如何讓用戶感受更加舒適的使用體驗應(yīng)是當今移動端ui設(shè)計的重要研究方向。一、何為“用戶體驗”用戶體驗（user experience，簡稱ue）是用戶在使用產(chǎn)品過程中對產(chǎn)品產(chǎn)生的直觀感受。這一概念是由20世紀90年代中期的一位用戶

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

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

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

6、戶帶來更強的幸福感和更深的代入感。一次良好的用戶體驗，不僅可以吸引用戶二次光顧，還可以成為產(chǎn)品的傳播者，在這個人人都是自媒體的時代，每個人都具有強大的信息傳播能力，由于一次良好的體驗，會為產(chǎn)品帶來更多新的用戶。四、如何通過移動端ui設(shè)計“打動人心”隨著技術(shù)的不斷發(fā)展，數(shù)字媒體產(chǎn)品的開發(fā)周期越來越短，這就出現(xiàn)在同一類產(chǎn)品中存在多個品牌。如何從競爭中脫穎而出，除了增加新穎的產(chǎn)品功能外，能夠與用戶建立情感溝通的ui設(shè)計也是一個行之有效的方法。那么如何才能令移動端ui設(shè)計更能“打動人心”？（一）提高用戶的操作效率。首先，提高用戶做出正確操作的幾率，減少不必要的操作，以最為簡潔的方式完成用戶的操作目的。

7、其中最簡單的方法就是遵從用戶的操作習慣。由于大多數(shù)用戶在此之前都使用過各類軟件，從而形成一個習慣的操作模式。例如，“返回”按鈕大多在界面左上角，而一些拓展菜單則大多在界面右上角。由于長時間的操作習慣，在操作時，用戶會本能在左上角尋找“返回”按鈕。其次，要減少用戶的點擊次數(shù)。如圖1所示，這是時下兩款流行的點餐軟件餓了么和美團的點餐頁面，如果想要使用訂單查詢這一功能，由于美團導航頁位于界面下方，因此只需點擊一次，而餓了么則是抽屜式菜單，因此需要點擊兩次。雖然相比傳統(tǒng)導航，抽屜式導航更加節(jié)省頁面，但是也增加了用戶的操作次數(shù)，對一些不熟悉此功能的用戶造成了不必要的操作障礙，降低了用戶體驗。最后，并不是

8、所有用戶網(wǎng)絡(luò)狀況都良好，某些地方可能無法正常接收4g信號，這些用戶想要用有限的流量瀏覽一些圖片就會很困難，優(yōu)秀的用戶體驗就應(yīng)照顧到這一群體，如，再刷新一篇文章時可以先刷新出一些關(guān)鍵性的，或者占用流量較少的信息，而一些視頻圖片等需要占用大流量的信息則可以隨后刷出或者不刷新。（二）降低用戶的犯錯幾率。每一個用戶在使用軟件時都會出現(xiàn)錯誤，如何減少用戶的犯錯幾率，或者給予錯誤一些挽回的方式，也會有效提高用戶體驗。例如，遵從用戶的使用習慣，降低界面的復雜度，就是一個有效且直接的方法。此外，在推出一個新功能時，簡潔明了的功能引導頁也是行之有效的方法，這些功能引導不但可以使有經(jīng)驗的用戶盡快熟悉新功能，也可以

9、讓一部分新用戶了解此軟件的操作方式。好的引導頁可以大大增加用戶的操作效率，提升用戶體驗。如圖2所示，由于產(chǎn)品加入一些新的功能按鈕和操作方式，因此在新版本更新后，打開軟件會出現(xiàn)一個使用說明類的引導頁。頁面介紹簡單明了，可以讓用戶快速了解新功能，避免操作錯誤，同時引導頁字體使用手寫體，更具親近感，在情感上拉近了產(chǎn)品與用戶的距離。 除了必要的引導頁，逃生按鈕也可以使操作界面更加“打動人心”。每一個用戶在操作時出現(xiàn)失誤是在所難免的，這時逃生按鈕就顯得至關(guān)重要，它可以使用戶撤銷此次操作，返回上一步重新開始。（三）簡潔直觀的操作界面。用戶在認識一款移動端產(chǎn)品時，除了產(chǎn)品的具體功能，第一印象往往來自于產(chǎn)品的

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

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

12、就軟件本身的功能而言，就極具情懷，可以讓用戶輕松制作出具有藝術(shù)感的明信片，同時在界面設(shè)計上大量留白，刪掉了不必要的按鈕，使界面干凈清新，意味深刻，頗有佛家禪意。這樣別具一格的設(shè)計，令用戶眼前一亮，關(guān)注點不僅是產(chǎn)品本身的功能，更有產(chǎn)品為用戶帶來的情感觸動。五、結(jié)語ui設(shè)計在移動端的數(shù)字媒體產(chǎn)品設(shè)計中是關(guān)鍵的一環(huán)。面對技術(shù)的不斷更新、用戶需求的不斷提高，需要設(shè)計師在設(shè)計時關(guān)注用戶體驗，并基于用戶的情感因素，對設(shè)計進行修改與革新，以符合不同時期、不同用戶的需求。ui設(shè)計的最終目的就是令用戶操作起來更加方便，其形式是區(qū)域簡潔化、實用化，在此基礎(chǔ)上注重設(shè)計的美感。照此趨勢，最終ui設(shè)計就是省去不必要的界面，讓用戶在體驗功能的同時享受快樂。感謝以下項目支持：江蘇省社科應(yīng)用研究精品工程課題，17sya-033。江蘇省大學生實踐創(chuàng)新訓練計劃重點項目，201710300009。參考文獻：1周峰，李秀梅.以用戶體驗為導向的電商界面情感化設(shè)計m.設(shè)計， 2015，（3）：122-123.2肖施然.設(shè)計與用戶體驗m.金田，2015（5）.