1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 用户体验 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

如何使用微交互动画提升用户体验?--九分科技

时间:2020-06-10   分类:用户体验    作者:网络   来源:网络整理   点击:55

 
UI设计 → UI理论和资料 → 正文 如何使用微交互动画提升用户体验  
作者: 摹客团队 来源: 视觉同盟 时间: 2020年6月10日  
 
 
在浏览网页或APP时,我们经常会发现,在刷新或使用某些按钮时,伴随着我们的操作,会出现颜色变化、形状改变、位置移动等动画效果。举个例子,在使用某些APP时,当我们完成下拉刷新的动作时,下拉处会出现巧妙的动画效果,如下图:

如何使用微交互动画提升用户体验?--九分科技 内容采集来自9fen.net

www.9fen.net

这样的交互小动画也可以被称之为微交互动画。微交互动画不单单是为了让界面更加美观、生动,更重要的是提升交互体验、设计品质和用户的信任度,从而有效提升转化率。 九分网络


微交互动画如何提升用户体验?

本文来自九分网络

产品融入了微交互动画,可以增加用户的参与感,舒缓用户在操作过程中的枯燥情绪,获取愉悦的操作体验。展开来讲,微交互动画可以从以下三个角度提升用户体验:

九分网络

第一,提升交互的引导性
使用微交互动画,可以更好地提供交互状态信息和展示交互结果,从而达到引导用户操作的目的。

内容采集来自9fen.net

第二,提升体验舒适度
微交互动画的合理运用,可以为普通的交互增加可爱、炫酷或是物理感应的效果,不仅可以让用户保持注意力,也能在用户的预期之外增加惊喜。 内容采集来自9fen.net

第三,缓解用户等待的情绪
在加载、刷新、发送等环节,因为网速、服务器等因素,往往需要用户进行等待。在这些环节融入微交互动画,可以让等待可视化,或增加这一环节的趣味感,从而缓解用户因等待时间过长而产生的负面情绪。 copyright 9fen.net

接下来我们一起来看看,微交互动画具体可以运用在哪些场景

www.9fen.net

微交互动画运用原则

www.9fen.net

合理运用微交互动画,可以让用户的操作更加自然、简洁而富有趣味。在设计微交互动画时,我们需要遵循以下几点原则:

copyright 9fen.net

1.微交互动画的设计前提是不会给页面加载增加负担。
2.需要充分考虑目标用户可能会使用的设备及可能出现的情况,如果无法兼顾,则不适用微交互动画效果。
3.微交互动画的设计需要保持顺畅、自然、轻盈,且需要与网页或APP设计风格相匹配,保持产品整体的和谐。
4.用户在使用过程中分心。

内容采集来自9fen.net

微交互动画使用实例 copyright 9fen.net

1.加载动画

九分网络

当我们第一次打开某个页面或对页面进行刷新时,通常都需要进行加载,如果加载时间过长,往往会造成用户的流失。在加载页使用微交互动画,可以使用户的注意力不被分散。好的加载动画还具有带入感,可以为用户带来乐趣,而不会因为等待而产生焦急的情绪。

九分网络

如何使用微交互动画提升用户体验?--九分科技 www.9fen.net

本文来自九分网络

2.进度动画

九分网络

从某种意义上来说,进度条也可以算是一种加载方式,与上述加载动画不同的是,进度条往往需要展示用户在进行某项操作后的具体加载进度。微交互动画可以直观地显示当前进度,也可以让进度条增加更多趣味性。 copyright 9fen.net

如何使用微交互动画提升用户体验?--九分科技 内容采集来自9fen.net

copyright 9fen.net

3.吸引注意力 内容采集来自9fen.net

当用户未进行任何操作时,如何吸引用户的注意力,引导用户进行操作呢?微交互动画是你最好的选择。例如当用户在填写表单时,被用户忽略的必填选项通常会出现闪烁的红色边框,来提示用户填写。另外,新手引导也是常见的一种吸引用户注意力的微交互动画使用场景。 copyright 9fen.net

如何使用微交互动画提升用户体验?--九分科技

九分网络

www.9fen.net

4.关系过渡

本文来自九分网络

当我们点击某个按钮时,使用微交互动画,让按钮呈现更自然的过渡,可以让用户更好地理解状态的切换。例如下图,当我们点击三角按钮时,会唤醒隐藏的功能板,此时三角按钮会改变方向,从而帮助用户理解操作行为,也可以作为操作引导。 www.9fen.net

如何使用微交互动画提升用户体验?--九分科技 九分网络

九分网络

5.滚动动画

九分网络

带有叙事性的滚动动画效果,可以让原本死气沉沉的界面充满活力。滚动界面时使用的微交互动画与普通的视察滚动效果有所不同,它通常是使用一些精致的动效,使页面变得生动活泼,从而让用户在切换到下一屏后,注意力可以快速集中在页面中的重要信息上。

www.9fen.net

如何使用微交互动画提升用户体验?--九分科技 copyright 9fen.net

内容采集来自9fen.net

6.鼠标悬停动画

内容采集来自9fen.net

标签: 平面设计 ui设计 工业设计 CG动画 建筑与环艺 设计人才

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----