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

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

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

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

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

6、);nSystem.out.println (“t2-注冊圖書”);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./調用相應的處理函數nnwhile(!quit);nSytem.in.read();nn145.3圖形用戶界面 n圖形用戶界面又稱為WIMP界面，由窗口(wi

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

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

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

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

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

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

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

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

15、3.2設計圖形用戶界面的原則n2.顏色的使用顏色的使用 n顏色是一種有效的強化手段，同時具有美學價值。使用顏色時應注意如下幾點：n(1)限制同時顯示的顏色數.n(2)畫面中活動對象的顏色應鮮明，而非活動對象應暗淡。n(3)盡量避免不相容的顏色放在一起，如黃與藍，紅與綠等，除非作對比時用。n(4)若用顏色表示某種信息或對象屬性，要使用戶理解這種表示，并盡量采用通用的表示規則。305.3.2設計圖形用戶界面的原則n3.圖標的設計圖標的設計 n圖標是可視地表示實體信息的簡潔、抽象的符號。n圖標設計是方寸藝術，需要在很小的范圍內表現出圖標的內涵。n設計圖標時應該著重考慮視覺沖擊力，要使用簡單的顏色，利

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

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

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

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