基于移動端界面UI設計的教學創新探究

李 瑩，梁 爽

在UI設計教學領域中，用戶體驗與認知心理學相關知識是UI設計教學展開的前提知識，交互性、移動性、個性化、安全性和多媒體化的信息服務需求迫使UI設計日益從用戶的習慣和心理出發。針對UI設計的時代發展變化，高校的UI設計教學內容、教學模式也應緊隨時代變化做出創新，對教學內容與教學步驟進行優化，在調動學生學習積極性的基礎之上培養學生的應用能力、分析能力和實踐創新能力。

一、UI設計理論概述

UI設計是基于用戶體驗，利用認知心理學為用戶進行產品設計的一門學科。在移動端界面UI設計內容中，交互性、移動性、個性化、安全性和多媒體化的信息服務需求迫使UI 設計日益從用戶的習慣和心理出發，以此設計出能夠精準地定位客戶需求、清晰地表達媒介信息的UI產品。

（一）用戶體驗相關論述

用戶體驗即User Experience，美國認知心理學學科創始人、工業設計領袖唐納德·諾曼（Donald Norman）認為，用戶體驗主要指代用戶對產品的主觀使用感受。在設計產品與開發用戶需求時，能否滿足用戶的需求體驗、能否讓用戶在使用產品時產生愉悅感是決定產品設計與開發的關鍵。其中，決定用戶體驗的5 個要素，即5 大需求滿足狀態，來源于馬斯洛關于人的5 個需求層次理論。在用戶體驗要素中，生理（自我）需求、安全需求、社交需求、情感需求、自我實現需求是依次升級的。［1］因此，隨之對應的設計理論與設計方法為：生理（自我）需求——個性化定制設計；安全需求——功用設計；交互需求——交互設計；社會需求——品牌戰略設計；情感需求——美學設計。［2］

以加瑞特的《用戶體驗要素》理論為例，作為Adaptive Path 設計公司的創始人之一，他著重解釋了相應的設計理論與設計方法對應的設計目標，闡釋了用戶體驗的5 層要素內涵，即：戰略層，要明確產品設計的商業目標與用戶群范圍，定位產品的目標客戶人群；功能范圍層，要明確產品設計的功能范圍與客戶需求的升級范圍，對用戶的需求進行采集、分析、總結，規定用戶使用產品的合理功用范圍；體驗結構層，即為用戶設計與產品的聯通渠道，給交互設計留出結構空間；框架層，以界面設計、導航設計、信息設計為框架構建用戶使用界面模塊；表現層，即在考慮用戶視覺審美、情感依賴度的基礎之上對界面進行視覺設計與內容美化。通俗地說，用戶體驗的5個設計層次的實現，需要各部門設計人員與工程人員通力合作、互相完善。以此，才能保證在技術、功能、外形、色彩、情感體驗、心理因素等方面對產品進行編碼設計，設計出人性化的界面產品與服務。

（二）認知心理學相關論述

認知心理學的核心課題是集中研究人獲取知識的方式、途徑或者渠道，以此為計算機的信息加工方式提供“人機信息的交互依據”。在人腦中，人通過神經元信號傳導生物電信號，以形成人腦對外界“五感”信息的集中、分析、判斷、處理和存儲等。計算機則不同，在計算機內，信息加工系統都是由感受器、效應器、記憶和加工器組成，這些信息元件的物質載體是硅基元素，其一般結構就是符號信息的輸入、輸出、儲存、復制，以建立符號結構的串聯系統進行條件性遷移。相比于人腦的信息傳遞模式易受情緒化、外部周遭的社會和自然環境影響，計算機的電子信號傳遞更為機械性，這也代表著其傳輸信號的一大優點——穩固、可靠。所以，研究“人腦的信息接收與反饋機制受情感性、生理性因素的影響”成為認知心理學的主要研究內容。認知心理學研究內容包括人的感覺、直覺、思維想象、意識等，通過關注人類行為基礎的心理機制，認知心理學可以幫助UI產品設計與開發人員通過類比、模擬等方式，驗證人類認知的程序與邏輯，以此保證產品更方便用戶使用、更能讓用戶產生愉悅情緒。

（三）移動端UI界面設計原則概述

UI 設計有5 大原則，分別是：易用性原則、規范性原則、幫助設施原則、合理性原則、美觀與協調性原則。易用性原則可以簡單理解為為用戶提供操作方便，交互步驟必須簡潔，不需過多地使用戶重復操作或者承擔繁重的腦力記憶；規范性原則是要求移動端APP 的快捷方式、命令方式、按鈕位置、界面菜單等功能性、技術性設計必須符合國家出示的技術規范；幫助設施原則是為客戶在不明APP 操作原理、應用內容、應用功能時，提供詳細的操作文案或搜索選項，方便用戶快速上手使用；合理性原則是指UI設計的界面布局要符合用戶的視聽規律，如設置有效、便捷的點擊區域、文字輸入區域等；美觀與協調性原則主要是指在視覺審美方面，通過規制色彩、色調、色溫的統一協調，設置合宜的文字大小比例，調整界面構圖的黃金比例規律等，以符合人們的視覺審美需要，并規避用戶視覺疲勞。

二、移動界面UI設計課程教學存在的問題

移動界面UI 設計課程是視覺傳達專業的必修課程，它主要包含軟件程序語言編程與界面視覺特效設計兩部分學習內容，具有交叉學科的專業特性。但是移動界面UI設計并不是基于設計師的自我產品理念出發而設計產品，而是為大眾設計，是基于服務大眾為目的進行的界面設計。目前，多數學習者在設計APP 用戶界面時，不能考慮大眾用戶的需求與用戶感受，很多學生往往根據自己的興趣愛好追求潮流化的界面設計，缺失交互性，缺少對用戶體驗的考慮，漏洞百出之下缺乏設計的主題內涵，難以轉化為實踐產品進行實用推廣。

三、創新移動界面UI設計教學內容與教學步驟

移動界面UI 設計教學方法應采取漸進式教學法，對教學內容與教學步驟進行分拆，在調動學生學習積極性的基礎之上培養學生的應用能力、分析能力和實踐創新能力。基于UI 設計的易用性原則、規范性原則、幫助設施原則、合理性原則、美觀與協調性原則，移動界面UI 設計教學課程可分為5 個部分：APP 圖標設計課程、交互與用戶體驗設計課程、移動界面的規范化設計課程、APP 原型設計與界面深入理解課程。

APP 圖標設計課程，應著重于培養學生的設計思維，提升學生的設計構思能力，向學生闡釋多媒體界面設計的含義與原則，講述圖標設計的方法與行業要求；交互與用戶體驗課程，要對移動界面基本理論知識進行深入闡述，讓學生理解交互與用戶體驗的理論概念，此階段的教學內容為信息架構與競品分析，學生需對所設計產品的用戶角色、市場前景、交互邏輯有一個清晰的概念認知；移動界面的規范化設計課程，主要從移動端手機的蘋果和安卓兩大系統出發，幫助學生學習兩大系統規范下的通用型設計框架，為學生實操訓練講解設計規范；APP 原型設計與界面深入理解課程，需要學生獨立完成APP 課程的整個設計過程，此環節教師要引導學生確定APP 的用戶功能與用戶需求并制定信息功能框架圖，然后從低保真原型開始深入到高保真原型制作，中間穿插控件庫的知識，真正做到循序漸進地講解，讓學生更好地掌握教學內容，學以致用。

四、移動界面UI 設計教學中UI 設計的視覺傳達要素分析與教學

（一）UI設計的圖形符號表現分析與教學

圖形符號直觀、簡明、易懂、方便記憶的特點，可以快速地給人提供行動指導，這也是視覺圖形符號大量充斥于各個領域、各個行業中傳達信息指令的根源作用。相應地，在UI設計與教學過程中，深度研究圖形設計的種類、配列方式、美感構成對于學科發展至關重要。因此，UI 設計的圖形符號表現分析與教學，必須對圖形的有序排列、圖形的合理搭配、圖形的合理變化進行細分教學。UI 設計專業學科教師要注意引導學生采用獨特的原色信息表現行業特色、國家特色、風物特色等，突出設計師本身的藝術創造性。

（二）UI設計的色彩運用分析與教學

色彩元素在移動端UI 設計產品中是一個舉足輕重的組成部分，顏色各異的色彩代表著心理各異的視效感受，色彩具有增加用戶記憶和想象、影響用戶情緒與心理的重要作用。對于UI設計的色彩運用分析與教學來說，教師應引導學生創作具有視覺沖擊力和色彩吸引力的產品，引導他們在UI設計中利用多樣的色彩調換方式設計LOGO 色，從而襯托出移動端APP 的產品特點。其次，UI 設計中的色彩運用與分析教學，還應深入研究色彩對用戶情緒的影響作用，學校可開設“色彩與情感感受”課程，幫助學生利用色彩的原色配比、純度、明度、色相、色溫、色調、色系等知識熟練應用于UI設計中。

（三）UI設計的文字編排設計分析與教學

文字必須具備高辨識度，這是目前UI設計的行業共識。學科教師要注意分析IOS 系統和安卓系統字體設計特點，引導學生在字體的藝術美觀度與識別效度之間進行平衡，以適用于不同屏幕尺寸或年齡用戶群的需要，如：對老年用戶群，應偏向識別度設計，增大字號，適應老年人遠視眼的閱讀需求。對于移動端文字排版設計，教師需遵循留白空間充足原則、文字邊緣整齊原則、異同文字反差接近原則，以此引導學生在文字的編排與處理上恰當地進行設計。

五、移動端界面UI設計的教學案例

（一）移動端軟件產品設計教學流程研究

作為一名設計師，做一款產品，首先要對整個產品的行業狀況與發展趨勢有一個大致的了解，必須事先調查與分析行業的發展趨勢與市場規律，這樣才能對自我創設的產品有一個精準的市場需求定位。因此，教師在引導學生對移動端軟件產品進行UI設計之時，同樣也需要相對應的、完整的、系統的設計流程。

1.競品分析

競品分析從本質上講，是對自己所研究、開發的產品做競爭關系分析，只有經過深入、理性、客觀的競爭分析，設計者才能針對市場行情對所開發的產品做出相應的設計調整與設計缺陷規避。總而言之，競品分析主要從視覺品牌、交互體驗、功能與內容、市場4個方面進行分析，第一個目標是對用戶流程進行模擬總結，第二個目標是對市場中的競爭產品做數據記錄與分析。

2.用戶調研

用戶調研主要從產品直接用戶、潛在用戶出發，采用問卷調查、電話采訪等方式對用戶的需求進行數據匯總，記錄、研究用戶的各項使用偏好、使用規模、使用意愿等數據，從而幫助設計者擬定相應的產品設計計劃，并建立初步的用戶畫像數據庫，然后展開方案設計。

3.用戶目標

用戶目標主要指針對用戶調研環節的數據，對產品的功能方向進行確立，以解決用戶使用該產品的主要問題，進而進行軟件開發。

4.產品功能

產品功能是指產品對用戶的細分功效與總體功能。如，淘寶APP 的購物篩選選項、購物車選項、收藏選項、分期購選項等，用戶使用軟件時，需要解決什么問題就需對應地設置具體的功能選項。

5.操作流程

設計師在設計產品時，需要對產品界面的操作流程有一個清晰的設計，梳理產品的頁面、動畫、選項等要素。此環節，合理地設置操作步驟，對于提升用戶體驗至關重要。

6.原型設計

原型設計是針對產品的設計目標、功能、流程圖、原型4 個要素進行細致、深入的評估。在原型設計師與網站開發工程師、PM（產品經理）溝通過程中，原型設計師會將心中對產品的想法通過宣講方式向投資人、相關設計師、技術人員等進行更詳細的產品意圖解釋。

7.小結

UI設計教學活動內容豐富且有趣，合理有效的移動端軟件產品設計教學流程可以逐步提升學生的UI 設計水平。在課程中，競品分析、用戶調研、用戶目標三個環節屬于調查研究環節，軟件設計的技術學習內容相對較少，教師要注重對學生調查、分析能力的培養，此階段學生扮演的角色相當于產品經理的角色。產品功能與操作流程環節學生學習軟件編程、視效設計等方面的技術內容會相對較多，教師要對界面點擊方式設計、界面切換方式設計內容進行精細講解，幫助學生完成預期學習目標。原型設計環節是針對產品的設計目標、功能、流程圖、原型4個要素進行細致、深入的評估，教師要將一個完整的項目拆分為多個任務內容，要求學生按照教師要求分步驟構建完整的UI設計界面，這個過程相當于對整個UI設計活動進行復盤，考驗的是學生對整個產品設計核心內容的把握程度。

（二）移動端APP的UI設計要點分析

讓學生了解UI 設計的要點是移動端界面UI 設計教學的必備課程。移動端UI界面設計首先得滿足“一目了然”設計要點，用戶只有迅速地被吸引才會繼續深入使用，如若設置過多的細節，反而會降低APP 界面的功能識別度。便捷的操作流程可以快速地使用戶進入操作流程，能夠有效降低用戶的軟件使用難度，簡潔性、常識性、功能性永遠是UI界面設計的首要考慮目標。其次，設計需要滿足用戶的個性化需求、人性化需求與細節化需求。用戶不同的使用功能會誕生不同的操作要求，例如在手機問世時，豎屏滿足用戶的文本閱讀習慣與打字、界面勾選等操作習慣，橫屏適用于用戶視頻觀看與游戲娛樂，因此用戶便有了橫屏與豎屏的切換需求，目前針對此需求大多設計師采用了手勢滑屏與重力感應兩個方法以供用戶選擇，此即為滿足用戶的人性化需求。

（三）工具型APP產品UI設計的風格化教學

因地制宜地對產品進行開發設計，需在產品設計前期進行用戶調研，理解用戶的需求。教師在進行UI設計教學時，要注意引導學生隨不同的用戶需求設計不同的產品風格以匹配用戶的特殊審美趣味。學生在設計多樣化風格的界面產品時，應將產品的設計中心放于APP 的功能方面，此環節是否能夠解決用戶的實際問題是APP 設計的重心。如，為電商網站制作購物APP 的界面時，以“淘寶”為例，這款APP 的首頁定制畫面以紅色為主色調，紅色具有引人注目的顏色吸引力，而且喜慶感十足，可以讓用戶一目了然地觀察到關鍵信息，淘寶APP 的首頁搜索框、商品推薦、消息、我的信息等每個模塊都清晰明確，沒有多余的文字，分類簡潔。教師要引導學生理解產品的最終目標需求，引導學生多進行換位思考，親身體驗和感受產品的功能定位，以此增加自我設計產品的競爭力。

六、結語

UI設計是時代發展的產物，教師在進行移動端UI 界面教學時應不斷地學習新的設計觀念與設計模式，將國外的新穎、潮流設計觀念引入我國的UI設計教學中，用多樣化的形式展現UI 設計的魅力。以分階段的循序漸進教學模式幫助學生在競品分析、用戶調研、用戶目標、產品功能、操作流程、原型設計等環節獨立完成APP 的整個設計過程，以此提升學生在移動端UI界面設計方面的專業水平。