今天翻到了几年前做内部的KS的时候随手做的Axure小案例,是关于微交互的。
于是就写一下个人关于微交互的内容吧。
在本系列文章的第一篇里,说到了约束和平衡,想回头阅读的童鞋可以点击链接回去。
其中说到了在移动端受到布局约束和其余已培养成熟的用户习惯约束。
场景A:这种的情况下,整体界面布局已经发展到很难创新的地步了,比如Tab栏/下拉菜单,你可以改变有限的几种不同的布局或是选择去掉Tab,但是你不可能违反常规的使用上拉菜单,这种时候如何帮助系统更加简单,降低用户认知负荷,
场景B:当一个产品已经趋于功能完备,稳定的前提下,如何加强与用户的情感联系,使产品变的更加好用,细节之处见真章。
这个时候,我们需要用到Microinteraction,也就是微交互。
微交互不是基本的产品功能,但功能都满足的前提下,微交互成了产品的核心竞争力之一。
如果产品的结构或功能类似,往往通过产品的体验来扩大宣传或提升产品的品牌忠诚度,而产品的功能之上的整体体验来自于各种微交互的组成。假设我们把自己的产品拟人化的话,那么各个呈现在用户视觉之上的就是人的外在器官(如眼眉耳口鼻),组件的细节决定了你的产品看起来是吴彦祖还是黄渤(虽然两个人各有魅力,但是我的意思应该大家都明白。) 而微交互,就是通过器官表达的“感情”,比如笑起来的吴彦祖或者严肃起来的黄渤,皱眉的某女神又或者其他。作为一个产品狗或者是设计师,你可以通过组件细节和微交互尽情的和你的用户达到通感从而提升你产品在同质化产品下的竞争力。
OK,微交互是什么呢?
如果你谷歌“微交互”,你搜到的几乎都是他所提供的权威信息和话题,以及他的那本《微交互》。Saffer认为微交互在结构上是由四个部分构成的,而这个定义也更加便于你来理解或者创造微交互。
Dan Saffer在他的书中(Microinteractions)第一次描述了微交互的概念,这些小细节专注于服务这些必要的功能:
交流回馈或者动作的结果回馈
完成某个单独的任务
增强直接操作的感觉
帮助用户在视觉上展示操作的结果,以及避免错误
以上是官方的定义,但是在我个人的思考里,上述1,3,4其实描述的重点都是回馈,是系统对用户感情的表达,回馈注重的是让用户更明确自己的操作与系统的状态改变,凡是在单独任务上,几乎都可以用上微交互。
将某个动作之后的结果视觉化的表现出来,帮助用户明白此时的系统状态或自身所处的位置:
这个例子的对下载的失败状态进行了很多的细节描述,但是忽略了感情的表达,如果加上合适的表情或者文案鼓励用户再来一次,或许是更好的选择。
这个例子标明了用户所处的位置,让用户不会迷失,同样的如果是阅读鼓励类的社区产品,可以考虑加入鼓励的表情或者元素让与用户的感情交流更加强烈。
作为向导帮助用户操作屏幕上的某些元素或帮助用户理解人机交互之间的联系:
这个交互让第一次绑卡的用户不会感到陌生,能够帮助用户理解所需输入信息的格式,来源。
人机快速沟通时的状态与反馈:
轻松、流畅而有意义的转场
在转场过程中,如果有无法避免出现需要用户的等待时间,可以使用微交互尽量的表达出轻松,流畅的感觉,转移用户的注意力,愉悦用户以缓解用户的等待焦虑。
那么,在使用微交互的过程中,需要避免哪些问题呢?
1. 结合产品本身的用户群和背景,能让你的微交互表达的情感更加准确和高效;
2. 不要滥用,微交互的特色是恰到好处,表达出想要的情感或反馈即可;
3. 保持简洁高效,正确的微交互应当为用户提供适合的视觉线索和动效,复杂的交互和繁琐的UI是最常见的错误,结构化的设计和鲜明的色彩比过度装饰要强的多;
4. 必须能支持长时效的使用,而不会在今后对用户产生困扰;
5. 不要对产品本身的响应或功能造成阻碍,如果不需要微交互响应时间是在10ms而加入了微交互达到1000ms,那么你要考虑的就是减掉你微交互的元素以至于让响应时间达到原本用户可以接受的程度之内或者干脆取消它,这里又是约束与平衡的问题了。
有问题意见欢迎拍砖留言,下回再见!
网友评论