这几年在海外接项目时，我发现一个很有趣的现象：很多创业者喜欢那种带科技感、未来感的按钮，像玻璃、像金属，还发着微微的光。他们以为是三维渲染，其实我告诉他们：这个只要用 Figma 或 Sketch 就能搞定。摘要：这几年在海外接项目时，我发现一个很有趣的现象：很多创业者喜欢那种带科技感、未来感的按钮，像玻璃、像金属，还发着微微的光。他们以为是三维渲染，其实我告诉他们：这个只要用 Figma 或 Sketch 就能搞定。
这个过程，不止是设计好看，更是一种“降维打击”。
① 打地基：所有质感都靠这个结构托底
首先，我们新建一个高为 64px 的圆角矩形，描边设置为 1px，然后内部添加一个小 4px padding 的圆角矩形，并把按钮文字（建议用 Plus Jakarta Sans / 16pt / Bold）精确居中对齐。
② 分层加渐变，才是高质感的真相
大多数人设计按钮，只会在背景加一个简单渐变。但真正的质感，是每一层都处理得刚刚好。
• 外框渐变：从 → → ，制造出金属边缘的高光感。
• 内部矩形渐变：从 → ，增加一点厚度的感觉。
• 文字渐变：从 → ，让字不死黑，而是有点深浅过渡，增强对比度。
③ 背光是氛围感的灵魂，关键是复制 + 模糊
真正让按钮“发光”的，其实是一个很简单的小技巧：
• 复制矩形，置于最底层，仅显示30%的高度
• 给复制层加线性渐变 → ，并设置 透明度为50%
• 最后给这个图层添加 Layer Blur，数值设为 35
这样，一个有呼吸感的发光背景就出来了。不用灯光、不用特效插件，Figma 自带的功能就够了。
④ 换色换形状，玩法无限延伸
你以为这就结束了？Chrome风的魅力在于可以无限延展。
• 想要少女感？用粉色渐变 + 柔光蓝底
• 想要机械感？用深灰 + 冷绿色 + 重投影
• 想要音乐播放器UI？用这个按钮加上模糊背景和旋转图标就能做出完整控件
⑤ 为什么我说这是“降维打击”？
很多海外App还在用扁平风，而你只要用中国团队早就玩透的渐变、投影、结构技巧，就能轻松在视觉上领先一大截。这就是我经常和客户讲的：
“设计不是用来好看的，是为了让用户更信任你。”
我自己在帮客户做产品的时候，都会给出这种结构级别的设计方案，因为它真正能打动人、留住人。
来源：吴天琪