第11講 人機(jī)交互技術(shù)精

1、n誰來設(shè)計軟件的用戶界面？誰來設(shè)計軟件的用戶界面？n用戶眼中的好軟件用戶眼中的好軟件n好的用戶界面應(yīng)具備的特性好的用戶界面應(yīng)具備的特性n界面設(shè)計美學(xué)界面設(shè)計美學(xué)n用戶界面的主要思想用戶界面的主要思想n界面設(shè)計的原則界面設(shè)計的原則n“好好”的軟件意味著的軟件意味著“實用、易用、美觀實用、易用、美觀”n如果軟件的功能不實用（不能為用戶解決問題），那么如果軟件的功能不實用（不能為用戶解決問題），那么不管該軟件是否易用和美觀，用戶一般都不愿意購買該不管該軟件是否易用和美觀，用戶一般都不愿意購買該軟件，除非用戶沒有選擇余地。軟件，除非用戶沒有選擇余地。n如果兩個軟件的功能和價格都相似，那么用戶會挑選更如

2、果兩個軟件的功能和價格都相似，那么用戶會挑選更加易用的那個軟件。加易用的那個軟件。n如果兩個軟件的功能、價格、易用性都差不多，那么用如果兩個軟件的功能、價格、易用性都差不多，那么用戶會選擇更加美觀的那個軟件。戶會選擇更加美觀的那個軟件。n誰來評價誰來評價“好或差好或差”n用戶才真正有資格說軟件用戶才真正有資格說軟件“好或壞好或壞”。如果用戶對軟件。如果用戶對軟件很不滿意，開發(fā)人員不要有逆反情緒：從哪里找來的笨很不滿意，開發(fā)人員不要有逆反情緒：從哪里找來的笨蛋用戶！蛋用戶！ 軟件行業(yè)很少發(fā)生那么感動人的場景：軟件行業(yè)很少發(fā)生那么感動人的場景：用戶熱切地握著開發(fā)人員的手，連聲稱用戶熱切地握著開發(fā)人

3、員的手，連聲稱贊贊“你們開發(fā)的軟件真是好用、真是漂你們開發(fā)的軟件真是好用、真是漂亮啊亮啊”?？墒俏覀兛吹降拇蠖嗍窍喾吹??？墒俏覀兛吹降拇蠖嗍窍喾吹膱鼍埃河脩魸M腹牢騷，開發(fā)人員垂頭喪場景：用戶滿腹牢騷，開發(fā)人員垂頭喪氣。氣。n開發(fā)機(jī)構(gòu)宣揚(yáng)開發(fā)機(jī)構(gòu)宣揚(yáng)“以客戶為中心以客戶為中心”，但是卻撇開客戶只顧，但是卻撇開客戶只顧忙碌地開發(fā)軟件，做出客戶不會用的東西。忙碌地開發(fā)軟件，做出客戶不會用的東西。n很多軟件開發(fā)人員不能夠一次性地完成某些開發(fā)任務(wù)，很多軟件開發(fā)人員不能夠一次性地完成某些開發(fā)任務(wù)，主要原因不是技術(shù)水平低下，而是他們主要原因不是技術(shù)水平低下，而是他們沒有真正理解用沒有真正理解用戶的需求戶的需

4、求，也沒有站在用戶角度看待軟件。如果用戶不，也沒有站在用戶角度看待軟件。如果用戶不滿意軟件的功能和界面，那么開發(fā)人員將被迫重新開滿意軟件的功能和界面，那么開發(fā)人員將被迫重新開發(fā)。重新開發(fā)的代價顯然要比修改發(fā)。重新開發(fā)的代價顯然要比修改Bug大得多。大得多。n如果軟件企業(yè)能夠真正重視并且下功夫提升如果軟件企業(yè)能夠真正重視并且下功夫提升“需求分需求分析析”和和“用戶界面設(shè)計用戶界面設(shè)計”的能力，通常會顯著地提升軟的能力，通常會顯著地提升軟件生產(chǎn)率和客戶的滿意度。件生產(chǎn)率和客戶的滿意度。n能夠按照用戶的希望和需要，提供不同詳能夠按照用戶的希望和需要，提供不同詳細(xì)程度的系統(tǒng)響應(yīng)信息細(xì)程度的系統(tǒng)響應(yīng)信息

5、n與其它軟件系統(tǒng)應(yīng)有標(biāo)準(zhǔn)的界面與其它軟件系統(tǒng)應(yīng)有標(biāo)準(zhǔn)的界面n用戶可以根據(jù)需要制定和修改界面方式用戶可以根據(jù)需要制定和修改界面方式 為使用戶界面具有一定的靈活性，需要付出代為使用戶界面具有一定的靈活性，需要付出代價，而且有可能降低軟件系統(tǒng)的運(yùn)行效率價，而且有可能降低軟件系統(tǒng)的運(yùn)行效率n適度復(fù)雜性和可靠性適度復(fù)雜性和可靠性n用戶界面的規(guī)模和組織的復(fù)雜程度就是界用戶界面的規(guī)模和組織的復(fù)雜程度就是界面的復(fù)雜性。面的復(fù)雜性。n在完成預(yù)定功能的前提下，應(yīng)使用戶界面在完成預(yù)定功能的前提下，應(yīng)使用戶界面越簡單越好。但不是把所有功能和界面安越簡單越好。但不是把所有功能和界面安排成線性序列就一定簡單。排成線性序列

6、就一定簡單。n用戶界面的可靠性是指無故障使用的間隔用戶界面的可靠性是指無故障使用的間隔時間。時間。n用戶界面應(yīng)能保證用戶正確、可靠地使用用戶界面應(yīng)能保證用戶正確、可靠地使用系統(tǒng)，保證有關(guān)程序和數(shù)據(jù)的安全性。系統(tǒng)，保證有關(guān)程序和數(shù)據(jù)的安全性。n界面美觀性界面美觀性 優(yōu)美的界面可以令人賞心悅目，界面的美不僅是它的外觀漂亮，更在于其豐富的內(nèi)涵。 界面美的內(nèi)涵在于其有效表達(dá)思想的能力，這也是衡量美的一種標(biāo)準(zhǔn)，它的主要構(gòu)成因素是： 合適性、吸引力和風(fēng)格。 n桌面隱喻：桌面隱喻：是指在用戶界面中用人們熟悉的是指在用戶界面中用人們熟悉的桌面上的圖形清楚地表示計算機(jī)可以處理的桌面上的圖形清楚地表示計算機(jī)可以處

7、理的能力。能力。n圖形用戶界面中的圖例可以代表對象、動作、屬圖形用戶界面中的圖例可以代表對象、動作、屬性或其他概念。圖形具有一定的文化和語言獨(dú)立性或其他概念。圖形具有一定的文化和語言獨(dú)立性，可以提高搜索目標(biāo)的效率。性，可以提高搜索目標(biāo)的效率。n隱喻的分類：隱喻的分類：n直接隱喻：隱喻本身就帶有操縱的對象直接隱喻：隱喻本身就帶有操縱的對象如如Word繪圖工具中的圖標(biāo)繪圖工具中的圖標(biāo)n工具隱喻：代表所使用的工具工具隱喻：代表所使用的工具如存盤操作的磁盤如存盤操作的磁盤圖標(biāo)、打印操作的打印機(jī)圖標(biāo)等圖標(biāo)、打印操作的打印機(jī)圖標(biāo)等n過程隱喻：通過描述操作的過程來暗示該操作過程隱喻：通過描述操作的過程來暗示

8、該操作如如Word中的撤銷和恢復(fù)圖標(biāo)。中的撤銷和恢復(fù)圖標(biāo)。n隱喻的主要缺點：隱喻的主要缺點：n需要占用屏幕空間需要占用屏幕空間n難以表達(dá)和支持比較抽象的信息難以表達(dá)和支持比較抽象的信息n晦澀的隱喻不僅不能增加可用性，反而會晦澀的隱喻不僅不能增加可用性，反而會弄巧成拙。弄巧成拙。n所見即所得（所見即所得（What You See Is What You Get，WYSIWYG）n在在WYSIWYG交互界面中顯示的用戶交互行為與交互界面中顯示的用戶交互行為與應(yīng)用程序最終產(chǎn)生的結(jié)果是一致的，人們可以對應(yīng)用程序最終產(chǎn)生的結(jié)果是一致的，人們可以對于最后的輸出結(jié)果有直觀的認(rèn)識。于最后的輸出結(jié)果有直觀的認(rèn)識

9、。n弊端弊端：n如果屏幕的空間或顏色的配置方案與硬件設(shè)備所提供如果屏幕的空間或顏色的配置方案與硬件設(shè)備所提供的配置不一樣，在兩者之間就很難產(chǎn)生正確的匹配。的配置不一樣，在兩者之間就很難產(chǎn)生正確的匹配。n完全的完全的WYSIWYG也可能不適合某些用戶的需要。也可能不適合某些用戶的需要。 n直接操縱：是指可以把操作的對象、屬性、直接操縱：是指可以把操作的對象、屬性、關(guān)系顯式地表示出來，用光筆、鼠標(biāo)、觸摸關(guān)系顯式地表示出來，用光筆、鼠標(biāo)、觸摸屏或數(shù)據(jù)手套等指點設(shè)備直接從屏幕上獲取屏或數(shù)據(jù)手套等指點設(shè)備直接從屏幕上獲取形象化命令與數(shù)據(jù)的過程。形象化命令與數(shù)據(jù)的過程。n直接操縱的特性：直接操縱的特性：n

10、直接操縱的對象是動作或數(shù)據(jù)的形象隱喻直接操縱的對象是動作或數(shù)據(jù)的形象隱喻n形象隱喻應(yīng)該與其實際內(nèi)容相近，使用戶能通過屏幕上的隱形象隱喻應(yīng)該與其實際內(nèi)容相近，使用戶能通過屏幕上的隱喻直接想象或感知其內(nèi)容。喻直接想象或感知其內(nèi)容。n用指點和選擇代替鍵盤輸入用指點和選擇代替鍵盤輸入n有兩個優(yōu)點：一是操作簡便，速度快捷；二是不用記憶復(fù)雜有兩個優(yōu)點：一是操作簡便，速度快捷；二是不用記憶復(fù)雜的命令。的命令。n按鈕的設(shè)計原則：按鈕的設(shè)計原則：n具有交互性，應(yīng)該有具有交互性，應(yīng)該有3到到6種狀態(tài)效果：種狀態(tài)效果：n點擊時的狀態(tài)點擊時的狀態(tài)n鼠標(biāo)放在上面但未點擊的狀態(tài)鼠標(biāo)放在上面但未點擊的狀態(tài)n點擊前鼠標(biāo)未放在

11、上面時的狀態(tài)點擊前鼠標(biāo)未放在上面時的狀態(tài)n點擊后鼠標(biāo)未放在上面時的狀態(tài)點擊后鼠標(biāo)未放在上面時的狀態(tài)n不能點擊時的狀態(tài)不能點擊時的狀態(tài)n獨(dú)立自動變化的狀態(tài)獨(dú)立自動變化的狀態(tài)n按鈕應(yīng)具備簡潔的圖示效果，應(yīng)能夠讓使用者產(chǎn)按鈕應(yīng)具備簡潔的圖示效果，應(yīng)能夠讓使用者產(chǎn)生功能上的關(guān)聯(lián)反應(yīng)。屬于一個群組的按鈕應(yīng)該生功能上的關(guān)聯(lián)反應(yīng)。屬于一個群組的按鈕應(yīng)該風(fēng)格統(tǒng)一，功能差異大的按鈕可以有所區(qū)別。風(fēng)格統(tǒng)一，功能差異大的按鈕可以有所區(qū)別。n屏幕顯示信息是由計算機(jī)系統(tǒng)向用戶提供的屏幕顯示信息是由計算機(jī)系統(tǒng)向用戶提供的反饋信息，屏幕顯示界面的設(shè)計應(yīng)能展現(xiàn)這反饋信息，屏幕顯示界面的設(shè)計應(yīng)能展現(xiàn)這些信息。些信息。 n設(shè)計屏

12、幕布局時應(yīng)該使各功能區(qū)重點突出，應(yīng)遵設(shè)計屏幕布局時應(yīng)該使各功能區(qū)重點突出，應(yīng)遵循如下幾條原則：循如下幾條原則：n平衡原則：屏幕上下左右平衡平衡原則：屏幕上下左右平衡n預(yù)期原則：屏幕上所有對象處理一致化，使對象的操預(yù)期原則：屏幕上所有對象處理一致化，使對象的操作結(jié)果可預(yù)期作結(jié)果可預(yù)期n經(jīng)濟(jì)原則：提供足夠信息量的同時要注意簡明、清晰經(jīng)濟(jì)原則：提供足夠信息量的同時要注意簡明、清晰n順序原則：按照需要排列順序順序原則：按照需要排列順序n規(guī)則化：畫面應(yīng)對稱，顯示應(yīng)盡量統(tǒng)一規(guī)范規(guī)則化：畫面應(yīng)對稱，顯示應(yīng)盡量統(tǒng)一規(guī)范n菜單在圖形界面的應(yīng)用程序中使用得非常普菜單在圖形界面的應(yīng)用程序中使用得非常普遍，是軟件界面

13、設(shè)計的一個重要組成方面，遍，是軟件界面設(shè)計的一個重要組成方面，描述了一個軟件的大致功能和風(fēng)格。描述了一個軟件的大致功能和風(fēng)格。n菜單中的選項在功能上與按鈕相當(dāng)，一般具有下菜單中的選項在功能上與按鈕相當(dāng)，一般具有下列一種或幾種類型的選項：命令項、菜單項和窗列一種或幾種類型的選項：命令項、菜單項和窗口項?？陧棥菜單的結(jié)構(gòu)一般有：菜單的結(jié)構(gòu)一般有：n單一菜單單一菜單n線狀序列菜單線狀序列菜單n樹狀結(jié)構(gòu)菜單樹狀結(jié)構(gòu)菜單n網(wǎng)狀結(jié)構(gòu)菜單網(wǎng)狀結(jié)構(gòu)菜單n在處理大量相關(guān)數(shù)據(jù)的場合下，需要輸入一在處理大量相關(guān)數(shù)據(jù)的場合下，需要輸入一系列的數(shù)據(jù)，這時填表輸入界面是最理想的系列的數(shù)據(jù)，這時填表輸入界面是最理想的數(shù)據(jù)

14、輸入界面。數(shù)據(jù)輸入界面。n填表輸入界面的特點：填表輸入界面的特點： n有明確的提示，使用戶可以不需要學(xué)習(xí)、訓(xùn)練，也不有明確的提示，使用戶可以不需要學(xué)習(xí)、訓(xùn)練，也不必記憶有關(guān)的語義、語法規(guī)則。必記憶有關(guān)的語義、語法規(guī)則。n填表輸入界面充分地利用屏幕空間。填表輸入界面充分地利用屏幕空間。 n在填表輸入方式中，可以充分利用上下文信息，幫助在填表輸入方式中，可以充分利用上下文信息，幫助用戶完成輸入用戶完成輸入 。n舉例：觀察以下填表輸入界面，說出修改意舉例：觀察以下填表輸入界面，說出修改意見。見。n統(tǒng)一了標(biāo)簽和按鈕的設(shè)計，使它們看起來更像控統(tǒng)一了標(biāo)簽和按鈕的設(shè)計，使它們看起來更像控件；件； n所有欄目

15、的標(biāo)題文本靠左對齊；所有欄目的標(biāo)題文本靠左對齊； n使用灰色背景代替原有白色背景。使用淺黃色作使用灰色背景代替原有白色背景。使用淺黃色作標(biāo)題行的底色，代替原有灰色；標(biāo)題行的底色，代替原有灰色； n頂部的標(biāo)簽從右邊移動到左邊；頂部的標(biāo)簽從右邊移動到左邊； n底部的按鈕被重新排列。底部的按鈕被重新排列。 顏色設(shè)計顏色設(shè)計n以用戶為中心以用戶為中心n將界面置于用戶的控制之下將界面置于用戶的控制之下n減輕用戶的記憶負(fù)擔(dān)減輕用戶的記憶負(fù)擔(dān)n良好的直覺特性良好的直覺特性n保持界面的一致性保持界面的一致性n用戶應(yīng)該總是感覺在控制軟件而不是感覺被用戶應(yīng)該總是感覺在控制軟件而不是感覺被軟件所控制軟件所控制n用戶

16、用戶-而不是計算機(jī)或軟件而不是計算機(jī)或軟件-開始動作開始動作n采取交互式和易感應(yīng)的窗口采取交互式和易感應(yīng)的窗口n從用戶的視角出發(fā)，使用用戶的語言從用戶的視角出發(fā)，使用用戶的語言n后臺運(yùn)行長進(jìn)程時，保持前臺的交互性后臺運(yùn)行長進(jìn)程時，保持前臺的交互性n容忍用戶探索中出錯容忍用戶探索中出錯n提供用戶自定義設(shè)置提供用戶自定義設(shè)置 n用熟悉的隱喻為用戶的任務(wù)提供直接而直觀用熟悉的隱喻為用戶的任務(wù)提供直接而直觀的界面的界面 n喚醒用戶的知識和經(jīng)驗喚醒用戶的知識和經(jīng)驗 n支持用戶認(rèn)知而不是記憶支持用戶認(rèn)知而不是記憶 n與常見軟件保持一致與常見軟件保持一致 n一致性為用戶提供熟悉可預(yù)測的環(huán)境一致性為用戶提供熟

17、悉可預(yù)測的環(huán)境n用戶能夠?qū)⒁延械闹R應(yīng)用到新的任務(wù)中，用戶能夠?qū)⒁延械闹R應(yīng)用到新的任務(wù)中，從而更快地接受新事物從而更快地接受新事物 n統(tǒng)一的命令術(shù)語統(tǒng)一的命令術(shù)語n一致的操作環(huán)境一致的操作環(huán)境n一致的功能和響應(yīng)一致的功能和響應(yīng)n一致的隱喻一致的隱喻n交互交互n布局布局n色彩色彩n圖標(biāo)圖標(biāo)n聯(lián)機(jī)幫助聯(lián)機(jī)幫助n錯誤處理錯誤處理n盡量提供對所有功能的鍵盤訪問盡量提供對所有功能的鍵盤訪問 n盡量提供對所有功能的鼠標(biāo)訪問盡量提供對所有功能的鼠標(biāo)訪問 n不可逆的操作要求用戶確認(rèn)不可逆的操作要求用戶確認(rèn) n耗時的操作給出反饋耗時的操作給出反饋 n可視的狀態(tài)轉(zhuǎn)換反饋可視的狀態(tài)轉(zhuǎn)換反饋 n鼠標(biāo)右鍵僅用于快捷菜

18、單鼠標(biāo)右鍵僅用于快捷菜單 n快捷鍵的習(xí)慣一致性快捷鍵的習(xí)慣一致性 n避免水平滾動條避免水平滾動條n平衡原則平衡原則n整齊有序、整體平衡整齊有序、整體平衡n協(xié)調(diào)原則協(xié)調(diào)原則n劃分一致的功能區(qū)劃分一致的功能區(qū)n對比原則對比原則n預(yù)期原則預(yù)期原則n屏幕上所有對象的動作可預(yù)期屏幕上所有對象的動作可預(yù)期n順序原則順序原則n根據(jù)需要排列對象顯示的順序根據(jù)需要排列對象顯示的順序示例分析示例分析專業(yè)軟件一般都要提供反饋操作信息的窗口區(qū)域。n合理利用顏色，實現(xiàn)內(nèi)容與形式的協(xié)調(diào)合理利用顏色，實現(xiàn)內(nèi)容與形式的協(xié)調(diào)n采用柔和中性的顏色，支持用戶定制采用柔和中性的顏色，支持用戶定制n顏色設(shè)計一致顏色設(shè)計一致n盡量用單色

19、盡量用單色n一屏的色彩種類少于一屏的色彩種類少于7種種n對象顏色的選取符合習(xí)慣（如果有的話）對象顏色的選取符合習(xí)慣（如果有的話）n重要對象選取醒目顏色重要對象選取醒目顏色n為區(qū)分對象，首先按亮度、其次按顏色為區(qū)分對象，首先按亮度、其次按顏色n背景色選取淺色調(diào)背景色選取淺色調(diào)n暖色調(diào)接近觀眾，冷色調(diào)遠(yuǎn)離觀眾暖色調(diào)接近觀眾，冷色調(diào)遠(yuǎn)離觀眾n圖標(biāo)是可視地表示實體信息的簡潔、抽象的圖標(biāo)是可視地表示實體信息的簡潔、抽象的符號。符號。n設(shè)計圖標(biāo)時應(yīng)該著重考慮視覺沖擊力，要使用簡設(shè)計圖標(biāo)時應(yīng)該著重考慮視覺沖擊力，要使用簡單的顏色，利用眼睛對色彩和網(wǎng)點的空間混合效單的顏色，利用眼睛對色彩和網(wǎng)點的空間混合效果，做出精彩圖標(biāo)。果，做出精彩圖標(biāo)。n設(shè)計圖標(biāo)時須遵守的原則和方法：