定了,总监说下次改版要加上这个点!

菜心设计铺

共 1282字,需浏览 3分钟

 ·

2021-11-30 17:46


菜心的第356篇原创

2021年的第134篇

2021年小目标100篇原创已完成,已提升至150篇


最近又是一顿下载app,发现了很多有趣的设计,和大家分享一下,今天主要分享动效相关的,都是实际落地的,大家如果正在改版app,不妨可以从动效的维度,总结归纳,然后借鉴一些符合自己产品需求的设计。


今天的分享不是以动效场景为切入点,而是动效背后的功能,到底这些动效果产生了什么样的作用,而不是为了动效而动效。


大致可以分为一下几个目的:


1.增加可操作性

2.缓解负面情绪

3.吸引用户点击

4.引导用户消费



1.增加可操作性


其实就是能够让用户操作起来,可玩性变得更强。


比如像soul里面的这个球体:


80192402d1105ee7b34323d7667304a5.webp



如果你只是简单的列表,用户的操作感就没那么强。


再比如像微博这种点赞:


9d0c01140a142f8281abd4b4da542f15.webp



也是增加用户的可操作性,我点着爽啊,那肯定就是多点几下。


这就是动效背后的第一种作用。


2.吸引用户点击


其实很多动效的作用都是为了吸引用户点击,但这里有一些小细节,就是吸引的方式不同。


第一种吸引方式:差异化吸引


一个列表,其他卡片都是实物,只有一个变成了排行榜,你就会觉得他是差异化的,就想点进去看看:


637907b8aa3c31a316577224135b03ba.webp



同样的道理,如果其他都是静态的,只有一个是动态的,也会吸引你去看看:

c09869ab4b60915fd7adc8420aff459d.webp



第二种吸引方式:冲击力吸引


其实动效可以增加视觉的层次还有冲击力,用这种冲击力来吸引用户点击,比如动态banner图:


8727124156e0805a981ba0a11097751d.webp




比如动态弹窗:


c05e45a8eddc9f86a35ba014694903be.webp



这些都是通过冲击力来吸引用户点击的。


第三种吸引方式:点击感吸引


有时候一些动效会有明显的点击指引,比如一个小手戳按钮,按钮放大缩小,这些都是点击感的指引,最近还发现一个设计语音,其实很早之前qq登陆页就用了,按钮里面加流体效果:


f4c6ce7ba2f03fca2a4a5abdfee8cfa2.webp



这样就可以很好的吸引点击,而且现在很多app内部的按钮也用了这种效果:


3fff75fe5c95d7d7a17f067167d1b7fc.webp


第四种吸引方式:多信息吸引


有时候有一个静态的信息展示是有限的,所以现在很多场景使用了动态展示信心的方式,比如搜索框里的跑马灯信息:


76d56c5c72fdaaf04bc5a305931be303.webp

再比如标题横向的动态展示:


927c2f219a9937c9be19bc4847420a71.webp


这些都可以用有限的面积展示更多的内容,没准哪几个字就吸引到用户去点击!


吸引点击的方式还有很多,今天就先分享这四种。



3.缓解负面情绪


这种也是动效的常用作用之一,比如用户在等待的时候,就会烦躁,所以设计师会利用加载动动效来缓解这样的负面情绪:


2e394740356fb7298a8a3971f02b1b3e.webp

再比如当一个页面没有内容的时候,空空如也会导致用户负面情绪,这时候来点有趣的小动效,就可以缓解这种情绪:


d822194b8e26710dc2d7441ce5fb10eb.webp



4.引导用户消费


最后一种用途,其实就是一种功能权限的升级。


举一个例子,比如你买了平台会员,就可以使用一些动态的东西,动态头像框、动态彩色昵称、动态表情等等,否则你就只能用静态的。


再比直播平台,更直接一些,如果你的等级高,进到直播间就有一些特殊动态效果:


a1bfb830838a8df922202fa9459362b6.webp



大家就知道某某大哥进入了直播间,这些都是利用动效吸引用户消费的例子。



总结


好啦,以上就是从动效功能的维度,分享一些小案例,如果你正在改版,希望能帮助到你,切记,不要为了动而动,一定要想清楚背后的原因和改版的目的!


不想迷茫看这里


30岁迷茫,都是因为20岁的时候没有好好沉淀,沉淀基础要趁早,快来看看吧:


e27dcf2ba0aa04adc874c27e4faaeb3b.webp

浏览 90
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报