基于抽象设备的移动用户界面设计
2018-01-18,,
,,
(西北大学 信息科学与技术学院,西安 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
定义4(抽象事件Event) 属性name表示事件名称,TriggerType表示触发该事件的元素类型,Target表示将转移的目标功能单元,因此可形式化定义为Event
3.1.3 抽象设备上的通信机制
除了抽象呈现和控制器这两大构件,抽象设备还包含一个描述通信关系的通信机制。通过通信机制,能够对当前的界面功能单元进行扫描处理,获得当前激活的功能单元下的Elem。根据控制器中的Action与Event,对应执行下一个功能,进行消息传递与界面状态的改变。
3.2 抽象用户界面表示
在初始阶段界面是静态组织的,使用可扩展的标记语言XML对抽象用户界面进行建模。由于抽象用户界面只描述了界面功能,因此一个抽象用户界面应由一个或多个交互功能及功能间的关系构成。按照上文对抽象设备的定义,可基于抽象设备的构件定义对抽象用户界面进行描述。图4给出了基于抽象设备的移动用户界面设计过程。
图4 基于抽象设备的移动用户界面设计过程
根据抽象设备的定义及基于抽象设备的移动用户界面草图设计,可利用UML对抽象用户界面模型进行形式化描述。如图5所示,本文将抽象功能单元定义为fUnit,功能间的关系定义为fRelation。抽象用户界面模型通过fUnit及fRelation进行描述。每个功能单元fUnit使用一个四元组
图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.
