人機交互設計第七講界面設計延遲符界面設計原則界面設計前的任務分析界面設計流程目錄CONTENTS12301界面設計原則1.1從用戶角度進行思考1．思考方向（1）要清楚不同類別的用戶在什么樣的環境下喜歡哪些視覺元素。（2）要清楚哪些視覺符號有通用含義，以及適用于哪些類別的功能。01界面設計原則1.1從用戶角度進行思考2．思考范圍用戶的種類、層次、能力等因素各不相同，審美差異和需求的特殊性必然存在，滿足所有用戶的需求是不可能的。01界面設計原則1.1從用戶角度進行思考3．思考立場作為產品的使用者，用戶希望花最少的時間學習產品的架構和原理，并以最快、最便捷的方式置身于產品內容中，這就要求產品在引導方面注重合理性和科學性，沒有其他復雜的干擾因素，使用戶能在最短的時間內掌握產品的使用方法。01界面設計原則1.2功能與界面的匹配（1）“一致性”體現在以下四個方面：①界面視覺元素的標準統一、色彩呼應、構成相似。②功能實現的流程應保持一致、功能所在的位置應保持一致。③對象的功能應與用戶的期待保持一致。④交互設計應與用戶的行為慣性保持一致。01界面設計原則（2）“信息獲取的有效性”體現在以下四個方面：①便于用戶獲取信息。②信息應在明顯的位置進行展示。③信息量不宜過大。④提供結果優于提供數據。02界面設計前的任務分析任務分析也被稱為“迭代法”，是一種不斷使用變量的舊值遞推新值的過程。2.1任務分析概述任務分析分為以下五個階段，用戶始終是每個階段的核心。

（1）用戶調研階段。（2）任務建模階段。（3）需求定義階段。（4）框架定義階段。（5）優化階段。02界面設計前的任務分析2.2任務分析的流程任務分析具體展開，按流程包含了以下的基本分析方法：決策表分析流程圖分析語句描述時間列任務清單綜合使用這些基本方法，才算一個完整的任務分析，供設計師找到具體將影響界面設計的環節。02界面設計前的任務分析2.3任務模型的實施任務模型是用戶為了完成任務所采用的有目的的行為過程。一般來說用戶任務模型包括：用戶行為動機、目的、行為計劃、操作、結果評估。03界面設計流程3.1結構設計階段通過總功能明確用戶目標，進而鎖定用戶群體，分類用戶以便劃分不同層級的操作界面。通過功能分支，確定處于同一層次目錄；再利用菜單劃分目錄類別、頁面板塊分區細節內容，引導用戶操作。03界面設計流程3.1結構設計階段03界面設計流程3.1結構設計階段03界面設計流程3.2交互設計階段1．讓用戶感覺到能夠“控制局面”2．使用圖標和分類提示替代文字03界面設計流程3.2交互設計階段3．避免出現“門口效應”03界面設計流程3.2交互設計階段4．使用用戶語言而非技術語言進行交互5．重視微妙的用戶心理活動和情感變化03界面設計流程3.3視覺設計階段1．圖片的配置。（1）照片要兼具質量與刷新速度（2）照片的選擇和圖標的設計，其內容和風格都需要針對平臺需要而定。03界面設計流程3.3視覺設計階段2．文字的類型。（1）字體的裝飾性與信息的傳遞效率呈現負相關。（2）文字的尺寸從小到大變化在信息識別度之間的關系類似開口朝下的拋物曲線。03界面設計流程3.3視覺設計階段3．留白的比例和位置。（1）留白不僅可以用于分類顯示內容，還能夠參與到構圖之中。（2）當板塊較多時，留白間隙則需要根據功能分類進行規范統一，以便達到更清晰的分區和美觀的效果。03界面設計流程3.3視覺設計階段4．頁面元素的邏輯。（1）需要參考人眼的視覺習慣和手的行為習慣。（2）不同的邏輯層級應該由不同的表現形式，同理，相同的邏輯層級則使用同一種表現形式，以便更好的提示用戶按流程正確操作03界面設計流程3.3視覺設計階段5．色彩搭配。（1）主色彩決定整體風格。（2）色彩搭配數量應和功能的種類相對應。（3）色彩純度決定頁面的視覺噪音。03界面設計流程3.3視覺設計階段6.線條形狀的選擇。03界面設計流程3.3視覺設計階段7．功能和信息密度。界面所展現的功能和信息并非是數量越多越受用戶歡迎。精煉、簡潔的界面更加容易突出功能以及信息重點。03界面設計流程3.3視覺設計階段8．動畫效果。（1）動效應吻合用戶的預期。（2）動效應結合視、聽、觸覺。（3）動效具備比圖片和文字更好的引導性。03界面設計流程3.3視覺設計階段9．視口設置。（1）視口的概念和用途。（2）視口類型。（3）分辨率的概念和種類。（4）視口設置的目標是滿足移動端設備標準多樣化不會影響視口內容的顯示，以維系用戶穩定的操作體驗。本章總結界面設計的出發點是——按照用戶的理解去設計界面和功能的關聯；界面設計的過程是——要經過詳盡的任務分析，將所有流程明晰，為界面的布局指明方向；而界面設計的終級目標就是——越來越弱化“界面”，實現人-機接口的無縫交互。課后思考題1．請簡要敘述界面設計的一