人機(jī)交互設(shè)計(jì)原則.ppt

1、17.07.20221設(shè)計(jì)原則交互設(shè)計(jì)原則可理解性可學(xué)習(xí)性有效性/有用性效用/可用性分組刺激強(qiáng)度比例屏幕復(fù)雜性分辨率/關(guān)閉可用性目標(biāo)17.07.20222交互設(shè)計(jì)原則如何為復(fù)雜的交互系統(tǒng)建立一流的解決方案 哪些創(chuàng)造出功能強(qiáng)大又符合審美的偉大的設(shè)計(jì)的交互設(shè)計(jì)師是如何成功的17.07.20223交互設(shè)計(jì)原則17.07.20224交互設(shè)計(jì)原則設(shè)計(jì)原則用來(lái)指導(dǎo)設(shè)計(jì)行為設(shè)計(jì)原則不規(guī)定具體的結(jié)果他們?cè)谝痪唧w的設(shè)計(jì)項(xiàng)目的場(chǎng)景中起作用設(shè)計(jì)原則指導(dǎo)交互設(shè)計(jì)師并且?guī)椭麄儗?duì)設(shè)計(jì)問(wèn)題作出決策17.07.20225隔閡與原則Gulfs and Principles設(shè)計(jì)原則用來(lái)確定執(zhí)行階段和評(píng)估階段存在差距執(zhí)行階段的差

2、距關(guān)系到原則的有效性評(píng)估階段的差距關(guān)系到設(shè)計(jì)原則的效率17.07.20226設(shè)計(jì)原則框架框架包括:可用性目標(biāo)在框架中有兩個(gè)主要的可用性目標(biāo)：可理解性和可學(xué)習(xí)性.設(shè)計(jì)原則分類設(shè)計(jì)框架將設(shè)計(jì)原則分為兩個(gè)主要的類別：效率性原則和有效性原則設(shè)計(jì)規(guī)則描述的形式框架使用格式“通過(guò)。原則，可以促進(jìn)?！眮?lái)描述不同的原則熟悉記憶的原則可以提升可用性17.07.20227設(shè)計(jì)原則框架17.07.20228設(shè)計(jì)原則框架功能性系統(tǒng)必須具有足夠的功能來(lái)完成某個(gè)具體的事務(wù)顯示過(guò)濾系統(tǒng)功能經(jīng)過(guò)顯示過(guò)濾（界面）后易于理解可理解性障礙 如果功能顯示易于理解，那么就不存在可理解性障礙，這取決于界面設(shè)計(jì)中效率/可用性的程度用戶必須

3、了解輸入的語(yǔ)言需要什么，以及輸出的語(yǔ)言表達(dá)什么可學(xué)習(xí)性障礙 如果界面易于列節(jié)那么它就易于學(xué)習(xí)，他們具有比較直接的意義有效性/可用性如果用戶能夠?qū)W習(xí)如何使用界面，并能夠很好的使用功能，那么界面就具有很好的可用性17.07.20229可理解性易于理解的界面設(shè)計(jì)將具有很好的效率和有效性如果一個(gè)用戶不理解界面，他就不能使用設(shè)計(jì)的可理解性強(qiáng)烈的依賴于界面如何向他的用戶表達(dá)功能17.07.202210可學(xué)習(xí)性高可用性的界面更易于學(xué)習(xí)設(shè)計(jì)的可學(xué)習(xí)性是基于可理解性的，如果您不能理解他，您就不能學(xué)習(xí)他17.07.202211理解性與可學(xué)習(xí)性可學(xué)習(xí)性和可理解性是遞歸的，我們從影響可學(xué)習(xí)性的可理解性開(kāi)始，反過(guò)來(lái)增加

4、可理解性Comprehensibility/Learnability Feedback Loop17.07.202212交互設(shè)計(jì)原則有效性/有用Utility效用Safety安全Flexibility 靈活Stability穩(wěn)定效率/可用性Simplicity簡(jiǎn)單Memorability可記憶Predictability可預(yù)測(cè)Visibility可見(jiàn)性17.07.202213設(shè)計(jì)原則種類有效性/有用有效性描述了設(shè)計(jì)是有用的有效性的目標(biāo)保證了一個(gè)設(shè)計(jì)必須完成用戶提供的所需要的功能17.07.202214有效性/可用性效用效用原則是指用戶使用系統(tǒng)能實(shí)際做什么安全性一個(gè)具有高度安全性的設(shè)計(jì)比一個(gè)具有

5、高度風(fēng)險(xiǎn)的設(shè)計(jì)要更有用恢復(fù)通過(guò)在交互設(shè)計(jì)中適當(dāng)過(guò)加入撤銷功能實(shí)現(xiàn)和穩(wěn)定的錯(cuò)誤恢復(fù)功能來(lái)實(shí)現(xiàn)計(jì)算機(jī)不應(yīng)該給您的工作帶來(lái)不便或者有害于工作(Raskin, 2000)17.07.202215效率/可用性靈活性靈活的工具可以被應(yīng)用于多個(gè)環(huán)境并且應(yīng)用不同的需求定制如果人們能根據(jù)用戶的個(gè)人喜好定制界面一個(gè)工具將有非常大的靈活性穩(wěn)定性 穩(wěn)定的系統(tǒng)是可靠的系統(tǒng) 能夠持續(xù)穩(wěn)定運(yùn)行的系統(tǒng)比經(jīng)常崩潰的系統(tǒng)更加有用17.07.202216效率/可用性效率描述了設(shè)計(jì)的可用性 效率高效率目標(biāo)規(guī)定設(shè)計(jì)應(yīng)該能使以快捷、容易且不必經(jīng)過(guò)非常復(fù)雜的而無(wú)關(guān)的過(guò)程來(lái)完成任務(wù)計(jì)算機(jī)不應(yīng)該浪費(fèi)您的時(shí)間也不應(yīng)該需要您做更多的工作17.07

6、.202217效率/可用性簡(jiǎn)潔性如果事情是簡(jiǎn)單的，它就會(huì)變的非常容易理解，因此易于學(xué)習(xí)和記憶Ockhams Razor 設(shè)計(jì)者只包留下必須的元素80/20 Rule 80/20原則隱含了應(yīng)用程序中的80應(yīng)用使用20的功能滿足度， 結(jié)合了相互矛盾的兩個(gè)方面，是尋找滿足用戶需求的最優(yōu)化設(shè)計(jì)方案，還是只設(shè)計(jì)一個(gè)用戶夠用的方案17.07.202218效率/可用性簡(jiǎn)潔性漸進(jìn)披露 向用戶展示僅僅用戶需要的17.07.202219效率/可用性簡(jiǎn)潔性約束 限制某一特定設(shè)計(jì)中的活動(dòng)，從而保證設(shè)計(jì)的簡(jiǎn)潔設(shè)計(jì)簡(jiǎn)潔的控制物理約束路徑 物理路徑約束到指定方向和位置的運(yùn)動(dòng)軸 物理軸限制了用戶沿軸旋轉(zhuǎn)的運(yùn)動(dòng)屏障 屏障提供了

7、空間上的約束，它將用戶的運(yùn)動(dòng)限制在界面上的某個(gè)區(qū)域17.07.202220效率/可用性簡(jiǎn)潔性約束心理約束慣例 通過(guò)使用可學(xué)習(xí)的行為來(lái)影響用戶的行動(dòng)映射映射 能夠影響用戶對(duì)動(dòng)作和結(jié)果之間關(guān)系的認(rèn)知符號(hào)- 通過(guò)定義和解釋界面元素的含意，符號(hào)可以影響我們與界面進(jìn)行交互的方式17.07.202221效率/可用性可記憶性 具有高可記憶性的界面將容易學(xué)習(xí)和使用影響記憶性的有很多因素:位置，如果某個(gè)特定的對(duì)象放在固定的位置，它將容易記住邏輯分組，通常我們會(huì)對(duì)事務(wù)按照邏輯進(jìn)行分組，這使得他們?nèi)菀子洃洃T例，如果設(shè)計(jì)中使用常規(guī)的對(duì)象和符號(hào)，它們將容易記憶 冗余，如果我們使用多種感知通道對(duì)信息編碼，人們將會(huì)依據(jù)個(gè)人

8、的情況進(jìn)行選擇 17.07.202222效率/可用性可預(yù)測(cè)性 預(yù)測(cè)性是指人的期待和提前確定事情發(fā)生結(jié)果的能力一致性和正確性一致性加強(qiáng)了我們的聯(lián)想，因此增加了記憶和預(yù)測(cè)結(jié)果和過(guò)程的能力在我們爭(zhēng)取一致性以前，我們首先要確保正確性17.07.202223效率/可用性可預(yù)測(cè)性一般性 幫助我們使用我們先前的經(jīng)驗(yàn)并將它應(yīng)用到類似的情況慣例 允許用戶通過(guò)以往的經(jīng)驗(yàn)帶來(lái)的直覺(jué)對(duì)事件進(jìn)行判斷，同時(shí)使用一般性原則可以創(chuàng)建慣例熟悉度 熟悉的菜單名字和選擇幫助我們?nèi)菀锥ㄎ荒繕?biāo)和功能布局，布局，布局屏幕中區(qū)域的價(jià)值是不等價(jià)的17.07.202224效率/可用性可預(yù)見(jiàn)性模式 模式建立認(rèn)知模型的穩(wěn)定性，因?yàn)樗麄兏淖兞藢?duì)象運(yùn)

9、行方式17.07.202225效率/可用性可見(jiàn)性可見(jiàn)性的原則使用戶了解系統(tǒng)所有的功能和組件，包括用戶所有的動(dòng)作和回饋同時(shí)顯示所有的組件會(huì)導(dǎo)致界面混亂，不顯示所有的組件會(huì)丟失某些功能.(Norman, 1998, 74)17.07.202226效率/可用性可見(jiàn)性超負(fù)荷僅僅用可見(jiàn)性原則，而不考慮漸進(jìn)披露使用能導(dǎo)致可視化超負(fù)載反饋直接操縱界面需要高可見(jiàn)性，因?yàn)樗麄円罁?jù)用戶的動(dòng)作來(lái)界定即時(shí)的視覺(jué)反饋漸進(jìn)披露原則和簡(jiǎn)潔性原則應(yīng)該和可見(jiàn)性原則聯(lián)合作用17.07.202227效率/可用性可見(jiàn)性識(shí)別/回憶識(shí)別和回憶可見(jiàn)性的原則基于這樣的實(shí)事，人們識(shí)別比回憶更好一些 定位人們需要能夠在復(fù)雜的信息環(huán)境中確定自己的

10、位置17.07.202228分組低層次原則 用于關(guān)于屏幕控制菜單和布局的決策使用視覺(jué)暗示支持界面的邏輯結(jié)構(gòu)感知格式塔原則格式塔心理學(xué)建立在感知環(huán)境作為整體的一部分的基礎(chǔ)上，即使是感知環(huán)境并沒(méi)有表示出整體的信息格式塔心理學(xué)的核心是為不完整的視覺(jué)信息找最簡(jiǎn)單的解決方法格式塔心理學(xué)試圖解釋分組中的各種元素17.07.202229感知格式塔原則圖形和背景: 基本假設(shè)我們感知環(huán)境由于對(duì)象和他們的背景的不同而不同The Rubin Face/Vase IllusionMac Logo17.07.202230感知格式塔原則格式塔原則理解:Proximity相近性 Similarity相似性 Common F

11、ate共同性Closure封閉型Good Continuity好的連續(xù)性 Area區(qū)域性Symmetry對(duì)稱性Surroundedness環(huán)繞性Prgnanz簡(jiǎn)潔17.07.202231感知格式塔原則相近性原則 功能比較相近的元素應(yīng)該放在一起 Equidistant Horizontal Proximity Vertical Proximity17.07.202232感知格式塔原則相近性原則 - Adobe PhotoShop屬性對(duì)話框17.07.202233感知格式塔原則相似性原則 具有相似的特點(diǎn)如大小、形狀、顏色等的對(duì)象應(yīng)該分配一組Rows of Similar ObjectsColumn

12、s of Similar ObjectsGrouped Columns17.07.202234感知格式塔原則Macromedias Dreamweaver屬性面板我們的眼睛可以挑出所有的文本框，因?yàn)樗麄冇泄餐乃{(lán)區(qū)域和白區(qū)域17.07.202235感知格式塔原則共同性原則 對(duì)象要移到一起，使得看上去有關(guān)系 未對(duì)起的下拉菜單 對(duì)起的下拉菜單17.07.202236感知格式塔原則封閉性原則 設(shè)計(jì)過(guò)程中即使對(duì)像形狀上有間隙也把它視為完整的 17.07.202237感知格式塔原則良好的連續(xù)性原則 我們期望看事情要比較平滑，連續(xù)的表現(xiàn)，而不要有陡峭的變化17.07.202238感知格式塔原則區(qū)域原則 將

13、具有很小區(qū)域的對(duì)象視為圖形而不是背景（最小化原則）17.07.202239感知格式塔原則 對(duì)稱原則 對(duì)稱區(qū)域往往被看成從中間位置完整的圖 平移 反射 旋轉(zhuǎn)17.07.202240感知格式塔原則環(huán)繞原則 一個(gè)被保衛(wèi)的區(qū)域被看作圖，包圍圖的看作背景17.07.202241感知格式塔原則簡(jiǎn)潔原則 我們傾向與使用最簡(jiǎn)單、最穩(wěn)定或最完整解釋來(lái)認(rèn)識(shí)事物 共同性原則的視覺(jué)沖突 環(huán)繞性原則的視覺(jué)沖突17.07.202242其他感知原則 刺激強(qiáng)度我們首先感覺(jué)到是刺激的強(qiáng)度然后才是行為的含義17.07.202243其他感知原則比例比例可以用來(lái)表示邏輯的層次Heading Level 1Heading Level

14、2Heading Level 3Heading Level 4Heading Level 5Heading Level 617.07.202244其他感知原則比例黃金分割 黃金分割就是兩個(gè)參數(shù)之間，如果高和寬度的比，必須是0.61817.07.202245其他感知原則比例黃金分割17.07.202246其他感知原則比例Fibonacci 數(shù)序列，每一個(gè)數(shù)是后面兩個(gè)數(shù)的和數(shù)的關(guān)系類似與黃金分割 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 17.07.202247其他感知原則屏幕復(fù)雜度由Tullis提出的的復(fù)雜性評(píng)估

15、標(biāo)準(zhǔn)可用于計(jì)算計(jì)算設(shè)計(jì)相對(duì)的復(fù)雜度和困難度復(fù)雜度的度量使用信息理論 (Shannon & Weaver, 1949)17.07.202248其他感知原則屏幕復(fù)雜度計(jì)算復(fù)雜度的公式C, 以bit表示的系統(tǒng)的復(fù)雜度N, 所有組件的總數(shù)(高度或?qū)挾?m, 組件的分類數(shù)目pn, nth類組件出現(xiàn)的概率(以該類組件出現(xiàn)的頻率為基礎(chǔ))17.07.202249其他感知原則屏幕復(fù)雜度為了計(jì)算屏幕復(fù)雜性的度量，要做下面的工作：:使用矩形包圍屏幕中的每個(gè)元素計(jì)算屏幕中元素的數(shù)目及列的數(shù)目（垂直方向的對(duì)齊點(diǎn)）計(jì)算元素的數(shù)目及行的數(shù)目（水平方向上的對(duì)齊點(diǎn)）17.07.202250其他感知原則屏幕復(fù)雜度17.07.20

16、2251其他感知原則屏幕復(fù)雜度為了減少界面的復(fù)雜度重新設(shè)計(jì)了原始屏幕17.07.202252其他感知原則屏幕復(fù)雜度復(fù)雜度和可用性Comber and Maltby (1997) 指出過(guò)屏幕簡(jiǎn)單和過(guò)復(fù)雜都是低可用性的17.07.202253其他感知原則屏幕復(fù)雜度復(fù)雜性與可用性Comber and Maltby 用下面的三個(gè)部分定義可用性:有效性可學(xué)習(xí)性態(tài)度17.07.202254其他感知原則屏幕復(fù)雜度Comber and Maltby 建立可用性和復(fù)雜性的平衡:隨著復(fù)雜度的降低，屏幕中的元素將變得更難以區(qū)分，屏幕也會(huì)變得更加呆板隨著復(fù)雜度降低，可預(yù)見(jiàn)性將減少?gòu)?fù)雜性的增強(qiáng)，意味著元素分組方式的減少過(guò)分的復(fù)雜使得屏幕顯得無(wú)序復(fù)雜度的增強(qiáng)將也會(huì)增強(qiáng)系統(tǒng)性能17.07.202255其他感知原則分辨率/封閉分辨率/閉合