
4.2 人机交互系统的设计框架及策略
4.2.1 设计框架
设计框架定义了用户体验的整个结构,包括底层组织原则、屏幕上功能元素的排列、工作流程、产品交互、传递信息的视觉和形式语言、功能性和品牌识别等,包括交互框架、视觉设计框架和工业设计框架。交互框架设计(Interaction Framework)指交互设计师利用场景和需求来创建屏幕和行为草图,简单地说就是绘制界面交互线框图。
Allan Cooper提出的交互框架不仅定义了高层次的屏幕布局,同时定义了产品的工作流、行为和组织。它包括6个主要步骤,如图4-3所示。
Step1:定义形式要素、姿态和输入方法。
形式要素指在产品设计前期考虑要设计什么样的产品,是高分辨率屏幕上显示的Web应用,还是低分辨率、轻便且在黑暗和高亮度光线下都能看见的手机端产品。如果产品的特点和约束对设计提出的要求不能给出明确的答案,可以回想一下人物角色和场景剧本,以便能够理解产品的使用情景和具体环境。

图4-3 框架定义过程
此外,还需考虑产品的基本姿态,确定该系统的输入方法。产品姿态是指用户会投入多大的注意力与产品互动,以及产品的互动会对用户投入的注意力做出何种反应。
输入方法是用户和产品互动的形式。它既取决于产品外形和姿态,也受人物角色的态度、能力和喜好影响。输入方法包括键盘、鼠标、拇指板、触摸屏、声音、游戏杆、遥控器以及专门的按键等。例如大多数计算机应用/网站都需要键盘和鼠标两种输入方法,而iPad通常是用手指触摸或者手绘笔输入。
Step2:定义数据和功能性元素。
数据元素通常是交互产品中的基本主体,包括相片、电子邮件及订单等,是能够被用户访问和操作的基本个体。对数据元素进行分类十分关键,因为产品的功能定义通常与其有关。此外,数据之间的关系也很重要,有时一个数据对象包含其他数据对象,有时不同数据对象之间还存在更密切的关系。
功能元素是对数据元素的操作及其在界面上的表达。一般来说,功能元素包括对数据元素操作的工具,以及输入或者放置数据元素的位置。通过将功能需求转换到功能元素,会使设计变得更加清晰。情景场景剧本就是设计者想要给用户带来的整体体验的载体,而设计者让体验者变得真实和具体。
Step3:确定功能组合层级。
在获得了顶级功能和数据元素后,可以对定义的高层次功能和数据元素按照重要性进行分组,并决定它们的层次。元素分组是为了更好地在任务中和任务间帮助促进人物角色的操作流程。分组过程中需要考虑的因素包括哪些元素需要大量的屏幕空间,哪些元素是其他元素的容器,应如何安排容器来优化流程,哪些元素应该组合在一起等。例如,若容纳对象的容器之间存在比较关系或需要放在一起使用,则应该是相邻的;如果是表达多个步骤的对象通常也要放在一起,并且遵循一定的次序。同时,分组过程中还要考虑一定的产品平台、屏幕大小、外形尺寸和输入方法的影响。
Step4:勾画交互框架。
勾画大致的交互框架。勾画的最初阶段,界面的视觉应该简单。Allan Cooper提出了“矩形图阶段”,它使用粗略的矩形图表达并区分每个视图,可以为每个矩形进行标注,用来说明或描述一个分组或元素如何影响其他分组或元素。交互界面的可视化首先应该简单,每个功能组或容器方框的名称和描述表示不同区域之间的关系,如图4-4所示,草图中每个视图对应于窗格、控件(如工具栏)和其他顶层容器的粗糙矩形区域。

图4-4 交互框架草图(图片来自[Cooper et al 2014])
Step5:构建关键路径场景剧本。
关键路径场景描述角色如何使用交互框架词汇与产品进行交互。这些场景描绘了人物角色通过界面的主要途径,其重点在任务层。例如,在电子邮件应用程序中,关键路径活动包括查看和撰写邮件,而不是配置新的邮件服务器。这些场景通常从上下文场景演变而来,但是在这里具体描述了角色与组成交互框架的各种功能和数据元素的交互。随着向交互框架添加越来越多的细节,迭代关键路径场景,可以更加明确地反映用户操作和产品响应周围的这些细节。
与面向目标的上下文场景不同,关键路径场景更加面向任务,侧重于上下文场景中广泛描述和暗示的任务细节,并提供每个关键路线的走查。如果需要的话,还可以使用低保真草图序列的故事板来描述关键路径场景剧本,可以详细地描述解决方案如何帮助角色实现目标,如图4-5所示。这种故事板技术是从电影制作和漫画中借鉴而来的,在这种技术中,用相似的过程来计划和评估创意,而不必处理拍摄实际电影的成本和劳力。用户和产品之间的每个交互可以描绘在一个或多个框架或幻灯片上。通过它们的推进为相互作用的一致性和流动提供了现实的检查。

图4-5 《狼牙之刃》故事板
Step6:运用验证性场景来检查设计。
在创建了关键路径故事板之后,把重点转移到不太频繁使用和不太重要的交互上,通过验证性场景,指出设计方案的不足,并根据需要进行调整。应该按照以下顺序处理三个主要类别的验证场景。
Step6.1:关键路径的替代剧本。关键路径的替代剧本是沿着人物角色决策树的某个点从关键路径分离的替代或分岔点的交互。这些可能包括常见的异常情况、较少使用的工具和视图,以及基于二级角色的目标和需求的变化或其他情况。
Step6.2:必须使用的场景剧本。必须使用的场景剧本是指必须要执行,但又不经常发生的动作,如清空数据库、升级设备等请求都属于这个类别。
Step6.3:边缘情形使用的剧本。边缘情形使用的剧本指的是非典型情形下一些产品必须要有却又不太常用的功能,例如用户A想添加两个同名的联系人,就是一个边缘情境场景。
Allan Cooper框架定义过程不一定是线性的,但可以允许循环往复,特别是Step3~5有可能随设计者思维方式的改变而改变。