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

1、北京大學(xué)計(jì)算機(jī)科學(xué)系圖形研究室人機(jī)交互第 四 章用戶界面設(shè)計(jì)董士海北京大學(xué)計(jì)算機(jī)科學(xué)系圖形研究室人機(jī)交互第四章 用戶界面設(shè)計(jì)（9學(xué)時(shí)）4.1 用戶界面的風(fēng)格 4.2 用戶界面設(shè)計(jì)中的重要問題4.3 對話獨(dú)立性和對話的表示4.4 用戶界面的設(shè)計(jì)方法北京大學(xué)計(jì)算機(jī)科學(xué)系圖形研究室4.1 用戶界面的風(fēng)格1. 命令語言2。菜單選項(xiàng)3。表格填充4。直接操作北京大學(xué)計(jì)算機(jī)科學(xué)系圖形研究室4.1 用戶界面的風(fēng)格命令語言1。 舉例2.。功能考慮3。命令語言的組織4。設(shè)計(jì)要點(diǎn)北京大學(xué)計(jì)算機(jī)科學(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é)計(jì)算機(jī)科學(xué)系圖形研究室4.1 用戶界面的風(fēng)格命令語言1。命令語言舉例$cat spell cat $* |tr -sc A-Za-z 012 |sort | uniq| comm -23 /usr/dict/words北京大學(xué)計(jì)算機(jī)科學(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é)計(jì)算機(jī)科學(xué)系圖形研究室4.1 用戶界面的風(fēng)格1。命令語言舉例vi正文編輯程序進(jìn)入vivi filename插入正文i, a, o刪除正文d, dd, x正文檢索/and, ?and正文替換s/pear/peach/g退出viq!, :w北京大學(xué)計(jì)算機(jī)科學(xué)系圖形研究室4.1 用戶界面的風(fēng)格2.。命令語言的功能考慮滿足用戶的任務(wù)需求不要貪多求全功能的完整性北京大學(xué)計(jì)算機(jī)科學(xué)系圖形研究室4.1 用戶界面的風(fēng)格3。命令語言的組織簡單命令dd, :w命令帶參數(shù)cp f1 f2可選

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

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

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

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

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

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

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

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

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

13、：目標(biāo)（goal），操作步（operator），方法（method）和選擇規(guī)則（ selection rule）。其中操作步指一些基本的知覺、動(dòng)作和認(rèn)知活動(dòng)；方法指完成某目標(biāo)的操作步或子方法序列；選擇規(guī)則在有多個(gè)方法來解決同一任務(wù)時(shí)決定選擇哪一個(gè)。北京大學(xué)計(jì)算機(jī)科學(xué)系圖形研究室4.3 對話獨(dú)立性和對話的表示行為模型(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著眼于用戶和界面這兩個(gè)交互實(shí)體，刻化了二者在協(xié)同完成一個(gè)特定任務(wù)時(shí)的交互行為序列。北京大學(xué)計(jì)算機(jī)科學(xué)系圖形研究室4.3 對話獨(dú)立性和對話的表示Seeheim結(jié)構(gòu)模型表示部件對話控制應(yīng)用接口最終用戶應(yīng)用程序北京大學(xué)計(jì)算機(jī)科學(xué)系圖形研究室4.3 對話獨(dú)立性和對話的表示Seeheim結(jié)構(gòu)模型1. 表示部件：負(fù)責(zé)人機(jī)界面的外部表現(xiàn)2。對話控制：協(xié)調(diào)用戶和應(yīng)用程序3。應(yīng)用接口：從界面觀點(diǎn)看到的應(yīng)用程序的一種表述4。三部件之間的聯(lián)系北京大學(xué)計(jì)算機(jī)科學(xué)系圖形研究室4.3 對話獨(dú)立性和對話的表示3。（結(jié)構(gòu)模型）表示技術(shù)狀態(tài)轉(zhuǎn)換圖上下文無關(guān)文法事件模型其他北京

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

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

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

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

19、機(jī)科學(xué)系圖形研究室4.3 對話獨(dú)立性和對話的表示畫折線為例EVENT HANDLER polyline;TOKENbutton Button;move Move;backspace Backspace;cancel Cancel;finish Finish;VARpoint_count : integer;point_list : list of point;int state;北京大學(xué)計(jì)算機(jī)科學(xué)系圖形研究室4.3 對話獨(dú)立性和對話的表示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é)計(jì)算機(jī)科學(xué)系圖形研究室4.3 對話獨(dú)立性和對話的表示EVENT Move DO IF state = 1 THENdraw linee from lastt position to current position;ENDIF:EVENT Finish DO .;（略）EVENT Backspace DO .; （略）EV