一天一个 vibe coding 术语课，今天讲按钮。
按钮就是那块你点一下、就会发生一件事的区域。
按钮的样子特别多。实心的、空心的、只有一行字的、圆的方的、红的灰的、点下去还会转圈的，名字也跟着一大堆。
但这些不是几十个互不相干的东西。任何一个按钮，都是四个方面拼起来的：它有多抢眼、它表示什么意思、它有多大、它此刻是什么状态。
今天就按这四个方面，一个一个讲。
一、第一件，变体：它有多抢眼
同一个界面上，按钮不能长得一样重。哪个先被看见、哪个后被看见，是设计的时候定好的，不是碰巧。这件事有个通用叫法，叫视觉层级。
按钮在这条层级上分成几档，从最抢眼排到最不抢眼。这几档在英文里叫 variant，中文叫变体。
最抢眼的一档是实心按钮。它整块都填着颜色，字是白的，往界面上一放，眼睛先落在它身上。
它的英文叫 filled，直译过来是填充按钮。不过你更常听到的叫法是 primary，主按钮。
这一档留给这一屏你最希望用户做的那件事，比如提交、保存、立即购买。一个操作区域里只放一个。
往下一档是描边按钮。它的四条边有一圈细边框，中间不填颜色，透出后面的底色，字和边框通常用同一个颜色。
它的英文叫 outline，也写作 outlined。中文里叫镂空按钮、空心按钮都行，说的是一个东西。
这一档一般站在实心按钮旁边，当第二选择，比如取消、返回、稍后再说。它看得见，但不会跟主按钮抢。
再往下是最轻的一档，文字按钮，英文就叫 text。它没有底色，也没有边框，就是一行字杵在那儿，鼠标移上去才浮出一小块浅底。
弹窗角上的「取消」、卡片角上的「更多」、列表每一行末尾的「编辑」「删除」，都是这一档。这些地方按钮多，要是全画成实心的，一屏就花了。
但是轻也有代价。轻到一定程度，用户会看不出那是能点的。所以这一档只该放在人本来就会去找的位置，别拿它当一个页面的主要操作，很多人会直接错过。
还有一档长得不太像按钮，叫链接按钮，英文是 link。它的字带着颜色，鼠标移上去还会出下划线，看上去就是一条链接。
它和文字按钮最容易混，不过分界其实很清楚：点完还留在这一页、当场发生一件事，那是文字按钮；点完跳到别的地方去了，那是链接按钮。
二、第二件，颜色：它是什么意思
界面上的颜色不是随便挑好看的。设计上有一套固定的颜色，叫语义色，也叫功能色。每一种颜色代表一类含义，用户扫一眼就知道这是什么性质的操作。
一共就这么几种。
主色叫 primary，就是你的品牌色，蓝的绿的紫的都行。正常的、默认的操作用它。
剩下几种是按状态分的。绿色表示成功，英文 success，用在操作成功、状态正常的地方。橙色和黄色表示警告，英文 warning，提醒你注意但还没出事，余额不足、即将到期就是这一档。蓝色或者灰蓝表示信息，英文 info，是中性的说明，不好也不坏。
红色最特殊，叫危险色，英文 danger。它用在那种做完就撤不回来的事情上，比如删除账号、清空数据、解除绑定。这个颜色在按钮上一般叫 danger，在提示条、标签那些地方也叫 error，说的是同一件事。
最后还有一档灰色，叫中性色，英文 neutral，给那些不重要、也没什么倾向的操作用。
要紧的是下面这一点：颜色和变体是两个分开的维度，可以随便组合。
拿删除举个例子。弹窗里那个「确认删除」，通常做成实心的红色，也就是最重的变体配上危险色，因为那是最后一下。而列表每一行末尾那个「删除」，通常做成红色的文字按钮，也就是最轻的变体配上同一个危险色，因为它只是个入口，点完还会再问你一次。
所以跟 AI 说话的时候，这两件事要分开说。「这个改成描边的」说的是变体，「这个改成危险色」说的是颜色。要是混成一句「把这个按钮弄得醒目点」，它就只能自己挑一个。
三、第三件，尺寸：它好不好按
组件库一般会给三档固定尺寸：小、中、大。英文是 small、medium、large，写在代码里常缩写成 sm、md、lg。
有了这几档，一个项目里的按钮高度才是齐的，不用每个页面自己定一个数。
除了这三档，还有一种是通栏按钮，横着占满一整行，英文叫 block，也叫 full width。手机上的登录、提交多半用这一种。
它为什么好按，背后有条老规矩，叫费茨定律：目标越大、离手指越近，点起来就越快，点错的概率也越低。通栏按钮把这两样一次占全了，它横着最宽，又压在拇指最舒服的下半屏。
尺寸这块还有一条硬线，就是能点的范围有最小值，大约 9 毫米见方。再小，手指就容易按偏，或者误点到旁边。
好在能点的范围本来就允许比看得见的范围大。图标只有指甲盖那么大也没关系，外面留白凑够就行。
四、第四件，状态：它此刻是什么样
这一件是 AI 最容易漏的。它给你画一个按钮，多半只画了没人碰它的那一个样子。实际上同一个按钮，要准备好六副面孔。
没人碰它的时候，叫默认态，英文 default，也叫 normal。
鼠标移上去，颜色会深一点或者浅一点，这叫悬停态，英文 hover。它是在告诉你这块能点。手机上没有这个状态，因为手指悬不住。
手指或者鼠标正压着的那一瞬间，颜色更深，有的还会往下陷一点，这叫按下态，英文 active，也叫 pressed。有些界面还会从你点的那个位置扩散出一圈波纹，那个波纹叫 ripple，中文叫水波纹。
用键盘的 Tab 键跳到它身上的时候，它外面会套一圈光圈，这叫聚焦态，英文 focus。不用鼠标的人，就靠这一圈才知道自己现在选中的是哪一个。
变灰、点不动的那个样子，叫禁用态，英文 disabled，用在条件还没满足的时候，比如协议还没勾。
不过禁用态有代价：用户看得见按钮，却不知道自己差在哪一步。另一种做法是让按钮照样能点，等他点了再告诉他还缺什么。两种都有人用，区别在于你愿不愿意让他知道原因。
最后一个状态最值钱，叫加载态，英文 loading。点下去之后，按钮里的字换成一个转圈，同时这个按钮不能再点。
没有它，用户点完看不到反应，会以为自己没点上。连点三下，订单就下了三笔。
五、还有三种长得不一样的
第一种是图标按钮。它里面不放字，只放一个图标，外形通常是正方形或者圆形。关闭的那个叉、更多的那三个点、返回的那个箭头，都是图标按钮。它的英文叫 icon button。
第二种是悬浮按钮。它是圆的，浮在页面右下角，带一层阴影，你往下滚页面它也不动。它的英文叫 floating action button，缩写成 FAB。很多手机 App 右下角那个用来发布的加号就是它，一个页面只该有一个。
第三种是按钮组，就是几个按钮挨在一起连成一条，中间只有一条细缝。「日 / 周 / 月」这种切换最常见。它的英文叫 button group。
六、最常见的一条用错
最后说一个最常见的用错：一屏放两个实心按钮。
比如「保存」和「提交」并排，两块一样重的颜色戳在那儿。用户的第一反应不是去点，是先愣一下：我该点哪个？
正确的做法是一屏只留一个最重的，旁边那个降一级，做成描边的，或者做成纯文字的。
所以按钮不是几十种样式摆在那儿让你挑。它是四件事拼出来的：多重、什么意思、多大、此刻什么状态。每一件落到哪一档，合起来就是你看见的那一种按钮。
以后 AI 回你的话里蹦出一个你没听过的按钮名字，别自己猜，让它用大白话说清那个按钮长什么样、跟你现在页面上哪个像。
