页面稿里按钮永远是默认状态、输入框永远有漂亮示例文字，真正上线后 Hover、Focus、Loading、Disabled 和 Error 全部由开发临时补。最后“还原度差”只是表象，根因是设计从来没有描述组件在真实交互中会发生什么。
01 默认状态只占用户实际使用的一小部分
一个按钮在真实产品里会被鼠标悬停、键盘聚焦、按下、等待请求、不可操作；一个输入框会为空、聚焦、已填写、错误、禁用、只读。
如果组件库只提供 Default，开发只能根据经验补齐其余状态。不同开发人员会产生不同实现，产品越大差异越明显。
02 交互状态和业务状态要分开定义
Hover、Focus、Pressed 属于交互状态；Success、Error、Warning 往往表达业务语义；Selected、Expanded 则表达组件自身状态。把它们全部塞进一个 Variant 属性，容易出现几十种组合。
设计系统应该先理解状态维度，再决定哪些需要组合、哪些互斥。不是 Variant 越多越完整。
03 Focus 不能等同于 Hover
鼠标 Hover 是指针经过，Focus 则可能来自键盘 Tab、脚本或其他输入方式。两者用户需求不同。
如果设计只做 Hover，键盘用户可能完全看不到当前位置。Focus 样式应该清晰、稳定，并满足无障碍对比与可见性要求，而不是为了视觉简洁被取消。
04 Disabled 不应该成为“灰到看不见”的借口
禁用控件需要表达当前不可操作，但如果文字和图标过度降低对比，用户甚至无法理解原本有什么功能。
更重要的是解释“为什么不可用”。例如提交按钮禁用时，如果用户不知道还缺哪个字段，Disabled 就只是阻断。很多场景可以保留按钮可点击并在操作后给出明确校验，而不是永远灰掉。
05 Loading 状态要防止重复操作并维持布局稳定
请求提交后，如果按钮文字消失、宽度突然变窄，页面会产生跳动。Loading 通常应该保持按钮尺寸，明确表示正在处理，并避免用户连续重复提交。
耗时较长的任务还需要超时、取消或后台运行方案。一个永远旋转的 Spinner 不是完整状态。
06 Error 状态要包含信息，而不只是边框变红
红色边框只表达“这里有问题”，却没有告诉用户问题是什么。错误状态应包含具体文案，并在必要时说明如何修正。
同时不要只依赖颜色。图标、文字和可编程错误关联能让更多用户理解。表单错误最好靠近对应字段，而不是全部集中在页面顶部却没有定位。
07 组件文档要说明状态触发条件
设计稿画出一排状态只是第一步。开发需要知道什么时候进入 Loading、什么条件 Disabled、什么时候使用 Warning 而不是 Error。
这些规则可以写在组件说明、Figma 注释或 Storybook 中。状态定义越明确，跨团队实现越一致。
08 用真实流程验收状态组合，而不是只看组件展示页
单独的 Button Story 看起来都正确，但放到表单、弹窗、表格里可能发生焦点丢失、Loading 遮挡、Disabled 看不清。
因此设计系统 QA 既要测组件本身，也要在真实任务中检查状态变化。组件是语言，最终体验发生在句子里。
09 Selected、Checked、Active 这些词需要团队统一语义
设计文件里常见同一个状态被不同人叫 Selected、Active、On，开发又用 Checked。名字混乱会让组件 API 和设计属性难以对应。
团队可以建立状态词典：Toggle 用 on/off，Checkbox 用 checked/unchecked，Tab 用 selected，导航项用 current。语义一致会直接减少交付沟通。
10 状态之间的视觉差异要和重要性匹配
Hover 只需要轻微变化，Focus 必须足够可见，Error 需要明确警示。若所有状态都使用强烈品牌色，用户反而无法判断哪一个更重要。
可以从背景、边框、文字、阴影和图标多个维度建立层级，而不是每个状态只改透明度。
11 把状态写进测试用例，才能真正落地
设计验收清单可以明确：键盘 Tab 是否有 Focus、网络慢时是否显示 Loading、请求失败后按钮是否恢复、Disabled 是否仍可读。
状态一旦进入 QA，就从“设计师建议”变成产品质量标准，跨端一致性也更容易持续。
常见问题
按钮至少需要哪些状态？
常见包括默认、Hover、Focus、Pressed、Disabled、Loading；是否需要更多取决于平台和业务。
移动端需要 Hover 吗？
触屏没有传统 Hover，但同一组件可能在桌面与移动共享，因此状态体系应考虑平台差异。
Disabled 按钮必须降低透明度吗？
不必须。目标是表达不可操作，同时保持可理解性。
错误一定要用红色吗？
红色是常见语义色，但不能只靠颜色，应同时提供文字或图标。
组件状态应该全部做成 Figma Variant 吗？
不一定。根据维度、组合数量和使用频率决定，避免 Variant 爆炸。
相关服务与进一步咨询
链接复制成功
