莫b

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

 先两三句说下背景 

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

图片

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

 

咔咔我就是一顿分析 

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

图片

 

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

 

有方向了,咱就开整

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

图片

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

图片

 

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

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

图片

 

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

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

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

图片

 

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

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

图片

 

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

 

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

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

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

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

 

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

作者:菜心设计铺

图片

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

登录收藏
 
你可能喜欢的:
还在靠感觉做界面设计?来了解下格式塔,怎么套公式做设计还在靠感觉做界面设计?来了解下格式塔,怎么套公式做设计
产品细节剖析,让你看看大厂是如何做设计的05产品细节剖析,让你看看大厂是如何做设计的05
导航栏该如何设计?导航栏该如何设计?
老虎帮学员作品公开老虎帮学员作品公开
58的系统性设计,让我收获不小58的系统性设计,让我收获不小
【蓝湖有方】如何做出有效的设计,让产品又好看又好用?【蓝湖有方】如何做出有效的设计,让产品又好看又好用?
初探运营活动故事化体验设计初探运营活动故事化体验设计
产品细节剖析,让你看看大厂是如何做设计的04产品细节剖析,让你看看大厂是如何做设计的04
挖掘服务链路中的体验设计机会点挖掘服务链路中的体验设计机会点
这样的工具,哪个设计师不想要呢?这样的工具,哪个设计师不想要呢?