...東商城手機(jī)客戶端UI設(shè)計(jì)評(píng)測(cè)報(bào)告
馬文杰+韓帆
【摘 要】本文以塑造良好的用戶體驗(yàn)為基本理念，通過(guò)對(duì)具體案例進(jìn)行分析，并結(jié)合平日設(shè)計(jì)實(shí)踐，總結(jié)出幾點(diǎn)以良好用戶體驗(yàn)為導(dǎo)向的UI設(shè)計(jì)思路。從而打破了傳統(tǒng)UI設(shè)計(jì)重功能輕體驗(yàn)的設(shè)計(jì)原則，使移動(dòng)端UI設(shè)計(jì)更加“打動(dòng)人心”，對(duì)基于用戶體驗(yàn)的移動(dòng)端UI設(shè)計(jì)具有指導(dǎo)作用和借鑒意義。
【關(guān)鍵詞】移動(dòng)端UI設(shè)計(jì)；用戶體驗(yàn)；情感化設(shè)計(jì)
中圖分類(lèi)號(hào)：TP302 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：1007-0125（2017）22-0218-02
隨著移動(dòng)技術(shù)的迅猛發(fā)展，3G、4G等通信技術(shù)的廣泛應(yīng)用，移動(dòng)數(shù)字媒體技術(shù)迎來(lái)了空前的發(fā)展。在此背景下，手機(jī)等移動(dòng)終端正逐漸改變?nèi)祟?lèi)的生活方式，無(wú)論是學(xué)習(xí)、閱讀，還是交際、購(gòu)物，甚至是理財(cái)，都由最初的線下轉(zhuǎn)向了流行的移動(dòng)終端。為了滿足用戶的需要，移動(dòng)端各類(lèi)APP的功能愈加豐富，但是，面對(duì)這些錯(cuò)綜復(fù)雜功能，步驟繁瑣的操作，用戶常常無(wú)所適從。如何既可以合理容納APP中各類(lèi)復(fù)雜的功能，便于用戶理解，又可以使操作更加便捷呢？設(shè)計(jì)合理且美觀的UI界面，無(wú)疑是一種有效的解決方式。所以如何讓用戶感受更加舒適的使用體驗(yàn)應(yīng)是當(dāng)今移動(dòng)端UI設(shè)計(jì)的重要研究方向。
一、何為“用戶體驗(yàn)”
用戶體驗(yàn)（User Experience，簡(jiǎn)稱UE）是用戶在使用產(chǎn)品過(guò)程中對(duì)產(chǎn)品產(chǎn)生的直觀感受。這一概念是由20世紀(jì)90年代中期的一位用戶體驗(yàn)設(shè)計(jì)師唐納德·諾曼提出的，并最早被廣泛認(rèn)知。用戶體驗(yàn)涉及的范圍很廣，大到一個(gè)城市公交車(chē)線路的規(guī)劃、展館內(nèi)展區(qū)位置的安排、圖書(shū)館內(nèi)導(dǎo)視系統(tǒng)的設(shè)計(jì)，小至屋內(nèi)桌椅高度差的確定、數(shù)碼產(chǎn)品不同功能的按鈕位置的次序、網(wǎng)頁(yè)表單填寫(xiě)后信息的反饋。從移動(dòng)端UI設(shè)計(jì)來(lái)講，“用戶體驗(yàn)”就是，用戶在使用一款移動(dòng)端APP時(shí)的使用體驗(yàn)，如它的頁(yè)面布局用起來(lái)是否方便？它的界面是否通俗易懂？它的整體界面用起來(lái)感覺(jué)如何？好的視覺(jué)體驗(yàn)不僅可以吸引更多的新用戶，還能促使用戶二次光顧。因此可以說(shuō)，好的“用戶體驗(yàn)”可以帶來(lái)不可限量的商機(jī)。
二、多平臺(tái)移動(dòng)端UI設(shè)計(jì)
UI即User Interface（用戶界面）的簡(jiǎn)稱。UI設(shè)計(jì)是基于人機(jī)交互、操作流程、界面美觀的整體性設(shè)計(jì)，其中涉及的理論知識(shí)也是多種多樣，例如，用戶心理學(xué)、色彩心理學(xué)、設(shè)計(jì)學(xué)等。好的UI設(shè)計(jì)不僅可以滿足用戶對(duì)于數(shù)字媒體產(chǎn)品的視覺(jué)需求，同時(shí)也可以提升產(chǎn)品檔次，增強(qiáng)產(chǎn)品的識(shí)別度，還能使操作更加舒適、方便。隨著移動(dòng)媒體的迅猛發(fā)展，移動(dòng)端也向著多平臺(tái)化演變。移動(dòng)端已不僅僅局限于手機(jī)、平板電腦，如蘋(píng)果公司于2014年9月發(fā)布的iwatch、谷歌公司于2012年4月發(fā)布的Google Project Glass等，這些設(shè)備也對(duì)UI設(shè)計(jì)提出了更高的要求，界面不僅是傳統(tǒng)的比例，一些傳統(tǒng)的界面設(shè)計(jì)原則也將不再適用。因此，對(duì)于移動(dòng)端的UI設(shè)計(jì)進(jìn)行深入研究勢(shì)在必行。
三、用戶情感因素對(duì)移動(dòng)端UI設(shè)計(jì)的影響
說(shuō)到用戶體驗(yàn)，就要從用戶的情感因素出發(fā)，對(duì)產(chǎn)品界面進(jìn)行策劃。凱文·凱利在《失控》中提到：“機(jī)器，正在生物化；而生物，正在機(jī)器化。”信息時(shí)代，人機(jī)交互逐漸代替人與人之間傳統(tǒng)的面對(duì)面交流，當(dāng)人們不再面對(duì)面交流時(shí)，對(duì)界面的情感要求越來(lái)越高。優(yōu)秀的移動(dòng)端UI設(shè)計(jì)，應(yīng)該從用戶體驗(yàn)的表現(xiàn)層、框架層、結(jié)構(gòu)層、范圍層、戰(zhàn)略層進(jìn)行細(xì)致策劃，使產(chǎn)品可以與用戶產(chǎn)生“親切”溝通，與人的情感產(chǎn)生“碰撞”，使數(shù)字媒體產(chǎn)品不再是一個(gè)冷冰冰的“物”，而是一個(gè)更懂得用戶的“老友”。
充分考慮用戶情感因素的UI設(shè)計(jì)，可以為數(shù)字媒體產(chǎn)品帶來(lái)更多的商機(jī)，在用戶使用產(chǎn)品時(shí)，良好的情感化設(shè)計(jì)可以為用戶帶來(lái)更強(qiáng)的幸福感和更深的代入感。一次良好的用戶體驗(yàn)，不僅可以吸引用戶二次光顧，還可以成為產(chǎn)品的傳播者，在這個(gè)人人都是自媒體的時(shí)代，每個(gè)人都具有強(qiáng)大的信息傳播能力，由于一次良好的體驗(yàn)，會(huì)為產(chǎn)品帶來(lái)更多新的用戶。
四、如何通過(guò)移動(dòng)端UI設(shè)計(jì)“打動(dòng)人心”
隨著技術(shù)的不斷發(fā)展，數(shù)字媒體產(chǎn)品的開(kāi)發(fā)周期越來(lái)越短，這就出現(xiàn)在同一類(lèi)產(chǎn)品中存在多個(gè)品牌。如何從競(jìng)爭(zhēng)中脫穎而出，除了增加新穎的產(chǎn)品功能外，能夠與用戶建立情感溝通的UI設(shè)計(jì)也是一個(gè)行之有效的方法。那么如何才能令移動(dòng)端UI設(shè)計(jì)更能“打動(dòng)人心”？
（一）提高用戶的操作效率。首先，提高用戶做出正確操作的幾率，減少不必要的操作，以最為簡(jiǎn)潔的方式完成用戶的操作目的。其中最簡(jiǎn)單的方法就是遵從用戶的操作習(xí)慣。由于大多數(shù)用戶在此之前都使用過(guò)各類(lèi)軟件，從而形成一個(gè)習(xí)慣的操作模式。例如，“返回”按鈕大多在界面左上角，而一些拓展菜單則大多在界面右上角。由于長(zhǎng)時(shí)間的操作習(xí)慣，在操作時(shí)，用戶會(huì)本能在左上角尋找“返回”按鈕。
其次，要減少用戶的點(diǎn)擊次數(shù)。如圖1所示，這是時(shí)下兩款流行的點(diǎn)餐軟件——餓了么和美團(tuán)的點(diǎn)餐頁(yè)面，如果想要使用訂單查詢這一功能，由于美團(tuán)導(dǎo)航頁(yè)位于界面下方，因此只需點(diǎn)擊一次，而餓了么則是抽屜式菜單，因此需要點(diǎn)擊兩次。雖然相比傳統(tǒng)導(dǎo)航，抽屜式導(dǎo)航更加節(jié)省頁(yè)面，但是也增加了用戶的操作次數(shù)，對(duì)一些不熟悉此功能的用戶造成了不必要的操作障礙，降低了用戶體驗(yàn)。
最后，并不是所有用戶網(wǎng)絡(luò)狀況都良好，某些地方可能無(wú)法正常接收4G信號(hào)，這些用戶想要用有限的流量瀏覽一些圖片就會(huì)很困難，優(yōu)秀的用戶體驗(yàn)就應(yīng)照顧到這一群體，如，再刷新一篇文章時(shí)可以先刷新出一些關(guān)鍵性的，或者占用流量較少的信息，而一些視頻圖片等需要占用大流量的信息則可以隨后刷出或者不刷新。
（二）降低用戶的犯錯(cuò)幾率。每一個(gè)用戶在使用軟件時(shí)都會(huì)出現(xiàn)錯(cuò)誤，如何減少用戶的犯錯(cuò)幾率，或者給予錯(cuò)誤一些挽回的方式，也會(huì)有效提高用戶體驗(yàn)。例如，遵從用戶的使用習(xí)慣，降低界面的復(fù)雜度，就是一個(gè)有效且直接的方法。此外，在推出一個(gè)新功能時(shí)，簡(jiǎn)潔明了的功能引導(dǎo)頁(yè)也是行之有效的方法，這些功能引導(dǎo)不但可以使有經(jīng)驗(yàn)的用戶盡快熟悉新功能，也可以讓一部分新用戶了解此軟件的操作方式。好的引導(dǎo)頁(yè)可以大大增加用戶的操作效率，提升用戶體驗(yàn)。如圖2所示，由于產(chǎn)品加入一些新的功能按鈕和操作方式，因此在新版本更新后，打開(kāi)軟件會(huì)出現(xiàn)一個(gè)使用說(shuō)明類(lèi)的引導(dǎo)頁(yè)。頁(yè)面介紹簡(jiǎn)單明了，可以讓用戶快速了解新功能，避免操作錯(cuò)誤，同時(shí)引導(dǎo)頁(yè)字體使用手寫(xiě)體，更具親近感，在情感上拉近了產(chǎn)品與用戶的距離。
除了必要的引導(dǎo)頁(yè)，逃生按鈕也可以使操作界面更加“打動(dòng)人心”。每一個(gè)用戶在操作時(shí)出現(xiàn)失誤是在所難免的，這時(shí)逃生按鈕就顯得至關(guān)重要，它可以使用戶撤銷(xiāo)此次操作，返回上一步重新開(kāi)始。
（三）簡(jiǎn)潔直觀的操作界面。用戶在認(rèn)識(shí)一款移動(dòng)端產(chǎn)品時(shí)，除了產(chǎn)品的具體功能，第一印象往往來(lái)自于產(chǎn)品的外觀。在進(jìn)行界面設(shè)計(jì)前，應(yīng)做好充分的市場(chǎng)調(diào)研，了解用戶的喜好和操作習(xí)慣。根據(jù)調(diào)研結(jié)果，選擇好一個(gè)產(chǎn)品的主色調(diào)至關(guān)重要，例如，商務(wù)型產(chǎn)品就應(yīng)選擇穩(wěn)重深沉的配色，而針對(duì)年輕人的產(chǎn)品，色調(diào)則應(yīng)活潑，彰顯青春。當(dāng)下各類(lèi)移動(dòng)端產(chǎn)品都找到一個(gè)屬于自己的品牌色調(diào)，如淘寶橙、美團(tuán)綠、ofo黃，這些品牌色不僅符合此品牌的產(chǎn)品理念，同時(shí)也迎合了產(chǎn)品受眾的喜好，使用戶對(duì)該品牌留下了深刻的影響。有了一個(gè)合適的主色調(diào)，合理的界面布局也就必不可少。例如，手機(jī)是最常用的移動(dòng)端設(shè)備，人們?cè)诓僮魇謾C(jī)時(shí)大多使用拇指，由于手的大小限制，手機(jī)界面操作的熱區(qū)大多集中在界面右下角，因此在界面設(shè)計(jì)時(shí)，就需要把主要功能、常用功能放入操作熱區(qū)，使大多數(shù)操作可以一手完成。
（四）為設(shè)計(jì)注入情懷。設(shè)計(jì)本身就是一項(xiàng)具有情懷的工作，“打動(dòng)人心”的設(shè)計(jì)會(huì)在某些情感點(diǎn)上觸動(dòng)用戶的內(nèi)心。越來(lái)越多的用戶已不僅僅滿足于完善齊備的功能，更會(huì)在意移動(dòng)應(yīng)用背后的故事，產(chǎn)品的視覺(jué)設(shè)計(jì)是否可以引起共鳴。好的設(shè)計(jì)在策劃之初就會(huì)被注入情懷，在設(shè)計(jì)的同時(shí)，不光關(guān)注用戶的操作體驗(yàn)，更要關(guān)注用戶的情感體驗(yàn)。例如，時(shí)下火爆的音樂(lè)播放器網(wǎng)易云音樂(lè)，它在每首歌的下方設(shè)置了評(píng)論區(qū)，每一位聽(tīng)到歌曲的人在評(píng)論區(qū)寫(xiě)下自己的感悟，而這些感悟又會(huì)激起更多用戶的共鳴。此時(shí)這款產(chǎn)品不僅是聽(tīng)音樂(lè)的平臺(tái)，更是寄托了無(wú)數(shù)用戶的情懷。
如圖3所示，這是一款照片編輯軟件，同時(shí)也可以制作屬于自己的明信片，就軟件本身的功能而言，就極具情懷，可以讓用戶輕松制作出具有藝術(shù)感的明信片，同時(shí)在界面設(shè)計(jì)上大量留白，刪掉了不必要的按鈕，使界面干凈清新，意味深刻，頗有佛家禪意。這樣別具一格的設(shè)計(jì)，令用戶眼前一亮，關(guān)注點(diǎn)不僅是產(chǎn)品本身的功能，更有產(chǎn)品為用戶帶來(lái)的情感觸動(dòng)。
五、結(jié)語(yǔ)
UI設(shè)計(jì)在移動(dòng)端的數(shù)字媒體產(chǎn)品設(shè)計(jì)中是關(guān)鍵的一環(huán)。面對(duì)技術(shù)的不斷更新、用戶需求的不斷提高，需要設(shè)計(jì)師在設(shè)計(jì)時(shí)關(guān)注用戶體驗(yàn)，并基于用戶的情感因素，對(duì)設(shè)計(jì)進(jìn)行修改與革新，以符合不同時(shí)期、不同用戶的需求。
UI設(shè)計(jì)的最終目的就是令用戶操作起來(lái)更加方便，其形式是區(qū)域簡(jiǎn)潔化、實(shí)用化，在此基礎(chǔ)上注重設(shè)計(jì)的美感。照此趨勢(shì)，最終UI設(shè)計(jì)就是省去不必要的界面，讓用戶在體驗(yàn)功能的同時(shí)享受快樂(lè)。
感謝以下項(xiàng)目支持：
江蘇省社科應(yīng)用研究精品工程課題，17SYA-033。
江蘇省大學(xué)生實(shí)踐創(chuàng)新訓(xùn)練計(jì)劃重點(diǎn)項(xiàng)目，201710300009。
參考文獻(xiàn)：
[1]周峰，李秀梅.以用戶體驗(yàn)為導(dǎo)向的電商界面情感化設(shè)計(jì)[M].設(shè)計(jì)， 2015，（3）：122-123.
[2]肖施然.設(shè)計(jì)與用戶體驗(yàn)[M].金田，2015（5）.
[3] 賀景衛(wèi)，成文昊.以接受美學(xué)的角度探討用戶體驗(yàn)設(shè)計(jì)[M].藝術(shù)科技，2015，（6）：11.
[4]趙森，王婷.如何提高網(wǎng)站的用戶體驗(yàn)[M].城市建設(shè)理論研究（電子版），2011（14）.
[5]李雪蓮，楊真，許佳. c2c電子商務(wù)平臺(tái)用戶體驗(yàn)設(shè)計(jì)研究[M].美術(shù)界，2013，（6）：102.
[6]羅毅.閉合用戶體驗(yàn)研究[M].華東理工大學(xué)學(xué)報(bào)（社會(huì)科學(xué)版），2011，26（2）：111-116.
