6个步骤,教你建立交互设计框架!

交互设计框架建立了产品行为整体架构,包括底层组织原则、屏幕上功能元素的排列、工作流程、产品交互、传递信息的视觉和形式语言、功能性和品牌识别等(www.bstn.com.cn)。简单来说,就是定义信息和功能如何表现、设计使用者体验的整体架构、描述人物角色和产品的交互。

交互框架首先在高层次上考虑解决方案,然后逐步缩小范围,处理越来越精细的细节设计。

交互框架不仅要对高层次的屏幕布局进行定义,还要定义产品的工作流、行为和组织。以下6个步骤描述了交互框架的整个定义过程:

①定义形式要素、姿态和输入方法

②定义功能性和数据元素

③确定功能组和层级

④勾画交互框架

⑤构建关键线路情景剧本

⑥运用验证性场景来检查设计

其中,①②主要是信息的提炼和匹配,③④⑤是信息层级的梳理和建立,⑥是设计的测试验证。

下面咱们就具体来阐述下这6个步骤,以更好的帮大家建立好交互设计框架。

建立交互框架的步骤

01

定义形式要素、姿态和输入方法

•形式要素

通过分析人物模型和场景,了解产品是基于什么平台设计的(Web、手机、电视),它的分辨率是多少,适合的字体大小和最小点击区域是多大等。

•交互姿态

交互姿态需要思考用户会投入多大注意力和产品互动,比如视频类、教育类app通常投入的时间更长,而金融类,比如银行app,用户可能只是完成了转账或查询账单就离开了,这属于暂时姿态。

•输入方法

输入方法是用户和产品互动的方式,比如是鼠标键盘还是触摸屏,或者是电视遥控器?

02

定义功能性和数据元素

功能性和数据元素代表着界面中要展现给用户的功能和数据。

•数据元素

数据元素是数据的基本单位,由数据项组成。举个例子,通话记录里的一条通话记录为一个数据元素,而一条通话记录里的每一项就是数据项,比如联系人号码、时间、地址。

•功能元素

功能元素是针对界面中的数据元素及其现实所做的操作。用户利用这些功能元素来完成任务。比如说微信视频这个功能需求,包含点击视频、切换摄像头、切换语音聊天、挂断视频等功能。

03

确定功能组和层级

有了完善的高层次功能和数据元素后,就可以开始按照不同功能分组工作,确定各自的层级。由于这些元素各自承担着具体任务,因此元素分组的目的在于更好地在任务中和任务间疏通人物模型的流程。

比如微信首页,最近聊天的联系人和群聊的会话列表,每一个会话小组区块是怎么构成的呢?

数据元素进行分组时,要根据产品平台、在对功能和姿态、屏幕大小、外形要素和输入方法等条件,考虑如何进行组织和安排。

04

勾画交互框架

这个步骤就可以开始勾画大致的界面,将视觉图细分为粗略的方块图,对应窗格、控制部件,及其他高层次的容器。

05

构建关键线路情景剧本

用低保真草图框架和关键线路情景的叙述,可以充分地描述设计方案如何帮助用户完成目标。通过不断地变更和反复,优化交互流程。

其中故事版就是一个很好的工具。故事板借用了电影制作和动画片中的技巧,通过类似的过程对设计想法进行计划和评估,让产品和用户之间的每个交互都可以用框架来描绘。

06

运用验证性场景来检查设计

本步骤的目标在于,指出设计方案的漏洞,并根据需要进行调整(或者完全抛弃或者重新开始设计),可以按照如下顺序,解决三类主要的验证性场景:

•替代场景(比如常见的例外情况)

•必须使用的场景,常见又不经常发生的动作(比如清空数据库)

•边缘情形场景,必须要有不太常用的功能(比如要添加两个重名的联系人)

最后要提醒的是,建立交互框架时,不要一下子就陷入细节。过早地把重点放在小细节、小部件和具体的产品交互上,会妨碍框架设计,无法有效地开发出适合所有产品行为的整体框架。

相反,采取自上而下的方式,首先关注总体,提出低保真而不包含具体细节的方案。这样才能保证设计开始阶段重点关注基本原则,满足人物模型的目标和需求。

公司名称:中山市万柏灯饰有限公司