Transform UI Design with 16 Simple Rules for Better Usability

本文翻译自 16 little UI design rules that make a big impact，主要讲一些设计的基本原则，对前端的开发实现也有一定的指导意义。

用户界面设计是一项挑战性的工作，在布局、间距、字体和颜色等方面有众多选择，往往让人感到不知所措，尤其还要兼顾可用性、可访问性和心理学因素。

作者通过近20年的产品设计经验，总结出一套逻辑规则，帮助设计师高效做出明智决策，而不是凭直觉盲目调整。

下面通过一个短期租赁房产详情页的原始设计与改进后设计的对比，演示如何逐条应用这些规则。

1. 使用间距将相关元素分组

将信息分组、使用同一容器、紧密排列、视觉相似以及对齐成线，可帮助用户快速理解和记忆信息。

2. 保持一致性

相似的元素应以相似方式使用，统一的图标笔画宽度和圆角提升可预测性，降低错误率，并通过文本标签提升屏幕阅读器可访问性。

3. 确保外观相似的元素具有相似的功能

相似外观的元素应提供相似功能，避免误将装饰性图标当作可交互按钮。

4. 创建清晰的视觉层次结构

通过大小、颜色、对比度、间距、位置和深度的变化，使重要信息更突出，帮助用户快速扫描并聚焦。

使用眯眼测试（Squint Test）验证层次结构，确保主要操作最突出。

5. 移除不必要的样式

删除多余的线条、颜色、背景和动画，降低认知负荷，使界面更简洁。

6. 有目的地使用颜色

仅在颜色能传递信息时使用，品牌颜色用于交互元素（链接、按钮），避免在非交互元素上使用。

7. 确保界面元素具有3:1的对比度

满足 WCAG 2.1 AA 级别的 3:1 对比度要求，确保图标、按钮在各种背景上可辨识。

8. 确保文本具有4.5:1的对比度

小文本（≤18px）需 ≥4.5:1 对比度，大文本（≥18px 且加粗或 ≥24px 正常）需 ≥3:1，对比度不足的文字通过提升不透明度、添加阴影等方式改进。

9. 不要仅依靠颜色作为指示器

为色盲用户提供除颜色外的视觉提示，如下划线，以区分链接和普通文本。

10. 使用单一的无衬线字体

无衬线字体易读、简洁，避免使用多种字体导致视觉噪音。

11. 使用具有较高小写字母的字体

选择 x‑height 较高的字体（如 Lato）提升小尺寸下的可读性。

12. 限制使用大写字母

除非需要强调，否则避免全大写，因为大写字母形状相同，阅读效率低。

13. 仅使用常规和粗体字重

限制字重种类，使用常规和粗体保持设计简洁。

使用粗体强调标题。

小文本使用常规字重。

如需极细或极粗，仅用于标题或大字号。

14. 避免使用纯黑色文本

在白色背景上使用深灰代替纯黑，降低视觉疲劳。

15. 左对齐文本

左对齐符合英语阅读习惯，提升长文本可读性，避免居中或两端对齐带来的认知负担。

16. 正文文本应至少使用 1.5 行高

行高 1.5–2 能防止阅读时重复行的情况，使文本更舒适。

我们修好了！

通过这些简洁而有力的 UI 设计准则，快速发现并修复了示例中的多个问题，使界面更直观、易访问且美观。