【炫酷动效设计】这就是为什么你的产品需要做动效设计

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

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

版权声明:文章作者是:小怪怪怪兽 来自:京东设计中心JDC

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

一、加强体验舒适度

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

具体表现在:

1.表现层级关系

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

0wx_fmtgifamptpwebpampwxfrom5ampwx_lazy1

图1.

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

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

0wx_fmtgifamptpwebpampwxfrom8ampwx_lazy8
图2. City guide app 用手势可以向左向右扔卡片

3.愉快的提示功能

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

0wx_fmtgifamptpwebpampwxfrom5ampwx_lazy
图3. Action button feedback 出错提示

0wx_fmtgifamptpwebpampwxfrom5ampwx_lazy3
图4. City Guides 启动时提示用户可以左右滑动卡片

4.额外增加界面的活力

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

0wx_fmtgifamptpwebpampwxfrom5ampwx_lazy2
图5. readme.io 萌萌的输入框

0wx_fmtgifamptpwebpampwxfrom7ampwx_lazy7
图6. amazon Q弹的菜单

0wx_fmtgifamptpwebpampwxfrom6ampwx_lazy6
图7. tumblr 不喜欢我 心都碎了呢~

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

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

0wx_fmtgifamptpwebpampwxfrom5ampwx_lazy4
图8. Bubbles 以动态的形式展现数据点

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

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

比如下面这些:

1.让等待变得更愉快

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

0wx_fmtgifamptpwebpampwxfrom5ampwx_lazy5
图9. Download Progress 让下载不再枯燥

0wx_fmtgifamptpwebpampwxfrom9ampwx_lazy9
图10. App loader 有趣的loading动画

0wx_fmtgifamptpwebpampwxfrom10ampwx_lazy101
图11. gear-powered 拉了还想拉的下拉刷新

2.失败界面的动效

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

0wx_fmtgifamptpwebpampwxfrom14ampwx_lazy141
图12. download 就算失败了还是感觉萌萌哒~

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

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

0wx_fmtgifamptpwebpampwxfrom11ampwx_lazy111
图13. iOS Animation Download 界面跳转时保留部分元素到下一个界面

0wx_fmtgifamptpwebpampwxfrom12ampwx_lazy121
图14. Filter Menu 保留需要的条目 移走不再用的

0wx_fmtgifamptpwebpampwxfrom13ampwx_lazy131
图15. Elevate

三、不易被察觉的动效

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

1.默默增加反馈感

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

0wx_fmtgifamptpwebpampwxfrom15ampwx_lazy151
图16. Twitter 收藏的点击反馈

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

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

0wx_fmtgifamptpwebpampwxfrom16ampwx_lazy161
图17. CityHour Calendar Animated Interaction

0wx_fmtgifamptpwebpampwxfrom17ampwx_lazy171
图18. Steller

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

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

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

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/8050/

(0)
iouedioued
上一篇 2015-08-12
下一篇 2015-08-13

相关推荐

  • 让人最不喜欢的交互设计错误列表,来看看你中枪了没!

    好的交互设计可以区分开有质量的网站和其他普通网站。然而,如果有明显的设计错误,它只会给予你本来想打动的用户以刺激和挫败感。下面是Speckyboy上总结的让人最不喜欢的交互设计错误列表,来看看你中枪了没!1缺…

    2017-08-02
  • 隐藏在今日头条百亿市值背后的算法:巨大可能与现实困境

    文/余亮 无论2016年科技圈热门的噱头有多少,对数据基础设施方面的耕耘仍然是决定实力的关键。阿里之类电商数据帝国自不待言,今日头条、一点资讯等在资讯数据领域的开拓更加值得注目。比起电商的物流数据,资讯算…

    2016-01-27
  • 前辈经验!聊聊新人设计师最容易遇到的12个问题

    身为设计师,我越来越意识到只有整个设计师圈子的能力和氛围都起来了,我们每一个小分子才可以好起来,大家学习的积极性也比我大学时期(07年-11年)好太多,那时的我都完全没有要逛设计论坛学习的意识,所以当我看到谁年纪轻轻就已经那么牛逼了,我就很后悔,当年我为什么就没有逛论坛自我学习的意识呢,要不然我早就走向人生巅峰了,当年自己怎么那么井底之蛙,资源有限,信息闭塞,也没有人叮嘱我要怎么去做,也没人给我指出问题所在。现在有这么多好的学习平台和机会,而我也确实看到了很多设计师存在的问题,所以我总结下来,希望对大家有所帮助,不要像我当年那样活在自己的世界里,落后别人一大截。

    2017-05-26
  • 交互设计师如何进行风险预判?

    在公司工作,任何职业都不可能单兵作战,协作是永恒的主题,而每一个需求和任务的实现,都是各方通力合作的成果。作为交互设计师,除了做好自己的设计工作之外,还需要花费大量的时间与产品、运营、客户端开发、前端开发、后端开发一起协作和沟通。

    2017-06-04
  • 交互设计中,你不可不知的八个度

    数十万互联网从业者的共同关注!作者:李煜佳,华为交互设计师。专注于用户体验及服务设计,擅长设计分析、交互设计、细节体验提升等工作。作者原创并投稿早读课发表,转载请联系作者。欢迎投稿到早读课,投稿邮箱…

    2017-08-01
  • 百度三端搜索首页之美:精确、精准、精细

    持之以恒的学习是设计的来源,责任感是设计的原则,而灵感是设计的升华。

    2017-05-12
  • “来电”性格测试的交互设计历程

    来电,是一个主打免费通话的纯语音应用。从14年7月份低调发布Lightalk1.1后,历经3个版本,终于在1.4版更名为来电并投入推广了。除了运用一些传统的渠道推广,来电也尝试在应用内嵌一个提供分享的入口,鼓励用户做…

    交互设计 2015-04-10
  • 记忆篇|从心理学理解交互设计原则

    无论是设计网页还是APP,我们必须要满足用户的需求, 用户体验的好坏完全取决于你多了解用户。用户是如何思考,记忆,做决策?什么促使他们点击?知道了这些,对交互设计很有帮助。让我们从了解人记忆的复杂性和弱点开始。

    2017-04-30
  • 在处理 CRO 与用户体验设计时常会犯的四项错误

    转换率优化(Conversion Rate Optimation, CRO)逐渐受到越来越多的关注。资本雄厚的公司通过增长黑客团队与持续优化作后盾,也影响越来越多人搭上 CRO 的风潮。整体来说,重视对网站效果的测试是一件好事。转换率(Conversion Rate)= 欲望(Desire)─ 障碍(Friction)

    2017-05-17
  • 7种方式玩转信息可视化中的时间线设计

    时间常常被认为是一种主观的体验,然而在可视化的表达中,时间却成为了结构化维度。时间帮助我们构建稳健而直观的框架,使我们更好地建立事件间的联系。 按照时间线的方式阐述信息已经广泛应用于企业传播、营销的各…

    交互设计 2015-08-27