在UI设计中，80%的可用性问题都集中在排版间距、颜色对比与交互反馈这三个基础维度上，而多数新手设计师恰恰在这三个维度上反复踩坑。

排版间距：从“看着舒服”到“信息分层”

场景：某B端后台管理页面，将表单标题与输入框之间的间距设为8px，导致用户频繁误选中相邻字段。正确做法是：标题与输入框间距控制在4px以内，而不同字段组之间的间距至少16px。具体数值需根据字号调整——例如16px正文字号下，行高设为1.5倍（24px），段落间距设为行高的1.5倍（36px），这样即使不添加分割线，信息层级也一目了然。对比案例：Airbnb的搜索页，搜索框内标签与输入框间距仅2px，但搜索框与下方推荐卡片间距达40px，用户不会混淆主副操作。

颜色对比：WCAG标准不是摆设

例子：某电商App的“立即购买”按钮使用#999灰色文字搭配#E0E0E0浅灰背景，色盲用户完全无法辨识。WCAG AA标准要求普通文本对比度≥4.5:1，大文本（18px以上粗体或24px以上常规）≥3:1。检查方法：用Sketch的“对比度检查”插件或在线工具（如WebAIM），直接输入色值。实际修正：将灰色文字改为#333（对比度从2.1:1提升至6.1:1），背景改为#FF5A5F按钮色（对比度4.8:1），同时添加1px白色描边，色盲用户也能通过明度差异识别。

交互反馈：延迟与缺失是流失根源

场景：用户点击“提交订单”后，页面无加载状态持续2秒，用户误以为未生效而反复点击，导致重复下单。规范做法：点击后0.1秒内显示“加载中”转圈，如果操作耗时超过1秒，则显示进度条并预估剩余时间。对比：Twitter的点赞按钮点击后立即变红并播放微动画（100ms内），而某政府网站提交表单后无任何反馈，用户关闭页面后才发现提交失败。核心原则：任何交互操作必须在200ms内给予视觉或触觉反馈，否则用户会认为系统死机。

读完本文后，建议你立刻检查三个常见误区：

• 误区一：排版间距全用8的倍数 — 8px网格适合宏观布局，但文字与控件间的细节间距需根据字号动态计算（如标题与内容间距用字号×0.5）。
• 误区二：颜色只用吸管取色 — 哪怕从Dribbble复制的色板也未必符合对比度标准，必须用工具验证后再使用。
• 误区三：交互反馈只做“成功/失败”提示 — 用户点击按钮后，即使操作成功，也要在0.5秒内展示结果页，否则用户会持续焦虑等待。