人機(jī)交互基礎(chǔ)教程第6章

第6章人機(jī)交互界面表示模型與實(shí)現(xiàn)重點(diǎn)大學(xué)計(jì)算機(jī)專業(yè)系列教材人機(jī)交互界面表示模型界面描述語言窗口系統(tǒng)用戶界面管理系統(tǒng)6.1.1行為模型分析人員獲取用戶需求后，結(jié)合領(lǐng)域?qū)＜业囊庖姾椭笇?dǎo)，獲取系統(tǒng)中需要完成的任務(wù)，對任務(wù)的主要因素進(jìn)行詳細(xì)地分析，如任務(wù)的層次、發(fā)生條件、完成的方法以及它們之間的關(guān)系等等。下面就從模型的基本原理、實(shí)例、局限性等幾個(gè)方面詳細(xì)介紹四種常見的行為模型。GOMS（

Goal,Operator,Method,Selection）目標(biāo)操作方法和選擇行為模型是在交互系統(tǒng)中用來分析用戶復(fù)雜性的建模技術(shù)，用于建立用戶行為模型。它采用“分而治之”的思想，將一個(gè)任務(wù)進(jìn)行多層次的細(xì)化，通過目標(biāo)

(Goal)、操作(Operator)、方法

(Method)以及選擇規(guī)則

(Selectionrule)四個(gè)元素來描述用戶行為。目標(biāo)目標(biāo)就是用戶執(zhí)行任務(wù)最終想要得到的結(jié)果。操作操作是任務(wù)分析到最底層時(shí)的行為，是用戶為了完成任務(wù)所必須執(zhí)行的基本動(dòng)作。方法方法是描述如何完成目標(biāo)的過程。一個(gè)方法本質(zhì)上來說是一個(gè)內(nèi)部算法，用來確定子目標(biāo)序列及完成目標(biāo)所需要的操作。關(guān)閉窗口行為描述實(shí)例選擇規(guī)則選擇規(guī)則是用戶要遵守的判定規(guī)則，以確定在特定環(huán)境下所使用的方法。當(dāng)有多個(gè)方法可供選擇時(shí)，GOMS中并不認(rèn)為這是一個(gè)隨機(jī)的選擇，而是盡量預(yù)測可能會(huì)使用哪個(gè)方法。LOTOS（LanguageOfTemporalOrderingSpecification）時(shí)序關(guān)系說明語言是一種作為國際標(biāo)準(zhǔn)的形式描述語言，它提供了一種通用的形式語義，可保證描述不存在二義性，便于分析和一致性測試?yán)碚摰难芯?。其基本思想是用一套形式化和?yán)格的表示法來刻畫系統(tǒng)外部可見行為之間的時(shí)序關(guān)系，系統(tǒng)由一系列進(jìn)程組成，兩個(gè)以上的進(jìn)程在執(zhí)行同一個(gè)外部可見的行為時(shí)會(huì)發(fā)生交互，進(jìn)行數(shù)據(jù)交換、信息傳遞、協(xié)調(diào)同步等操作。下面給出LOTOS模型中定義的基本算符：

T1|||T2（交替Interleaving）：T1和T2兩個(gè)任務(wù)相互獨(dú)立執(zhí)行，可按任意順序執(zhí)行，但永遠(yuǎn)不會(huì)同步。T1[]T2（選擇Choice）：需要在T1，T2中選擇一個(gè)執(zhí)行，一旦選擇某一個(gè)后，必須執(zhí)行它直到結(jié)束，在這中間另一個(gè)再無執(zhí)行機(jī)會(huì)。任務(wù)如何來選擇，并沒有給出一定的形式化描述。T1|[a1,...,an]|T2（同步Synchronization）：任務(wù)T1，T2必須在動(dòng)作（a1,……，an）處保持同步。T1[>T2（禁止Deactivation）：一旦T2任務(wù)被執(zhí)行，T1便無效（不活動(dòng)）。T1>>T2（允許Enabling）：當(dāng)T1成功結(jié)束后才允許T2執(zhí)行。中國象棋LOTOS的圖形描述UAN（UserActionNotion）用戶行為標(biāo)注是一種簡單的符號語言，著眼于用戶和界面兩個(gè)交互實(shí)體的描述，主要描述用戶的行為序列以及在執(zhí)行任務(wù)時(shí)所用的界面。

UAN模型的標(biāo)識符主要有兩種：用戶動(dòng)作標(biāo)識符和條件選擇標(biāo)識符。用戶動(dòng)作標(biāo)識符在UAN的表示模型中有一些常用的已經(jīng)預(yù)定義的符號，用來表示常見的用戶界面的交互動(dòng)作。如：move_mouse(x,y)移動(dòng)鼠標(biāo)至(x,y)；release_button(x,y)在(x,y)位置釋放鼠標(biāo)按鈕；hightLight(icon)使icon高亮顯示；de_highlight(icon)取消icon的高亮顯示。條件選擇標(biāo)識符除了表示動(dòng)作的符號，UAN模型還包含表示條件及選擇的標(biāo)識符，主要有以下幾種：while(condition)TASK當(dāng)條件condition為真時(shí)，循環(huán)執(zhí)行任務(wù)TASK；if(condition)thenTASK如果條件condition滿足，則執(zhí)行任務(wù)TASK；iterationA*orA+表示迭代操作；

waiting

表示等待，可以等待一個(gè)條件滿足，也可以等待任務(wù)中的一個(gè)操作執(zhí)行。UAN表格表示形式UAN描述的任務(wù)“文件拖入垃圾箱”的單通道實(shí)例CTT（ConcurrentTaskTreeNotation）任務(wù)模型表示法是一種基于圖形符號的，采用層次的樹狀結(jié)構(gòu)來組織并表示任務(wù)模型的方法。任務(wù)種類和暫態(tài)關(guān)系的含義及其圖形符號：任務(wù)分析是一個(gè)以人們的行為為出發(fā)點(diǎn)的分析過程，它分析人們完成任務(wù)的方法：他們要做的事、要起作用的事和想要知道的事。任務(wù)種類：抽象任務(wù)（AbstractTask），用戶任務(wù)（UserTask），交互任務(wù)（InteractionTask），系統(tǒng)任務(wù)（ApplicationTask）。暫態(tài)關(guān)系符號：

Choice：t1[]t2[]…[]tn

Concurrent（IndependentConcurrency）：t1|||t2|||…|||tn帶信息交換的Concurrent：t1|[]|t2|[]|…|[]|tnDisabling：t1[>t2Enabling：t1>>t2>>…>>tn帶信息交換的Enabling：t1[]>>t2[]>>…[]>>tnIndependence：t1|=|t2單用戶任務(wù)模型單用戶任務(wù)模型在CTT中表示為一棵樹。用戶使用自動(dòng)取款機(jī)的任務(wù)模型6.1.2結(jié)構(gòu)模型形式化語言的描述――產(chǎn)生式規(guī)則：

ifconditionthenaction或

condition→action或

condition：action一般來說，組成界面描述的產(chǎn)生式規(guī)則很多，規(guī)則定義的順序并不重要，只要與規(guī)則中的條件相匹配，就可以激活相應(yīng)的動(dòng)作。產(chǎn)生式規(guī)則系統(tǒng)可以是事件引導(dǎo)的，也可以是狀態(tài)引導(dǎo)的，或者兩者都有。狀態(tài)轉(zhuǎn)換網(wǎng)絡(luò)狀態(tài)轉(zhuǎn)換網(wǎng)絡(luò)（STN）的基本思想是定義一個(gè)具有一定數(shù)量的狀態(tài)的轉(zhuǎn)換機(jī)，稱之為有限狀態(tài)機(jī)（FSM），F(xiàn)SM從外部世界中接收到事件，并能使FSM從一個(gè)狀態(tài)轉(zhuǎn)換到另一個(gè)狀態(tài)。兩種最基本的狀態(tài)轉(zhuǎn)換網(wǎng)絡(luò)：狀態(tài)轉(zhuǎn)換網(wǎng)絡(luò)（StateDiagrams）擴(kuò)展?fàn)顟B(tài)轉(zhuǎn)換網(wǎng)絡(luò)（StateCharts）狀態(tài)轉(zhuǎn)換網(wǎng)絡(luò)符號簡單狀態(tài)轉(zhuǎn)換網(wǎng)絡(luò)帶條件和動(dòng)作的狀態(tài)轉(zhuǎn)換網(wǎng)絡(luò)狀態(tài)轉(zhuǎn)換網(wǎng)絡(luò)（StateDiagrams）基于鼠標(biāo)畫圖工具狀態(tài)轉(zhuǎn)換網(wǎng)擴(kuò)展?fàn)顟B(tài)轉(zhuǎn)換網(wǎng)絡(luò)（StateCharts）分層的狀態(tài)圖實(shí)例6.1.3行為模型和結(jié)構(gòu)模型的轉(zhuǎn)換一般來說行為模型主要對設(shè)計(jì)起指導(dǎo)作用，在此基礎(chǔ)上，設(shè)計(jì)人員再進(jìn)行結(jié)構(gòu)模型（如狀態(tài)轉(zhuǎn)換網(wǎng)絡(luò)等）的創(chuàng)建，這個(gè)過程很大程度上取決于設(shè)計(jì)人員的經(jīng)驗(yàn)和對行為模型的理解。整體框架轉(zhuǎn)換算法實(shí)例應(yīng)用最高層目標(biāo)狀態(tài)轉(zhuǎn)換“運(yùn)行”目標(biāo)狀態(tài)轉(zhuǎn)換“走棋”目標(biāo)狀態(tài)轉(zhuǎn)換6.1.4表現(xiàn)模型表現(xiàn)模型(PM)描述了用戶界面的表現(xiàn)形式，由層次性的交互對象組成。邏輯組織結(jié)構(gòu)面板用戶界面的圖形顯示面板用戶界面的數(shù)據(jù)結(jié)構(gòu)表示面板用戶界面的繪制面板用戶界面的邏輯組織結(jié)構(gòu)面板內(nèi)部的事件分發(fā)及響應(yīng)方式控制面板用戶界面交互的核心模塊可以看作是一個(gè)事件處理中心，事件處理中心接收并解析用戶動(dòng)作，然后將結(jié)果表現(xiàn)給用戶。事件處理中心對事件的響應(yīng)的實(shí)現(xiàn)面板間的關(guān)系

JacobEisenstein創(chuàng)立了兩種新的抽象描述來描述基于面板的用戶界面表現(xiàn)模型。面板關(guān)系分類面板種類界面描述語言一般分為兩類：命令式語言(ImperativeLanguage)和陳述式語言(DeclarativeLanguage)。命令式語言要求編程人員明確的指定如何執(zhí)行任務(wù)，陳述性語言要求編程人員只需指定任務(wù)要做什么，陳述性語言要比命令式的語言更為抽象。下面介紹幾種常見的陳述性語言。用戶界面標(biāo)記語言(UIML)語言的基本表示結(jié)構(gòu)擴(kuò)展界面標(biāo)記語言(XIML)

XIML由組件(Components)、關(guān)系(Relations)和屬性(Attributes)三部分構(gòu)成。XML語言的基本表示結(jié)構(gòu)

XML用戶界面語言XUL

XUL提供了創(chuàng)建現(xiàn)代圖形界面大多數(shù)元素的能力。能夠滿足特定設(shè)備的普遍需求，對開發(fā)者來說，也已經(jīng)足夠強(qiáng)大，能夠創(chuàng)建復(fù)雜的界面。6.3.1窗口系統(tǒng)結(jié)構(gòu)窗口系統(tǒng)一般有三種結(jié)構(gòu)：在各個(gè)應(yīng)用程序內(nèi)部實(shí)現(xiàn)和管理多任務(wù)在操作系統(tǒng)核心集中處理多任務(wù)管理多任務(wù)的管理可由獨(dú)立的管理程序進(jìn)行管理，應(yīng)用程序通過調(diào)用該管理程序提供的接口來實(shí)現(xiàn)對多任務(wù)的管理和設(shè)備的獨(dú)立性操作6.3.2交互事件處理應(yīng)用程序內(nèi)部事件處理循環(huán)事件處理循環(huán)事件注冊方式事件注冊方式處理流程圖6.3.3交互組件開發(fā)包一般的窗口系統(tǒng)，輸入和顯示是分離的，許多語言提供了用于開發(fā)交互系統(tǒng)的開發(fā)軟件包，交互系統(tǒng)開發(fā)軟件包在支持窗口管理的基礎(chǔ)上增加了另一種抽象，它把輸入和輸出的行為結(jié)合起來。按鈕交互對象行為AWT即抽象窗口工具包（AbstractWindowToolkit），是JavaAPI為Java程序提供的建立圖形用戶界面的基本工具集，AWT可用于JavaApplication和JavaApplet的圖形用戶界面的創(chuàng)建。

AWT類層次結(jié)構(gòu)圖如下：java.awt包中提供了許多圖形操作的類：

Graphics類：提供了許多處理圖形的方法，如繪制線條、各種矩形、各種橢圓、弧線和多邊形等。

Color類：包含了操作顏色的方法和常量。

Font類：包含了操作字體的方法和常量。常用的AWT組件：Frame類文本框和文本區(qū)按鈕和標(biāo)簽面板和畫布布局設(shè)計(jì)選擇型組件Component類的常用方法Dialog類1、文本框（TextField）單行文本框，可以向其中輸入一行字符串或?qū)ζ鋬?nèi)容進(jìn)行修改構(gòu)造方法：publicTextField(Stringtext)publicTextField(intcolumns)publicTextField(Stringtext,intcolumns)

文本區(qū)（TextArea）多行文本框，或稱文本區(qū)，同樣用于顯示文本字符串，用戶也可以對其中的字符串進(jìn)行編輯構(gòu)造方法：publicTextArea(Stringtext)publicTextArea(introws,intcolumns)publicTextArea(Stringtext,intcows,

intcolumns)publicTextArea(Stringtext,intcows,

intcolumns,intscrollbars)

按鈕（Button）用來響應(yīng)用戶的點(diǎn)擊動(dòng)作構(gòu)造方法：publicButton()

publicButton(Stringlabel)

Button類常用方法：

publicStringgetLabel()publicvoidsetLabel(Stringlabel)publicStringgetActionCommand()publicvoidsetActionCommand

(Stringcommand)publicvoidaddActionListener

(ActionListenerlistenerAWT是Java最早出現(xiàn)的圖形界面，但很快就被Swing所取代。Swing才是一種真正的圖形開發(fā)。AWT在不同平臺所出現(xiàn)的界面可能有所不同：因?yàn)槊總€(gè)OS都有自己的UI組件庫，java調(diào)用不同系統(tǒng)的UI。注意AWT為重量級組件，相當(dāng)消耗資源，且不同系統(tǒng)的組件可能不同。因?yàn)檫@個(gè)問題使得AWT開發(fā)的軟件難以作到跨平臺。更為要命的是：不同OS的組件庫都存在BUG。必須多種平臺進(jìn)行測試，并且AWT的組件庫并不豐富。為解決以上問題，SUN和IBM以及NETSCAPE聯(lián)合開發(fā)出JAVA基礎(chǔ)類包Swing：注意JAVA的基礎(chǔ)類以Swing為核心。注意引用：javax.swing.*;javax表示JAVA的擴(kuò)展。6.3.4交互框架桌面應(yīng)用框架下拉菜單示例工具欄示例樹形菜單示例狀態(tài)欄示例標(biāo)簽頁方式工作區(qū)示例多層應(yīng)用架構(gòu)MultilayeredArchitecture多層架構(gòu)，一種設(shè)計(jì)模式，將應(yīng)用軟件的不同的任務(wù)分配到軟件的不同層次中。Web應(yīng)用軟件的典型結(jié)構(gòu)Web瀏覽器支持動(dòng)態(tài)Web內(nèi)容技術(shù)的引擎（CGI,PHP,JavaServlets）數(shù)據(jù)庫三層應(yīng)用架構(gòu)6.3.5MVC模式和基于Struts的實(shí)現(xiàn)

MVC把一個(gè)應(yīng)用的輸入、處理、輸出流程按照模型

(model)、視圖（View）和控制（Controller）的方式進(jìn)行分離，形成模型層、視圖層、控制層三個(gè)層次。MVC模型MVC模式MVC(Model-View-Controller)模式架構(gòu)模式設(shè)計(jì)模式將數(shù)據(jù)與數(shù)據(jù)的顯示相分離降低開發(fā)復(fù)雜度可維護(hù)性靈活性可重用性模型（Model）應(yīng)用的信息/數(shù)據(jù)操作數(shù)據(jù)的業(yè)務(wù)規(guī)則視圖（View）用戶界面的元素控制器（Controller）具體管理用戶行為（如鍵盤或鼠標(biāo)事件）與模型的通信過程Web應(yīng)用軟件中的MVC模式Model存儲(chǔ)在數(shù)據(jù)庫或XML文件中的數(shù)據(jù)基于用戶的行為獲取數(shù)據(jù)并轉(zhuǎn)換為內(nèi)容的業(yè)務(wù)規(guī)則ViewHTML頁面Controller收集動(dòng)態(tài)數(shù)據(jù)并生成HTML頁面中的內(nèi)容MVC架構(gòu)模式的流程用戶以某種操作方式與用戶界面交互Controller處理來自用戶界面的輸入事件Controller將用戶的操作通知Model，可能會(huì)修改Model數(shù)據(jù)的狀態(tài)視圖調(diào)用Model數(shù)據(jù)生成用戶界面用戶界面等待用戶的進(jìn)一步交互MVC是一個(gè)設(shè)計(jì)模式，它強(qiáng)制性的使應(yīng)用程序的輸入、處理和輸出分開。使用MVC應(yīng)用程序被分成三個(gè)核心部件：模型、視圖、控制器。它們各自處理自己的任務(wù)。（1）MVC概述模型-視圖-控制器（MVC）是80年代Smalltalk-80中出現(xiàn)的一種軟件設(shè)計(jì)模式，現(xiàn)已經(jīng)被廣泛地使用。盡管它源于桌面程序（Desktop），但現(xiàn)在也被廣泛地應(yīng)用于B/S模式的Web程序開發(fā)中。（2）Model-View-Controller是軟件系統(tǒng)的通用體系架構(gòu)設(shè)計(jì)基于MVC架構(gòu)模式的系統(tǒng)時(shí)，強(qiáng)調(diào)將一個(gè)復(fù)雜的應(yīng)用系統(tǒng)分解為模型、視圖和控制器三部分，它們分別對應(yīng)于應(yīng)用中的業(yè)務(wù)邏輯和數(shù)據(jù)、用戶界面、用戶請求處理和數(shù)據(jù)顯示的同步。MVC是用來幫助控制應(yīng)用系統(tǒng)中“變化”的一種設(shè)計(jì)模式。

MVC(ModelViewController)模型(model)－視圖(view)－控制器(controller)

MVC本來是存在于Desktop程序中的，M是指數(shù)據(jù)模型，V是指用戶界面，C則是控制器。使用MVC

copyright:AppleInc.的目的是將M和V的實(shí)現(xiàn)代碼分離，從而使同一個(gè)程序可以使用不同的表現(xiàn)形式。比如一批統(tǒng)計(jì)數(shù)據(jù)你可以分別用柱狀圖、餅圖來表示。C存在的目的則是確保M和V的同步，一旦M改變，V應(yīng)該同步更新。MVC模式的目的是實(shí)現(xiàn)一種動(dòng)態(tài)的程式設(shè)計(jì)，使后續(xù)對程序的修改和擴(kuò)展簡化，并且使程序某一部分的重復(fù)利用成為可能。除此之外，此模式通過對復(fù)雜度的簡化，使程序結(jié)構(gòu)更加直觀。軟件系統(tǒng)通過對自身基本部份分離的同時(shí)也賦予了各個(gè)基本部分應(yīng)有的功能。（視圖View）-界面設(shè)計(jì)人員進(jìn)行圖形界面設(shè)計(jì)用于與用戶的交互，通常用JSP來實(shí)現(xiàn)。（模型Model）-實(shí)現(xiàn)系統(tǒng)中的業(yè)務(wù)邏輯，通?？梢杂肑avaBean或EJB來實(shí)現(xiàn)。程序員編寫程序應(yīng)有的功能（實(shí)現(xiàn)算法等等）、數(shù)據(jù)庫專家進(jìn)行數(shù)據(jù)管理和數(shù)據(jù)庫設(shè)計(jì)(可以實(shí)現(xiàn)具體的功能)。（控制器Controller）-負(fù)責(zé)轉(zhuǎn)發(fā)請求，對請求進(jìn)行處理。Controller層是Model與View之間溝通的橋梁，它可以分派用戶的請求并選擇恰當(dāng)?shù)囊晥D以用于顯示，同時(shí)它也可以解釋用戶的輸入并將它們映射為模型層可執(zhí)行的操作。Event(事件)導(dǎo)致Controller改變Model或View，或者同時(shí)改變兩者。只要Controller改變了Models的數(shù)據(jù)或者屬性，所有依賴的View都會(huì)自動(dòng)更新。類似的，只要Controller改變了View，View會(huì)從潛在的Model中獲取數(shù)據(jù)來刷新自己。視圖視圖(View)代表用戶交互界面，對于Web應(yīng)用來說，可以概括為HTML界面，但有可能為XHTML、XML和Applet。隨著應(yīng)用的復(fù)雜性和規(guī)模性，界面的處理也變得具有挑戰(zhàn)性。一個(gè)應(yīng)用可能有很多不同的視圖，MVC設(shè)計(jì)模式對于視圖的處理僅限于視圖上數(shù)據(jù)的采集和處理，以及用戶的請求，而不包括在視圖上的業(yè)務(wù)流程的處理。業(yè)務(wù)流程的處理交予模型(Model)處理。比如一個(gè)訂單的視圖只接受來自模型的數(shù)據(jù)并顯示給用戶，以及將用戶界面的輸入數(shù)據(jù)和請求傳遞給控制和模型。

模型模型(Model)：就是業(yè)務(wù)流程/狀態(tài)的處理以及業(yè)務(wù)規(guī)則的制定。業(yè)務(wù)流程的處理過程對其它層來說是黑箱操作，模型接受視圖請求的數(shù)據(jù)，并返回最終的處理結(jié)果。業(yè)務(wù)模型的設(shè)計(jì)可以說是MVC最主要的核心?？刂瓶刂?Controller)可以理解為從用戶接收請求,將模型與視圖匹配在一起，共同完成用戶的請求。劃分控制層的作用也很明顯，它清楚地告訴你，它就是一個(gè)分發(fā)器，選擇什么樣的模型，選擇什么樣的視圖，可以完成什么樣的用戶請求。控制層并不做任何的數(shù)據(jù)處理。例如，用戶點(diǎn)擊一個(gè)連接，控制層接受請求后,并不處理業(yè)務(wù)信息，它只把用戶的信息傳遞給模型，告訴模型做什么，選擇符合要求的視圖返回給用戶。因此，一個(gè)模型可能對應(yīng)多