計算機圖形學課件chpt

1、北京大學計算機科學系圖形研究室人機交互第 四 章用戶界面設計董士海北京大學計算機科學系圖形研究室人機交互第四章 用戶界面設計（9學時）4.1 用戶界面的風格 4.2 用戶界面設計中的重要問題4.3 對話獨立性和對話的表示4.4 用戶界面的設計方法北京大學計算機科學系圖形研究室4.1 用戶界面的風格1. 命令語言2。菜單選項3。表格填充4。直接操作北京大學計算機科學系圖形研究室4.1 用戶界面的風格命令語言1。 舉例2.。功能考慮3。命令語言的組織4。設計要點北京大學計算機科學系圖形研究室4.1 用戶界面的風格命令語言1。命令語言舉例UNIX操作系統(tǒng)shell命令語言ls -l; who |wc

2、 -l; pscc -cc game.c lib1.0 lib2.0 lib3.0 lib4.0 &lib5.0 -lm -lcurses北京大學計算機科學系圖形研究室4.1 用戶界面的風格命令語言1。命令語言舉例$cat spell cat $* |tr -sc A-Za-z 012 |sort | uniq| comm -23 /usr/dict/words北京大學計算機科學系圖形研究室4.1 用戶界面的風格1。命令語言舉例數據庫查詢命令(dBASE 4).USE filename.SORT ON fieldname TO filename.INDEX ON fieldname TO in

3、dexfilename.DISPLAY FIELDS fieldlist FOR condition TO PRINT北京大學計算機科學系圖形研究室4.1 用戶界面的風格1。命令語言舉例vi正文編輯程序進入vivi filename插入正文i, a, o刪除正文d, dd, x正文檢索/and, ?and正文替換s/pear/peach/g退出viq!, :w北京大學計算機科學系圖形研究室4.1 用戶界面的風格2.。命令語言的功能考慮滿足用戶的任務需求不要貪多求全功能的完整性北京大學計算機科學系圖形研究室4.1 用戶界面的風格3。命令語言的組織簡單命令dd, :w命令帶參數cp f1 f2可選

4、項ls -ltasdriu分層命令結構動作+對象+結果copy file1 file2北京大學計算機科學系圖形研究室4.1 用戶界面的風格4。設計要點命令的設計要適合系統(tǒng)用戶的專業(yè)水平命令集的設計要考慮統(tǒng)一的模型和結構命令的命名和縮寫提供批處理命令和用戶創(chuàng)建宏的能力undo 和 redo 命令北京大學計算機科學系圖形研究室4.1 用戶界面的風格菜單選項1。菜單選項的語義組織：正文菜單和圖形菜單；固定菜單和活動菜單; 下拉式與彈出式菜單單一菜單；線性順序菜單；樹型菜單；（非）循環(huán)網絡型菜單；北京大學計算機科學系圖形研究室4.1 用戶界面的風格菜單選項2。菜單項的排列次序及快速變換菜單按自然順序按

5、字母順序，按使用頻度，按重要程度快速切換：用編號、字母選??；簡捷鍵 定義宏北京大學計算機科學系圖形研究室4.1 用戶界面的風格菜單選項3。選中時的反饋信息：選擇用：鍵盤的箭頭鍵或字母鍵、鼠標、制表鍵反饋： 加亮該菜單項；該菜單項反顯；該菜單項加下劃線；該項前加一小盒或作一記號（如v);菜單的屏幕布局：簡潔，一致，直觀北京大學計算機科學系圖形研究室4.1 用戶界面的風格菜單選項4。菜單選項的設計要點；根據系統(tǒng)功能的合理分類，選擇菜單選項的語義組織結構在一個菜單中應合理地對菜單項進行排列，以提高選取速度菜單應有標題，菜單項的名字含義應明確，易于用戶理解提高菜單選取的速度：硬件；簡捷鍵；宏；直接跳至

6、、退出選擇菜單項方法、選中反饋提示合理的屏幕布局、一致的風格菜單選取的“求助”機制。北京大學計算機科學系圖形研究室4.1 用戶界面的風格表格填充設計要點表格應有明確的表名、每一表項名，縮寫應含義明確，易理解表項應合理排列，應將關鍵表項放在前面或給以標記表格布局應設計美觀，如要打印輸出應與保存的文件頁面一致表格的操作機制應一致、通用，必要時給以提示。如年月日：yyyy/mm/dd, 時間hh/mm/ss, 光標移動tab鍵，退出esc鍵常用的表項值應提供缺省值，可填可不填的表項應有標記數據輸入應特別細致：字母左對齊，數值右對齊，小數點對齊，必要的“求助”機制當大批數據錄入時，應允許數據文件和表格

7、數據交換北京大學計算機科學系圖形研究室4.1 用戶界面的風格直接操作舉例：全屏幕正文編輯，交互排版數據庫查詢及電子表格軟件計算機輔助設計軟件窗口軟件HyperCard北京大學計算機科學系圖形研究室4.1 用戶界面的風格直接操作的特點1。對象的仿真表示2。實際動作代替復雜的語法3。操作結果的立即應答和直觀顯示4。動作的連續(xù)性和可逆性5。圖形和圖象的表示形式北京大學計算機科學系圖形研究室4.1 用戶界面的風格直接操作的若干問題1。有些應用中，圖形表示不一定比代碼、文字描述好2。有些圖符的含義不如文字清晰3。自然的表示可能使用戶操作時產生誤動作或迷路4。直接操作要求更多的資源：大的屏幕，快的響應時間

8、5。一些熟練的用戶采用鍵盤打字輸入比直接屏幕操作要快北京大學計算機科學系圖形研究室4.1 用戶界面的風格圖形用戶界面的標準化UNIX X Window(X11.3)OSF/Motif Open LookMicrosoft Windows北京大學計算機科學系圖形研究室4.2 用戶界面設計中的重要問題1。響應時間和顯示速率2。屏幕設計及信息提示3。聯機幫助、手冊及指導教材4。錯誤處理北京大學計算機科學系圖形研究室4.2 用戶界面設計中的重要問題用戶開始擊鍵系統(tǒng)開始響應用戶激活系統(tǒng) 系統(tǒng)完成響應響應時間（1秒）系統(tǒng)響應時間用戶計劃時間用戶思考時間北京大學計算機科學系圖形研究室4.2 用戶界面設計中的

9、重要問題顯示速率硬拷貝設備10-160cps字符終端30-1000cps圖形顯示5k-500k向量北京大學計算機科學系圖形研究室4.2 用戶界面設計中的重要問題2。屏幕設計及信息提示一般原則：先規(guī)劃，一致性，可讀性主要元素：顯示區(qū)，菜單或命令區(qū)，標題區(qū)，提示區(qū)其他信息（對話盒，數據錄入區(qū)，）彩色的運用：一屏少于7種；按重要性選顏色；先按亮度、再按色調區(qū)分；盡量符合顏色的習慣用法；背景宜用低飽和度的淺色；注意合理的色彩搭配；，北京大學計算機科學系圖形研究室4.2 用戶界面設計中的重要問題3。聯機幫助、手冊及指導教材設計原則：隨時均可使用，統(tǒng)一的風格； 語言簡潔易懂，給出例子； 聯機幫助時，不改變

10、用戶工作狀態(tài)； 聯機幫助內容應與上下文位置有關； 盡可能使用易懂及活潑的形式 北京大學計算機科學系圖形研究室4.2 用戶界面設計中的重要問題4. 錯誤處理除容錯設計，魯棒性技術，診斷措施，以外 ，應：1。如何減少輸入錯誤2。關于計算錯誤3。其他錯誤4。錯誤信息準確和定位，再次確認，歷史文件， 北京大學計算機科學系圖形研究室4.3 對話獨立性和對話的表示1. 若干概念2。對話的結構模型3。表示技術狀態(tài)轉換圖上下文無關文法事件模型其他北京大學計算機科學系圖形研究室4.3 對話獨立性和對話的表示1. 若干概念對話獨立性：是交互系統(tǒng)的一種特性，它將對話（交互界面）的設計與應用系統(tǒng)（或計算部件）的設計分

11、開，因而兩者之一的改動，不會影響或 引起另一方的改動。好處：界面與應用容易分別修改，容易分別維護，容易由界面設計工具生成統(tǒng)一風格的“界面”，提高軟件的可移植性。北京大學計算機科學系圖形研究室4.3 對話獨立性和對話的表示1. 若干概念人機對話（交互）與人機界面是不同概念。但在界面開發(fā)過程中兩者關系密切?！皩υ挭毩⑿浴睂嶋H上指“界面的獨立性” 界面與應用的分離。對話部件與計算部件。 順序對話：系統(tǒng)向用戶提供的操作為每次一項。異步對話：即多線索（multi-thread）對話。最終用戶在某一時刻或狀態(tài)下，可使用多個處理任務，不一定有規(guī)定的次序，不一定每次一項。并發(fā)對話是能同時執(zhí)行多于一個任務的異步

12、對話。北京大學計算機科學系圖形研究室4.3 對話獨立性和對話的表示2。對話的結構模型目前的界面模型主要有兩種：結構模型（Constructional）是從系統(tǒng)的角度來表示界面交互;行為模型（Behavioral）是從用戶和任務的角度，如任務分析、功能分析、用戶模型等，是面向用戶和任務的。北京大學計算機科學系圖形研究室4.3 對話獨立性和對話的表示行為模型(1). GOMSCard et al 1983是提出比較早、影響也比較大的一個用戶模型，它采用目標手段分解的思想，試圖將交互任務進行足夠細致的分解到合適的原子層次（稱為操作步），來準確預測交互時間等性能指標。GOMS采用四種成分來描述用戶行為

13、：目標（goal），操作步（operator），方法（method）和選擇規(guī)則（ selection rule）。其中操作步指一些基本的知覺、動作和認知活動；方法指完成某目標的操作步或子方法序列；選擇規(guī)則在有多個方法來解決同一任務時決定選擇哪一個。北京大學計算機科學系圖形研究室4.3 對話獨立性和對話的表示行為模型(2). TAG( Task Action Grammar)TAGPayne and Green 1986是一種形式化的任務分析模型，它可用來尋求界面任務語言的思維表現形式。(3). UAN(User Action Notation)UAN是由Virginia Tech開發(fā)的一種行為

14、表示手段Hartson et al 1990，UAN著眼于用戶和界面這兩個交互實體，刻化了二者在協(xié)同完成一個特定任務時的交互行為序列。北京大學計算機科學系圖形研究室4.3 對話獨立性和對話的表示Seeheim結構模型表示部件對話控制應用接口最終用戶應用程序北京大學計算機科學系圖形研究室4.3 對話獨立性和對話的表示Seeheim結構模型1. 表示部件：負責人機界面的外部表現2。對話控制：協(xié)調用戶和應用程序3。應用接口：從界面觀點看到的應用程序的一種表述4。三部件之間的聯系北京大學計算機科學系圖形研究室4.3 對話獨立性和對話的表示3。（結構模型）表示技術狀態(tài)轉換圖上下文無關文法事件模型其他北京

15、大學計算機科學系圖形研究室4.3 對話獨立性和對話的表示狀態(tài)轉換圖形式化描述：用狀態(tài)轉換圖描述人機對話是一個七元組：M=(Q , % , P, /, ., qo, f )Q 是狀態(tài)的有限集合。% 是輸入符號的有限集合，該輸入符號由表示部件所生成。 P 是動作的有限集合，這些動作是由狀態(tài)轉換圖的狀態(tài)所標記。 / 是狀態(tài)轉換函數，它作下列映射： Q X % - Q . 是動作函數，它作下列映射： Q - P qo 0 Q 是M的初始狀態(tài)。 f 是M終止狀態(tài)的集合。北京大學計算機科學系圖形研究室4.3 對話獨立性和對話的表示狀態(tài)轉換圖形式化描述：對于遞歸狀態(tài)轉換圖，可由九元組來定義：M=(Q , %

16、 , P, ! , /, ., qo, Zo, f )! 是下推表的有限集合。Zo 是下推表的初始符號。北京大學計算機科學系圖形研究室4.3 對話獨立性和對話的表示狀態(tài)轉換圖BYEXGOOFINFOnewentrySTARThelpquit201enter北京大學計算機科學系圖形研究室4.3 對話獨立性和對話的表示上下文無關文法形式化描述： G = ( N, T, R, P, S )N 是非終結符的有限集合T 是終結符的有限集合R 是與產生式相關的動作所對應的符號有限集合P 是產生式的有限集合S 是文法的起始符號北京大學計算機科學系圖形研究室4.3 對話獨立性和對話的表示上下文無關文法例子：c

17、ommand : = create | delete | zoomcreate : = CREATE TYPE positiondelete : = DELETE NAMEzoom : = ZOOM position position : = X_POSITION Y_POSITION北京大學計算機科學系圖形研究室4.3 對話獨立性和對話的表示上下文無關文法橡皮筋線表示實例：line:= button d1 end_pointend_point := move d2 end_point | button d3d1 := 記下第一個點的位置d2 := 從起始點畫線到當前位置d3 := 記下第二個

18、點的位置北京大學計算機科學系圖形研究室4.3 對話獨立性和對話的表示事件模型形式化描述：1）一個事件是一個三元組 R = ( i, m, d )I 是事件處理器名的集合M 是事件名的集合D 是事件值的值域2）事件處理器由六種語句組成，它們組成事件的處理過程。表達式賦值，If語句，call, ,北京大學計算機科學系圖形研究室4.3 對話獨立性和對話的表示事件模型形式化描述：3) 一個事件處理器是一個五元組 EH = (m,r,Q,R,P)m 是本事件處理器所處理事件類型的數目r 是本事件處理器中寄存器的數目Q 是事件處理器的事件隊列R 是EH中寄存器取值的集合P 是m個事件處理過程。北京大學計算

19、機科學系圖形研究室4.3 對話獨立性和對話的表示畫折線為例EVENT HANDLER polyline;TOKENbutton Button;move Move;backspace Backspace;cancel Cancel;finish Finish;VARpoint_count : integer;point_list : list of point;int state;北京大學計算機科學系圖形研究室4.3 對話獨立性和對話的表示EVENT Button DO IF state = 0 THENpoint_list = curent position;state = 1;point_count = 1ELSEadd current position to point_list;point_count = point_count + 1;ENDIF;:北京大學計算機科學系圖形研究室4.3 對話獨立性和對話的表示EVENT Move DO IF state = 1 THENdraw linee from lastt position to current position;ENDIF:EVENT Finish DO .;（略）EVENT Backspace DO .; （略）EV