UI设计中我们为什么需要设计动效

最近越来越多的国内公司开始动效设计了,越来越多的团队意识到动效在产品用户体验中的重要性。更多的射鸡师们也开始投身动效设计领域。

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

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

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

一、加强体验舒适度

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

具体表现在:

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

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

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

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

原作者:小怪怪怪兽

(0)

相关推荐

  • 电商设计中的极简设计

    小编:本篇来和大家讨论讨论关于电商设计中的"极简设计",首先感谢作者@蒸个馒头详尽的讲解,举例分析.我认为的"极简设计"就是去掉不是必要的,留下重要的,让用户可 ...

  • logo设计中的中文字体设计的10种方法

    logo设计中的中文字体设计的10种方法 方法 01 连接法--结合字体特征将笔画相连接的形式 02 简化法--根据字体特点,利用视觉错觉合理地简化字体部分笔画的形式 03 附加法--在字体外添加配合 ...

  • 栅格系统及其在后台设计中的应用—后台设计经验总结01

    关于栅格系统文章不少,但鲜有专门针对栅格系统在后台设计中相关应用的文章.本文希望抛砖引玉,能引起更多同行的交流与讨论 栅格系统的目的 栅格系统在页面排版布局.尺寸设定方面给了设计者直观的参考,它让页面 ...

  • 【字言字语】设计中常见的字体设计与效果制作步骤

    小编:今天给大家带来的是@Martin_K的[字言字语]系列的第五篇-设计中常用的字体效果与制作步骤.一款好的字体设计不仅能增加视觉效果让作品锦上添花还能传播出作者想要表达的情绪.本次作者为大家准备了 ...

  • 产品设计中的游戏化设计策略

    游戏行业是有巨大商业价值的,腾讯在2018年第一季度的财报就公布日赚2.66亿元,年收入破1000亿.一款好的游戏可以让用户持续数小时,数天,甚至数周一遍又一遍地玩同样的游戏.我并不经常玩游戏,但是, ...

  • 体验设计中的仪式感设计

    过去这100多年里不同时期设计主义的演变,与环境趋同.历史.经济.社会与人的需求变化息息相关.互联网设计演变也是如此. 一.历史趋势与当前环境 在王受之<世界近代现代设计史>中讲述了近代设 ...

  • UI设计中的情感化设计

    科技的发展使机器不再是一个单纯的功能性产物,它们可以被赋予情感,因此,情感化的设计在人机交互中就显得尤为重要, UI设计师也应该在设计时添加「情感化元素」. 参考书籍: <设计心理学3-情感化设 ...

  • 腾讯干货!交互微动效设计指南

    导语 本设计指南适用于UI界面中交互微动效,涵盖入场.出场动效,过渡动效和加载动效,在时间和缓动曲线的选择上提供了一些通用的设计建议,帮助设计师理清动效设计思路,提高设计效率. 一.本指南的适用范围 ...

  • 值得你关注的动感粒子动效设计趋势

    现代风盛行的网页设计圈中,不少设计师会倾向于用动态.抽象的元素来为页面渲染出富有科技和未来感的氛围.在这其中,飘散的粒子动效是比较常见也颇受欢迎的一种元素,而今天我们要聊的就是这种设计元素. 有的网页 ...