基于“用戶為中心”的手機界面視覺設計

吳 珊，賴劍峰

（廣東理工學院 藝術系，廣東 肇慶 526100）

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

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

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

二、市場細化應以用戶為中心

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

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

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

（二）操作便捷的界面

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

（三）游戲樂趣的界面

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

三、手機界面分類及風格特點

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

（一）年輕個性化的界面

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

(二)活潑趣味的界面

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

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

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

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

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

（一）易記性原則

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

（二）美觀性原則

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

（三）情感性原則

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

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