交互流程简介

2018年4月16日

交互流程可以成为平滑设计或开发切换的关键吗?

作为用户体验设计师,我们将关怀和批判性思维融入我们的项目中 ,每个交互设计都为用户提供了一个特定的目的。这就是为什么当结果不符合我们最初的愿望时,我们会很痛苦 。

把责任归咎于开发人员很容易,但我认为,我们同样有责任去改进设计或者开发人员手中的文档。这并不是说开发者没有能力或者缺乏常识。在设计时缺乏对发生的情况的明确解释时,开发人员必须尽力补足。发送电子邮件给设计师询问某种互动,首先等待回答并澄清问题之后,得到答案,它将会扼杀开发的动力。

插图来自Havana Nguyen

作为交互设计师,我们需要解释界面的行为……但是该如何解释呢?我寻找各种方式来缩小这种沟通的差距。我试图创建用户流程、线框图和逻辑树等方法,但是它们都不能完整的表达出我脑中的设计想法。

然后我开始开发交互流程

交互流程的想法来自何处

Dan Saffer的“微交互”

Dan Saffer的《微交互》已经成为我在交互设计方面阅读过最精简的好书之一,它有巨大的信息量。这本书将微观交互分解为四个要素:触发器,反馈,规则和循环模式。以下是概述:

触发器:用户启动或系统发起的行动(例如:提交按钮,电灯开关)

规则:微交互中的能力和限制; 在微交互中可以做什么和不可以做什么(例如:航空公司的日期选择器允许您选择出发日期和返回日期,但日期都不能是过去的时间)

反馈:告诉用户正在发生什么视觉线索(例如:用户密码不正确时出现红色警告图标,用户截取屏幕时屏幕上出现闪烁,当您输入推文时,缩小的字符会被计入)

循环:微交互的可重复性和生命周期(例如:只要设备检测到新的更新可用,就会弹出软件更新模式)

模式:元素的不同版本或状态(例如:只读模式与编辑模式)

尼尔森和诺曼集团:线框图

我刚巧碰到关于Nilesen和Norman的这篇关于线框图的文章,这篇文章主张用户或者任务流程和线框相融合。虽然它们以简单的方式显示流程和关系,但用户流程并未显示视觉元素如何为每个页面提供接入点,或者它们如何促进用户的目标。线框图非常适合布置这些视觉元素,但是就它们本身而言,它们并不会描述页面之间的流动关系。

以上所有3张图片均来自NNGroup.com

线框图的想法是一个很好的解决方案,可以显示流程和布局,但在我设想页面的行为方式与开发人员如何解释它之间仍然存在差距,比如很多细节仍然不存在。

我回顾了Dan Saffer的书中的框架,并发想:为什么不把这两种很棒的方法结合起来?为什么不在线框图中定义触发、规则、反馈、循环和模式?

交互流程

交互流程是一种使用Saffer框架定义每个交互元素的触发器,反馈,规则,循环和模式的有线流。

在这个例子中,我编译了Instagram应用程序的线框。我认为大多数读者是熟悉它的,并可以参照这个应用程序的例子。首先,我将展示整个Interaction Flow,然后分解组成文档的不同元素:

为什么合并交汇流程?

交互流程的彻底性可能令人生畏,但传达这些互动有许多好处:

· 将流程,视觉设计和交互集中在一个文档中
· 可以导出为PDF,JPEG等格式,因此可以在任何桌面上查看此文档
· 减少开发人员的猜测和模糊性
· 减少开发过程中的错误

交互流程的不同部分

我的图层看起来像什么

本文档由Adobe Illustrator文件中的3个图层组成。锁定的图层包括背景颜色和标题以及参考面板。我们还为链接的屏幕图像和方框和箭头分别设置了图层。

参考面板

这提供了此应用程序涉及的手势类型以及表示这些手势的符号,描述交互时使用的术语定义以及定义流线图例,微交互相关符号和决策节点的图例。

线框

这些是在Sketch中创建的,然后作为链接图像拖动到Adobe Illustrator文件中。使用Sketch甚至Illustrator并非绝对必要,请使用您所熟悉的软件。我也为整个设计的模型完成了交互流程。此处的关键是显示实际屏幕的可视布局,以便您可以描绘和定义这些特定元素的交互。将它们链接到AI文件的好处是,如果您想修改并覆盖它们链接的文件夹中的文件,将会自动更新到AI文件中!

箭头,线条和容器

这些代表序列和关系。您可以在参考面板中定义它们,上面是这些实际工具的示例。

具体来说,这是一个具有微交互细节的容器:

· 它包括交互元素的名称,即收件箱图标。
· 触发器通过手势图标进行定义和加强。
· 反馈解释了触发启动时视觉或物理上会发生什么,例如振动。
· 规则解释了在单一交互中可以做什么和不可以做什么(本节通常是最长和最详细的)。
· 最后,模式和循环并不总是适用于每个微交互,但如果有的话,给出明确的细节。

这需要多长时间?

没有基本的概念和时间,我的第一次运行需要花费一周时间才能完成一个应用程序。然而,随着我更多的工作,我已经能够缩短到只需5个小时就可以完成一个应用程序。复制和粘贴相似的交互的细节,批量编辑线条,以及初步勾画如何布置流程,这有助于缩短编译交汇流程的时间。当你写出反馈,规则和模式时,你第一次尝试的主要挑战将是把你的大脑逻辑切换为细致的一面。但是,这一努力是非常值得的,并且会使您成为一个更强大的交互设计师。

额外的奖励

为UX Designer编译交互流程的额外好处是有助于我们审核界面的UX。尽管对移动应用程序线框和设计组件进行了多轮审核,编译这个交互流程就像是在使用一个细齿梳子。在编写元素的规则时,我有时会发现一个交互或者流程根本没有任何意义。或者它实际上很混乱且不必要。我能够回到我的用户体验团队,讨论并解决问题,然后再进行开发。

尽早发现这些缺陷和缺点可以节省UX,视觉设计和开发团队很多时间。

亲自尝试一下

实时项目的交互流程

想尝试一下吗?在这里下载我的.ai模板以开始!

这是我仍然想要改进的地方,所以我很想获得反馈并查看您创建的内容。如果你是一名开发人员,我欢迎任何关于如何使这个文档更加有用的建议。

您可以发表评论,DM我,或通过电子邮件与我联系。

希望有帮助!

非常感谢Sheefeni Hauwanga,他从开发人员的角度提出了他的反馈意见,并确保此文档很有用。谢谢Ying YaoKi Arnould和女士们的UX的Beth Mattern阅读这本书,帮助我编辑它!

 

 

翻译网址:交互流程简介

责编:季佳宁   翻译:戈妍悦

发表评论

电子邮件地址不会被公开。 必填项已用*标注