我们为什么需要动效设计

最近越来越多的国内公司开始关注动效设计了，越来越多的团队意识到动效在产品用户体验中的重要性。

随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的射鸡师们也开始投身动效设计领域。

但是说到底，我们到底为什么需要动效设计？或者说我们到底需要什么样的动效？做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。

（文中部分案例为设计师个人作品，部分为线上产品，都是我非常非常欣赏的作品。如不慎冒犯请戳我替换掉）

一、加强体验舒适度

嗯，就是让用户更加爽更加爽的用你的产品。

具体表现在：

1.表现层级关系

为了展现层与层的关系，是抽屉，是打开，还是平级切换等等，让用户知道这个界面和上一个、下一个的关系。这已经是非常最常见的运用了。

2.与用户手势结合，更自然的动画表现

当用户手势操作的时候，让界面的动态走向更符合手指的运动，从而让用户感觉到是自己控制了界面的动向，而不是机械化的跳转。

City guide app 用手势可以向左向右扔卡片

3.愉快的提示功能

在某些需要提醒的时候能吸引用户的注意，但是又不会生硬，符合预期的出现。

Action button feedback 出错提示

City Guides 启动时提示用户可以左右滑动卡片

4.额外增加界面的活力

在用户预期之外增加的惊喜，可以是帅气的，可以是卖萌，可以有些物理属性，总之让用户感知到产品的生命力。

readme.io 萌萌的输入框

amazon Q弹的菜单

tumblr ?不喜欢我心都碎了呢~

5.吸引用户持久的注意力

也是属于增加用户的惊喜感，在某些数据量较大的界面中添加一些动效，让用户保持注意力。

Bubbles 以动态的形式展现数据点

二、减弱不可避免的不适感

虽然我们的产品，我们的交互，我们的设计，我们的工程狮都在努力把产品打造的更加优秀，更加完美，但是总有一些无法避免的问题、或者有可能会出现的bug、外界条件的不给力等因素，造成我们的产品体验下降。这些时候适当的增加一些动效可以弥补在出现这些情况时的不适体验。

比如下面这些：

1.让等待变得更愉快

常出现在加载、刷新、发送等界面中，让等待变得可视化，甚至不再那么无聊。

Download Progress 让下载不再枯燥

App loader 有趣的loading动画

gear-powered 拉了还想拉的下拉刷新

2.失败界面的动效

比如刷新失败、页面错误、未联网提示这些。

download 就算失败了还是感觉萌萌哒~

3.增加界面与界面衔接的延续感

界面的跳转不可以避免，但是如果让本来分别独立的2个界面或者事件拥有了某种特定的联系，可以显得更加好玩，不再是生硬的跳转。

iOS Animation Download 界面跳转时保留部分元素到下一个界面

Filter Menu 保留需要的条目移走不再用的

Elevate

三、不易被察觉的动效

特意把这一类单独说一下，由于不容易被发现，普通用户通常会忽略它们的存在，但很多时候这些小细节让交互变得更加有趣。

1.默默增加反馈感

为用户的操作提供有趣的正反馈。

Twitter 收藏的点击反馈

2.去除用户不再需要的元素

随着用户的操作，有的内容已经是用户不再关注的。这时候可以将他们隐藏起来。

CityHour Calendar Animated Interaction

Steller

上面的例子大部分都是比较特色鲜明的，但是大多数实际情况中的优秀动效设计都会涉及到好几点同时都满足。总的来说动效还是为用户体验而服务的，动效设计师尤其要注意交互逻辑，才能让你的作品看起来不但动效帅气逼人而且真正发挥了实际的作用。

最后要提醒的是，千万不要牺牲了用户宝贵的时间用来看你毫无目的的动效。

文章总结了一些自己的想法，有不足之处希望各位可以指出~

我们为什么需要动效设计相关推荐

动效设计的物理法则：动画的一切皆在于时间点和空间幅度（转）
动效作为当今提升网页感官效果的利器,在各种类型的网页中已经全面开花,如何做到自然流畅让用户感觉舒适的动画效果呢?今天就来跟大家聊一聊动效设计的物理法则,以及它是如何应用的. 首先来一发大师金句,迪士尼 ...
动效设计中的隐喻-2
这次我们再看一些别的有关隐喻(或曰明示)的设计. 示意关系所谓示意关系,就是通过特定的动作来表明界面中控件之间的某些关系,包括包含关系.前后关系和位置关系.其实就是我们以前讨论过的连接的一种.有一些 ...
uniapp image图片切换动效_动效设计从概念到落地
一.什么是动效设计聚焦于产品中的动效,我们常说的动效设计可以分为3类: 1.交互动效交互动效承载了产品流程.交互行为的串联,不论可实际操作的交互原型还是纯做 demo 展示的动效过场都可以算作交互 ...
想要学习UI动效设计？从这些软件入手
提起UI,必不可少的就会想到动效,动效设计作为UI设计当中必不可少的一环,已经由最初的美观酷炫发展到提升用户体验和产品需求的重要作用. 火箭加载SVG动画很多时候设计不能光靠嘴去跟产品经理说你的想法 ...
UI实用素材|APP动效设计
app动效设计,现在已是各位APP设计师学习和临摹的方向.大家也会收集一些好看的APP动效设计作品. 学习app动效设计,不是盲目的让界面动起来那么简单,一定不能滥用. 先看下一组搜UI (soou ...
掌握动效设计！让你的设计富有未来科技感（上）
为何有的产品.服务特别受欢迎? 是因为这些产品.服务在内容.外观.设计.可用性.功能等方面具有无可匹敌的优势.其实,所有的这些层面都属于交互设计的细节,其中一个关键点便是动效. 本文将介绍几种常见的动 ...
如何准确的向工程师传达动效设计？
转自:http://www.cocoachina.com/design/20150305/11237.html 如何准确的向工程师传达动效设计? 2015-03-05 09:47编辑:pockry分类 ...
停止不必要的UI动效设计
前言:这篇短文将会探讨UI设计中动画的过度使用,并将其与早期的视觉设计进行对比,提出一些对于有效的GUI动效设计的建议. 我们将在下文中,简单探讨如何改善下面的这个交互. UI动效设计的反面案例(线上 ...
2020年最值得推荐的10款UI动效设计工具
动效设计在最近几年的各种网页设计和App设计中的表现相当抢眼.各种令人惊叹的创意和流畅自然的动作设计迅速捕获了用户的视线,极大地提升了品质感和转化率.而要制作出效果卓绝的UI动画效果自然也需要优秀的软 ...
UI动效设计从入门到项目实战
第1章课程简介介绍该课程的学习内容,以及课程内的案例效果展示 1-1 课程介绍第2章动效基础知识学习动效基础操作知识点梳理,快速掌握AE面板等基础操作知识要点,了解动效实现基本原理. 2-1 ...

我们为什么需要动效设计

我们为什么需要动效设计相关推荐

最新文章

热门文章