吳　昊,華慶一

(1.西北大學(xué) 信息科學(xué)與技術(shù)學(xué)院，陜西 西安　710069;2.西北大學(xué) 現(xiàn)代教育技術(shù)中心，陜西 西安　710069)

?

一個生產(chǎn)性的用戶界面設(shè)計模式標記語言GUIDPML

吳昊1,2,華慶一1

(1.西北大學(xué) 信息科學(xué)與技術(shù)學(xué)院，陜西 西安710069;2.西北大學(xué) 現(xiàn)代教育技術(shù)中心，陜西 西安710069)

為了能夠(半)自動地基于模型和模式生成用戶界面,需要用具備生產(chǎn)性的用戶界面設(shè)計模式標記語言形式化地描述模式。為此開發(fā)了一個生產(chǎn)性的用戶界面設(shè)計模式標記語言GUIDPML,它克服一般設(shè)計模式標記語言的不足之處,語言從概念架構(gòu)上分為基礎(chǔ)、關(guān)聯(lián)和實現(xiàn)3個部分,并應(yīng)用于一個基于模型和模式的界面開發(fā)過程。通過實踐檢驗,證明它可以半自動地生成具有高可用性的用戶界面。

可用性； 用戶界面設(shè)計模式； 生產(chǎn)性； 模式標記語言

用戶界面的開發(fā)是一個費時費力的任務(wù),特別是對于一個開發(fā)新手而言更是如此,因為他們不了解可用性工程和交互原理[1]。以用戶為中心的開發(fā)中，一個基本任務(wù)就是捕獲最佳設(shè)計經(jīng)驗并將其融入界面設(shè)計中。早期建議將界面風(fēng)格指導(dǎo)等作為交流可用性知識的工具,然而它們因為缺乏形式化和過于具體，而在開發(fā)中難以得到有效的應(yīng)用,尤其是在風(fēng)格指導(dǎo)相互沖突的時候[2]。用戶界面設(shè)計模式是在多個上下文中對于反復(fù)發(fā)生的一個可用性問題的不變解,它源自于用戶界面設(shè)計者在界面設(shè)計過程中的最佳實踐經(jīng)驗[3]。如果一個可用性問題的解決方案在不同的場合下使用了3次以上,便可認為是一個用戶界面設(shè)計模式。用戶界面設(shè)計模式具有解決一類可用性問題的抽象性,又具有解決特定上下文中一個可用性問題的具體性,因而在用戶界面設(shè)計領(lǐng)域特別是基于模型的用戶界面開發(fā)中被認為是替代風(fēng)格指導(dǎo)的一個有效的可用性工具[4]。

基于模型的用戶界面開發(fā)旨在(半)自動化地生成用戶界面,在其中使用用戶界面設(shè)計模式,需要對模式形式化描述。形式化描述用戶界面設(shè)計模式的工具是用戶界面設(shè)計模式標記語言。本文設(shè)計和實現(xiàn)了一個用戶界面設(shè)計模式標記語言GUIDPML,它彌補了其他用戶界面設(shè)計模式標記語言在生產(chǎn)性方面的缺陷。通過使用GUIDPML,可以在基于模型的用戶界面開發(fā)中半自動地獲得高可用性的用戶界面。

1　相關(guān)工作

模式和模式語言在人機交互和WEB工程領(lǐng)域內(nèi)的影響不斷增長。模式最初是用來解決建筑學(xué)中的問題[5]。在20世紀90年代，軟件工程中引入模式來促進高質(zhì)量設(shè)計方案的重用性。最近10多年模式和模式語言也進入了人機交互、可用性工程、用戶體驗和組織工作流領(lǐng)域。在人機交互中，在基于模型的用戶界面開發(fā)中使用設(shè)計模式,被認為可極大提高(半)自動生成的用戶界面的可用性。此時不僅要求形式化描述設(shè)計模式,而且要求這種描述方式具備生產(chǎn)性[6]。所謂生產(chǎn)性,指通過描述模式的語言可自動獲得面向?qū)ο蟮谋硎疽员阕詣拥厣勺罱K的代碼,使得模式在設(shè)計過程中可被自動化地操作和運用。具備生產(chǎn)性的模式,除了應(yīng)對模式的常規(guī)元素形式化外,還需明確定義模式和其他模式的關(guān)聯(lián)關(guān)系以便加快自動搜索到可用模式的過程并形成模式語言,以及詳細定義模式的實現(xiàn)方式(即模式如何轉(zhuǎn)換為模型或代碼)，以便機器能夠自動將其轉(zhuǎn)換為模型。

在用戶界面設(shè)計領(lǐng)域已經(jīng)出現(xiàn)了大量的用戶界面設(shè)計模式集合,它們或以書本的形式出版[7-8],或以在線的形式發(fā)布[9-10]。大多數(shù)用戶界面設(shè)計模式集合以散文描述,因此需要開發(fā)人員首先理解模式的作用,再手動轉(zhuǎn)化為界面設(shè)計技術(shù),最后由編程人員編程實現(xiàn)。這種方式間接性增加了設(shè)計和編程人員的負擔(dān),易導(dǎo)致錯誤,在開發(fā)過程中難以得到工具的有效支持。不同的模式集合對于界面設(shè)計的覆蓋存在較大差異,不同的模式作者以不同的方式描述模式,加劇了模式應(yīng)用的困難。

2003年的一個人機交互國際會議上，模式標記語言PLML[11]被提出,目標是用共同的元素幫助模式作者和用戶跨越不同的集合使用用戶界面設(shè)計模式，這種思想和所用的描述方法有一定的影響力。但PLML主要對模式的常規(guī)元素進行形式化描述,沒有對模式與其他模式的關(guān)聯(lián)和模式的實現(xiàn)做出明確的定義,因而不具備生產(chǎn)性。

PLMLx[12]在PLML的基礎(chǔ)上增加了支持搜索功能和模式分類的擴展,如organization、acknowledgment、management等tag。XPLML[13]基于PLML提供了一個描述性的框架,包括統(tǒng)一HCI模式形式、語義元數(shù)據(jù)、模式間的語義關(guān)系、HCI模式的原子塊等7個模塊。這兩種語言對PLML在與其他模式關(guān)聯(lián)方面的缺陷進行了完善,使得模式的自動搜索更加便利,但沒有對模式如何實現(xiàn)進行定義,因而生產(chǎn)性較弱。

文獻[14]和[15]分別對用戶界面設(shè)計模式進行了形式化描述,從而能和基于模型的用戶界面開發(fā)過程結(jié)合起來,具備一定的生產(chǎn)性。但二者均未就模式常規(guī)元素的形式化和模式與其他模式關(guān)聯(lián)進行描述,僅闡述了模式實現(xiàn)部分的細節(jié)。且前者只能描述一些面向具體交互對象CIO的模式,而后者對于不同抽象層次的模式,需要和特定的界面描述語言DISL或者UIML結(jié)合起來使用,因此在應(yīng)用方面具有一定的局限性。針對上述工作的不足之處,我們開發(fā)了GUIDPML。

2　基于模型和模式的半自動界面生成過程

基于模型和模式的界面生成過程難以全自動完成,因為模式的選擇、模式和模型的融合等步驟需要在設(shè)計者的導(dǎo)引下完成[16]。圖1是本文提出的一個基于模型和模式的半自動界面生成過程。其核心部件是模式倉庫,其中包含了各個抽象層次的用戶界面設(shè)計模式,它們都用GUIDPML描述。倉庫中也包含了模式元數(shù)據(jù)、為了產(chǎn)生代碼和使用數(shù)據(jù)而設(shè)計的附加部件以及可用性評估的回饋。生成過程從領(lǐng)域模型、任務(wù)模型和上下文模型開始。引入上下文模型的目的在于彌補通常的基于模型的用戶界面開發(fā)方法中在開始設(shè)計階段對于用戶、設(shè)備和環(huán)境等上下文信息的缺失,因為在模式的選擇、模型和模式的結(jié)合中需要用到這些上下文信息。接下來如同通常的基于模型的用戶界面開發(fā)方法,這些高層模型被依次轉(zhuǎn)換為抽象界面模型、具體界面模型和最終界面代碼。在生成后三者時,需要從模式倉庫中選擇合適的模式完成這些過程。在選擇模式時,依據(jù)可用性需求并參考模式常規(guī)元素的描述，從模式倉庫中選擇模式。在選擇更多模式時，則可以根據(jù)模式與其他模式的關(guān)聯(lián)關(guān)系在模式倉庫中挑選模式,從而可以自動化搜索。在生成模型和最終代碼時,根據(jù)搜索到的模式的實現(xiàn)部分,由機器自動處理為模型或者代碼的一部分,和模型或代碼的其他部分融合后完成模型或代碼的轉(zhuǎn)換。在生成最終界面代碼后,運行代碼以進行可用性評估。評估數(shù)據(jù)發(fā)送給使用數(shù)據(jù)倉庫,通過使用數(shù)據(jù)評估部件回饋給模式倉庫,然后根據(jù)評估結(jié)果決定是否進行下一次迭代開發(fā)以及從哪個階段開始迭代,并使用這些結(jié)果來提高下一次迭代的質(zhì)量,直到可用性評估結(jié)果顯示用戶界面的可用性達到設(shè)計的要求。

圖1　基于模型和模式的半自動界面生成過程Fig.1　The process of semi-automatic interface generation based on the model and the pattern

3　GUIDPML設(shè)計及實現(xiàn)

3.1GUIDPML的概念架構(gòu)

為了在基于模型和模式的半自動界面生成過程中使用GUIDPML描述的模式,在概念層次把GUIDPML分為基礎(chǔ)、關(guān)聯(lián)和實現(xiàn)3個不同的部分。

基礎(chǔ)部分是模式的內(nèi)在信息,它由每個模式獨有的信息和分析組成,它是模式從模式倉庫中被選擇出來的基礎(chǔ)。這部分信息涵蓋了傳統(tǒng)模式描述中的常規(guī)元素，需要在解決方案中明確指出模式解決了哪一抽象層次的問題,以便有利于模式的選擇。內(nèi)在信息包含模式對于可用性問題是什么,在何種情況下使用該模式解決可用性問題以及怎么解決的定義。其中元素的重要性在于便于界面設(shè)計者、實現(xiàn)者和用戶理解模式，以便將其處理為一個模型中有用的構(gòu)件。

關(guān)聯(lián)部分是模式的外在信息。它是關(guān)于模式如何與其他模式產(chǎn)生關(guān)系,以及這種關(guān)系的類型和含義是什么的知識。它所起到主要作用是實現(xiàn)模式的自動選擇,以及便于多個模式形成一個模式語言。一般的用戶界面設(shè)計模式描述中,關(guān)聯(lián)部分不單獨給出,而是隱含在內(nèi)在信息的描述中,模式作者可能認為模式使用者能認識到這些知識的重要性,然而模式使用者往往并未意識到。這是目前用戶界面設(shè)計模式描述中最為嚴重的問題之一,因為一個可用性問題經(jīng)常不是一個模式就能解決,而是多個模式以一定結(jié)構(gòu)組織起來共同作用的結(jié)果。模式之間含糊的關(guān)系阻礙了多個模式有機地組織為一個全面的界面設(shè)計。定義上下文的關(guān)聯(lián)是理解模式及其重用的關(guān)鍵概念,因此我們認為有必要將其和內(nèi)在信息隔離開來,以便更徹底地分析模式。

實現(xiàn)部分是模式的消化信息,它包含了何時、何地以及如何在一個集成化的設(shè)計過程中應(yīng)用模式的信息。它的作用是在模型或代碼轉(zhuǎn)換過程中指導(dǎo)其如何轉(zhuǎn)化,以提高最終界面的可用性,是模式生產(chǎn)性強弱的關(guān)鍵。與其他模式的形式化描述方法不同的是,實現(xiàn)部分的描述并未限制轉(zhuǎn)換后的用戶界面描述語言及程序語言的種類。

3.2GUIDPML的Schema

幾乎所有的模式都用例子來說明模式如何應(yīng)用模式,只不過它們所處的位置不同,有的模式例子在模式的首部,有的模式例子分布在模式的其他部分。

大部分模式都有與其他模式關(guān)系的描述,但這些描述不夠具體清晰。

目前大多數(shù)模式描述中沒有模式如何在開發(fā)中實現(xiàn)的具體描述,但相當(dāng)一部分模式作者都指出這部分的重要性。

上述分析引導(dǎo)我們構(gòu)建了一個通用的Schema來實現(xiàn)我們的概念架構(gòu)。這個Schema使得我們可以用程序化的方法把現(xiàn)有大多數(shù)模式集中地改造為模式倉庫中的模式。圖2給出了Schema的部分層次結(jié)構(gòu),其中模式頭和模式體對應(yīng)概念架構(gòu)中的基礎(chǔ)部分,關(guān)聯(lián)和實現(xiàn)部分分別對應(yīng)概念架構(gòu)中相應(yīng)部分。模式體和實現(xiàn)部分是“體”與“用”的關(guān)系。“體”定義了模式解決可用性問題的方案?！坝谩笔菍@一方案在開發(fā)過程中的應(yīng)用。關(guān)聯(lián)部分增強模式的結(jié)構(gòu)性,使得模式可形成模式語言。

圖2　GUIDPML Schema的層次結(jié)構(gòu)Fig.2　CUIDPML Schema hierarchy

Schema以結(jié)構(gòu)化預(yù)定義的模型涵蓋多數(shù)模式描述格式。通過Schema的具體接口,可以方便地與其他工具進行交互。Schema的元素可以分為結(jié)構(gòu)性元素和原子元素。結(jié)構(gòu)性元素是Schema層次結(jié)構(gòu)中的非葉節(jié)點,原子元素是其中的葉子節(jié)點，在圖2中分別以方框和橢圓表示。圖中省略了一些原子元素，如例子包含了文本、圖形和代碼等。

3.3基礎(chǔ)部分和關(guān)聯(lián)部分的設(shè)計

基礎(chǔ)部分中,模式頭包含模式倉庫中獨一無二的模式ID以及模式名和作者。模式體分為概念和實踐部分,含有模式主要的內(nèi)在信息。其中元素的意義與一般模式描述方法基本相同,這里不再詳述。關(guān)聯(lián)部分指出模式和其他模式的關(guān)系。聚集元素中指出可以包含該模式的模式,以及它可以包含的模式。精化元素中指出該模式所細化的模式,抽象元素中指出被該模式抽象的模式。精化和抽象是兩種相反的模式關(guān)系。例如,高級搜索模式是對搜索模式的精化,而搜索模式則是高級搜索模式的抽象。基礎(chǔ)和關(guān)聯(lián)部分的形式化有助于通過工具搜索到與特定可用性問題相關(guān)的一批模式,然后設(shè)計者從這些模式中查找可行的模式并作為模型的構(gòu)件,以此減輕在龐大的模式倉庫中搜索模式的工作量。

3.4GUIDPML實現(xiàn)部分的設(shè)計

實現(xiàn)部分包含模式用戶在實踐中應(yīng)用模式的信息,它借鑒了正面例子的經(jīng)驗并汲取反面例子的教訓(xùn),綜合二者建立起在開發(fā)中應(yīng)用模式的方法。在模式倉庫中存放的模式稱為規(guī)約模式,模式中實現(xiàn)部分的可變部分用具有XML支持的變量類型的變量或者可選擇的多個常量定義。在和模型結(jié)合時，通過給變量賦值或者確定多個常量中哪個常量為最終結(jié)果來實例化規(guī)約模式。這種方式極大地增強了模式應(yīng)用的靈活性。實現(xiàn)部分分為描述和組織兩個子部分。

描述部分包括屬性、選項和值3個子元素,每個子元素可具有名字、最大、最小出現(xiàn)次數(shù)、優(yōu)先級、強制等參數(shù)。它們解決了界面模式如何轉(zhuǎn)換為界面模型或者實現(xiàn)代碼的問題。

子元素“屬性”指出了模式的固有特征。例如用屬性來指出一個模式所描述的界面元素類型是“動作按鈕”,它的名字參數(shù)值則為“類型”,參數(shù)max=1和min=1的設(shè)定表明它在界面中只出現(xiàn)一次,實例化模式后得到這些數(shù)值。用XML語言表示為:

子元素“選項”給出模式在實現(xiàn)時可供選擇的特征,例如“動作按鈕”在界面中出現(xiàn)的可供選擇的是位置 “東、南、西、北、中”。如果在實例化中“動作按鈕”出現(xiàn)在界面的下部，則用XML語言表示為:

子元素“值”給出了模式在實現(xiàn)時的轉(zhuǎn)換結(jié)果,這個結(jié)果可以是一個模型完整的或部分的描述,或者一段程序代碼。這部分描述需要靈活的設(shè)計,以便無縫嵌入到整個模型描述或者程序代碼中。例如“動作按鈕”實現(xiàn)為Java語言時,其值部分的XML表示如表1所示。

表1　值部分XML實例

表1其中第二行開始為一段java代碼,創(chuàng)建了一個“搜索”按鈕。根據(jù)模式的類型,值部分的type參數(shù)值也可以是“model”,表明實現(xiàn)時轉(zhuǎn)換結(jié)果為(部分)模型。根據(jù)模式的實現(xiàn)語言, language參數(shù)值可以是“C#”，“HTML”，或者“USIXML”等。同一個模式的值可有多個,因此在不同的應(yīng)用環(huán)境中,同一個模式可以定義不同的轉(zhuǎn)換方法,進一步提高了模式應(yīng)用的靈活性。

組織部分給出了模式在界面中的組織方式,確定了一個模式的父模式,以及這個模式所包含的子模式。它解決了界面模式在應(yīng)用中的結(jié)構(gòu)問題。例如一個高級搜索模式包含Auto Complete,Data Select, Action Button這3個子模式。這些模式之間的組織結(jié)構(gòu)如圖3所示。圖3的高級搜索模式在GUIDPML中的XML 代碼如表2所示。

圖3　模式之間的組織關(guān)系Fig.3　Organization relations between patterns

注意表2的描述中不含“值”子元素,值子元素在子模式中給出,如前文表1中所示。這個抽象界面描述經(jīng)過轉(zhuǎn)換為具體界面后,在設(shè)備上實現(xiàn)為圖4所示的界面。

表2高級搜索模式的GUIDPML代碼

Tab.2GUIDPML code of advanced search mode

searchPanel frame autoComplete dataSelect actionButton

圖4　表2所產(chǎn)生界面Fig.4　The interface of Table 2

4　案例研究

在我們的移動校園項目中,使用了GUIDMPL作為工具進行開發(fā),其開發(fā)過程如第3節(jié)所述,以下以用戶登錄移動校園界面的開發(fā)為例來說明。

設(shè)計過程開始于任務(wù)、領(lǐng)域和上下文模型的建立。任務(wù)模型中確定了界面的兩個主要任務(wù):①用戶登錄，②導(dǎo)航到其他頁面。任務(wù)模型用CTT表示,如圖5所示。領(lǐng)域模型中確定了界面所用的主要數(shù)據(jù)是用戶名和密碼,用UML表示,如圖6所示。上下文模型中指出界面運行的物理平臺是安卓手機,開發(fā)語言是Java。

通過建立CTT模型的活動任務(wù)集ETS,任務(wù)模型被自動轉(zhuǎn)換為抽象界面模型。在抽象界面生成過程中,使用了Split-Panel模式。該模式要求用多個Panel來分類放置具有不同類別的界面元素。在應(yīng)用該模式時,有關(guān)Panel的個數(shù)的參數(shù)實例化為2,表明共用兩個Panel來分別放置用戶登錄和導(dǎo)航任務(wù)。該模式實例化后,實現(xiàn)部分的XML代碼片段如表3所示。

表3Split-Panel模式的實現(xiàn)部分XML代碼片段

Tab.3The XML code of realizing Split-Panel mode

… …

圖5　登錄界面的CTT模型Fig.5　The CTT model of login interface

圖6　登錄界面的數(shù)據(jù)模型Fig.6　The data model of login interface

在抽象界面模型建立過程中,實例化后的模式的value部分被截取出來,從而構(gòu)成了抽象界面模型。它接著被轉(zhuǎn)換為具體界面模型。具體界面模型中,放置用戶登錄的Panel使用Login Form模式來布局用戶名和密碼輸入框,使用Extras-on-Demand模式用來安排“重置”、“記住密碼”和“忘記密碼”3個功能。其中,Login Form模式用來規(guī)范用戶登錄頁面的內(nèi)容和布局。該模式主要用例子說明用戶登錄時所需要的LABEL和輸入框，根據(jù)頁面大小和用途等不同而作出不同的布局。在根據(jù)需要選取了模式中的例子后,該樣例被轉(zhuǎn)換成代碼插入到具體界面模型中。Extra-on-Demand模式用來布局多個類似的界面元素,它要求重要的界面元素放置在界面的醒目位置,而不常用的界面元素放置在界面的不顯眼位置。在例子中,“記住密碼”、“忘記密碼”和“重置”3個元素的重要性依次降低,故而其放置位置做出相應(yīng)安排。放置導(dǎo)航任務(wù)的Panel使用了Main Menu模式,用來安排“主窗口”、“幫助”和“退出”3個功能。該模式實例化后的XML代碼片段如表4所示。

表4　Main menu模式的部分XML代碼

在實例化過程中,由于上下文模型中界面運行平臺是安卓手機,語言是Java,因此選用了模式value元素的language參數(shù)為“xml”部分來生成最終代碼,該代碼為安卓手機開發(fā)中的布局資源文件。需要指出的是該模式的value部分還有l(wèi)anguage參數(shù)為“html”、“c#”等部分。由于抽象界面模型中“導(dǎo)航”圖形容器中有3個control元素,因而依據(jù)需要，Main Memu模式的value相應(yīng)部分實例化為3個button按鈕。注意其中button布局的寬度和高度是手動微調(diào)的結(jié)果。最后,具體界面模式轉(zhuǎn)換為最終界面代碼。通過運用GUIDPML進行開發(fā),我們把模式的實現(xiàn)部分通過實例化自動轉(zhuǎn)換為(部分)模型或代碼,從而避免了人工的轉(zhuǎn)換,因此大大提高了模式的生產(chǎn)性。根據(jù)可用性問題,在模式倉庫中選擇了相應(yīng)的模式來進行解決,從而保證了界面的高可用性。

5　結(jié)　論

在借鑒已有的模式集合描述語言的經(jīng)驗和教訓(xùn)的基礎(chǔ)上，設(shè)計并實現(xiàn)了一個模式標記語言GUIDPML。該語言在保證界面可用性的前提下,能半自動化地支持用戶界面的開發(fā)工作,從而極大地提高了模式描述語言的生產(chǎn)性。在使用中我們也注意到，GUIDPML描述的模式在實現(xiàn)部分的值子元素需要非常靈活的設(shè)計,才能保證所描述模式的通用性,我們將在實踐中不斷提高各個模式中這個子元素的描述方式。下一步的工作是開發(fā)一個基于GUIDPML的模式輔助設(shè)計工具,該工具在現(xiàn)有語言解釋工具的基礎(chǔ)上,圖形化地完成模式的編寫、編輯、搜索、調(diào)整和編譯等工作。

[1]FOLMER E, GURP J V, BOSCH J. A framework for capturing the relationship between usability and software architecture[J]. Software Process: Improvement and Practice, 2003, 8(2):67-87.

[2]MEIXNER G, PATERNF, VANDERDONCKT J. Past, present, and future of model-based user interface development[J]. i-Com, 2011,10(3): 2-11.

[3]KOEN VAN TURNHOUT, ARTHUR BENNIS, SABINE CRAENMEHR, et al. Design patterns for mixed-method research in HCI[C].Proceedings of the 8th Nordic Conference on Human-Computer Interaction: Fun, Fast, Foundational,Finland,2014: 361-370.

[4]JUERGEN ENGEL, CHRISTIAN HERDIN, CHRISTIAN MAERTIN.Exploiting HCI pattern collections for user interface generation[C].The Fourth International Conferences on Pervasive Patterns and Applications, France, 2012:421-438.

[5]MARKUS SPECHER, INA WENTZLAFF. Exploring usability needs by human-computer interaction patterns[C].Lecture Notes in Computer Science Volume 4849, 2007:254-260.

[6]SANJAY GHOSH, ANIRUDHA JOSHI. Exploration of usage patterns for multimodal input interactions[C]. IHCI ′14, India, 2014:77-86.

[7]TIDWELL J. Designing Interfaces[M].Beijing:O′Reilly Media, 2006.

[8]VAN DUYNE, LANDAY J A, HONG J I. The design of Sites: Patterns for Creating Winning Web Sites Second Edit[M].New Versey:Prentice Hall, 2007.

[9]Yahoo! Inc., Design Pattern Library[EB/OL].2015.http://developer.yahoo.com/ypatterns/.

[10] van Welie, M. Patterns in Interaction Design[EB/OL].2015.http://www.welie.com/patterns/.

[11] KAMTHAN P. Concepts and tools devised an XML DTD for PLML [C].Fort Lauderdale:CHI 2003, 2003:12-31.

[12] BIENHAUS D. PLMLx Doc[EB/OL].2009.http://www.cs.kent.ac.uk/people/staff/saf/patterns/plml.html.

[13] KRUSCHITZ C. XPLML-A HCI pattern formalizing and unifying approach[C].Boston:Proceedings of CHI 2009, 2009:156-169.

[14] ENGEL J, MARTIN C. PaMGIS: A Framework for Pattern-based Modeling and Generation of Interactive Systems[M].Lecture Notes in Computer Science Volume 5610, 2009:826-835.

[15] SEISSLER M, BREINER K, MEIXNER G. Towards Pattern-driven Engineering of Run-time Adaptive User Interfaces for Smart Production Environments[M]∥Human-Computer Interaction.Design and development Approaches.Springer Berlin Heidelberg, 2011:299-308.

[16] 張小濤,萬建成,侯金奎,等. 遞歸和復(fù)雜用戶界面的設(shè)計模式[J]. 計算機工程，2008,34(14):52.

(編輯李靜，曹大剛)

A generative user interface design pattern markup language GUIDPML

WU Hao1,2, HUA Qing-yi1

(1.School of Information Science and Technology, Northwest University, Xi′an 710069， China; 2.Contemporary Educational Technology Center, Northwest University, Xi′an 710069， China)

In order to (semi-)automatically develop model and pattern based user interface, it needs to use generative user interface design pattern markup language to formally describe patterns. So a generative user interface design pattern markup language was developed. It didn′t have the shortcomings of other design pattern markup language. This language was divided into three sections by the conception architecture: base, relevance, and implements; and was used to a model and pattern based user interface development process. It is proved that it can semi-automatically generate user interface that has high usability by the practice inspecting.

usability; user interface design pattern; generation; pattern markup language

2015-04-13

國家自然科學(xué)基金資助項目(61272286)；高等學(xué)校博士學(xué)科點專項科研基金聯(lián)合資助課題(20126101110006)；西北大學(xué)本科教學(xué)質(zhì)量與教學(xué)改革工程基金資助項目(JX14058)

吳昊，男，陜西藍田人，西北大學(xué)博士生，從事人機交互、軟件工程研究。

TP312

ADOI：10.16152/j.cnki.xdxbzr.2016-01-009