UX用户体验设计 ·

如何利用微交互设计提升用户体验?

好的产品通常会做好两件事情:功能和细节。功能能够吸引用户关注这个产品,而细节则能够让关注的用户留下来。功能和细节两者都很重要,但是功能居首,细节次之。不过,让用户喜欢或者讨厌一个APP或者网站,往往缘起于细节。随着网站交互设计和动效的大规模普及,我们现在所看到的许多细节设计,都可以归类于微交互。微交互所要求的关注细节是获得有效、强大用户体验的关键原则。优秀的动效是完善用户体验中不可或缺的一环,拥有好用且令人难忘的细节能让产品脱颖而出。

——Dan Saffer

1.微交互在界面中的作用

2.微交互的必要性

3.按用途划分动效设计类型

4.如何输出动效

5.如何书写动效设计文档

6.微交互的测试过程

 

「微交互在界面中的作用」

传递状态信息和层级信息

1.通过一定的动效暗示,可以让用户更好的理解整个app的信息结构。

2.赋予app生命感,让用户知道app正在积极的为用户执行操作。

 

提示隐藏信息功能或让用户快速识别提示信息

1.若我们需要隐藏一些需要适时出现的,或需要用户探索的界面或按钮,可以通过适当的动效设计进行合理的引导,提示,衔接。

2.微动画可以使用户能够快速识别界面视觉元素,并高效的与之进行交互,同时也能使实际显示的形式更加优雅。

 

传递情感化信息交互及时得到反馈

1.使等待不枯燥

2.使变化不生硬

3.使反馈不单调

4.增加用户参与度,让用户更加愉悦的体验产品

注册和登录流程一直是产品中最为枯燥繁琐但又必不可少的环节,微动画用有趣和交互性元素改进了填充表单的枯燥过程,可以有效的环节用户在体验上的负面情绪。

当输入密码错误的时候,密码输入栏会显示出一个摇头的效果。完全可以想象,假设用一个错误提示的弹窗,不仅会中断用户的操作流程,引起人的反感,而且很容易让人受挫。通过动效,设计者用一种更友好简单的方式达到了提示的目的。

 

 

「微交互的必要性」

提升用户体验

1.让用户觉察视觉元素的连续变化,对新旧状态的更替有更清晰的感知,为用户提供良好的动态沉浸式体验,使用户更加清晰愉悦的使用产品。

2.解决扁平化的弊端,扁平化虽然可以让用户将注意力放在内容本身,但是在多信息的情况下很难区分信息层级关系,合适的动效可以让用户更好的理解信息层级关系,赋予设计情感,增加用户参与度。

 

增添产品气质

1.合理的动效能更立体的传递信息,提高产品的“表达能力”。

2.增添产品的亲和力和趣味性,利于品牌的建立,未添加动效的产品,会有种死气沉沉的感觉,所有内容平铺直叙,即使界面设计的再美观,也会缺乏一种灵动细腻的气质。

3.但是动效并不是越多越好,不同产品对不同动效需求也不尽相同,如:新闻类,深度阅读类产品过度的动效反而会干扰阅读。所以要针对产品本身的属性来恰当的设计动效。

 

 

「动效设计类型(按用途划分)」

过渡型

人脑灰质会对动态事物(如:移动、形变、色变等)保持敏感。在界面中加入一些平滑舒适的过渡效果,不仅能让界面显得生动,更能帮助用户理解界面前后变化的逻辑关系。好的过渡动效避免了界面快速切换时给用户带来的迷失感,作为最为常见的交互,它会在潜意识中引导用户,而用户通常不需要去思考就会下意识执行。

 

反馈型

无论是点击、长按、拖拽、滑动等交互行为,(如:下拉刷新,loading,tabbar上的微交互)都应该得到系统的即时反馈,将其以视觉或动效的方式展现,帮助用户了解当前系统对交互过程的响应情况,为用户带来安全感。

表单设计中最容易被忽视的,其实是对于出错信息的处理。表单,尤其是长表单,填写内容出错其实是很正常的事情,等到提交信息的时候再报错,用户会非常沮丧。而微交互结合实时验证,能够让用户在输入的过程中就发现错误并进行修改,一次通过,不用等待提交的时候再回头处理。

 

功能型

特定工具类,直播类产品所需的元素动效,安全、清理类产品的扫描动效,emoji表情动效等。

 

情感型(趣味型)

增加情感交流,强化品牌调性。

如:刷新、loading动效,加载过程往往比较枯燥,有趣的动效可以吸引用户注意力,从而减缓用户负面情绪。

相关实验数据表明,较差的loading动效让用户感受到的等待时长比实际时长还要长,普通的loading动效让用户感受到的等待时长和实际时长相差不多,优秀有趣的loading动效让用户感受到的等待时长比实际时长要短。

以此说明,出色有趣的动效会更加吸引用户注意力,从心理上忘记时间的流逝,大大提升了用户体验。

 

 

「如何输出动效」

1.通常我们做的偏复杂的 app 动效(例如:情感型、功能型),在实际落地过程中会遇到很多问题,比如:Gif 图失真、占内存过大、开发成本过高。

2.Airbnb 开源的动画渲染库 Lottie 可以有效的解决了这一系列问题。Lottie 可以直接利用 AE 导出的 JSON 动画文件,将其解析为原生代码,在 iOS 和 Android 设备平台上运行。

3.使用方法:设计师使用After Effect制作动画,并通过插件bodymovie导出.json文件给开发人员;开发人员通过Lottie开源库进行渲染。

4.Lottie获取方法:微信公众号后台输入“Lottie插件”,会有下载链接。

以上动效输出方式只针对复杂动效,普通过度转场动效还是使用原始方式,标注说明给开发。

 

 

「如何书写动效设计文档」

1.动效输出后会出现开发和设计师对接困难的问题,是因为没有通过精准的参数去描述动效。要解决这个问题,我们需要创造一套有效的动效标注系统(或书写一份动效设计文档),这个系统必须做到以下两点:让设计师可以轻松地描述动效,让开发可以准确地还原动效。

2.如何向开发具象的陈述动效,需要做到以下几步(如图),先拆解动效,将组合动效拆解成基础动画;在从变化、时长、曲线这三方面,阐述每个属性的变化数据。

 

变化

变化可以划分为四类(如动图所示),这四类变化基本涵盖了界面元素的全部运动方式,只要我们准确地描述元素在动效前后的变化量,就可以准确地完成「变化」这个参数的对接。

那么这个时候我们需要记录的状态(这里只涉及到变化)就应该是这样:

初始状态:

◦ 位移:X轴 0

◦ 旋转 :0度

◦ 尺寸:1

◦ 透明度:0.2

结束状态:

◦ 位移:X轴 200px

◦ 旋转:+180度

◦ 尺寸:1.5

◦ 透明度:1

 

时长

第二个关键参数就是时长,这个顾名思义也就是动画播放的时间长度。无论变化是多是少,简单还是复杂,我们需要把每一段变化的时间确定,时间短干脆利落,时间长轻缓柔和。标注清楚起始时间和终止时间。

 

曲线

曲线描述的是物体运动时候的速度变化,如果说变化和时长是动效的本体,那么曲线就是动效的灵魂。对于一个运动的物体,同样的变化,同样时间,赋予不同的速度曲线,会让它的动效产生丰富的变化。 所以在动效设计中,曲线也是设计者最为关注的部分。

最基础的速度曲线有线性(就是全程匀速)、缓入、缓出、缓入缓出四种,动效描述中要阐述清楚使用的是何种曲线,如需特殊曲线需要展示出来。

 

 

「微交互的测试过程」

 

发现问题

使用下面描述的流程作为测试微交互的开始:

1.首先,询问用户希望通过这个微交互做什么?在使用这个微交互之前,问问用户是否需要学习什么东西,特别是如果他们以前从未使用过类似的交互时。

2.允许用户在没有任何帮助的情况下使用这个微交互,并实时收集定量数据。

3.观察用户使用微交互的每一步。倾听用户对所做选择的印象和描述。观察微交互规则对参与者是否作用明显,注意差异。

4.与用户沟通,记录用户想让微交互帮助记住哪些数据。

5.最后,请用户表达在这个微交互中还有哪些地方是需要继续优化的。

这个过程能帮助你发现微交互的很多问题。它能验证一般的目标和期望。对两个用户团队重复这个过程至少两次。在既定时间内,利用用户反馈来分析和优化你的微交互。

 

使用研究数据

这些是可以测试的一些定量数据:

◦ 完成率

◦ 微交户互持续时间

◦ 具体每一步的持续时间

◦ 步骤数

◦ 点击/敲击/选择的次数

◦ 人为失误的数量

优化微交互并重新测试一遍,看看是否需要进一步改进。 另外也需要注意样本量,测试用户不多可能会使错误或偏好变得更加明显。

数据可以帮助你做出更好的决策,但不能完全依赖数据,很多情况还是需要具体问题具体分析。

 

 

「总结」

1.微交互可以提高产品的用户体验,帮助用户记住你的品牌。增添产品亲和力和趣味性。微交互存在的目的是让用户感觉顺畅、愉悦,设计师借此创造出吸引人或者令人高兴的瞬间,或者说,让用户在这一刻感受到人性化。

2.动效的作用是更好的呈现界面元素间的逻辑关系,帮助用户梳理信息层级,规避了扁平化的缺陷;有趣的动画可以减缓用户使用过程中的负面情绪,增加用户参与度,让用户更加愉悦的体验产品。

3.动效不是越多越好,越炫酷越好,要针对产品自身定位来设计动效,让用户意识不到动效的存在,才是最合适的,否则会适得其反,干扰用户操作。

注意:以上内容均有参考,作者只负责梳理和总结,图片均来源于网络,侵删)

 

 

 

作者:33

公众号: Panda Plus