人機交互設(shè)計 課件 第7章 界面設(shè)計

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

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