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

吳 珊，賴劍峰

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

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

一、手機交互界面的設計內容

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

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

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

（一）風格統一的界面

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

（二）操作便捷的界面

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

（三）游戲樂趣的界面

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

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

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

（一）年輕個性化的界面

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

(二)活潑趣味的界面

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

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

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

四、用戶體驗結構三維度的視覺原則

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

（一）易記性原則

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

（二）美觀性原則

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

（三）情感性原則

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

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