,,

(西北大學(xué) 信息科學(xué)與技術(shù)學(xué)院,西安 710127)

0 概述

隨著移動(dòng)設(shè)備數(shù)量和種類的爆炸式增長(zhǎng),不同的移動(dòng)設(shè)備呈現(xiàn)出不同的輸入輸出能力,如語(yǔ)音、觸摸、手勢(shì)等輸入通道,以及不同尺寸屏幕的輸出通道等。然而,當(dāng)這些不同類型的移動(dòng)設(shè)備在進(jìn)入市場(chǎng),滿足應(yīng)用領(lǐng)域無(wú)處不在計(jì)算需求的同時(shí),也引發(fā)了界面設(shè)計(jì)人員新的思考:在多設(shè)備環(huán)境中,應(yīng)當(dāng)如何有效地為相同應(yīng)用開(kāi)發(fā)出符合不同設(shè)備特性界面的問(wèn)題[1]。

面對(duì)移動(dòng)設(shè)備的多樣性與異構(gòu)性,由于無(wú)法實(shí)現(xiàn)統(tǒng)一的界面描述,目前通常采用對(duì)相同應(yīng)用在不同設(shè)備上進(jìn)行多遍界面開(kāi)發(fā)的解決方案[2-3],以保證不同版本界面間的一致性。但這種方法需要界面設(shè)計(jì)者掌握大量具體設(shè)備平臺(tái)上的底層開(kāi)發(fā)技術(shù),學(xué)習(xí)成本高且開(kāi)發(fā)周期長(zhǎng)。同時(shí),由于在目標(biāo)設(shè)備界面開(kāi)發(fā)中采取硬編碼設(shè)計(jì),其移植性與復(fù)用性較低。為解決該問(wèn)題,學(xué)術(shù)領(lǐng)域提出基于模型的用戶界面開(kāi)發(fā)(MBUID)[4]方法,能夠通過(guò)模型的定義與模型間的轉(zhuǎn)換明確最終界面,為多設(shè)備界面的設(shè)計(jì)開(kāi)發(fā)提供一個(gè)系統(tǒng)化方法。但由于目前并不存在模型定義的標(biāo)準(zhǔn),多數(shù)MBUID方法模型定義較為復(fù)雜,因此尚未廣泛應(yīng)用于工業(yè)實(shí)踐中[4-5]。

針對(duì)多設(shè)備界面難以有效開(kāi)發(fā)的問(wèn)題,本文給出抽象設(shè)備的定義,對(duì)多種不同類型的移動(dòng)設(shè)備進(jìn)行抽象。通過(guò)抽象設(shè)備的定義標(biāo)準(zhǔn),實(shí)現(xiàn)多設(shè)備環(huán)境中對(duì)抽象用戶界面模型的統(tǒng)一描述。在設(shè)計(jì)階段,設(shè)計(jì)者只需關(guān)注在抽象層的移動(dòng)用戶界面設(shè)計(jì)；而在實(shí)現(xiàn)階段,通過(guò)抽象設(shè)備到具體設(shè)備的映射,可將抽象用戶界面描述映射至具體物理設(shè)備上的用戶界面,生成最終界面。在此,本文重點(diǎn)對(duì)抽象用戶界面設(shè)計(jì)過(guò)程進(jìn)行討論。

1 相關(guān)工作

在對(duì)MBUID方法的早期研究中,人們開(kāi)發(fā)了多種不同的框架來(lái)試圖獲取界面開(kāi)發(fā)過(guò)程中的重要部分。經(jīng)過(guò)多年實(shí)踐證明,卡梅隆參考框架能夠?yàn)橹С侄嗄繕?biāo)及多使用上下文的基于模型界面開(kāi)發(fā)提供統(tǒng)一框架[6]。如圖1所示[7],它將用戶界面的開(kāi)發(fā)過(guò)程抽象為4個(gè)層次:任務(wù)與概念層描述了為實(shí)現(xiàn)用戶特定目標(biāo)所需要執(zhí)行的任務(wù)及領(lǐng)域?qū)ο?抽象用戶界面層描述了交互通道及平臺(tái)無(wú)關(guān)的界面邏輯;具體用戶界面層描述了具體交互通道相關(guān)但平臺(tái)無(wú)關(guān)的界面;最終用戶界面層則表示具體設(shè)備平臺(tái)上可執(zhí)行的最終界面代碼。在整個(gè)界面的開(kāi)發(fā)生命周期中,任意層均可作為設(shè)計(jì)的入口點(diǎn)。其中,由于抽象用戶界面模型能夠在較高抽象層次對(duì)通道無(wú)關(guān)的界面邏輯進(jìn)行描述,因此具有較高復(fù)用性。

圖1 簡(jiǎn)化的卡梅隆參考框架

目前,由于抽象用戶界面能夠?yàn)樵O(shè)計(jì)者更好地呈現(xiàn)設(shè)計(jì)邏輯[8-9],因此在多種MBUID方法均被采用。在TERESA方法中,設(shè)計(jì)者利用并發(fā)任務(wù)樹(shù)環(huán)境CTTE[10]對(duì)特定平臺(tái)的任務(wù)模型進(jìn)行構(gòu)建,遵循卡梅隆參考框架自頂向下的開(kāi)發(fā)過(guò)程得到用戶界面[11]。MARIA與TERESA方法類似,使用CTTE在任務(wù)層建模,在界面設(shè)計(jì)中強(qiáng)調(diào)抽象界面與具體界面的不同抽象層次[12]。E-UIDL可分別從抽象功能界面描述模塊、抽象數(shù)據(jù)模塊等方面進(jìn)行界面設(shè)計(jì)[13]。JMermaid可從抽象界面模型、呈現(xiàn)模型和用戶模型設(shè)計(jì)界面對(duì)界面進(jìn)行描述[14]。而基于模型的用戶界面變壓器設(shè)計(jì)對(duì)卡梅隆參考框架進(jìn)行修改,在任務(wù)領(lǐng)域模型與抽象用戶界面模型間加入界面設(shè)計(jì),將界面設(shè)計(jì)過(guò)程修改為5個(gè)層次[15]。盡管以上方法均對(duì)抽象用戶界面模型進(jìn)行描述,但并未從與設(shè)備平臺(tái)均無(wú)關(guān)的界面功能角度為抽象界面提供統(tǒng)一描述,模型表示大多較為復(fù)雜。因此,本文基于卡梅隆參考框架,從界面功能性的角度在抽象層提出一種基于抽象設(shè)備的統(tǒng)一界面描述方法。同時(shí)構(gòu)建SFAU方法框架,在設(shè)計(jì)階段對(duì)此抽象用戶界面描述方法進(jìn)行驗(yàn)證。

2 SFAU框架

在交互式系統(tǒng)的移動(dòng)界面開(kāi)發(fā)中,界面的功能性和可用性是設(shè)計(jì)人員必須考慮的2個(gè)獨(dú)立變量。在本文中,功能性是指從用戶角度出發(fā),為了實(shí)現(xiàn)用戶目標(biāo)界面所提供的交互式功能。而可用性則包括設(shè)備可用性與平臺(tái)可用性,反映了在具體設(shè)備平臺(tái)上進(jìn)行界面設(shè)計(jì)時(shí)需要考慮的輸入輸出特征及交互風(fēng)格等因素。為了分離功能性與可用性,使抽象用戶界面模型能夠?yàn)槎嘣O(shè)備設(shè)計(jì)提供統(tǒng)一描述,本文將基于卡梅隆參考框架,建立SFAU(Separated Functionality and Usability)框架。

SFAU框架旨在一個(gè)框架內(nèi)統(tǒng)一多設(shè)備界面的設(shè)計(jì)開(kāi)發(fā)過(guò)程,分離界面功能性、設(shè)備可用性和平臺(tái)可用性。如圖2所示,該框架在設(shè)計(jì)階段和實(shí)現(xiàn)階段共包含4個(gè)不同層次的抽象。每一層模型都可作為界面開(kāi)發(fā)過(guò)程中的入口點(diǎn),不需要從頭再進(jìn)行設(shè)計(jì)實(shí)現(xiàn)。

圖2 SFAU框架結(jié)構(gòu)

1)在設(shè)計(jì)階段的頂層,任務(wù)模型和領(lǐng)域模型是整個(gè)框架的輸入來(lái)源。本文利用CTT并發(fā)任務(wù)樹(shù)提供用戶需要完成的任務(wù)集及關(guān)系。而領(lǐng)域模型采用UML類圖的形式對(duì)特定領(lǐng)域相關(guān)的對(duì)象及約束關(guān)系進(jìn)行支持。

2)在設(shè)計(jì)階段的抽象用戶界面層,通過(guò)對(duì)多種移動(dòng)設(shè)備呈現(xiàn)、控制、通信的共性特征提取,提出抽象設(shè)備的定義。利用抽象設(shè)備構(gòu)件的定義標(biāo)準(zhǔn),生成統(tǒng)一的移動(dòng)設(shè)備的界面功能描述,實(shí)現(xiàn)多設(shè)備環(huán)境中界面“一次設(shè)計(jì),多次運(yùn)行”的目的。

3)在實(shí)現(xiàn)階段的具體用戶界面層,加入設(shè)備可用性變量,實(shí)現(xiàn)抽象設(shè)備到具體設(shè)備,抽象界面到具體界面上的映射。設(shè)備的可用性主要包括物理設(shè)備的輸入和輸出通道上的特征。不同的輸入通道包括語(yǔ)音、觸摸、手勢(shì)、筆等;輸出包括不同的屏幕、語(yǔ)音、打印機(jī)等。

4)在實(shí)現(xiàn)階段的最終用戶界面層,加入具體平臺(tái)的平臺(tái)可用性變量,生成目標(biāo)設(shè)備平臺(tái)上可執(zhí)行的最終界面。此處不同的平臺(tái)可用性代表了不同的交互風(fēng)格和具體的物理實(shí)現(xiàn)技術(shù)。

在SFAU框架中,界面的功能性是設(shè)計(jì)階段的核心內(nèi)容,而可用性是在實(shí)現(xiàn)階段根據(jù)具體物理設(shè)備平臺(tái)對(duì)應(yīng)考慮的主要變量。通過(guò)對(duì)界面功能性與可用性的明確劃分,能夠使界面設(shè)計(jì)人員在多設(shè)備環(huán)境中只關(guān)注抽象層次界面功能的統(tǒng)一設(shè)計(jì),簡(jiǎn)化模型表示。同時(shí),抽象設(shè)備的定義能夠?yàn)槌橄笥脩艚缑娴拿枋鎏峁┲С?便于移動(dòng)多設(shè)備界面的生成。

3 基于抽象設(shè)備的移動(dòng)用戶界面設(shè)計(jì)方法

3.1 抽象設(shè)備模型

為支持設(shè)計(jì)階段抽象用戶界面的統(tǒng)一描述,方便實(shí)現(xiàn)階段對(duì)不同移動(dòng)設(shè)備的轉(zhuǎn)換,本文在SFAU框架的抽象層上提出了抽象設(shè)備的概念。在本文中,抽象設(shè)備是指在抽象層為抽象用戶界面提供一套統(tǒng)一的構(gòu)件定義及通信規(guī)則,使抽象用戶界面能夠按照抽象設(shè)備上的格式規(guī)范執(zhí)行的邏輯設(shè)備。相對(duì)于物理設(shè)備上用戶界面的機(jī)器可讀性,由于抽象界面依賴于抽象設(shè)備構(gòu)件的定義,本文描述的抽象用戶界面在也能夠在此抽象設(shè)備上執(zhí)行。

根據(jù)對(duì)目前市場(chǎng)上的移動(dòng)設(shè)備的大量研究,本文定義的抽象設(shè)備如圖3所示,主要包含抽象呈現(xiàn)構(gòu)件模塊、控制器構(gòu)件模塊和抽象設(shè)備通信機(jī)制。

圖3 抽象設(shè)備結(jié)構(gòu)

3.1.1 抽象呈現(xiàn)構(gòu)件的定義

抽象呈現(xiàn)從界面功能性的角度提供了抽象元素與其關(guān)系的描述,為抽象用戶界面的呈現(xiàn)提供約束,包括抽象元素與元素間的抽象關(guān)系。

定義1(抽象元素Elem) 包含屬性name、actived、content,分別代表抽象元素的名稱、當(dāng)前功能單元下元素是否激活、元素內(nèi)容,形式化表示為Elem,是描述抽象界面交互式功能的基本組成單位。

定義2(抽象關(guān)系ElemRelation) 通過(guò)任務(wù)對(duì)象及領(lǐng)域?qū)ο笾g的關(guān)系,確定不同功能下Elem之間的結(jié)構(gòu)關(guān)系與通信關(guān)系。利用XML文檔的樹(shù)形結(jié)構(gòu)表示其結(jié)構(gòu)關(guān)系,而利用控制器中抽象動(dòng)作Action與抽象事件Event的狀態(tài)轉(zhuǎn)移順序確定通信關(guān)系。

3.1.2 控制器構(gòu)件的定義

控制器模型分別通過(guò)界面運(yùn)行時(shí)的抽象動(dòng)作與抽象事件,為抽象用戶界面在設(shè)備上的消息傳遞和界面的狀態(tài)轉(zhuǎn)移提供支持。

定義3(抽象動(dòng)作Action) 屬性name表示動(dòng)作名稱,屬性changedAttri表示將要更改的元素屬性,可形式化定義為Action。若x表示某抽象元素,f(x)表示作用在x上的動(dòng)作,則f(x)→x。抽象動(dòng)作只改變抽象元素的屬性,而不更改當(dāng)前元素的激活狀態(tài)。

定義4(抽象事件Event) 屬性name表示事件名稱,TriggerType表示觸發(fā)該事件的元素類型,Target表示將轉(zhuǎn)移的目標(biāo)功能單元,因此可形式化定義為Event。若x、y分別表示2個(gè)不同的抽象元素,f(x)表示作用在x上的事件,則f(x)→y。Event作用于2個(gè)抽象元素間,激活狀態(tài)發(fā)生轉(zhuǎn)移。

3.1.3 抽象設(shè)備上的通信機(jī)制

除了抽象呈現(xiàn)和控制器這兩大構(gòu)件,抽象設(shè)備還包含一個(gè)描述通信關(guān)系的通信機(jī)制。通過(guò)通信機(jī)制,能夠?qū)Ξ?dāng)前的界面功能單元進(jìn)行掃描處理,獲得當(dāng)前激活的功能單元下的Elem。根據(jù)控制器中的Action與Event,對(duì)應(yīng)執(zhí)行下一個(gè)功能,進(jìn)行消息傳遞與界面狀態(tài)的改變。

3.2 抽象用戶界面表示

在初始階段界面是靜態(tài)組織的,使用可擴(kuò)展的標(biāo)記語(yǔ)言XML對(duì)抽象用戶界面進(jìn)行建模。由于抽象用戶界面只描述了界面功能,因此一個(gè)抽象用戶界面應(yīng)由一個(gè)或多個(gè)交互功能及功能間的關(guān)系構(gòu)成。按照上文對(duì)抽象設(shè)備的定義,可基于抽象設(shè)備的構(gòu)件定義對(duì)抽象用戶界面進(jìn)行描述。圖4給出了基于抽象設(shè)備的移動(dòng)用戶界面設(shè)計(jì)過(guò)程。

圖4 基于抽象設(shè)備的移動(dòng)用戶界面設(shè)計(jì)過(guò)程

根據(jù)抽象設(shè)備的定義及基于抽象設(shè)備的移動(dòng)用戶界面草圖設(shè)計(jì),可利用UML對(duì)抽象用戶界面模型進(jìn)行形式化描述。如圖5所示,本文將抽象功能單元定義為fUnit,功能間的關(guān)系定義為fRelation。抽象用戶界面模型通過(guò)fUnit及fRelation進(jìn)行描述。每個(gè)功能單元fUnit使用一個(gè)四元組進(jìn)行描述,四元組的內(nèi)部元素均依賴于抽象設(shè)備的定義:elem表示執(zhí)行功能單元的抽象元素;action表示在元素elem上引起自身內(nèi)部狀態(tài)改變的動(dòng)作;event表示引起狀態(tài)轉(zhuǎn)移至外部元素的調(diào)用事件;elemRelation表示elem相互之間的結(jié)構(gòu)關(guān)系和通信關(guān)系。抽象功能單元fRelation可分為結(jié)構(gòu)關(guān)系與通信關(guān)系,直接關(guān)聯(lián)在每個(gè)功能單元內(nèi)部的元素關(guān)系上。

圖5 抽象用戶界面模型

在抽象用戶界面的設(shè)計(jì)中,抽象元素及其相關(guān)的抽象動(dòng)作與抽象事件均包含不同的屬性,這為界面進(jìn)行正常通信及界面的狀態(tài)轉(zhuǎn)移提供支持。從界面功能的角度來(lái)看,抽象用戶界面的界面元素通信轉(zhuǎn)換關(guān)系包括:1)功能單元內(nèi)部;2)功能單元與另一功能單元之間的關(guān)系,具體轉(zhuǎn)換關(guān)系如圖6所示。在界面運(yùn)行階段,通過(guò)執(zhí)行action和event完成界面功能元素間的事件處理與狀態(tài)轉(zhuǎn)移。

圖6 功能元素間的通信轉(zhuǎn)換關(guān)系

4 案例分析

為驗(yàn)證本文提出的抽象用戶界面建模方法的可行性,本節(jié)將利用此方法對(duì)郵件系統(tǒng)的抽象界面進(jìn)行設(shè)計(jì)實(shí)現(xiàn)。圖7和圖8分別以CTT并發(fā)任務(wù)樹(shù)和領(lǐng)域類圖的形式給出了郵件系統(tǒng)寫信收信功能的簡(jiǎn)易任務(wù)模型與領(lǐng)域模型,獲得交互任務(wù)、領(lǐng)域?qū)ο蠹八鼈冎g的關(guān)系。

圖7 郵件系統(tǒng)的CTT任務(wù)模型

圖8 郵件系統(tǒng)的領(lǐng)域類圖

4.1 郵件系統(tǒng)的抽象用戶界面實(shí)現(xiàn)

根據(jù)本文所提出的基于抽象設(shè)備的移動(dòng)用戶界面設(shè)計(jì)方法,對(duì)郵件系統(tǒng)的任務(wù)模型與領(lǐng)域模型進(jìn)行分析,可以得到抽象用戶界面的XML代碼描述如下所示。抽象界面包含一個(gè)寫信的抽象界面功能單元和一個(gè)收信的抽象界面單元。

4.2 郵件系統(tǒng)的最終界面實(shí)現(xiàn)

在抽象用戶界面到具體用戶界面的轉(zhuǎn)換中,加入具體物理設(shè)備的輸入輸出通道特征,將功能單元內(nèi)的抽象元素映射至具體設(shè)備上,映射為具體用戶界面。而在具體用戶界面到最終用戶界面的轉(zhuǎn)換中,進(jìn)一步考慮具體平臺(tái)的可用性特征,將具體界面元素映射為特定交互風(fēng)格的控件。在Android Studio上分別實(shí)現(xiàn)了安卓系統(tǒng)下某智能手機(jī)和平板電腦的最終用戶界面(如圖9和圖10所示),證明本文方法生成多種移動(dòng)設(shè)備界面的可行性。

圖9 智能手機(jī)上的郵件界面

圖10 平板電腦上的郵件界面

最后,為驗(yàn)證本方法的有效性及開(kāi)發(fā)效率,組織界面開(kāi)發(fā)者分別使用本文方法、多遍界面開(kāi)發(fā)方法以及基于MBUID的JMermaid方法來(lái)對(duì)Android平臺(tái)下某智能手機(jī)與平板電腦的郵件系統(tǒng)進(jìn)行界面開(kāi)發(fā)。3種界面開(kāi)發(fā)方法的實(shí)驗(yàn)結(jié)果總結(jié)如表1所示。經(jīng)過(guò)分析可知,本文方法相比于其他2種方法,學(xué)習(xí)成本較低,并且具有較高的界面復(fù)用性。由于抽象設(shè)備的引入,能夠簡(jiǎn)化界面模型表示,大幅縮短開(kāi)發(fā)周期,因此本文方法具有較高的可用性。

表1 移動(dòng)多設(shè)備界面開(kāi)發(fā)方法比較

5 結(jié)束語(yǔ)

本文定義的抽象設(shè)備,能夠?qū)Υ罅恳苿?dòng)設(shè)備的多樣性特征進(jìn)行統(tǒng)一,為設(shè)計(jì)階段抽象用戶界面的描述提供支持。通過(guò)對(duì)基于抽象設(shè)備移動(dòng)用戶界面的統(tǒng)一描述,界面設(shè)計(jì)者可實(shí)現(xiàn)同一應(yīng)用移動(dòng)多設(shè)備界面的“一次設(shè)計(jì),多次實(shí)現(xiàn)”。案例實(shí)踐結(jié)果證明,本文方法能夠在保證界面實(shí)現(xiàn)可行性與有效性的同時(shí),降低學(xué)習(xí)成本,縮短開(kāi)發(fā)周期。下一步將對(duì)抽象用戶界面的描述工具進(jìn)行完善,提高抽象界面生成的自動(dòng)化程度。

[1] SEFFAH A,FORBRIG P,JAVAHERY H.Multi-devices ‘Multiple’ User Interfaces:Development Models and Research Opportunities[J].Journal of Systems and Software,2004,73(2):287-300.

[2] CIMINO M G C A,MARCELLONI F.An Efficient Model-based Methodology for Developing Device-independent Mobile Applications[J].Journal of Systems Architecture,2012,58(8):286-304.

[3] 吳 昊,華慶一.基于UIML的多設(shè)備用戶界面生成方法[J].計(jì)算機(jī)工程與應(yīng)用,2016,52(16):17-22.

[4] SILVA P P D.User Interface Declarative Models and Development Environments:A Survey[M]//PALANQUE P,PATERNF.Interactive Systems Design,Specification,and Verification.Berlin,Germany:Springer,2000:207-226.

[5] 常言說(shuō).基于模型的高可用性用戶界面開(kāi)發(fā)研究[D].西安:西北大學(xué),2013.

[6] MEIXNER G,PATERNF,VANDERDONCKT J,et al.Past,Present,and Future of Model-based User Interface Development[J].i-com,2016,10(3):2-11.

[7] CALVARY G,COUTAZ J,THEVENIN D,et al.A Unifying Reference Framework for Multi-target User Interfaces[J].Interacting with Computers,2003,15(3):289-308.

[8] MOALLEM A.Concrete or Abstract User Interface?[M]//KUROSU M.Human-Computer Interaction:Design and Evaluation.Berlin,Germany:Springer,2015:390-395.

[9] 王愛(ài)娟，劉俊軒.抽象用戶界面構(gòu)成關(guān)系的形式化描述[J].科技信息(科學(xué)教研)，2008(21)：17,63.

[10] MORI G,PATERNO F,SANTORO C.CTTE:Support for Developing and Analyzing Task Models for Interactive System Design[J].IEEE Transactions on Software Engineering,2002,28(8):797-813.

[11] BERTI S,CORREANI F,MORI G,et al.TERESA:A Transformation-based Environment for Designing and Developing Multi-device Interfaces[C]//Proceedings of 2004 Conference on Human Factors in Computing Systems.Vienna,Austria:[s.n.], 2004:793-794.

[12] PATERNO F,SANTORO C,SPANO L D.MARIA:A Universal,Declarative,Multiple Abstraction-level Language for Service-oriented Applications in Ubiquitous Environments[J].ACM Transactions on Computer-Human Interaction,2009,16(4):433-486.

[13] 杜 一,鄧昌智,田 豐,等.一種可擴(kuò)展的用戶界面描述語(yǔ)言[J].軟件學(xué)報(bào),2013,24(5):1127-1142.

[14] RUIZ J,SEDRAKYAN G,SNOECK M.Generating User Interface from Conceptual,Presentation and User Models with JMermaid in a Learning Approach[C]//Proceedings of the 16th International Conference on Human Computer Interaction.New York,USA:ACM Press,2015:1-8.

[15] 齊曉東,華慶一,吳 昊,等.基于模型的用戶界面變壓器設(shè)計(jì)[J].計(jì)算機(jī)工程,2012,38(9):43-45.