基于抽象設備的移動用戶界面設計

,,

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

0 概述

隨著移動設備數量和種類的爆炸式增長,不同的移動設備呈現出不同的輸入輸出能力,如語音、觸摸、手勢等輸入通道,以及不同尺寸屏幕的輸出通道等。然而,當這些不同類型的移動設備在進入市場,滿足應用領域無處不在計算需求的同時,也引發了界面設計人員新的思考:在多設備環境中,應當如何有效地為相同應用開發出符合不同設備特性界面的問題[1]。

面對移動設備的多樣性與異構性,由于無法實現統一的界面描述,目前通常采用對相同應用在不同設備上進行多遍界面開發的解決方案[2-3],以保證不同版本界面間的一致性。但這種方法需要界面設計者掌握大量具體設備平臺上的底層開發技術,學習成本高且開發周期長。同時,由于在目標設備界面開發中采取硬編碼設計,其移植性與復用性較低。為解決該問題,學術領域提出基于模型的用戶界面開發(MBUID)[4]方法,能夠通過模型的定義與模型間的轉換明確最終界面,為多設備界面的設計開發提供一個系統化方法。但由于目前并不存在模型定義的標準,多數MBUID方法模型定義較為復雜,因此尚未廣泛應用于工業實踐中[4-5]。

針對多設備界面難以有效開發的問題,本文給出抽象設備的定義,對多種不同類型的移動設備進行抽象。通過抽象設備的定義標準,實現多設備環境中對抽象用戶界面模型的統一描述。在設計階段,設計者只需關注在抽象層的移動用戶界面設計；而在實現階段,通過抽象設備到具體設備的映射,可將抽象用戶界面描述映射至具體物理設備上的用戶界面,生成最終界面。在此,本文重點對抽象用戶界面設計過程進行討論。

1 相關工作

在對MBUID方法的早期研究中,人們開發了多種不同的框架來試圖獲取界面開發過程中的重要部分。經過多年實踐證明,卡梅隆參考框架能夠為支持多目標及多使用上下文的基于模型界面開發提供統一框架[6]。如圖1所示[7],它將用戶界面的開發過程抽象為4個層次:任務與概念層描述了為實現用戶特定目標所需要執行的任務及領域對象;抽象用戶界面層描述了交互通道及平臺無關的界面邏輯;具體用戶界面層描述了具體交互通道相關但平臺無關的界面;最終用戶界面層則表示具體設備平臺上可執行的最終界面代碼。在整個界面的開發生命周期中,任意層均可作為設計的入口點。其中,由于抽象用戶界面模型能夠在較高抽象層次對通道無關的界面邏輯進行描述,因此具有較高復用性。

圖1 簡化的卡梅隆參考框架

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

2 SFAU框架

在交互式系統的移動界面開發中,界面的功能性和可用性是設計人員必須考慮的2個獨立變量。在本文中,功能性是指從用戶角度出發,為了實現用戶目標界面所提供的交互式功能。而可用性則包括設備可用性與平臺可用性,反映了在具體設備平臺上進行界面設計時需要考慮的輸入輸出特征及交互風格等因素。為了分離功能性與可用性,使抽象用戶界面模型能夠為多設備設計提供統一描述,本文將基于卡梅隆參考框架,建立SFAU(Separated Functionality and Usability)框架。

SFAU框架旨在一個框架內統一多設備界面的設計開發過程,分離界面功能性、設備可用性和平臺可用性。如圖2所示,該框架在設計階段和實現階段共包含4個不同層次的抽象。每一層模型都可作為界面開發過程中的入口點,不需要從頭再進行設計實現。

圖2 SFAU框架結構

1)在設計階段的頂層,任務模型和領域模型是整個框架的輸入來源。本文利用CTT并發任務樹提供用戶需要完成的任務集及關系。而領域模型采用UML類圖的形式對特定領域相關的對象及約束關系進行支持。

2)在設計階段的抽象用戶界面層,通過對多種移動設備呈現、控制、通信的共性特征提取,提出抽象設備的定義。利用抽象設備構件的定義標準,生成統一的移動設備的界面功能描述,實現多設備環境中界面“一次設計,多次運行”的目的。

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

4)在實現階段的最終用戶界面層,加入具體平臺的平臺可用性變量,生成目標設備平臺上可執行的最終界面。此處不同的平臺可用性代表了不同的交互風格和具體的物理實現技術。

在SFAU框架中,界面的功能性是設計階段的核心內容,而可用性是在實現階段根據具體物理設備平臺對應考慮的主要變量。通過對界面功能性與可用性的明確劃分,能夠使界面設計人員在多設備環境中只關注抽象層次界面功能的統一設計,簡化模型表示。同時,抽象設備的定義能夠為抽象用戶界面的描述提供支持,便于移動多設備界面的生成。

3 基于抽象設備的移動用戶界面設計方法

3.1 抽象設備模型

為支持設計階段抽象用戶界面的統一描述,方便實現階段對不同移動設備的轉換,本文在SFAU框架的抽象層上提出了抽象設備的概念。在本文中,抽象設備是指在抽象層為抽象用戶界面提供一套統一的構件定義及通信規則,使抽象用戶界面能夠按照抽象設備上的格式規范執行的邏輯設備。相對于物理設備上用戶界面的機器可讀性,由于抽象界面依賴于抽象設備構件的定義,本文描述的抽象用戶界面在也能夠在此抽象設備上執行。

根據對目前市場上的移動設備的大量研究,本文定義的抽象設備如圖3所示,主要包含抽象呈現構件模塊、控制器構件模塊和抽象設備通信機制。

圖3 抽象設備結構

3.1.1 抽象呈現構件的定義

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

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

定義2(抽象關系ElemRelation) 通過任務對象及領域對象之間的關系,確定不同功能下Elem之間的結構關系與通信關系。利用XML文檔的樹形結構表示其結構關系,而利用控制器中抽象動作Action與抽象事件Event的狀態轉移順序確定通信關系。

3.1.2 控制器構件的定義

控制器模型分別通過界面運行時的抽象動作與抽象事件,為抽象用戶界面在設備上的消息傳遞和界面的狀態轉移提供支持。

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

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

3.1.3 抽象設備上的通信機制

除了抽象呈現和控制器這兩大構件,抽象設備還包含一個描述通信關系的通信機制。通過通信機制,能夠對當前的界面功能單元進行掃描處理,獲得當前激活的功能單元下的Elem。根據控制器中的Action與Event,對應執行下一個功能,進行消息傳遞與界面狀態的改變。

3.2 抽象用戶界面表示

在初始階段界面是靜態組織的,使用可擴展的標記語言XML對抽象用戶界面進行建模。由于抽象用戶界面只描述了界面功能,因此一個抽象用戶界面應由一個或多個交互功能及功能間的關系構成。按照上文對抽象設備的定義,可基于抽象設備的構件定義對抽象用戶界面進行描述。圖4給出了基于抽象設備的移動用戶界面設計過程。

圖4 基于抽象設備的移動用戶界面設計過程

根據抽象設備的定義及基于抽象設備的移動用戶界面草圖設計,可利用UML對抽象用戶界面模型進行形式化描述。如圖5所示,本文將抽象功能單元定義為fUnit,功能間的關系定義為fRelation。抽象用戶界面模型通過fUnit及fRelation進行描述。每個功能單元fUnit使用一個四元組進行描述,四元組的內部元素均依賴于抽象設備的定義:elem表示執行功能單元的抽象元素;action表示在元素elem上引起自身內部狀態改變的動作;event表示引起狀態轉移至外部元素的調用事件;elemRelation表示elem相互之間的結構關系和通信關系。抽象功能單元fRelation可分為結構關系與通信關系,直接關聯在每個功能單元內部的元素關系上。

圖5 抽象用戶界面模型

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

圖6 功能元素間的通信轉換關系

4 案例分析

為驗證本文提出的抽象用戶界面建模方法的可行性,本節將利用此方法對郵件系統的抽象界面進行設計實現。圖7和圖8分別以CTT并發任務樹和領域類圖的形式給出了郵件系統寫信收信功能的簡易任務模型與領域模型,獲得交互任務、領域對象及它們之間的關系。

圖7 郵件系統的CTT任務模型

圖8 郵件系統的領域類圖

4.1 郵件系統的抽象用戶界面實現

根據本文所提出的基于抽象設備的移動用戶界面設計方法,對郵件系統的任務模型與領域模型進行分析,可以得到抽象用戶界面的XML代碼描述如下所示。抽象界面包含一個寫信的抽象界面功能單元和一個收信的抽象界面單元。

4.2 郵件系統的最終界面實現

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

圖9 智能手機上的郵件界面

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

最后,為驗證本方法的有效性及開發效率,組織界面開發者分別使用本文方法、多遍界面開發方法以及基于MBUID的JMermaid方法來對Android平臺下某智能手機與平板電腦的郵件系統進行界面開發。3種界面開發方法的實驗結果總結如表1所示。經過分析可知,本文方法相比于其他2種方法,學習成本較低,并且具有較高的界面復用性。由于抽象設備的引入,能夠簡化界面模型表示,大幅縮短開發周期,因此本文方法具有較高的可用性。

表1 移動多設備界面開發方法比較

5 結束語

本文定義的抽象設備,能夠對大量移動設備的多樣性特征進行統一,為設計階段抽象用戶界面的描述提供支持。通過對基于抽象設備移動用戶界面的統一描述,界面設計者可實現同一應用移動多設備界面的“一次設計,多次實現”。案例實踐結果證明,本文方法能夠在保證界面實現可行性與有效性的同時,降低學習成本,縮短開發周期。下一步將對抽象用戶界面的描述工具進行完善,提高抽象界面生成的自動化程度。

[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的多設備用戶界面生成方法[J].計算機工程與應用,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] 常言說.基于模型的高可用性用戶界面開發研究[D].西安:西北大學,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] 王愛娟，劉俊軒.抽象用戶界面構成關系的形式化描述[J].科技信息(科學教研)，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] 杜 一,鄧昌智,田 豐,等.一種可擴展的用戶界面描述語言[J].軟件學報,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] 齊曉東,華慶一,吳 昊,等.基于模型的用戶界面變壓器設計[J].計算機工程,2012,38(9):43-45.