UI交互设计与开发实战
上QQ阅读APP看书,第一时间看更新

2.3 界面设计与软件工程活动

设计活动是基于一定的目的与流程的,它明确设计活动的最终方向,并保证设计活动的正确性和高效率。本节将介绍软件工程活动过程中,用户界面设计参与的环节以及在这些环节中用户界面设计的工作环境如何、要做哪些工作,以及完成这些工作的方法。

2.3.1 需求分析

软件开发的过程需要有完整、准确、清晰、具体的要求,例如某ERP系统的功能如图2-9所示。将用户的原始需求描述整理为需求文档的过程称为需求分析。需求分析是软件工程中的重要工作,一般由专门的需求分析师完成,但用户很可能在此阶段产生模糊的需求,这些需求或多或少会和用户界面设计师的工作相关,而且进行设计时也需要考虑到用户已有的操作习惯,因此用户界面设计可以在此阶段关注需求的分析过程。

图2-9 某ERP系统的功能图

1.有需求提出方

需求是软件工程的终极目标,指的是项目的所有者或者使用者对项目所要达到的功能、性能上的要求。一般,需求来自于用户的自然语言描述,具有不确定、描述模糊和容易改变的特点。因此,需要对需求做进一步的规范,形成需求文档,一方面帮助用户确定功能细节,另一方面也便于之后开发人员进行对照和验证。

2.没有需求提出方

如果团队要完成的是向市场投放的产品,那么系统的需求往往需要自己解决,例如从其他软件中提取或参考市场调研部门的调研报告。要制作出能够满足用户需求的产品,首先设计者自身必须对用户的潜在需求了解透彻。市场调研部门会通过类似产品功能、目标人群调研和模拟用户测试等多个途径尝试找出可能的需求,并形成需求说明。

3.功能需求

功能需求是指描述用户希望本系统具有的功能。这反映了用户的业务流程,以及可能涉及的其他操作。功能需求大部分都需要界面配合,因此是用户界面设计者应当着重关注的参与过程。需求分析结束后,一般会使用用例规约表来描述系统的功能性需求,如表2-1所示。

表2-1 用例规约表示例

在上表中,“用例名称”与“用例编号”主要是描述该表在记录中的代号;“参与角色”是指参与使用这个用例的用户在系统中扮演何种角色;“前置条件”是指要进行此用例需要符合的条件;“用例说明”是对此用例内容的简单描述;“基本事件流”描述用户在进行此用例时所要经过的基本操作步骤;“分支事件流”则是对基本事件流的补充,描述在用户操作过程中可能发生的分支操作;“异常事件流”是指如果操作中发生错误,系统将要如何处理;“后置条件”是指用例结束后对整个系统产生了什么样的影响,以及系统有何变化等。

4.非功能需求

对于软件系统来说,非功能性需求是指依据一些条件判断系统运作情形或其特性,而不是针对系统特定行为的需求,包括安全性、可靠性、可操作性、健壮性、易使用性、可维护性、可移植性、可重用性和可扩充性。对于用户界面设计人员来说,可操作性和易使用性是主要关注的非功能需求。这些非功能需求的保障是通过界面设计和交互设计共同完成的,也影响到用户使用产品时的体验。

软件需求的获取是一门专业的工作。在软件工程的工作中,这项工作关系着系统的最终成果能否达到用户的心理预期。有关软件的用户需求部分,有兴趣的读者可参阅软件工程类的相关书籍。

2.3.2 原型设计

为了帮助用户更好地描述系统的需求,也为了用户界面设计师和用户沟通的准确性,需求分析阶段常常需要使用原型。原型可以概括整个产品面市之前的框架设计,它注重于向用户展示系统所要执行的某一个方面,例如基本交互逻辑、界面布局、跳转逻辑、美术样式等。通过原型,用户可以了解到整个系统如何使用,而用户界面设计师也可以与用户讨论细节上的需求。

在原型阶段,用户界面设计需要将重心放在想表达的重点上,而暂时忽略其他方面的设计。

原型可以用多种形式表现,如草图、界面设计稿、原型交互等。

原型的概念最早产生于工业生产,是指在新产品研制过程中按设计图样制造的第一批供验证设计正确性的机械。常见行业有飞机、电脑、车床等,都会采用原型机验证。在一定经济范围内,原型机的制造往往不计成本,优先使用最好的材料。

1.功能布局

功能布局是指为了体现产品功能而划分的布局,旨在表达产品的功能分布、使用逻辑与基本区域。因此功能布局并不拘泥于外观美的束缚,只要能将设计者的意图传达即可。在本阶段,首先可以按照常见的布局结构,例如边栏式、分页式等,来构建系统的整体结构,之后将大致的功能区填入布局的各个部分。

由于界面设计通常是很难一蹴而就的,因此在界面设计初期,往往会产生多个可行的备选方案。之后,需要通过布局复杂度和布局统一度等度量标准来衡量这些备选方案的优劣,确定最终的布局样式。

在这个阶段,可以借助布局草图以及界面跳转图来帮助我们表达,如图2-10所示。布局草图需要画出界面大致的功能分区,以及各个分区的主要功能或内部布局。而界面跳转图需要标识各个界面之间的切换是通过怎样的操作来完成的,以及它们的顺序如何等。

图2-10 设计草图

2.交互目标

如果用户要使用系统来完成业务流程,那么这个系统必须要贴合我们的目标用户。因此,在进行交互设计时需要考虑我们的交互设计需要达到何种目标。

3.用户体验目标

用户常用的功能需要最快被找到,常用的流程应该做好优化处理,要决定重大事项时理应收到警告和防错处理,这些在使用产品过程中得到的感受会组合成用户整体的使用体验。对用户体验的要求往往会因为用户的年龄、教育程度、使用习惯等诸多因素而产生变化,因此用户体验目标必须注重目标人群的特定需求。例如,对于经常使用计算机办公的办公室白领,他们可能热衷于使用大量的快捷按键来高效完成任务;若是提供给中年或者老年人群,他们甚至不想去阅读使用说明书。

为了明确用户体验目标,需要确定目标人群,并对目标人群的使用习惯做调研。明确交互的用户体验目标,对之后进行交互设计具有非常重要的意义。

4.功能设计

在获得了详细而准确的需求说明之后,便可开始功能设计的工作了。在本阶段,用户界面设计师需要参与到流程设计与交互设计的环节中,通过设计系统的操作流程与交互细节,让软件开发工程师能以详细的说明文档为指导进行贴合需求的开发工作,并为测试验收环节做好准备。

5.流程设计

流程设计是指设计产品的使用流程,既包括整体完成一件大型工作的步骤(工作流),又包括执行每个独立功能所要经过的操作。流程是把输入转化成用户价值相关的一系列活动。也就是说,用户通过向系统中输入,经过流程转化成对用户有价值的操作或者信息。好的流程能用尽量少的步骤为用户创造尽量多的有用信息和有价值操作。因此流程设计对系统整体的使用体验非常重要。要实现好的流程设计,设计者需要明确流程中最为关键的那些决策点,明确参与整个流程的角色,实现流程的可视化等。

6.交互细节设计

交互细节设计是指基于设计好的流程,根据目标用户人群的交互目标,对操作流程进行部分优化与细节设定的工作。这些工作虽然不直接创造价值,但是往往能避免用户受到巨大损失。例如,在可能产生重大影响的操作项前着重提醒,让这些事项具有可挽回的措施等。

2.3.3 外观设计

外观设计是指对产品的视觉表现进行设计,主要考虑的是产品的美学特性以及用户使用的舒适性。外观设计在功能布局与交互模型的基础上进行最终产品的视觉定义,在良好的内容包装上进行最恰当的外观展示,吸引用户使用。

1.样式设计

样式设计是指对整体界面的风格和形状进行设计和搭配。一般来说,一套和谐而富有变化的整体样式需要一个“主旋律”来保持统一感,而不同组件和界面的变化往往起着发挥图形暗示功能的作用。

2.配色方案

配色方案是指一整套具有统一风格和多种暗示效能的颜色组合。设计者在选取一套配色方案时,主体颜色用以适配目标用户的心理喜好,而不同的辅助颜色用于在整体风格中提醒用户不同的功能。例如,较为醒目的颜色用于标识错误,对比度较浅、灰度较大的颜色标识不可用等。

配色方案需要选定一个主色调,然后将其衍生出来的其他颜色作为一种用途标示出来,配色方案可以按照功能来表示,也可以按照情景来表示。图2-11为一组轻快明朗的配色。

图2-11 一组轻快明朗的配色

2.3.4 图形界面测试

除了原型设计、功能设计和界面设计,用户界面设计人员还能进行一项专门针对图形界面的测试工作,即图形界面测试。用户界面从命令行演化到图形界面,除了易用性大大增加了之外,操作的自由度也极大地增加了。而软件的使用是十分依赖正确的操作流程的,因此进行图形界面测试,寻找所有可能出现的异常情况,对保证软件的正常使用是十分重要的。

图形界面测试越早测试越好。由于图形界面的设计与实现参与到软件的各个层面中,因此在各个阶段都要首先设计好针对当前阶段的测试方法和测试用例。可以按照如下思路设计图形界面测试用例。

1.对界面元素分组分层

对界面元素进行分组,让从属于同一功能的元素在同一组中,有助于功能测试时确定测试对象。对界面元素进行分层,有助于区分不同类型的测试方法。一般可以将界面元素分成三层:第一层为界面原子,即界面上不可再分割的单元,如按钮、图标等;第二层为界面元素的组合,如工具栏、表格等;第三层为完整的窗口。

2.确定当前层次的测试策略

对于不同的层次和粒度,测试的策略是不同的,需要根据当前层的特点来设计。例如,在上述的三层结构中,对界面原子层主要考虑该界面原子的显示属性、触发机制、功能行为和可能状态集等内容;对界面元素组合层,主要考虑界面原子的组合顺序、排列组合、整体外观和组合后的功能行为等;对完整窗口,主要考虑窗口的整体外观、窗口元素排列组合、窗口属性值和窗口的可能操作路径等。

3.进行数据分析,提取测试用例

确定了当前层级的测试策略之后,需要分析当前层级的数据,以设计测试用例。测试用例用于评价界面设计与实现的完成度,因此需要提取用于评判的指标。对于元素外观,可以参考的指标有元素大小、形状和颜色饱和度等;对于布局方式,可以参考的指标有元素坐标、对齐方式和间隔等。通过提取这些指标,测试用例才具有明确的可评价性。

4.设计测试方法

提取好测试用例后,便可以开始设计测试。为了结果方便评判,需要对测试结果进行一定的处理。常用的设计方式有等价类划分、边界值分析等。这些方法能在一定程度上保证测试的完备性。

等价类划分是用于解决选择合适的数据子集以覆盖整个数据集的问题,其核心要求是覆盖所有原始情况,追求目标是尽量少的子集数目,应用到测试领域,可以在保证测试完整性的情况下减少测试的工作量。