首页 > 网页教程 > 设计分享 > 动效设计对用户体验的重要性

动效设计对用户体验的重要性

时间:2018-04-01    来源:优设网

动画效果是用户体验设计中绕不开的环节,而在移动端交互当中,动效是作为转场的润滑剂,承上启下的重要环节而存在。无论是发送信息,打开设置,选中元素,导航到下一个页面,这些变化发生的时候,动效让这一切不那么突兀,自然地过渡,呈现状态变化,帮助用户更清晰的明白当前的状态,这是绝佳的方式。

在今天的文章当中,我们尽可能系统地呈现动画和动效在视觉和交互上的常见功能和作用。

呈现系统状态

当用户通过交互触发界面行为的时候,他们希望能够看到视觉上的响应——整个交互系统应该明确地表示它已经收到了请求并且进行处理。以下是动效反馈让用户受益的几种常见的情况:

确认用户行为。系统收到用户的反馈之后,通过动效告知用户它已经收到反馈了。视觉反馈防止了用户再进行更多的操作。

通知用户他们交互的结果。

下拉刷新更新内容。以加载指示器为代表的视觉反馈告知用户,系统已经开始处理之前的请求了。

微妙的动画能够帮助用户理解正在发生的事情。

等待内容加载时的动画。加载不一定是无聊的。现在几乎所有的 APP 当中都会在加载的时候借助微妙的动画来组织用户离开。加载动画给予用户「信息正在逐步加载」的视觉反馈,因此用户会在这个过程中感觉时间没有实际上那么快。

用动效连接多步骤中不同的步骤

有的时候,用户需要通过一系列的步骤来完成操作,步骤和步骤之间是需要连接起来的,借助动画,帮助用户将流程串联起来,顺畅地完成整个历程。

下面的案例当中,展示了动画是如何将线性的事件串联起来的。

设计师能够使用动画创建渐进式的展现形式。渐进式的展现能够减少一次展现出来的信息量,使得界面更加顺畅,易于学习。下面是渐进式展现信息的案例:

引入新元素

当我们要在页面上引入新的元素或者控件的时候,我们会尝试引导用户的注意力到特定的对象上,并且告诉他们「为什么会有一个新东西进来」的原因。在引入新元素的时候,动效能够帮你界定这个元素和其他元素的关系,以及层次结构。

相关推荐
动效设计:5分钟教你打造Siri式波浪动效
设计分享:25个完美的动效网站设计欣赏
动效设计教程:如何制作符合场景的交互动效?
12 个网页滚动特效设计案例赏析
动效设计:让网页设计的用户体验更有趣!
动效教程:产品的动效设计
如何基于心理学设计的目的来制作受用户欢迎的网页
网页设计的文字色彩与可读性分析
十五个用户体验设计(UI/UX)案例剖析
设计独特的多个创意404错误页面赏析
国外49款创意型404错误网页欣赏(附演示网址)
创意型404错误页案例与用户体验的赏析
网页交互设计的一些理解
网页设计中上一页和下一页的用户体验分析
腾讯CDC:泛泛而谈界面中的斑马纹设计
深挖交互设计的细节提升用户满意度
淘宝案例分析之商城页面的用户体验
用实例理解网页设计的80/20规则
35款极具创意的404错误页面欣赏(附演示网址)
网站用户体验:特殊人群的设计关怀
10款用户体验极佳的验证码风格设计
8个原则打造优秀的用户体验
交互设计中6个通用原则的介绍
如何进行简单快速的可用性测试
分享:创建高效优质的单页网站6个秘诀
善用Loading加载条设计,让用户烦躁少一些
用户体验评估之用户心理负荷的测量
百度统计流量研究院设计过程及思路详解
给不完整视觉信息寻找最简单直接的解读办法
移动应用开发:无线终端用户理解工作方法分享
简洁设计是对用户需求透彻理解的基础上去粗取精
从网站可用性的角度深入分析苹果和微软官网设计的优劣
无线移动终端APP的文字阅读体验设计分享
对网页设计中的Less和More的思考和总结
善用网站数据分析来辅助网页设计
从用户体验设计的角度谈搜索模块的设计

精彩推荐

热门教程