UI 组件状态设计的 6 种类型：按钮和输入框别只画一个正常态

交付设计稿的时候的时候只画了组件「长什么样」，前端切图后自己补交互状态，结果点上去没反馈、报错没提示、加载没动效——这类返工的根源，大多在设计阶段就没把组件状态画全。

一套完整的 UI 组件，通常需要覆盖下面 6 种基础状态。

1. Normal（默认态）

组件静止时的样子，也是设计稿里最常见的一态。默认态决定了组件的视觉基调，颜色、圆角、投影都以它为基准。

2. Hover（悬停态）

鼠标悬停时的反馈，桌面端必备。常见做法是加深或提亮 5%-10% 的背景色，配合轻微的阴影变化。悬停态的意义是告诉用户「这里可以点」，缺失它，可点击区域和纯文字就没了区别。

3. Active（按下态）

鼠标按下的瞬间状态，通常比 Hover 更深一档。别小看这几十毫秒的反馈，它给用户的确认感是悬停态替代不了的。

4. Disabled（禁用态）

不可用时置灰、降低透明度，通常压到 40%-50% 不透明度并去掉交互光标。注意禁用态不等于「看不见」——文字对比度太低，用户会以为页面坏了而不是按钮被禁用了。

5. Focus（聚焦态）

键盘 Tab 导航或点击输入框时的状态，输入框和表单组件的重中之重。清晰的聚焦描边既是可用性要求，也是无障碍访问的硬指标，别为了「好看」把 outline 去掉。

6. Loading（加载态）

点击提交后到反馈出现之间的过渡。按钮内嵌转圈动画或显示「提交中」，能有效防止用户重复点击造成重复提交。

表单组件还要补两个语义状态

除了基础 6 态，输入框类组件通常还需要 Error（错误态）——红色描边加具体错误文案，以及 Success（成功态）——绿色描边加通过标识。只把输入框标红却不写原因，是表单设计里最招人烦的反模式。

落地方法不复杂：在组件库里为每个交互组件建一张状态对照表，标注触发条件、视觉变化和过渡时长，交付时连同设计稿一起给到前端。状态画全了，联调时的「这处交互没做」能少掉一大半。