UI 设计规范手册的真正价值，不在于列出 100 条“对齐、留白、对比”的万能清单，而在于帮助设计师在 90% 的常见场景中，直接跳过试错，找到最稳妥的组件状态与交互反馈方案。

1. 按钮状态：别只做“默认”与“悬停”，用户最需要的是“不可用”提示

一个典型的反面案例是注册表单：当用户未填完必填项时，“提交”按钮依然高亮，用户点击后没有任何反馈，或者弹出“请完善信息”的提示。这属于典型的“状态缺失”问题。真正的速查做法是：给按钮的禁用状态（disabled）一个明显的灰度或线框样式，并加上 cursor: not-allowed。这种设计让用户一眼就知道“当前还不能操作”，比弹窗报错更高效。一个可执行的标准是：所有表单提交按钮、关键操作按钮，必须明确区分“默认”“悬停”“点击”“禁用”四种状态，且禁用状态在视觉上要弱于默认状态 30% 以上的对比度。

2. 列表加载：别让骨架屏变成“虚惊一场”，数据为空时的“占位提示”才是保底

很多团队会花大量精力设计精美的骨架屏动画，却忽略了当网络返回为空时，骨架屏消失后出现一片空白页面。用户会反复刷新，以为加载失败了。一个真实的项目场景是：某电商 App 的“历史订单”页面，当用户第一次使用无订单时，骨架屏停顿 3 秒后消失，页面只剩顶部导航栏，用户误以为 App 崩溃了。正确的速查要点是：骨架屏必须与“空状态提示”联动，当数据请求完成且列表为空时，自动替换为带有图标、文案和行动按钮（如“去逛逛”）的空状态组件。设计师在做高保真时，必须同时给出“有数据（含1条、多条）”与“无数据”两套界面，而不是只画满数据时的效果图。

3. 表单输入：让“错误提示”出现在字段右侧，而不是弹出全局 Toast

最让用户抓狂的交互之一：填写 10 个字段的表单，点击提交后，页面顶部弹出一个 Toast“请检查第三项”，但 Toast 闪一下就消失，用户根本找不到具体哪个字段错了。速查手册里的最佳实践是：错误提示必须紧贴出问题的输入框下方或右侧，且使用红色文字+图标，同时该输入框自动获得焦点（focus）。例如，密码字段输入错误时，框体变红，下方出现“至少8位且包含字母和数字”的提示，而不是在页面角落弹出几秒就消失的消息。一个可验证的规则是：所有表单校验错误提示，持续时间应等于用户操作时间，且不会自动消失，直到用户主动修改正确为止。

• 误区一：把设计规范当成“静态视觉文档”，忽略状态与反馈。建议你创建组件库时，每个组件至少列出 5 种必展示状态（正常、悬停、激活、禁用、加载/错误）。
• 误区二：用“精致”代替“清晰”。例如按钮上的渐变、阴影、模糊背景过多，干扰用户识别操作区域。建议保持按钮的对比度至少达到 3:1（WCAG AA 标准），尤其是禁用状态。
• 误区三：认为“所有用户都懂你的设计语言”。在表单、列表、弹窗等高频交互中，尽量使用文本标签+图标双重指示，不要只依赖图标。例如用“删除（红色垃圾桶图标）”代替单纯一个垃圾桶图标，降低用户误触风险。