計算機圖形學(xué)課件chpt

1、北京大學(xué)計算機科學(xué)系圖形研究室人機交互第 四 章用戶界面設(shè)計董士海北京大學(xué)計算機科學(xué)系圖形研究室人機交互第四章 用戶界面設(shè)計（9學(xué)時）4.1 用戶界面的風(fēng)格 4.2 用戶界面設(shè)計中的重要問題4.3 對話獨立性和對話的表示4.4 用戶界面的設(shè)計方法北京大學(xué)計算機科學(xué)系圖形研究室4.1 用戶界面的風(fēng)格1. 命令語言2。菜單選項3。表格填充4。直接操作北京大學(xué)計算機科學(xué)系圖形研究室4.1 用戶界面的風(fēng)格命令語言1。 舉例2.。功能考慮3。命令語言的組織4。設(shè)計要點北京大學(xué)計算機科學(xué)系圖形研究室4.1 用戶界面的風(fēng)格命令語言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北京大學(xué)計算機科學(xué)系圖形研究室4.1 用戶界面的風(fēng)格命令語言1。命令語言舉例$cat spell cat $* |tr -sc A-Za-z 012 |sort | uniq| comm -23 /usr/dict/words北京大學(xué)計算機科學(xué)系圖形研究室4.1 用戶界面的風(fēng)格1。命令語言舉例數(shù)據(jù)庫查詢命令(dBASE 4).USE filename.SORT ON fieldname TO filename.INDEX ON fieldname TO in

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

19、機科學(xué)系圖形研究室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;北京大學(xué)計算機科學(xué)系圖形研究室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;:北京大學(xué)計算機科學(xué)系圖形研究室4.3 對話獨立性和對話的表示EVENT Move DO IF state = 1 THENdraw linee from lastt position to current position;ENDIF:EVENT Finish DO .;（略）EVENT Backspace DO .; （略）EV