一个 UI 设计稿如果去掉所有装饰性元素、只保留黑白灰的骨架，用户依然能在 3 秒内找到核心操作入口，这才是真正合格的设计——可惜超过 70% 的界面在灰度测试中会暴露出信息层级混乱的问题。

1. 间距是无声的排版系统，别靠“看着舒服”调

很多设计师习惯用 8px 网格做基础单位，却在卡片内边距上凭感觉加 6px、12px、14px。实际场景中，当用户快速浏览电商列表页时，不统一的间距会导致视线跳跃：一个商品卡片内部文字到图片的间距是 10px，下方另一个却是 16px，大脑需要额外 0.2 秒重新校准视觉流。建议采用“递进式间距”方案：把间距定义成 4px、8px、16px、24px、32px、48px 六个固定值，任何元素之间的间距只从这六个值中选取，这样即使非设计人员也能保证一致。

2. 图标加文字标签不是“帮用户理解”，反而增加认知负载

对比一个典型场景：设置页面里“分享”功能用了一个箭头图标，旁边标注“分享”二字。当用户连续操作 5 分钟后，他对图标的记忆已经形成肌肉反应，此时文字标签变成了冗余信息，反而挤占了按钮热区。实验数据显示，在用户高频使用的功能上（如导航栏、工具栏），去掉文字标签后操作速度平均提升 18%，错误率下降 7%。但低频或语义模糊的图标（如“归档”），文字标签仍是必要的安全网。正确做法是：首次出现时带标签，用户触发 3 次后自动隐藏文字。

3. 暗色模式不是简单反色，你错在直接调低了亮度

实际错误案例：某笔记 App 的暗色模式直接把白色背景 #FFFFFF 反色成 #000000，结果文字对比度从 21:1 暴跌到 5:1，用户眼睛在 15 分钟内就感到疲劳。真正的暗色模式应该用深灰色（如 #1E1E1E）而非纯黑，因为纯黑会与屏幕边框形成无边界黑洞效应。同时要保留明度层级：标题文字用 #E0E0E0，正文用 #B0B0B0，辅助文字用 #808080，这样在低光环境下既能看清内容，又不会刺眼。另一个常被忽略的点：暗色模式下阴影应该去掉或改为发光效果，因为黑背景上黑色阴影根本看不见。

4. 实操避坑：这 3 个误区你大概率正在犯

• 误区一：把所有交互元素都加上悬停效果。 用户实际点击时手指并不会悬停，悬停态属于桌面端遗留思维。移动端应该用点击反馈（如按钮缩放 0.95 倍）替代悬停变色。
• 误区二：表单错误提示放在输入框右边。 移动端屏幕窄，右对齐的提示文字经常被手指挡住。正确位置是在输入框下方，用红色小字 + 左侧叹号图标，且不改变原有布局高度。
• 误区三：过度依赖 60-30-10 配色法则。 这个法则适用于品牌海报，在 UI 中会导致主色面积过大形成视觉压迫。改成 10-20-70 配色：主色只用在关键按钮和选中态（10%），强调色用在错误/成功反馈（20%），中性色占据背景和文字（70%）。