用戶接口技術(shù)第1頁/共60頁用戶接口的發(fā)展Unnatural

InflexibilityInefficientComputer-OrientedHuman-OrientedHumanizationIntelligenceIndividualities

FormalInformal第2頁/共60頁新的人機(jī)交互技術(shù)FormalUserInterface

InformalUserInterfaceMulti-modalHuman-ComputerInteractionVirtualRealityVirtualRealityModelingImage-basedRendingPerceptualUserInterface/Recognition-basedInterfaceVoice-basedInteraction(VoiceRecognition)CalligraphicSketch-basedUserInterfaceHandwritingRecognition/UnderstandingSketchyDrawingRecognition/Understanding第3頁/共60頁GraphicUserInterface第4頁/共60頁圖形用戶界面GUI(GraphicUserInterface)八十年代的人機(jī)交互技術(shù)是以WIMP為特征的圖形用戶界面W指窗口(Window)：用戶可以隨意在屏幕上創(chuàng)建、移動(dòng)、縮放窗口，在不同的窗口中可以執(zhí)行不同的任務(wù)；I指圖標(biāo)(Icon)：它形象化地標(biāo)示一個(gè)對(duì)象或功能；M指菜單(Menu)：提供選項(xiàng)功能，避免命令記憶之苦；P指定位設(shè)備(PointingDevices)：便于用戶對(duì)屏幕對(duì)象進(jìn)行直接操作。第5頁/共60頁圖形用戶接口交互式構(gòu)圖技術(shù)圖形數(shù)據(jù)輸入用戶模型輸入功能虛擬現(xiàn)實(shí)環(huán)境多數(shù)應(yīng)用系統(tǒng)的人機(jī)接口都包含大量的圖形成分。一般而言，現(xiàn)有系統(tǒng)常包含有窗口、下拉式和彈出式菜單、圖符、以及用于確定屏幕光標(biāo)位置的指點(diǎn)設(shè)備如鼠標(biāo)或空間球。比較流行的圖形用戶接口有X窗口系統(tǒng)，Windows，Macintosh，OpenLook和Motif。它們應(yīng)用于文字處理、報(bào)刊系統(tǒng)、數(shù)據(jù)庫、文件管理系統(tǒng)、演示系統(tǒng)和頁面布局系統(tǒng)等各種應(yīng)用。圖形軟件包為每一種應(yīng)用如工程設(shè)計(jì)、建筑設(shè)計(jì)、數(shù)據(jù)可視化、繪圖、商用圖表和美術(shù)師畫筆程序等設(shè)計(jì)了專門的交互對(duì)話，X窗口系統(tǒng)與PHIGS結(jié)合就是一個(gè)例子。在本節(jié)中，討論圖形用戶接口的基本元素和交互對(duì)話技術(shù)。第6頁/共60頁用戶模型對(duì)特定應(yīng)用而言，用戶模型是設(shè)計(jì)對(duì)話的基礎(chǔ)。用戶模型說明所設(shè)計(jì)的系統(tǒng)能做什么，應(yīng)具備什么樣的圖形操作。它指明能顯示的對(duì)象類型以及如何管理對(duì)象。如果圖形系統(tǒng)是用來作為建筑設(shè)計(jì)的工具，則用戶模型要說明該軟件指定墻、門、窗和其它大樓成分從而構(gòu)造和顯示大樓視圖的方法；同樣，對(duì)一個(gè)設(shè)備布局系統(tǒng)，對(duì)象被定義成一組家具(桌子、椅子等等)而應(yīng)具備的操作功能則包括在布局范圍內(nèi)指定一件家具位置或移動(dòng)位置；電路設(shè)計(jì)則可在整個(gè)電路設(shè)計(jì)中使用電子或邏輯元件作為對(duì)象，提供增加元件、刪除元件及有關(guān)定位操作。用戶對(duì)話的所有信息必須按應(yīng)用的語言來表達(dá)，不引入特殊的數(shù)據(jù)結(jié)構(gòu)或其它對(duì)用戶來說不熟悉的概念。本節(jié)所討論的是在構(gòu)造用戶對(duì)話時(shí)的一般考慮。第7頁/共60頁用戶模型：窗口和圖符可視表示既用于應(yīng)用中管理的對(duì)象，又用于對(duì)應(yīng)用對(duì)象進(jìn)行的操作。窗口系統(tǒng)為用戶提供一個(gè)窗口管理接口，并提供窗口顯示和管理功能。窗口系統(tǒng)的一般功能有：打開和關(guān)閉窗口、對(duì)窗口重定位、縮放功能以及帶內(nèi)裁剪和外裁剪的顯示等。典型窗口包含拉桿、按鍵、菜單和圖符等用于選擇各種窗口操作。用來代表家具或電路元件等對(duì)象的圖符稱為應(yīng)用圖符。代表旋轉(zhuǎn)、放大、比例、裁剪和粘貼等動(dòng)作的圖符稱為控制圖符或命令圖符。某些通用系統(tǒng)如X窗口系統(tǒng)和WindowS可提供多個(gè)窗口管理程序，從而使不同風(fēng)格的窗口可同時(shí)在各自的管理程序控制下實(shí)現(xiàn)。窗口管理程序可以按特定應(yīng)用要求來設(shè)計(jì)；另一些窗口系統(tǒng)則針對(duì)一種應(yīng)用及窗口風(fēng)格來設(shè)計(jì)。第8頁/共60頁用戶模型：用戶適應(yīng)性通常，交互式圖形接口提供多種選擇動(dòng)作的方法。例如：選項(xiàng)的選擇可通過將光標(biāo)指向一個(gè)圖符然后按下不同的鼠標(biāo)鍵來實(shí)現(xiàn)；也可以通過下拉或彈出式菜單來選擇；還可以通過鍵入命令來選擇。這使軟件能適應(yīng)不同熟練層次的用戶。對(duì)經(jīng)驗(yàn)不多的用戶來說，一個(gè)有較少種類且容易理解的操作集加上詳細(xì)的提示的接口，要比一個(gè)有復(fù)雜的操作集的接口要高效得多。另一方面，有經(jīng)驗(yàn)的用戶需要速度。這意味著較少的提示和來自鍵盤或多種“鼠標(biāo)-按鍵”的輸入。同樣，幫助功能也可以分成幾個(gè)層次來設(shè)計(jì)，使初學(xué)者可以進(jìn)行較詳細(xì)的對(duì)話；較有經(jīng)驗(yàn)的用戶則可以減少或去掉提示和消息。幫助功能可以包含一個(gè)或多個(gè)輔導(dǎo)性應(yīng)用來介紹該軟件的功能和使用方法。第9頁/共60頁用戶模型：樣式一致性一致性是接口設(shè)計(jì)中需要考慮的要點(diǎn)之一。例如：一個(gè)特定的圖符應(yīng)該始終只有一個(gè)含義而不能依靠上下文來代表多個(gè)動(dòng)作或?qū)ο?。另外的一致性例子有：菜單總是放在相同的關(guān)聯(lián)位置使用戶不必去尋找特定的選擇；總是使用相同的組合鍵來代表同一個(gè)動(dòng)作；總是使用一種彩色編碼從而使相同的顏色在不同情況下不會(huì)有不同的含義。一般來說，一個(gè)復(fù)雜的，不一致的模型不僅難于被用戶理解，而且工作效率低。提供的對(duì)象和操作應(yīng)設(shè)計(jì)成一個(gè)最小的和一致的集合以便使該系統(tǒng)容易學(xué)習(xí)，但不能過于簡(jiǎn)化以致于難于使用。第10頁/共60頁用戶模型：減少記憶量接口的操作應(yīng)該組織得容易理解和記憶。模糊的、復(fù)雜的、不一致的和縮寫的命令格式會(huì)導(dǎo)致軟件使用時(shí)的混淆和低效。對(duì)所有刪除操作使用同一個(gè)鍵比對(duì)不同類型的刪除操作使用不同的鍵來得容易記憶。圖符和窗口系統(tǒng)也幫助減少記憶量。不同類的信息可以分別顯示在不同窗口中，因而在不同的信息重迭顯示時(shí)不必依賴于記憶?？梢院?jiǎn)單地在屏幕的不同窗口中保留不同的信息，并輪流在窗口之間轉(zhuǎn)換。通過顯示代表各種對(duì)象和操作的容易辨認(rèn)的圖符可以幫助減少記憶量，可以簡(jiǎn)單地通過選擇圖符來選擇它所代表的動(dòng)作。第11頁/共60頁用戶模型：回退與出錯(cuò)處理在一系列操作中，回退和取消機(jī)制是用戶接口的另一個(gè)公共的特點(diǎn)?；赝丝捎卸喾N形式來控制。一個(gè)標(biāo)準(zhǔn)的UNDO鍵或命令可用來取消一次單個(gè)的操作。有的系統(tǒng)可以回退若干步操作，這使得可把系統(tǒng)退回到某些特定的位置。在具有多步回退功能的系統(tǒng)中，所有輸入均被保存。有時(shí)操作不能被退回，這時(shí)，接口應(yīng)在確認(rèn)操作之后再進(jìn)行工作。設(shè)計(jì)一些好的診斷程序和提供出錯(cuò)消息可幫助確定發(fā)生錯(cuò)誤的原因。接口通過對(duì)可能導(dǎo)致錯(cuò)誤的一些動(dòng)作進(jìn)行預(yù)測(cè)來減少錯(cuò)誤可能性。例如當(dāng)沒有選中對(duì)象時(shí)不允許移動(dòng)一個(gè)對(duì)象位置或刪除對(duì)象；當(dāng)選中的對(duì)象不是“線”時(shí)不允許選擇線屬性；當(dāng)剪貼板上沒有對(duì)象時(shí)不允許選擇粘貼操作。第12頁/共60頁用戶模型：反饋處理用戶接口反饋的目的是讓用戶了解對(duì)話過程中每一步動(dòng)作的進(jìn)展情況。當(dāng)反應(yīng)速度很高時(shí)尤其重要。系統(tǒng)接收到每一次輸入后會(huì)給出某種類型的反應(yīng)。反饋信息應(yīng)足夠清晰使其不易被忽略，但也不能過分突出以至中斷用戶的注意力。為了提高反應(yīng)速度，常采用與所用設(shè)備操作特性相結(jié)合的反饋技術(shù)。對(duì)不同類型的反饋可設(shè)計(jì)專用符號(hào)。某些類型的輸入要求有回顯反饋：第13頁/共60頁圖形數(shù)據(jù)的輸入圖形程序使用若干種輸入數(shù)據(jù)。描述一張圖需要確定坐標(biāo)位置數(shù)值、字符串參數(shù)數(shù)值作為變換參數(shù)的標(biāo)量值、指定菜單選項(xiàng)數(shù)值和標(biāo)識(shí)圖成分的數(shù)值。任何一種輸入設(shè)備都可以用來輸入各種圖形數(shù)據(jù)，但有些設(shè)備用來輸入某種數(shù)據(jù)時(shí)比其它設(shè)備更適合。按設(shè)備輸入的數(shù)據(jù)類型而進(jìn)行的邏輯輸入設(shè)備分類：LOCATOR：指定坐標(biāo)位置(x，y)的設(shè)備(定位設(shè)備)STROKE：指定一組坐標(biāo)位置的設(shè)備(筆畫設(shè)備)STRING：指定文字輸入的設(shè)備(字符設(shè)備)VALUATOR：指定標(biāo)量值的設(shè)備(定值設(shè)備)CHOICE：選擇菜單項(xiàng)的設(shè)備(選擇設(shè)備)PICK：選擇圖的組成部分的設(shè)備(拾取設(shè)備)六種邏輯輸入設(shè)備中的每一種均可在任一硬件設(shè)備上實(shí)現(xiàn)，但某些硬設(shè)備對(duì)某種數(shù)據(jù)來說比其他設(shè)備更方便。第14頁/共60頁圖形數(shù)據(jù)的輸入：定位設(shè)備交互地選擇一個(gè)坐標(biāo)位置的標(biāo)準(zhǔn)方法是用屏幕光標(biāo)定位?？墒褂檬髽?biāo)、游戲棒、軌跡球、太空球、姆指輪、轉(zhuǎn)盤、數(shù)字化儀的觸筆或手動(dòng)光標(biāo)以及其他光標(biāo)定位設(shè)備來實(shí)現(xiàn)定位。當(dāng)屏幕光標(biāo)到所要位置時(shí)，按下某一鍵激活對(duì)該屏幕點(diǎn)坐標(biāo)的存儲(chǔ)。鍵盤可以幾種方式作為定位設(shè)備來使用：通用鍵盤一般有四個(gè)控制鍵將光標(biāo)向上、向下、向左和向右方移動(dòng)；增加另外四個(gè)鍵，就可以將光標(biāo)沿對(duì)角線方向移動(dòng)；將選擇的光標(biāo)鍵連續(xù)地壓下可實(shí)現(xiàn)光標(biāo)的快速移動(dòng)；作為一種選擇，游戲棒、游戲盤、軌跡球或姆指輪可裝在鍵盤上用來控制相應(yīng)的光標(biāo)移動(dòng)；最后一種手段，可以鍵入坐標(biāo)值，但這是很慢的，且要求知道精確的坐標(biāo)值。光筆也用來輸入坐標(biāo)位置，但必須做某些特殊的工作。第15頁/共60頁圖形數(shù)據(jù)的輸入：筆畫設(shè)備這一類邏輯輸入設(shè)備用于輸入一組順序的坐標(biāo)點(diǎn)。筆畫設(shè)備的輸入相當(dāng)于多次調(diào)用定位設(shè)備，輸入的一組點(diǎn)常用于顯示折線。許多用于產(chǎn)生定位輸入的物理設(shè)備均可以用作筆畫設(shè)備。鼠標(biāo)、軌跡球、游戲棒、或數(shù)據(jù)板手動(dòng)光標(biāo)的連續(xù)移動(dòng)的信號(hào)經(jīng)轉(zhuǎn)換成為一組坐標(biāo)位置值。圖形數(shù)據(jù)板是一種普通的筆畫設(shè)備。數(shù)據(jù)板的連續(xù)模式可通過按鍵激活。當(dāng)光標(biāo)在數(shù)據(jù)板表面上移動(dòng)時(shí)，就產(chǎn)生一組坐標(biāo)值。這樣的過程用于允許畫家在屏幕上畫景的畫筆系統(tǒng)和對(duì)布線圖跟蹤并經(jīng)數(shù)字化后存儲(chǔ)的工程系統(tǒng)中。第16頁/共60頁圖形數(shù)據(jù)的輸入：字符設(shè)備最基本的用于字符串輸入的物理設(shè)備是鍵盤。輸入的字符串常用作圖的標(biāo)記。另一些物理設(shè)備也可用來在寫字模式下生成字符圖案。這時(shí)通過筆畫或定位設(shè)備在屏幕上逐一畫字符。由一個(gè)模式識(shí)別程序按預(yù)定義的圖案來翻譯出字符來。第17頁/共60頁圖形數(shù)據(jù)的輸入：定值設(shè)備這一類邏輯設(shè)備在圖形系統(tǒng)中用來輸入標(biāo)量值。定值設(shè)備用于設(shè)定各種圖形參數(shù)，比如旋轉(zhuǎn)角度和比例因子，還用于為特定應(yīng)用設(shè)定物理參數(shù)(溫度、電壓等級(jí)、強(qiáng)度因子等)。用來提供定值輸入的典型的物理設(shè)備是一組控制旋鈕。通過旋轉(zhuǎn)旋鈕可輸入在預(yù)先指定的任意范圍內(nèi)的浮點(diǎn)數(shù)。向一個(gè)方向旋轉(zhuǎn)旋鈕增加輸入值而向相反方向旋轉(zhuǎn)則減小輸入值。除旋鈕外，拉桿電位器有時(shí)也用來將線性運(yùn)動(dòng)轉(zhuǎn)換成標(biāo)量值。任何一個(gè)帶有一組數(shù)字鍵的鍵盤都可用作定值設(shè)備，用戶可直接鍵入浮點(diǎn)格式的數(shù)值。這比使用旋鈕或拉桿電位器來得慢，但比較簡(jiǎn)單。游戲棒、軌跡球、數(shù)據(jù)板和其他交互設(shè)備可以在將壓力或運(yùn)動(dòng)對(duì)照一個(gè)標(biāo)量范圍解釋后改裝成為定值輸入設(shè)備，向一個(gè)方向的移動(dòng)增加輸入的標(biāo)量值，而相反方向的移動(dòng)則減小標(biāo)量值。提供標(biāo)量輸入的另一種技術(shù)是在屏幕上顯示拉桿、按鍵、旋轉(zhuǎn)式標(biāo)尺和菜單。第18頁/共60頁圖形數(shù)據(jù)的輸入：選擇設(shè)備圖形軟件使用菜單來選擇程序設(shè)計(jì)選項(xiàng)、參數(shù)值和構(gòu)造對(duì)象形狀。選擇設(shè)備定義為從一組任選項(xiàng)中給定一個(gè)選擇。常用選擇設(shè)備有一組按鍵、光標(biāo)定位設(shè)備如鼠標(biāo)鍵盤的光標(biāo)鍵和觸摸板等。作為獨(dú)立部件設(shè)計(jì)的功能鍵常用來輸入菜單選擇。通常每一個(gè)按鍵是可編程的，它的功能可以按不同應(yīng)用來改變。單用途按鍵有固定的、預(yù)定義的功能?？删幊坦δ苕I和固定功能按鍵常和其它鍵一起包括在鍵盤中?？捎霉鈽?biāo)控制設(shè)備對(duì)屏幕上列出的菜單選項(xiàng)進(jìn)行選擇。選定一個(gè)坐標(biāo)位置(x,y)后，將它與每一列出的菜單項(xiàng)范圍進(jìn)行比較。如果輸入的坐標(biāo)滿足：xmin≤x≤xmax，ymin≤y≤ymax，則以xmin，xmax，ymin，ymax為水平和垂直邊界的菜單項(xiàng)就被選中了。每次只有少量選項(xiàng)的大菜單通常使用觸摸屏幕，使用鼠標(biāo)這樣的光標(biāo)控制設(shè)備時(shí)，選定的屏幕位置要和每一菜單選項(xiàng)所在區(qū)域比較。選擇輸入的替代方法有鍵盤和聲音輸入。第19頁/共60頁圖形數(shù)據(jù)的輸入：拾取設(shè)備這一類邏輯設(shè)備的功能是選擇圖形對(duì)象。用于選擇對(duì)象的典型設(shè)備與選擇菜單的相同：光標(biāo)定位設(shè)備?？梢杂檬髽?biāo)或游戲棒將光標(biāo)定位在顯示結(jié)構(gòu)的圖元上然后按下按鍵，光標(biāo)位置被記錄下來后必要時(shí)經(jīng)過幾個(gè)層次的搜索定位出被選對(duì)象。首先，將光標(biāo)位置與場(chǎng)景中各個(gè)結(jié)構(gòu)的坐標(biāo)范圍比較，如果某一結(jié)構(gòu)的包圍矩形包含該光標(biāo)坐標(biāo)，則找到這一拾取結(jié)構(gòu)。尋找離光標(biāo)坐標(biāo)最近線條的一個(gè)方法是計(jì)算光標(biāo)坐標(biāo)點(diǎn)(x,y)到每一條其坐標(biāo)范圍包含該點(diǎn)的線段的距離平方。要加速距離計(jì)算，可使用各種近似方法或其它標(biāo)識(shí)方法。尋找離光標(biāo)坐標(biāo)點(diǎn)最近線段的另一方法是指定一個(gè)拾取窗口的大?。涸摯翱谝怨鈽?biāo)坐標(biāo)點(diǎn)為中心，對(duì)每一候選線段進(jìn)行裁剪，通過讓拾取窗口變得適當(dāng)?shù)匦。驼业轿ㄒ淮┻^該窗口的線段。避免計(jì)算拾取距離或窗口裁剪交點(diǎn)的一個(gè)方法是醒目顯示候選結(jié)構(gòu)并讓用戶解決拾取異義性：可逐個(gè)醒目顯示復(fù)蓋光標(biāo)點(diǎn)的結(jié)構(gòu)。當(dāng)醒目到所需結(jié)構(gòu)時(shí)用戶可以指出來。第20頁/共60頁圖形數(shù)據(jù)的輸入：輸入功能通過設(shè)定輸入功能，用戶可指定以下選項(xiàng)：何種物理設(shè)備用來為特定邏輯分類提供輸入；圖形程序和設(shè)備如何進(jìn)行交互(輸入模式)；何時(shí)輸入數(shù)據(jù)；何種設(shè)備在輸入時(shí)用來將特定數(shù)據(jù)類型傳遞到指定數(shù)據(jù)變量中。每種模式分別指明程序如何與輸入設(shè)備交互。請(qǐng)求模式：由應(yīng)用程序啟動(dòng)數(shù)據(jù)輸入，程序和輸入設(shè)備交替工作，設(shè)備處于等待狀態(tài)直到提出輸入請(qǐng)求，然后程序處于等待狀態(tài)直到收到數(shù)據(jù)。取樣模式：應(yīng)用程序和輸入設(shè)備各自獨(dú)立地操作。輸入設(shè)備可能在程序處理其它數(shù)據(jù)的同時(shí)工作。輸入設(shè)備的新的數(shù)據(jù)取代前面的輸入數(shù)據(jù)而被存儲(chǔ)起來。當(dāng)程序需要一個(gè)新數(shù)據(jù)時(shí)，就從輸入設(shè)備把當(dāng)前值取走。事件模式：輸入設(shè)備啟動(dòng)數(shù)據(jù)輸入并交給應(yīng)用程序。程序和輸入設(shè)備也是同時(shí)工作的，但是輸入設(shè)備將數(shù)據(jù)放進(jìn)一個(gè)輸入隊(duì)列中。所有輸入數(shù)據(jù)均存儲(chǔ)起來。當(dāng)程序需要一個(gè)新數(shù)據(jù)時(shí)，就從輸入隊(duì)列中取。在取樣模式和事件模式下，任意多的設(shè)備可同時(shí)工作。但在請(qǐng)求模式下在一個(gè)時(shí)間內(nèi)只能有一個(gè)設(shè)備能用來提供輸入。第21頁/共60頁交互式構(gòu)圖技術(shù)各種輸入選項(xiàng)被用來對(duì)由定位設(shè)備和筆畫設(shè)備的坐標(biāo)輸入進(jìn)行調(diào)整和解釋。如：可以限制所有的線條或者是水平的或者是垂直的。輸入的坐標(biāo)用來作為將繪制的對(duì)象的位置或邊界，或用來重新安排前面已經(jīng)顯示的對(duì)象。定位輸入所提供的坐標(biāo)值常與定位方法一起來指定顯示一個(gè)對(duì)象或一個(gè)字符串的位置?？墒褂靡粋€(gè)定位設(shè)備來交互式地選擇坐標(biāo)位置，通常是屏幕光標(biāo)。這主要是如何按選擇的選項(xiàng)來實(shí)現(xiàn)對(duì)象或字符串定位。比如：對(duì)字符串來說，屏幕上的點(diǎn)可用作字符串位置中心、始點(diǎn)、終點(diǎn)或其他定位選項(xiàng)；對(duì)直線段來說可在兩個(gè)選定的屏幕位置之間顯示該直線段；作為定位對(duì)象的一種輔助，所選位置的數(shù)據(jù)可在屏幕上回顯，在回顯坐標(biāo)值的指引下，可調(diào)整選擇位置直到獲得精確位置。第22頁/共60頁交互式構(gòu)圖技術(shù)：約束有些應(yīng)用需要預(yù)先說明一些對(duì)象的導(dǎo)向?qū)R方法。約束是改變輸入坐標(biāo)值來產(chǎn)生顯示坐標(biāo)的導(dǎo)向和對(duì)齊結(jié)束的規(guī)則?？芍付ǘ喾N約束功能，但最常用的約束是直線的水平或垂直方向?qū)R。使用這個(gè)約束，我們可以在生成水平和垂直線時(shí)不必對(duì)終點(diǎn)進(jìn)行精確描述。水平或垂直約束通過確定兩個(gè)輸入的端點(diǎn)更接近于水平還是更接近于垂直來實(shí)現(xiàn)。如果兩個(gè)端點(diǎn)的y坐標(biāo)值的差別小于x坐標(biāo)值的差別，就顯示水平線。否則就顯示垂直線。還可以使用另外的約束來對(duì)輸入坐標(biāo)進(jìn)行各種對(duì)齊處理。直線可以約束成具有固定角度，比如45°，輸入坐標(biāo)也可以約束到預(yù)定義的路徑，比如在一個(gè)圓弧上。第23頁/共60頁交互式構(gòu)圖技術(shù)：網(wǎng)格另一類約束在屏幕上某一部分顯示線條網(wǎng)格。在使用網(wǎng)格時(shí)，任何輸入坐標(biāo)位置靠到最近的兩根網(wǎng)格線交點(diǎn)上。兩個(gè)光標(biāo)位置均被移到最靠近的網(wǎng)格交點(diǎn)處，然后在這兩個(gè)交點(diǎn)之間畫一根直線段。網(wǎng)格給出了構(gòu)造對(duì)象的設(shè)施，因?yàn)橐粭l新的線段可以很容易地與前一條線相連接，操作員只需在靠近顯示線段一個(gè)端點(diǎn)的網(wǎng)格交點(diǎn)附近定位。網(wǎng)格線之間的間距通常由用戶來選定。同樣，網(wǎng)格可以在出現(xiàn)和不出現(xiàn)之間轉(zhuǎn)換。有時(shí)還可以使用部分網(wǎng)格以及在不同屏幕區(qū)域有不同大小的網(wǎng)格。第24頁/共60頁交互式構(gòu)圖技術(shù)：引力場(chǎng)構(gòu)造圖形時(shí)，有時(shí)需要在某線段端點(diǎn)之間連接另外的線段，由于在連接點(diǎn)處精確對(duì)屏幕位置定位是很困難的圖形系統(tǒng)可設(shè)計(jì)成將任意一個(gè)靠近線段的點(diǎn)位置轉(zhuǎn)換成線段上的位置。這種轉(zhuǎn)換通過在線段附近建立引力場(chǎng)(gravityfield)來實(shí)現(xiàn)。引力場(chǎng)范圍內(nèi)的任意位置均被吸附到線段上最靠近該位置的點(diǎn)上。引力場(chǎng)既要足夠大以便能幫助定位，又要足夠小以便不和另外的線發(fā)生重迭。在已經(jīng)顯示許多線段時(shí)，引力場(chǎng)可能有重迭，這時(shí)可能較難正確地指定一點(diǎn)。引力場(chǎng)的邊界通常不顯示出來。第25頁/共60頁交互式構(gòu)圖技術(shù)：橡皮條方法和拖曳橡皮條方法直線段可以用在起始點(diǎn)到移動(dòng)的屏幕光標(biāo)之間拉出一根直線的橡皮條方法來構(gòu)造和定位。先選定作為直線段一個(gè)端點(diǎn)的屏幕位置，然后，當(dāng)屏幕坐標(biāo)移動(dòng)時(shí)，顯示從起始點(diǎn)到當(dāng)前光標(biāo)位置的一根線段。當(dāng)最后選定第二個(gè)屏幕位置時(shí)，得到該線段的另一端點(diǎn)。除了直線段外，橡皮條方法還用來構(gòu)造和定位其它對(duì)象。第26頁/共60頁交互式構(gòu)圖技術(shù)：橡皮條方法和拖曳拖曳用屏幕光標(biāo)拖曳對(duì)象來移動(dòng)該對(duì)象是交互式構(gòu)造圖常用技術(shù)之一。先選擇一個(gè)對(duì)象；然后將光標(biāo)向所需移動(dòng)方向移動(dòng)，選擇的對(duì)象就跟著移動(dòng)。對(duì)于要在選定最終位置前探索各種可能性的應(yīng)用來說，在場(chǎng)景中向各個(gè)位置拖曳對(duì)象是很有用的。第27頁/共60頁交互式構(gòu)圖技術(shù)：著色和繪圖素描、繪圖、著色的選擇有多種形式。直線段、多邊形和圓可使用前面所討論的方法來生成。曲線繪制可通過標(biāo)準(zhǔn)曲線形狀如圓弧和樣條線或手繪過程來實(shí)現(xiàn)。樣條曲線通過指定一組繪出曲線大概形狀的離散屏幕點(diǎn)來交互地構(gòu)作，然后系統(tǒng)將該組點(diǎn)用多項(xiàng)式曲線來擬合。在手工繪制中，曲線通過數(shù)據(jù)板上觸筆的路徑或視頻監(jiān)視器屏幕光標(biāo)的路徑來生成。一旦一條曲線顯示出來，設(shè)計(jì)者可以調(diào)整沿曲線路徑上選擇的點(diǎn)的位置來改變曲線形狀。線寬、線型和其他屬性選項(xiàng)也包括在著色和繪圖系統(tǒng)中。各種筆型、筆圖案，顏色組合，對(duì)象形狀和表面紋理圖案都可在許多系統(tǒng)中，特別是作為美術(shù)師工作站而設(shè)計(jì)的系統(tǒng)中找到。某些繪圖系統(tǒng)按美術(shù)師的手加在觸筆上的壓力來改變線寬和筆劃。第28頁/共60頁臨境：聽覺、視覺和觸覺。多通道：手勢(shì)、眼神、表情、聲音和觸力。虛擬現(xiàn)實(shí)環(huán)境VR(VirtualReality)第29頁/共60頁虛擬現(xiàn)實(shí)環(huán)境下圖是一種典型的虛擬現(xiàn)實(shí)環(huán)境。在這種環(huán)境下交互輸入用一個(gè)數(shù)據(jù)手套來實(shí)現(xiàn)，可以抓取和移動(dòng)在虛擬景色中的對(duì)象。計(jì)算機(jī)生成的場(chǎng)景通過頭盔觀察系統(tǒng)以立體投影圖形式顯示。跟蹤設(shè)備計(jì)算頭盔和數(shù)據(jù)手套相對(duì)于場(chǎng)景中對(duì)象的位置和角度。使用這個(gè)系統(tǒng)，用戶可以用數(shù)據(jù)手套來穿越場(chǎng)景，并重新安排對(duì)象位置。另一個(gè)生成虛擬場(chǎng)景的方法是在光柵監(jiān)視器上顯示兩個(gè)在不同刷新周期內(nèi)交替出現(xiàn)的立體投影圖，然后使用立體眼鏡來觀察此景。交互式的對(duì)象管理可通過一個(gè)數(shù)據(jù)手套和一個(gè)監(jiān)視相對(duì)于景中對(duì)象的數(shù)據(jù)手套位置和角度的跟蹤設(shè)備來實(shí)現(xiàn)。第30頁/共60頁WhySketching?第31頁/共60頁Design/SketchProcess第32頁/共60頁P(yáng)rototypingDesignerbuildusuallylotsofprototypes

GetfeedbackonourdesignfasterExperimentwithalternativedesignsFixproblemsbeforecodeiswrittenKeepthedesigncenteredonthecustomermusttest&observeideaswithusers第33頁/共60頁FidelityInPrototypingFidelityreferstolevelofdetailofprototypes

HighfidelityimpliesfinishedordetailedprototypeslooklikethefinalproductLowfidelityimpliesincompleteorlackingsomedetailartistsrenditionswithmanydetailsmissing第34頁/共60頁HighFidelityPrototypingPerceptionsofthecustomer/reviewer?formalrepresentationindicates“finished”natureArchitecturestory:Clientsviewhigh-fidelitydifferently???Clientsreluctanttomakelarge-scalemodificationsHighfidelityprototypesrequirecarefulimplementationencourageprecision,GetcaughtupindetailsspecifyingdetailstakesmoretimeTaketoolongDesign/Sketch–prototype–evaluate–iterateHigh-fidelityprototypeimplieslessvarietyCreativity?losesight/trackofthebigpicture第35頁/共60頁LowFidelityPrototypingGiveyoua“script”ofimportantevents:tousepaper-baseddesignstodoearlystagestudy-RapidPrototypingleaveoutthedetailsconcentrateontheimportantinteractionsBrainstormingputdesignsinatangibleformconsiderdifferentideasrapidlyIncompletedesignsdonotneedtocoverallcasesillustrateimportantexamplesPresentseveraldesignstoclientAllowdesignerstoquicklysketchideastesttheseideaswithcustomerstransformtoamorefinisheddesignwithoutredesign第36頁/共60頁LowFidelityPrototypingEasierimplementationUserrequireonlykindergartenlevelskillsFasteriterationClientcanparticipateindesignprocessaswellInsteadsimulatetheprototype,sketchesactasprototypes:designer“playscomputer”andotherdesignteammembersobserve&recordMorevarietyEasiertoincorporatetestingchangesUsercanthinkcreatively:Trydifferentthings,Easiertoinvolvevarietyofspecialists,GetafeelforwhatclientlikesUsercanalterdesignOrcandesignontheirownaswellQualityofclientfeedbackClientfeedbackstartsearlierSeparationofUIcodefromapp.code:easiertochangeandmaintain第37頁/共60頁CreatingLow-FidelityPrototypesMaterialsPaper(varioussizes)Scissors,glue,tape,knivesMarkers(variouscolors)OverheadtransparenciesBuildfastDrawideasquickly(don’tworryaboutneatness)StartwithwindowUsesmallerpapersforthingsthatchangeHavemenusreadyThinkaboutinteractionanythingcustomermightwanttosee第38頁/共60頁Sketching:SpecificPrototypingTechniques(Simple)Storyboardssketches(onpaperorscreen)thatindicatehowthingslookacrossascenarionouserinteractionatallbutstillgetanideaofwhatitmightbelike(andcangetusersinvolved)Lowfidelity,lowcost(useearly)ExtendedStoryboardsCansketchoutmultipleinteractivepathsonpapertypicallyuserpointsatthingsonpaper,youfliptopreparedsheetsshowinghowthingswouldchangecandopartofinterfaceseparatelyAgain,lowcost/early第39頁/共60頁SketchingisGoodAlmosteveryonestartsinearlystagewithveryroughpencilandpapersketchesRoughideasquicklyUncertaintyUncertaintyandambiguityisimportanttohaveatthisstage(importanttocreativity)Can’thavethedetailsbeforeyouhavedonethedesignFluidityiscriticalInvestmentmustbeverylowChangesmustbeveryeasyMuststay“l(fā)ightonyourfeet”andnotgetsolidifiedintosmallrangeofalternativestooearly第40頁/共60頁SupportingEarlyDesignKeytasksbeingsupportedDesignspaceexplorationMediumforexpressionand“visualthinking”IncreaseconcretenessProvidinginspirationandpointsofdepartureUnderstandingtheimplicationsofdesignchoicesCommunicationsVehiclefortalkingaboutdesignoptionswithothers第41頁/共60頁P(yáng)aperSketchesAdvantagessupportbrainstormingdonotrequirespecificationofdetailsdesignersfeelcomfortablesketchingDrawbacksdonotevolveeasilylacksupportfor“memory”forcemanualtranslationtoelectronicformatdonotallowend-userinteraction第42頁/共60頁User-OrientedGraphicsInputUsersketchesideasrapidlywithelectronicpadandpenUnderstandingofrequirementsEaseofdrawingavailablefrompapersketchesEasiertointeractionwiththecustomerSupportsinformalinteraction:digitalinksketching,pen-basedinteractionIdeaExternalizing/VisualizationBrainstormingofideas：CreativeDesignFreedomofthought：easyeditingwithgesturesAutomaticallytransformstoa“finished/Detailed”TaskEarly-phaseinformation&navigationdesignIntegratesmultipleviews：Configuration第43頁/共60頁WhereSketching?第44頁/共60頁ObjectModeling第45頁/共60頁WebDesign第46頁/共60頁P(yáng)roductDesign第47頁/共60頁Robot/VRNavigation第48頁/共60頁UMLDiagrammingRequirementsUnderstandingVisualLanguageUMLDiagramming第49頁/共60頁CSCWsketching+presence第50頁/共60頁DigitalClassroom/OfficesElectricBlackboard/Whiteboard第51頁/共60頁SketchConceptionSketch-basedImageRetrievalSketch-basedDistanceCommunicationSketch-basedPainting第52頁/共60頁P(yáng)ersonalNotepadElectricNotepad第53頁/共60頁WhySketchingUnderstanding?第54頁/共60頁P(yáng)en-basedSketchingisSuitedforHCIThemostconveni