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

用户头像
深圳/学生/3年前/16669浏览
这是个好公司,一个按钮让我扣了3天细节!!!

来自慢热大佬的分享

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

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

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

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

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

1.层次

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

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

2.层次

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

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

3.光影

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

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

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

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

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

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

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

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

4.表像图形

放上文案看看:

就还是有点单对吧。

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

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

把它加入到按钮上:

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

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

总结

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

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

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

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

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

571
举报
|
646
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
【新年UI图标】优惠券icon
UI 登录界面设计模板包
高级表盘系列UI源文件
3D渐变流体抽象矢量UI背景图
手表表盘UI系列
【新年UI图标】钱包icon
【新年UI图标】30个图标
户外旅行飞机情侣假日出行
【新年UI图标】汽车icon
【新年UI图标】影音icon
新能源APP应用UIKit
我的钱包-UI界面设计-app
矢量立体简约UI蓝白图标
APP/小程序商业项目UI模板|99个高保真UI+79个原型
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
UI_3D图标烟<新春促销>
智能家居中心 简约 UI设计组件库
UI通用设计素材1
【新年UI图标】银行卡icon
钱包ui模板
高级感金属拟物 UI设计组件库
新拟态风格 UI设计组件库
Security Camera UI kit
【新年UI图标】珠宝icon
你可能喜欢
相关收藏夹
大家都在看
登录注册