行业干货 | 动效设计的十个案例 三大原因
本文最后更新于 3688 天前,其中的信息可能已经有所发展或是发生改变。
最近越来越多的国内公司开始关注动效设计了,越来越多的团队已经意识到动效在产品用户体验中的重要性了,更多的射鸡师们也开始投身动效设计领域。
那么到底为什么需要动效设计?或者说我们到底需要什么样的动效?以下是一位设计师从产品本身出发来思考的动效设计。

PS | 文中部分案例为设计师个人作品,部分为线上产品,都是非常非常棒的作品。如不慎冒犯请联系联盟。

1、加强体验舒适度

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

0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1
  与用户手势结合,更自然的动画表现 当用户手势操作的时候,让界面的动态走向更符合手指的运动,从而让用户感觉到是自己控制了界面的动向,而不是机械化的跳转。
0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (1)

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

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

0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (2)

Action button feedback 出错提示

0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (3)

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

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

0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (4)

readme.io 萌萌的输入框

0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (5)

amazon Q弹的菜单

 

0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (6)

tumblr 不喜欢我 心都碎了呢~

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

0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (7)

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

虽然我们的产品,我们的交互,我们的设计,我们的工程狮都在努力把产品打造的更加优秀,更加完美,但是总有一些无法避免的问题、或者有可能会出现的bug、外界条件的不给力等因素,造成我们的产品体验下降。这些时候适当的增加一些动效可以弥补在出现这些情况时的不适体验。 比如下面这些: 让等待变得更愉快 常出现在加载、刷新、发送等界面中,让等待变得可视化,甚至不再那么无聊。

0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (8)

Download Progress 让下载不再枯燥

0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (9)

这样萌的章鱼,用户一定舍不得加载界面的结束。

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

0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (10)

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

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

0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (11)

3、不易被察觉的动效

默默增加反馈感 为用户的操作提供有趣的正反馈。

0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (12)
去除用户不再需要的元素 随着用户的操作,有的内容已经是用户不再关注的。这时候可以将他们隐藏起来。
0-wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 (13)
[整理:CALONYE]

文章名称:《行业干货 | 动效设计的十个案例 三大原因》
文章链接:https://www.1udd.com/13902.html
版权声明:本文采用 License 知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
风险声明:本站资源仅供个人学习交流,请于下载后 24 小时内删除,请勿用于商业用途,否则法律问题自行承担!
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇