界面图鉴
按钮Button
你可能会问
按钮到底是什么？一个按钮还能分出主次？
简单来说
页面上最基础的「按这里」：一句动词加一块可点的形状，主次之分全靠颜色和重量。
01 · 拆开看看
这一块由什么组成
按钮是界面上最老的零件——它把「做件事」压缩成一个可以按的形状。看似简单，但主次、状态、图标，每一样都在替用户省判断。拆开看：
标签文字Label
一个动词：保存、发送、删除。别写「确定」，说清做什么。
图标Icon
可选，帮文字加一个直觉线索，不该单独扛意思。
容器Container
颜色、圆角、重量决定它是主是次——实心最重，文字最轻。
状态States
悬停、按下、禁用、加载中——同一个按钮的四副面孔。
02 · 常见变体
同一个零件，几种摆法
实心、最重，一屏只留一个。
描边或幽灵，和主按钮站一起不抢戏。
只有图标不带字，适合工具条里的常用动作。
03 · 火眼金睛
这个页面里，哪一个是按钮？
三个都能引起注意，但只有一个是「按下去会发生一件事」。
团队版¥ 96/ 月
点一块试试，看看它叫什么
文字链接Link
不是它。带下划线的蓝字是链接——点它是「去别处」，不是「做件事」。
标签Tag
不是它。小圆角的「新」是标签，只负责贴个标记，按下去什么都不会发生。
按钮Button
就是它！一个动词加一块实心的形状，按下去就触发一个动作。
04 · 用与不用
什么时候该上它
适合
- 触发一个动作：保存、提交、删除
- 一个页面一个主按钮，定出主次
- 需要禁用、加载中这些状态的操作
先别用
- 跳转到另一个页面——那是链接
- 一排七八个全做成实心
- 只是想让一段文字看着醒目
05 · 想一想
一道题，检查眼力
表单底部有「提交」和「取消」两个按钮，怎么摆最合适？
对。一个页面只留一个最重的按钮，用户一眼知道「主要的那一步」在哪。
两个一样重等于没有重点，用户得先读字才知道按哪个——按钮的层级就白设计了。
红色实心是留给「危险动作」的（删除、清空）。取消不危险，抢眼反而误导。
06 · 说给 AI 听
让 AI 改它时，这样说
把「主 / 次 / 危险」说出来，比说颜色好用——AI 会按层级配色，而不是随手涂一个。
提交做成主按钮，取消改成文字按钮
按钮点击后显示加载中并禁用，防止重复提交
删除按钮用红色描边，别用实心
所有按钮统一 8px 圆角和 40px 高度
最容易踩的坑
一屏里的实心按钮只能有一个。全都最重，等于没有重点，用户不知道先按哪个。