莫b

今天给大家讲一个案例,在技术层面没多复杂,但是上线效果却非常不错,所以就写出来和大家分享一下。需求方提过来的诉求就是希望这个模块的点击率能够有所提升,现在很多用户没有发现这个模块,希望能够在原有框架不变的情况下进行优化提升,我们就按照这个需求优化。

 先两三句说下背景 

下图是一个新人进入才会看到模块,领取“限免卡“:

图片

需求方提过来的诉求就是希望这个模块的点击率能够有所提升,现在很多用户没有发现这个模块,希望能够在原有框架不变的情况下进行优化提升。

 

咔咔我就是一顿分析 

在原有框架,那能改的就是只有按钮这个切图:

图片

 

不过之前的这个按钮确实优化空间比较大,因为没有看出是按钮,也没有领卡的感觉,所以这个按钮的优化就是这次改版的突破口了。

 

有方向了,咱就开整

从视觉层面,这个按钮的优化空间非常大,所以很容易发挥,我们只需要把按钮做的更像按钮,然后再有一点领取卡片的感觉就可以了,大概做了以下三种效果:

图片

最后选择第二种方式,我们看下前后的效果对比:

图片

 

在表意上和按钮精致度上都有很大的提高。

这里当时有个小细节,就是需求方希望卡片上的文字也能够看清楚,比如七天限免卡,既然想让这几个字能看清楚,那黄色卡片上就不能放浅色了,不然明度太接近,会导致文字看不清,所以把文字调整成暗色系的,而且还要足够暗,否则也还是看不清,前后对比如下:

图片

 

做到这,按钮的优化就完成了。

如果只是静态的,效果肯定还是不明显

如果只是做到这,那估计上线效果也不会好太多,所以打算还是融入一些简单的动效,来吸引注意力,于是加了一个卡片从按钮弹出的效果:

图片

 

但是有个文字,因为我们的动效只播放一次,如果动效的时间很短,那用户几乎也是看不到的,于是我又想办法加长这个动效。

思来想去,要不就弹出来之后,来回抖动以下吧,所以最后的效果就变成了这样:

图片

 

这个延展性还蛮高的,如果需求方还嫌动效时间不够,那咱们就多抖动一会,即可搞定。

 

兄弟们,我来简单总结一下子

本来我以为这是一个没什么值得说的需求,但后来发现上线效果反馈还不错,所以就拿出来和大家分享一下。

过程中只做了两个点,一个是让识别度提高上来,比如按钮像按钮,卡片像卡片,卡片上的信息要清晰可见,另外一个点就是利用动效来吸引用户的注意力,就这么简单。

从技术层面来讲没有多大难度,但却给产品起到了一定的助力作用,这也会让自己去思考,有一些场景,设计不用太复杂,只要合适、并且没有基础性问题,就很ok了,千万别过度设计,么么扔!

 

原文地址:菜心设计铺(公众号)

作者:菜心设计铺

图片

转载请注明:学UI网 » 没想到这个设计这么简单,效果却这么好!

登录收藏
 
你可能喜欢的:
这些手势交互你关注到了吗?这些手势交互你关注到了吗?
业务想大多全,用户要精准简,首页设计该如何破局?业务想大多全,用户要精准简,首页设计该如何破局?
案例锦囊|交互设计中「情感化」设计优秀案例(二)案例锦囊|交互设计中「情感化」设计优秀案例(二)
这个练习虽然已经不错了,但我觉得还可以有以下几点能优化!这个练习虽然已经不错了,但我觉得还可以有以下几点能优化!
iOS 规范与 Material Design 哪里不同?官网总结了这几点iOS 规范与 Material Design 哪里不同?官网总结了这几点
百度这一局改版,内容导向设计做得真行!百度这一局改版,内容导向设计做得真行!
微信生态中的设计(上) | 设计师如何通过生态视角找到设计优化点?微信生态中的设计(上) | 设计师如何通过生态视角找到设计优化点?
酷家乐优秀设计频道改版酷家乐优秀设计频道改版
如何用新风格引爆业务增长如何用新风格引爆业务增长
一局APP首页 改版设计分析一局APP首页 改版设计分析