三步搞定！快速学会制作UI立体按钮！

28365备用网址官方网站 📅 2026-01-15 12:14:09 👤 admin 👁️ 2953 ❤️ 764

立体化的按钮操作并不难，主要是把按钮体积感及高光刻画出来，制作之前最好先了解清楚高光、暗部构成及环境光表现，这样制作的效果就会逼真很多。方法有很多哦，也欢迎朋友们补充意见。

今天我们就以上图为演示来操作步骤，这里使用的设计工具是「行空设计」，这是一款专为产研团队研发的设计协作平台，操作顺畅，页面简洁，兼容Sketch，复制链接：https://xk.design?c=huicn 至PC端即可使用，边看边操作效果更佳哦，文章底部附有源文件链接，大家需要的自取哈~

—————————————————————————

01 绘制旋钮

新建画板并填充颜色，随后用形状工具绘制大、小两个圆，画出大致图案。

画板：326*271px；填充#828282

大圆：206*206px 小圆：206*206px

02 刻画光影

为了使立体效果更逼真，我们可以绘制两个比上方大圆与小圆更小一点的圆，凸出厚度与质感。另外这里的高光我们可以用填充渐变色以及内阴影来完成。

大圆：线性渐变填充#525252-#EBEBEB；

内阴影#000000、不透明度80%、大小『5、-6、12、0』；

内阴影#FFFFFF、不透明度80%、大小『-4、6、10、0』

大圆凸面：线性渐变填充#575757-#333333；内阴影#9E9E9E、大小『2、0、5、0』；高斯模糊2

小圆：线性渐变填充#BFBFBF-#6E6E6E；

内阴影#000000、不透明度40%、大小『2、-3、5、0』；

内阴影#FFFFFF、不透明度70%、大小『-2、4、8、0』。

小圆凸面：线性渐变填充#6E6D6D-#BDBDBD；内阴影#E8E8E8、大小『2、-3、6、0』；高斯模糊2。

03 增加投影

利用外阴影给大圆以及小圆分别增加一层投影，使得按钮更加真实。按钮上的字体同理，填充颜色后利用外阴影打造亮部与暗部。

大圆：外阴影#000000,、不透明度80%、大小『-18、20、40、0』

小圆：外阴影#000000,、不透明度50%、大小『-6、6、12、4』

X：默认字体、大小72、字距0.4、填充色#DBCBC0；

外阴影#FFFFFF、大小『-1、0、0、0』；外阴影#000000、不透明度50%、大小『-1、-1、1、0』

以上就是立体按钮的教程啦，复制链接：https://xk.design?c=huicn 至PC端查看源文件，大家有其他疑问可以在评论区讨论哦~

—————————————————————————

相关推荐