基于“用戶為中心”的手機(jī)界面視覺設(shè)計(jì)

吳 珊，賴劍峰

（廣東理工學(xué)院 藝術(shù)系，廣東 肇慶 526100）

用戶界面也稱人機(jī)界面，是人機(jī)交互、操作邏輯和界面表現(xiàn)的整體設(shè)計(jì)［1］。界面是在人機(jī)交互過程中，強(qiáng)調(diào)用戶體驗(yàn)，并為用戶提供具有視覺、色彩和布局可視界面。而手機(jī)界面設(shè)計(jì)是用戶與手機(jī)系統(tǒng)、應(yīng)用交互的窗口，為移動社交和購物娛樂等提供第三方終端服務(wù)。手機(jī)操作系統(tǒng)界面設(shè)計(jì)，廣義是指對手機(jī)智能操作系統(tǒng)的整體風(fēng)格、細(xì)節(jié)圖標(biāo)、元素的全面把握，實(shí)現(xiàn)人機(jī)交互方式向三維、多通道方向發(fā)展，深入挖掘用戶需求，注重用戶特征分析，關(guān)注用戶心理感受，以達(dá)到讓用戶享受人機(jī)交流的愉悅體驗(yàn)。當(dāng)前，手機(jī)界面的視覺設(shè)計(jì)仍然忽略對用戶體驗(yàn)結(jié)構(gòu)模型的分析，對界面總體風(fēng)格的策劃思路不明確，缺乏對用戶興趣點(diǎn)的發(fā)掘乃至使用情況的數(shù)據(jù)分析。

一、手機(jī)交互界面的設(shè)計(jì)內(nèi)容

智能化的生活產(chǎn)品越來越豐富，人們注重自身的參與感和產(chǎn)品體驗(yàn)的滿足感，尋求對功能性滿足之上的心理滿足，人們的智能需求得到極大的激發(fā)［2］。手機(jī)界面是用戶與程序溝通的唯一途徑，要能為用戶提供方便有效的服務(wù)。移動終端第三方軟件的界面設(shè)計(jì)主要包含圖標(biāo)設(shè)計(jì)、歡迎界面、主界面風(fēng)格、內(nèi)部細(xì)節(jié)框架、交互方式五個方面的內(nèi)容。人機(jī)交互科技的發(fā)展，人們對審美、趣味、時尚的不斷追求，界面交互種類繁多，形式也越來越多樣化。在人機(jī)交互世界中，手機(jī)交互APP的本質(zhì)仍然是建立起計(jì)算機(jī)世界與真實(shí)世界的一種隱喻或折射關(guān)系，界面圖標(biāo)作為整個交互界面的門面，與用戶第一時間直接發(fā)生信息識別，具有高度濃縮傳達(dá)信息的特點(diǎn)，無需依賴回憶系統(tǒng)指令的視覺元素，直接減低記憶負(fù)荷，以明示或者隱喻的方式傳達(dá)含義，提高視覺目標(biāo)搜索率。

二、市場細(xì)化應(yīng)以用戶為中心

在互聯(lián)網(wǎng)思維時代，大眾和小眾用戶各占一定的市場份額，設(shè)計(jì)師不得不將用戶的利益和需求放在設(shè)計(jì)的每一環(huán)節(jié)，遵循“以用戶為中心”的理念，衍射整個界面設(shè)計(jì)的流程。為獲取用戶對界面使用的需求，項(xiàng)目組采用問卷調(diào)查、網(wǎng)絡(luò)數(shù)據(jù)分析和用戶訪談結(jié)合的方式進(jìn)行研究，總結(jié)不同用戶群體對其界面的需求，從而指導(dǎo)界面設(shè)計(jì)中視覺設(shè)計(jì)的標(biāo)準(zhǔn)和原則。根據(jù)用戶的需求、用戶使用習(xí)慣、用戶的網(wǎng)絡(luò)思維、用戶情感體驗(yàn)等的調(diào)查，從用戶個體的文化背景、知識水平、文化喜好等層次，確立不同參考體系下用戶結(jié)構(gòu)，分析心理狀況和認(rèn)知過程的變化，最終實(shí)現(xiàn)方案［3］。通過對目前常用的 Andriod、IOS以及Windows Phone三大手機(jī)操作系統(tǒng)界面設(shè)計(jì)風(fēng)格的分析，可知影響用戶體驗(yàn)有三個要素：

（一）風(fēng)格統(tǒng)一的界面

界面風(fēng)格是用戶和系統(tǒng)進(jìn)行交互平臺的視覺設(shè)計(jì)風(fēng)格，所有產(chǎn)品信息必須合理安排在主界面。用戶在點(diǎn)擊界面圖標(biāo)后經(jīng)過歡迎界面來到主界面，開始進(jìn)行深入的人機(jī)交互。因此，界面的風(fēng)格是決定用戶進(jìn)一步了解交互產(chǎn)品的服務(wù)內(nèi)容和優(yōu)勢強(qiáng)項(xiàng)的關(guān)鍵因素。當(dāng)前，以簡約主義為設(shè)計(jì)理念的扁平化設(shè)計(jì)成為最流行的視覺設(shè)計(jì)風(fēng)格，主要以點(diǎn)、線、面等平面元素和色塊搭配層級化為人機(jī)交互界面的視覺處理，在捕捉用戶閱讀習(xí)慣的前提下追求簡約自然，以優(yōu)化層級為根本原則。人的大腦具有投機(jī)取巧的特點(diǎn)，如卡尼薩三角的視覺心理效應(yīng)，是先捕捉大面積后再關(guān)注細(xì)節(jié)，同時不自主地尋找規(guī)律。因此，在每個細(xì)化功能的交互界面，應(yīng)做到風(fēng)格統(tǒng)一。雜亂無章和過分跳躍的視覺畫面會直接破壞用戶的良好體驗(yàn)，讓用戶無法專注尋找需要的信息，并且在使用后難以留下印象。統(tǒng)一風(fēng)格是可視性高的界面設(shè)計(jì)手法。

（二）操作便捷的界面

在觸屏手機(jī)應(yīng)用簡單快捷的時代，界面設(shè)計(jì)的布局更應(yīng)符合用戶使用觸屏手機(jī)的手勢習(xí)慣。在《How Do Users Really Hold Mobile Devices?》中，作者Steven Hoober通過對各種公眾場合下用戶使用手機(jī)的姿勢研究指出：“49%的用戶通過單手操作，36%一手拿著手機(jī)一手操作，另有15%雙手操作；在單手操作用戶中，有33%的用戶用左手拇指來操作。”［4］可見，用戶是習(xí)慣用拇指滑動和選擇界面操作內(nèi)容的。由于受屏幕長寬限制，界面布局一般采用整齊美觀的豎排列表和橫排塊面，用戶通過左右、上下滑動屏幕或點(diǎn)擊箭頭查看更多內(nèi)容。圖標(biāo)的指引需要安排用戶手指便捷觸及的地方進(jìn)行次級閱讀導(dǎo)向，如凡點(diǎn)社交APP的登陸界面整體風(fēng)格簡潔；在用戶名和密碼輸入欄版式位置正是用戶拇指自然握屏擺放位置；功能主界面功能分欄化繁為簡，避免在頻繁操作的多層級、多頁面中出錯，節(jié)省用戶使用時的思考時間。

（三）游戲樂趣的界面

游戲化設(shè)計(jì)已經(jīng)是當(dāng)前移動社交和娛樂體驗(yàn)界面的趨勢。針對用戶在手機(jī)移動界面瀏覽方式的轉(zhuǎn)變，用戶體驗(yàn)中強(qiáng)調(diào)游戲思維，在日常的界面人機(jī)交互中創(chuàng)建游戲，支持、激發(fā)娛樂體驗(yàn)。界面設(shè)計(jì)核心具有方便人們溝通和分享的特質(zhì)，更強(qiáng)調(diào)交互的游戲愉悅感。這種目前流行的 “游戲化”(Gamifi cation)，是暗示設(shè)計(jì)出來的產(chǎn)品基本上仍然是應(yīng)用程序，只不過恰好有一些附加的游戲元素［5］。除風(fēng)格統(tǒng)一的便捷界面以外，在界面設(shè)計(jì)上適當(dāng)加入用戶切換成玩家角色的操作，如作為社交交互軟件主流的微信，很多時候與同類軟件顯出優(yōu)勢就是在小程序上嵌入游戲設(shè)置；此外，在界面中切入動漫小視頻也是不錯的想法。

三、手機(jī)界面分類及風(fēng)格特點(diǎn)

優(yōu)秀的手機(jī)界面設(shè)計(jì)可以引導(dǎo)用戶視覺，與產(chǎn)品功能相符的色彩科學(xué)搭配，并考慮用戶場景。手機(jī)界面根據(jù)功能內(nèi)容可以劃分為社交類、娛樂類、生活服務(wù)類、金融類、學(xué)習(xí)工具類、企業(yè)組織類、新聞資訊類、技術(shù)分享類等八類。按照年齡和職業(yè)劃分，手機(jī)界面可以分為以下三種：

（一）年輕個性化的界面

針對新一代的消費(fèi)人群，年輕時尚似乎成了智能手機(jī)的新基調(diào)，年輕化趨勢是推動手機(jī)界面設(shè)計(jì)的強(qiáng)大力量。追求獨(dú)創(chuàng)個性是年輕人的顯著特點(diǎn)，界面?zhèn)€性化會吸引特定用戶并指向目標(biāo)明確，如針對年輕受眾群體的音樂交互界面，網(wǎng)易云音樂APP交互界面是較具有個性風(fēng)格的，進(jìn)入界面色調(diào)柔和，圖標(biāo)設(shè)計(jì)感強(qiáng)，既融合了音樂符號的造型，還添加了節(jié)奏感的線條，與主功能界面相互呼應(yīng)，顏色鮮活而富有熱情，在主推單曲滑動界面中，接入較為吸引年輕人審美情趣的圖片。

(二)活潑趣味的界面

第二類擁有較大數(shù)量的用戶群體就是家庭幼教類。由于電子設(shè)備越來越貼近生活，在兒童閱讀工具中，幼教類APP為親子互動和幼兒學(xué)習(xí)提供方便。這一類幼兒使用的手機(jī)交互界面具有顏色鮮艷、圖形分割版面的特點(diǎn)，常配搭有活潑可愛的卡通圖片，文案用詞呆萌，形成有趣而活潑的界面風(fēng)格，深受用戶歡迎。如“凱叔講故事”界面選擇的《象老爹》故事播放時，畫面是一家三口的卡通形象融入大自然的情景，卡通動物的表情為整個播放界面增添了不少趣味性。

(三)功能綜合細(xì)化的界面

無論是電子網(wǎng)絡(luò)虛擬貨幣還是網(wǎng)上金融銀行，隨著互聯(lián)網(wǎng)移動速度的特殊性，演變成 “水泥+鼠標(biāo)+拇指”的模式，銀行APP的開發(fā)成為金融行業(yè)一種新的營銷手段，營銷目的不僅要吸粘實(shí)體的優(yōu)質(zhì)客戶，還需要培養(yǎng)用戶的使用習(xí)慣，并為深層次的業(yè)務(wù)發(fā)展作鋪墊。因此，在金融APP的界面功能中，普遍增加生活應(yīng)用類等增值服務(wù)，以吸引用戶群。根據(jù)界面需要具有功能綜合歸整而項(xiàng)目細(xì)化的特點(diǎn)，統(tǒng)一的主色調(diào)不僅讓功能綜合細(xì)化的界面顯得簡潔大方，也能讓用戶找到品牌感的歸屬，例如美利金融、雍和金融、銅板街、支付寶等主界面，服務(wù)類型分類細(xì)化到位，且眾多數(shù)據(jù)內(nèi)容歸整得脈絡(luò)清晰，讓用戶需求服務(wù)功能最大化。

四、用戶體驗(yàn)結(jié)構(gòu)三維度的視覺原則

從廣義的角度上講，用戶體驗(yàn)可以定義為正在使用某個產(chǎn)品過程中的使用體驗(yàn)舒適度以及全部的過程感受，它包含著世界上的任何產(chǎn)品。通過對用戶需求層次劃分、確立結(jié)構(gòu)、原型設(shè)計(jì)和用戶分析四個階段的分析，對用戶體驗(yàn)進(jìn)行探索，將界面設(shè)計(jì)中用戶體驗(yàn)結(jié)構(gòu)模型劃分為感官感知、情感體驗(yàn)和認(rèn)知評價三個維度，從而為“以用戶為中心”手機(jī)界面視覺設(shè)計(jì)提供理論依據(jù)。用戶界面設(shè)計(jì)的三大原則是：易記性、美觀性、情感性。

（一）易記性原則

手機(jī)APP圖標(biāo)是用戶進(jìn)入交互界面的大門，門面功夫決定整個界面形象，而圖標(biāo)的易記性是提高用戶手機(jī)桌面搜索率的關(guān)鍵。這也是盡管iOS6、iOS7、WP10等不同平臺智能手機(jī)、平板、PC的界面擁有各種形式的圖標(biāo)，但在視覺設(shè)計(jì)上仍然堅(jiān)持以造型簡潔來表達(dá)生動語義的原因。易記性原則主要使用戶減少記憶負(fù)擔(dān)，以界面圖標(biāo)簡潔和界面版式設(shè)計(jì)邏輯清晰為表現(xiàn)內(nèi)容。界面版式設(shè)計(jì)，首先要求信息排布要清晰直觀，添加圖形輔助可以增加界面的易讀性，讓可視性高的圖形表達(dá)方式代替冗長的文字說明方式，使界面變得簡明清晰，常用較柔和的可視化圖形呈現(xiàn)，達(dá)到一目了然的視覺效果，讓界面能夠引導(dǎo)用戶的視覺流程。其次，在標(biāo)題和段落處添加導(dǎo)向符號，例如裝飾性的數(shù)字或圖標(biāo)等視覺輔助元素，在段落間保持層次及阻隔，賦予頁面輕重的視覺變化。最后，通過留白去限制各內(nèi)容塊面，劃分區(qū)間的圖文安排，利用黃金分割比例這種自然的分割方式，快速設(shè)定文本與段落的間隔，添加留白空間面積比例，去除畫面的雜質(zhì)，給用戶干凈整潔的印象。

（二）美觀性原則

界面交互設(shè)計(jì)作為一種新媒體形態(tài)，必然要突出藝術(shù)的可視性本質(zhì)，將新的藝術(shù)思想與理念融匯到作品當(dāng)中，以此去吸引和影響用戶［6］。人們與生俱來追求美好，因此美觀性原則是“以用戶為中心”的設(shè)計(jì)理念，美觀的界面讓用戶在交互中進(jìn)一步培養(yǎng)愉悅的體驗(yàn)，還可以提升產(chǎn)品的品質(zhì)。界面視覺設(shè)計(jì)師突出圖標(biāo)中形態(tài)特征，主要是處理點(diǎn)、線、面、體、空間的關(guān)系，以及利用光影、色彩、肌理等物像的外在表象的視覺原理，讓圖標(biāo)給用戶傳達(dá)其形體輪廓、運(yùn)動質(zhì)感和畫面動感；此外，由于手機(jī)屏幕尺寸的限制，在主界面中安排導(dǎo)航閱讀的圖標(biāo)，也是根據(jù)用戶習(xí)慣和想法進(jìn)行的精心設(shè)計(jì)，以圓角和圓形圖標(biāo)小配件培養(yǎng)用戶的親切感與視覺情緒，或者以形狀的大小層級漸變導(dǎo)向閱讀，例如用戶的信息登錄界面、圖片整理文件夾、關(guān)注熱點(diǎn)、商品展示等，采用板塊清新的圓角漸變會有更好的效果。

（三）情感性原則

以情感驅(qū)動用戶使用界面，讓冰冷的人機(jī)交互賦予情感，拉近人和程序的距離，因此情感性原則體驗(yàn)在于氣氛化和故事化，情感的培養(yǎng)可以強(qiáng)調(diào)設(shè)計(jì)品質(zhì)，增加界面對用戶的吸引力。用戶界面常常通過其色彩印象來辯別APP的服務(wù)特色。在色彩心理研究中，色彩具有情感和體驗(yàn)情緒的功能，深刻影響用戶的使用習(xí)慣，并體驗(yàn)其心理情感，具有依賴性。交互界面的顏色搭配直接影響用戶對產(chǎn)品的認(rèn)知，促進(jìn)產(chǎn)品信息傳遞和產(chǎn)品形象推廣。不僅如此，界面的顏色直接渲染著人機(jī)交互過程的氣氛。界面顏色主要包括界面的主色調(diào)和字體顏色。因此，以用戶為中心進(jìn)行色彩搭配有利于良好情感的塑造。由于不同顏色的使用可以帶給用戶不一樣的色彩情緒，可以通過顏色色相調(diào)和產(chǎn)生對比，統(tǒng)一中蘊(yùn)含變化，有意識地調(diào)整版面的閱讀節(jié)奏，強(qiáng)調(diào)和引導(dǎo)閱讀的視覺流程。在移動端界面中通常需要選取標(biāo)準(zhǔn)色、輔助色。移動端與網(wǎng)頁端的排版稍微不同，當(dāng)界面圖片較少時，要適當(dāng)使用色塊提高圖表率，標(biāo)準(zhǔn)色制定涉及界面文案、圖片、圖標(biāo)、背景等，均反映該界面特定的氣氛，引起用戶的情感共鳴。在選擇上應(yīng)該保持色調(diào)一致，讓各元素色相進(jìn)行合理調(diào)和。即確定適當(dāng)?shù)臉?biāo)準(zhǔn)色和輔助色后，在明度和純度上應(yīng)統(tǒng)一視覺標(biāo)準(zhǔn)處理，并在冷暖變化中產(chǎn)生層次關(guān)系。如果標(biāo)準(zhǔn)色明度偏低，那么輔助色應(yīng)采用一個高亮的顏色來喚醒頁面氣氛，起到點(diǎn)睛的作用。此外，串聯(lián)圖片讓圖片本身講故事，加強(qiáng)視圖化版面，也是激發(fā)用戶情感的手法。這種設(shè)計(jì)更多的是將文案用圖形或插圖展現(xiàn)出來，在數(shù)據(jù)頁面和引導(dǎo)頁中最為常見，如在一段文案中加入插圖，使用戶的情懷感更強(qiáng)。這種設(shè)計(jì)手法最容易體現(xiàn)產(chǎn)品特質(zhì)和吸引眼球。圖案的易讀性高，能在極其短暫的時間內(nèi)快速給用戶傳達(dá)信息。用圖像來講故事，是打動用戶最根本的表現(xiàn)方法，更是最受歡迎的表達(dá)方式。

隨著手機(jī)內(nèi)核技術(shù)的發(fā)展，隨著從用戶出發(fā)產(chǎn)生的審美感知和審美經(jīng)驗(yàn)，掌上界面充滿精致美觀和時尚個性的圖標(biāo)。手機(jī)界面交互設(shè)計(jì)在激烈的市場競爭中堅(jiān)持“以用戶為中心”為設(shè)計(jì)原則，很多時候需要視覺設(shè)計(jì)師應(yīng)用心理學(xué)分析真實(shí)用戶的使用習(xí)慣、行為和想法，從圖標(biāo)的定義和界面的設(shè)計(jì)需要結(jié)合用戶的關(guān)注點(diǎn)，進(jìn)行以用戶為導(dǎo)向的產(chǎn)品設(shè)計(jì)。交互視覺遵循易記性、美觀性和情感情的原則，做到界面風(fēng)格自然統(tǒng)一，操作簡便而不失游戲樂趣，讓冰冷的人機(jī)交互體驗(yàn)更具人性化。