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

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

来自慢热大佬的分享

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

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

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

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

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

1.层次

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

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

2.层次

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

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

3.光影

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

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

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

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

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

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

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

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

4.表像图形

放上文案看看:

就还是有点单对吧。

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

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

把它加入到按钮上:

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

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

总结

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

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

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

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

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

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