第5講人機(jī)交互技術(shù)1

1、1第第5章章 人機(jī)交互技術(shù)人機(jī)交互技術(shù)25.1人機(jī)交互技術(shù)概述 n人機(jī)交互技術(shù)發(fā)生的歷史及發(fā)展趨勢(shì) n根據(jù)用戶界面的具體形式n分為批處理n聯(lián)機(jī)終端(命令接口)n文本菜單nWIMP界面n多媒體用戶界面n多通道用戶界面和虛擬現(xiàn)實(shí)用戶界面35.1人機(jī)交互技術(shù)概述n人機(jī)交互技術(shù)發(fā)生的歷史及發(fā)展趨勢(shì) n根據(jù)根據(jù)用戶界面中信息載體的類型 n文本為主的字符用戶界面(CUI)n二維圖形為主的圖形用戶界面(GUI)n多媒體用戶界面 45.1人機(jī)交互技術(shù)概述n人機(jī)交互技術(shù)發(fā)生的歷史及發(fā)展趨勢(shì)n根據(jù)計(jì)算機(jī)輸出信息的形式n以符號(hào)為主的字符界面n以視覺(jué)感知為主的圖形用戶界面n兼顧聽覺(jué)感知的多媒體用戶界面n綜合運(yùn)用多種感

2、觀(包括觸覺(jué)等)的虛擬現(xiàn)實(shí)技術(shù)55.1人機(jī)交互技術(shù)概述n人機(jī)交互技術(shù)發(fā)生的歷史及發(fā)展趨勢(shì)n根據(jù)人機(jī)界面中的信息維度，人機(jī)交互技術(shù)可以分為：n一維信息(主要指文本流，如早期電傳式終端)n二維信息(主要是二維圖形技術(shù)，利用了色彩、形狀、紋理等信息)n三維信息(主要是三維圖形技術(shù)，但顯示技術(shù)仍利用二維平面為主)和多維信息(多通道的多維信息)空間65.1人機(jī)交互技術(shù)概述n人機(jī)交互技術(shù)發(fā)生的歷史及發(fā)展趨勢(shì)n根據(jù)人機(jī)交互中采用的語(yǔ)言n形式語(yǔ)言:形式語(yǔ)言是一種人工語(yǔ)言，特點(diǎn)是簡(jiǎn)潔、嚴(yán)密、高效。n類自然語(yǔ)言:類自然語(yǔ)言則是介于計(jì)算機(jī)語(yǔ)言和自然語(yǔ)言之間。n自然語(yǔ)言:自然語(yǔ)言的語(yǔ)法成分有更多的規(guī)則，具有多義性、微

3、妙、豐富、靈活的特點(diǎn)。75.2命令行和文本菜單技術(shù) n5.2.1命令行 n真正意義上的人機(jī)交互開始于聯(lián)機(jī)終端的出現(xiàn) 。n用戶輸入文本命令，系統(tǒng)也以文本的形式表示對(duì)命令的響應(yīng)。這種人機(jī)界面稱為命令行界面。 8 圖5-1 命令行界面概念模型9命令行交互界面n操作系統(tǒng)MS-DOS是文本命令行交互界面。 n例如，需要將所有擴(kuò)展名為“.AAA”的文件替換為擴(kuò)展名為“.BBB”，如果在“我的電腦”或“WINDOWS資源管理器”中，需要一個(gè)一個(gè)地去查找、改名，操作的局限性是顯而易見的。利用命令rename drive:path 或ren drive:path ，使用通配符“*”或“？”，就可以方便地更改一組

4、文件名或擴(kuò)展名。 10命令行交互界面n不同的操作系統(tǒng)要用不同的命令進(jìn)入命令行界面。在Win9x/Me的開始菜單中的運(yùn)行程序中鍵入“command”命令，可進(jìn)入命令行界面。在Win2000/NT的開始菜單中的運(yùn)行程序中鍵入“cmd”命令，可進(jìn)入命令行界面。 n批處理文件（也稱為批處理程序或腳本）。批處理文件是無(wú)格式的文本文件，包含一條或多條命令，文件擴(kuò)展名為 bat或cmd。 115.2.2文本菜單 n字符界面下的菜單方式：在菜單方式下用戶必須在有限的一組選項(xiàng)中進(jìn)行識(shí)別和選擇，更多的是響應(yīng)而不是發(fā)出命令。n用戶不必記憶功能命令，縮短了用戶的培訓(xùn)時(shí)間，減少用戶的擊鍵次數(shù)，錯(cuò)誤處理能力也有了顯著提高

5、。 n在這種界面中，人還是被看成操作員，機(jī)器做出被動(dòng)的反應(yīng)，人只能使用手這一交互通道用鍵盤輸入選擇信息，通過(guò)視覺(jué)通道獲取信息，界面輸出只能為靜態(tài)的文本字符。 12文本菜單的設(shè)計(jì)n設(shè)計(jì)基于文本菜單的系統(tǒng)主要包括兩方面的工作：菜單的生成和顯示，內(nèi)部流程的控制及錯(cuò)誤處理。n【例4-2】圖書管理程序的主菜單的Java語(yǔ)言代碼。13nimport java.io.*;npublic class MenuDemonstatic void display_maintenace_menu() nSystem.out.print(“nnttnn”);nSystem.out.println (“t1-注冊(cè)借書者”

6、);nSystem.out.println (“t2-注冊(cè)圖書”);n.nSystem.out.println (“t0-返回主菜單”);nnpublic static void main(String args) throws Exceptionnboolean quit=false;nchar ch;ndo ndisplay_mainmenu();nch = (char)System.in.read();nswitch (ch)nn./調(diào)用相應(yīng)的處理函數(shù)nnwhile(!quit);nSytem.in.read();nn145.3圖形用戶界面 n圖形用戶界面又稱為WIMP界面，由窗口(wi

7、ndows)、圖標(biāo)(icons)、菜單m)、指點(diǎn)設(shè)備(pointing device)四位一體，形成桌面(desktop) ，如圖4-2所示。n圖形用戶界面是當(dāng)前用戶界面的主流，廣泛應(yīng)用于各檔臺(tái)式微機(jī)和圖形工作站。n比較成熟的商品化系統(tǒng)有Apple的Macintosh、IBM的PM(Presentation Manager)、Microsoft的Windows和運(yùn)行于Unix環(huán)境的X-Window、OpenLook和OSF/Motif等。15圖5-2 WIMP界面概念模型 165.3圖形用戶界面n圖形用戶界面的共同特點(diǎn)是以窗口管理系統(tǒng)為核心，使用鍵盤和鼠標(biāo)器作為輸入設(shè)備。n窗口管理系統(tǒng)除了基于

8、可重疊多窗口管理技術(shù)外，廣泛采用的另一核心技術(shù)是事件驅(qū)動(dòng)(event-driven)技術(shù)。 175.3圖形用戶界面nWIMP界面可看作是第二代人機(jī)界面，是基于圖形方式的人機(jī)界面。n在WIMP界面中，人被稱為用戶，人機(jī)通過(guò)對(duì)話進(jìn)行工作。n用戶只能使用手這一種交互通道輸入信息，通過(guò)視覺(jué)通道獲取信息。n在WIMP界面中，界面的輸出可以為靜態(tài)或動(dòng)態(tài)的二維圖形或圖像等信息。185.3圖形用戶界面n這種方式能同時(shí)輸出不同種類的信息，用戶也可以在幾個(gè)工作環(huán)境中切換而不丟失幾個(gè)工作之間的聯(lián)系，通過(guò)菜單可以執(zhí)行控制型和對(duì)話型任務(wù)。n由于引入了圖標(biāo)、按鈕和滾動(dòng)條技術(shù)，大大減少鍵盤輸入，提高了交互效率。n基于鼠標(biāo)和

9、圖形用戶界面的交互技術(shù)極大地推動(dòng)了計(jì)算機(jī)技術(shù)的普及。 195.3.1圖形用戶界面的主要思想n圖形用戶界面的三個(gè)重要思想 n1 桌面隱喻桌面隱喻(desktop metaphor)n2 所見即所得（所見即所得（What You See Is What You Get，WYSIWYG） n3 直接操縱直接操縱(direct manipulation) 201.桌面隱喻桌面隱喻(desktop metaphor) n桌面隱喻是指在用戶界面中用人們熟悉的桌面上的圖例清楚地表示計(jì)算機(jī)可以處理的能力。n圖形具有一定的文化和語(yǔ)言獨(dú)立性，可以提高搜索目標(biāo)的效率。n圖形用戶界面中的圖例可以代表對(duì)象、動(dòng)作、屬性或

10、其他概念。 n隱喻的表現(xiàn)方法:n靜態(tài)圖標(biāo)n動(dòng)畫n視頻 21n隱喻的分類：n直接隱喻：隱喻本身就帶有操縱的對(duì)象n如Word繪圖工具中的圖標(biāo)，每種圖標(biāo)分別代表不同的圖形繪制操作。n工具隱喻：代表所使用的工具n如用磁盤圖標(biāo)隱喻存盤操作、用打印機(jī)圖標(biāo)隱喻打印操作等，這種隱喻設(shè)計(jì)簡(jiǎn)單、形象直觀，應(yīng)用也最為普遍。n過(guò)程隱喻：其通過(guò)描述操作的過(guò)程來(lái)暗示該操作n如Word中的撤銷和恢復(fù)圖標(biāo)。22n晦澀的隱喻不僅不能增加可用性，反而會(huì)弄巧成拙。n隱喻的主要缺點(diǎn)：n需要占用屏幕空間n難以表達(dá)和支持比較抽象的信息。 232.所見即所得（所見即所得（WYSIWYG）n在WYSIWYG交互界面中顯示的用戶交互行為與應(yīng)用

11、程序最終產(chǎn)生的結(jié)果是一致的。 n非WYSIWYG的編輯器，用戶只能看到文本的控制代碼，對(duì)于最后的輸出結(jié)果缺乏直觀的認(rèn)識(shí)。 nWYSIWYG的一些弊端：n如果屏幕的空間或顏色的配置方案與硬件設(shè)備所提供的配置不一樣，在兩者之間就很難產(chǎn)生正確的匹配。n文本處理器都提供了定義章、節(jié)、小節(jié)等的標(biāo)記，這些標(biāo)記顯式地標(biāo)明了對(duì)象的屬性，但并不是用戶最終輸出結(jié)果的一部分。 243.直接操縱直接操縱(direct anipulation) n直接操縱是指可以把操作的對(duì)象、屬性、關(guān)系顯式地表示出來(lái)，用光筆、鼠標(biāo)、觸摸屏或數(shù)據(jù)手套等指點(diǎn)設(shè)備直接從屏幕上獲取形象化命令與數(shù)據(jù)的過(guò)程。n直接操縱的對(duì)象是命令、數(shù)據(jù)或是對(duì)數(shù)據(jù)

12、的某種操作。 25直接操縱的特性 n1. 直接操縱的對(duì)象是動(dòng)作或數(shù)據(jù)的形象隱喻n形象隱喻應(yīng)該與其實(shí)際內(nèi)容相近，使用戶能通過(guò)屏幕上的隱喻直接想象或感知其內(nèi)容。n2. 用指點(diǎn)和選擇代替鍵盤輸入n用指點(diǎn)和選擇代替鍵盤輸入有兩個(gè)優(yōu)點(diǎn)，一是操作簡(jiǎn)便，速度快捷。n3. 操作結(jié)果立即可見n操作結(jié)果立即可見，用戶可以及時(shí)修正操作，逐步往正確的方向前進(jìn)。n4. 支持逆向操作n用戶在使用系統(tǒng)的過(guò)程中，不可避免地會(huì)出現(xiàn)一些操作錯(cuò)誤，通過(guò)逆向操作，用戶可以很方便地恢復(fù)到出現(xiàn)錯(cuò)誤之前的狀態(tài)。26直接操縱的特性n5. 借助物理的、空間的或形象的表示，而不是單純的文字或數(shù)字的表示。n6.不具備命令語(yǔ)言界面的某些優(yōu)點(diǎn).n例如

13、從用戶界面設(shè)計(jì)者角度看，設(shè)計(jì)圖形比較繁瑣，需進(jìn)行大量的測(cè)試和實(shí)驗(yàn).n7.表示復(fù)雜語(yǔ)義、抽象語(yǔ)義比較困難。 275.3.2設(shè)計(jì)圖形用戶界面的原則 n1. 一般性原則一般性原則 n(1)界面要具有一致性n在同一用戶界面中，所有的菜單選擇、命令輸入、數(shù)據(jù)顯示和其他功能應(yīng)保持風(fēng)格的一致性。 n(2) 常用操作要有快捷方式n為常用操作設(shè)計(jì)快捷方式，不僅會(huì)提高用戶的工作效率，還使界面在功能實(shí)現(xiàn)上簡(jiǎn)潔而高效。n(3)提供簡(jiǎn)單的錯(cuò)誤處理 n在出現(xiàn)錯(cuò)誤時(shí)，系統(tǒng)應(yīng)該能檢測(cè)出錯(cuò)誤，并且提供簡(jiǎn)單和容易理解的錯(cuò)誤處理功能 n(4) 對(duì)操作人員的重要操作要有信息反饋n提供信息反饋。對(duì)操作人員的重要操作要有信息反饋。285

14、.3.2設(shè)計(jì)圖形用戶界面的原則n1. 一般性原則一般性原則 n(5)操作可逆n對(duì)大多數(shù)動(dòng)作應(yīng)允許恢復(fù)(UNDO)，對(duì)用戶出錯(cuò)采取比較寬容的態(tài)度n(6)設(shè)計(jì)良好的聯(lián)機(jī)幫助n人機(jī)界面應(yīng)該提供上下文敏感的求助系統(tǒng)，讓用戶及時(shí)獲得幫助，盡量用簡(jiǎn)短的動(dòng)詞和動(dòng)詞短語(yǔ)提示命令。 n(7)合理劃分并高效地使用顯示屏n只顯示與上下文有關(guān)的信息，允許用戶對(duì)可視環(huán)境進(jìn)行維護(hù)，如放大、縮小窗口；用窗口分隔不同種類的信息，只顯示有意義的出錯(cuò)信息 n(8)保證信息顯示方式與數(shù)據(jù)輸入方式的協(xié)調(diào)一致n盡量減少用戶輸入的動(dòng)作，隱藏當(dāng)前狀態(tài)下不可用的命令，允許用戶自選輸入方式，能夠刪除錯(cuò)誤的輸入，允許用戶控制交互過(guò)程。 295.

15、3.2設(shè)計(jì)圖形用戶界面的原則n2.顏色的使用顏色的使用 n顏色是一種有效的強(qiáng)化手段，同時(shí)具有美學(xué)價(jià)值。使用顏色時(shí)應(yīng)注意如下幾點(diǎn)：n(1)限制同時(shí)顯示的顏色數(shù).n(2)畫面中活動(dòng)對(duì)象的顏色應(yīng)鮮明，而非活動(dòng)對(duì)象應(yīng)暗淡。n(3)盡量避免不相容的顏色放在一起，如黃與藍(lán)，紅與綠等，除非作對(duì)比時(shí)用。n(4)若用顏色表示某種信息或?qū)ο髮傩?，要使用戶理解這種表示，并盡量采用通用的表示規(guī)則。305.3.2設(shè)計(jì)圖形用戶界面的原則n3.圖標(biāo)的設(shè)計(jì)圖標(biāo)的設(shè)計(jì) n圖標(biāo)是可視地表示實(shí)體信息的簡(jiǎn)潔、抽象的符號(hào)。n圖標(biāo)設(shè)計(jì)是方寸藝術(shù)，需要在很小的范圍內(nèi)表現(xiàn)出圖標(biāo)的內(nèi)涵。n設(shè)計(jì)圖標(biāo)時(shí)應(yīng)該著重考慮視覺(jué)沖擊力，要使用簡(jiǎn)單的顏色，利

16、用眼睛對(duì)色彩和網(wǎng)點(diǎn)的空間混合效果，做出精彩圖標(biāo) 。315.3.2設(shè)計(jì)圖形用戶界面的原則n設(shè)計(jì)圖標(biāo)時(shí)須遵守的原則和方法：n（1）圖標(biāo)的圖形應(yīng)該和目標(biāo)的外形相似。盡量避免過(guò)于抽象。n（2）可在圖標(biāo)中附加上簡(jiǎn)要的文本標(biāo)注，使用戶明確圖標(biāo)的含義。n（3）設(shè)計(jì)圖標(biāo)應(yīng)盡可能簡(jiǎn)單，符合常規(guī)的表達(dá)習(xí)慣，保持圖標(biāo)含義的前后連貫。325.3.2設(shè)計(jì)圖形用戶界面的原則n4.按鈕的設(shè)計(jì)按鈕的設(shè)計(jì)n設(shè)計(jì)按鈕應(yīng)該具有交互性，應(yīng)該有3到6種狀態(tài)效果：n點(diǎn)擊時(shí)的狀態(tài)n鼠標(biāo)放在上面但未點(diǎn)擊的狀態(tài)n點(diǎn)擊前鼠標(biāo)未放在上面時(shí)的狀態(tài)n點(diǎn)擊后鼠標(biāo)未放在上面時(shí)的狀態(tài)n不能點(diǎn)擊時(shí)的狀態(tài)n獨(dú)立自動(dòng)變化的狀態(tài)n按鈕應(yīng)具備簡(jiǎn)潔的圖示效果，應(yīng)能夠讓

17、使用者產(chǎn)生功能上的關(guān)聯(lián)反應(yīng)。屬于一個(gè)群組的按鈕應(yīng)該風(fēng)格統(tǒng)一，功能差異大的按鈕應(yīng)該有所區(qū)別。 335.3.2設(shè)計(jì)圖形用戶界面的原則n5.屏幕布局的設(shè)計(jì)屏幕布局的設(shè)計(jì)n設(shè)計(jì)屏幕布局(Layout)時(shí)應(yīng)該使各功能區(qū)重點(diǎn)突出 ,應(yīng)遵循如下幾條原則： n(1)平衡原則n注意屏幕上下左右平衡。n(2) 預(yù)期原則n對(duì)屏幕上所有對(duì)象，如窗口、按鈕、菜單等處理應(yīng)一致化，使對(duì)象的操作結(jié)果可以預(yù)期。n(3) 經(jīng)濟(jì)原則n在提供足夠信息量的同時(shí)要注意簡(jiǎn)明、清晰。 n(4) 順序原則n對(duì)象顯示的順序應(yīng)按需要排列。n (5) 規(guī)則化n畫面應(yīng)對(duì)稱，顯示命令、對(duì)話及提示行在一個(gè)應(yīng)用系統(tǒng)的設(shè)計(jì)中盡量統(tǒng)一規(guī)范。34圖5-4 Wor

18、d中設(shè)置字體的界面 355.3.2設(shè)計(jì)圖形用戶界面的原則n6.菜單界面的設(shè)計(jì)菜單界面的設(shè)計(jì) n菜單在圖形界面的應(yīng)用程序中使用得非常普遍，是軟件界面設(shè)計(jì)的一個(gè)重要組成方面，描述了一個(gè)軟件的大致功能和風(fēng)格。 n菜單中的選項(xiàng)在功能上與按鈕相當(dāng)，一般具有下列一種或幾種類型的選項(xiàng)：命令項(xiàng)、菜單項(xiàng)和窗口項(xiàng)。 n菜單的結(jié)構(gòu)一般有單一菜單、線狀序列菜單、樹狀結(jié)構(gòu)菜單、網(wǎng)狀結(jié)構(gòu)菜單等，其中樹狀結(jié)構(gòu)菜單是最常見的結(jié)構(gòu)。 36n菜單的結(jié)構(gòu)n單一菜單n單一菜單是在幾個(gè)選項(xiàng)中做出選擇，可以有兩個(gè)或多個(gè)選項(xiàng)，用戶可以選中其中一個(gè)或確定多個(gè)選擇 。n線狀序列菜單n把一組相關(guān)聯(lián)的菜單組合在一起，用戶清楚地知道如何向前選擇和目

19、前在菜單中所處的位置，并且可以重返以前所作的選擇。 n樹狀結(jié)構(gòu)菜單n樹狀菜單是把選項(xiàng)劃分為若干類，類似的選項(xiàng)組成一組，最后形成一個(gè)樹狀結(jié)構(gòu) 。n網(wǎng)狀結(jié)構(gòu)菜單n網(wǎng)狀結(jié)構(gòu)菜單允許用戶在父輩菜單與子菜單之間切換，而不必重新回到父輩菜單然后再轉(zhuǎn)到子菜單。 375.3.2設(shè)計(jì)圖形用戶界面的原則n設(shè)計(jì)菜單界面時(shí)應(yīng)注意的一般性原則：n功能組織菜單，合理分類，并力求簡(jiǎn)短，前后一致n合理組織菜單界面的結(jié)構(gòu)與層次。n按一定的規(guī)則對(duì)菜單項(xiàng)進(jìn)行排序。 n菜單選項(xiàng)的標(biāo)題要力求文字簡(jiǎn)短、含義明確，并且最好以關(guān)鍵詞開始 。n常用選項(xiàng)要設(shè)置快捷鍵 。n充分利用菜單選項(xiàng)的使能與禁止、可見與隱藏屬性。 n使用彈出式菜單 。 385.3.2設(shè)計(jì)圖形用戶界面的原則n7.填表輸入界面的設(shè)計(jì)填表輸入界面的設(shè)計(jì) n在處理大量相關(guān)數(shù)據(jù)的場(chǎng)合下，需要輸入一系列的數(shù)據(jù)，這時(shí)填表輸入界面是最理想的數(shù)據(jù)輸入界面。n填表輸入界面有以下的特點(diǎn)： n有明確的提示，使用戶可以不需要學(xué)習(xí)、訓(xùn)練，也不必記憶有關(guān)的語(yǔ)義、語(yǔ)法規(guī)則。n填表輸入界面充分地利用了屏幕空間。 n在填表輸入方式中，可以充分利用上下文信息，幫助用戶完成輸入 。 395.3.2設(shè)計(jì)圖形用戶界面的原則n在設(shè)計(jì)填表輸入界面時(shí)應(yīng)遵循的原則 n一致性n保證前后用詞、語(yǔ)法一致。 n有含義的表格標(biāo)題n采