这是个好公司,一个按钮让我扣了3天细节!!!

Recommanded by editor
深圳/学生/2年前/16302浏览
这是个好公司,一个按钮让我扣了3天细节!!!Recommanded by editor

来自慢热大佬的分享

按钮设计是我们经常会遇到的一个类型,一个好的按钮其最重要的就是激起点击欲,让人忍不住去戳戳戳。

我们来看看下面这个按钮:

很普通,处处都很常见的一种按钮,没有任何点击欲。

那我们应该怎么做出她的点击欲呢?

其实就是要让按钮更有立体感,话不多说直接上干货!

1.层次

可以用不同的颜色,放大一圈,形成对比:

上下错开一些让按钮的造型饱满立体一些,从原来的单一一层变为两层:

2.层次

为了让按钮更立体我们可以把这两层个复制一层,往下移动几个像素:

这样按钮是不是就已经立体多了?别急,还有呢!

3.光影

这里细节就比较多,想把按钮做到晶莹剔透可不容易,给大家好好讲一下。

先给图形加上一个内发光:

使用剪切蒙版,涂颜色或者再来一层内发光,加强这个效果:

复制一层,选用更深的颜色,向下移动,剪切蒙版到里面去,把按钮有一个明显的明暗分割线,形成这种光的层次和厚度:

沿着造型刻画高光,和边缘有些间隔:

在白色的底座上加入按钮的投影:

这样一个剔透,立体感强的按钮造型就完成啦!

那还能不能让点击欲更强一些呢?

4.表像图形

放上文案看看:

就还是有点单对吧。

这种时候我们就可以从按钮的文案出发,加入一些图案,让它更生动!

比如这里的文案是“发射”,就联想到了火箭,我们可以绘制一个火箭出来。

把它加入到按钮上:

这样一个丰富且有点击欲的按钮就完成了!

并可以用同样的逻辑去延展别的按钮,让他们保持统一性:

总结

增强按钮的点击欲的方式,其实就是让它变得立体且丰富。

1.层次:单独的一个色块,会很单薄,增加层次增加其在造型上的丰富度。

2.厚度:厚度可以让按钮变得更立体。

3.光影:让按钮富有变化,更立体和吸引人。

4.表像图形:一个关联文案信息的点缀图案,可以让人更有食欲。

570
Report
|
646
Share
相关推荐
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
LANHE工作总结
Homepage recommendation
相关收藏夹
设计思路
设计思路
设计思路
设计思路
作品收藏夹
教程
教程
教程
教程
作品收藏夹
UI图标
UI图标
UI图标
UI图标
作品收藏夹
UI
UI
UI
UI
作品收藏夹
UI
28
干货
干货
干货
干货
作品收藏夹
教程
教程
教程
教程
作品收藏夹
大家都在看
Log in