原文： 《14 logic-driven UI design tips to improve any interface》
这篇文章将传授一些 UI 设计技巧，教你如何用逻辑而不是直觉来优化你的界面设计，告别"感觉"设计师！
设计用户界面可不是什么轻松活儿。布局、间距、排版、颜色......无数的选择能瞬间让你头大。要是再把可用性、无障碍性和人类心理学这些因素加进来，那挑战简直是指数级增长，让人想当场去世。
不过，好消息来了！UI 设计其实没必要搞得那么复杂。作为一个在产品设计领域摸爬滚打了 20 多年的老司机，我发现我的大部分视觉和交互设计决策，都不是靠什么艺术天赋或者玄学般的直觉，而是遵循着一套清晰、符合逻辑的准则。没错，就是靠谱的准则！
当然了，有点创意天赋肯定加分，但说实话，那些让界面变得直观、包容、赏心悦目的核心要素，绝对是可以通过学习掌握的。有了一套结构化的方法，你就能做出既聪明又一致的设计决策。否则，你就只能靠反复试错，凭感觉去"凑"一个看起来还不错的方案，效率低得感人。
那最好的学习方法是啥？当然是干中学！废话不多说，咱们直接来看一些实用的 UI 设计技巧吧。
UI 设计实战：咱们来"修理"一个界面案例
下面这个设计是一个社区博客平台的个人主页。第一个是原始设计，第二个是快速应用了一些逻辑驱动的 UI 设计技巧后的效果。前后对比，效果炸裂！
就算你没啥 UI 设计经验，估计也能一眼看出那个原始设计感觉"不太对劲"。这是因为它里面藏着一堆能严重影响可用性的设计缺陷。没准你已经发现其中几个了。
现在，咱们就一步步来，用下面这些 UI 设计技巧把这个原始设计给它"整容"一遍：
- 根据元素的关联程度来设置间距
- 确保界面元素的对比度至少为 3:1
- 为最重要的操作使用单个主按钮
- 确保按钮有足够大的点击区域
- 确保重要内容可见
- 减小大号文本的字间距
- 不要仅靠颜色作为指示器
- 尽量避免使用多种对齐方式
- 确保文本的对比度至少为 4.5:1
- 考虑移除容器以简化界面
- 只使用常规和粗体两种字重
- 保持一致性
- 不要将极简主义与简单性混为一谈
- 平衡图标和文本对
1. 亲疏有别：根据元素的关联程度来设置间距
界面元素之间的间距大小，应该取决于它们之间的关系有多"铁"。关系越铁的元素，就应该靠得越近，让人一眼就看出它们是一伙的。而那些八竿子打不着的元素，就应该用更大的间距把它们隔开，保持安全距离。
用好间距，是把信息拆分成小组的最强手段之一。如果你把每个组都想象成一个矩形，你就会发现，界面其实就是由无数个大矩形套小矩形构成的。诀窍就是：从最里面的小矩形开始，用小间距；然后越往外走，矩形之间的间距就越大。
决定元素之间的理想间距，绝对是个能把人逼疯的耗时任务，因为选择简直无穷无尽。与其一个像素一个像素地反复试错，不如直接创建一套预定义的间距选项，决策起来快得飞起。
你可以像选 T 恤一样，设置一套 S/M/L 尺寸的间距选项，这些选项都基于 8 的倍数。这就是传说中的"8 点网格系统"，用了它，你所有的界面元素最终都会跟一系列由 8 点分隔的垂直和水平参考线对齐，整整齐齐。对于那些细节爆炸的界面，你也可以用 4 的倍数，控制力更强。
就像排版字阶一样，你的间距选项也应该随着尺寸的增大而增大增量。这样才能确保大尺寸的界面元素也能获得成比例的间距，看着和谐。
在咱们的案例里，不管元素关系亲不亲，矩形之间只用了超小号（8pt）和小号（16pt）这两种间距。结果就是，整个设计看起来乱糟糟、挤成一团，让人看得脑壳疼。根据元素的关联程度来增加间距，就能清清楚楚地把内容分开和分组。
看看应用了预定义间距选项前后，我们案例的对比图，简直是天壤之别。
2. 亮瞎眼原则：确保界面元素的对比度至少为 3:1
对比度，说白了就是两种颜色在视觉亮度上的差异，用一个从 1:1 到 21:1 的比率来表示。举个栗子，黑底黑字，对比度最低，就是 1:1；而白底黑字，对比度最高，能达到 21:1。市面上有很多工具和 Figma 插件能帮你测量颜色对比度，我最爱用的是 Web AIM 在线对比度检查工具 和 Contrast Figma 插件。
为了确保视力有障碍的用户也能看清界面细节，你的设计至少要满足 Web 内容无障碍指南 (WCAG) 2.1 的 AA 级颜色对比度要求。这意味着，像表单字段和按钮这样的用户界面元素，对比度至少要达到 3:1。
在我们的案例中，图标和按钮的对比度都太低了，简直是"隐身"状态。低对比度按钮的风险在于，视力不好的用户可能根本认不出它们是按钮，因为他们看不清按钮的轮廓。给按钮加上一个对比度足够的边框，就能让它们变得无障碍。同时，我们还把按钮的浅灰色背景填充给去掉了，这样用户就不会误以为它们是禁用或非激活状态。至于图标对比度低的问题，用个深点的灰色就轻松搞定了。
3. 独孤求败：为最重要的操作使用单个主按钮
对于大多数网站或 App 项目，你通常需要三种不同"分量"的按钮来表示操作的重要性：主按钮、次按钮和三次按钮。根据界面的复杂程度，你可能还需要更小或更大的按钮尺寸。
下面这些按钮样式，用户熟悉、无障碍，而且视觉层级清晰，不单单依赖颜色来区分。当然，这不是设计按钮的唯一方法，但绝对是个不会翻车的安全选项。想了解更多，可以去看看按钮设计技巧，避免踩坑。
主按钮的目的，就是在界面上突出那个最重要的操作，像个聚光灯一样。这能帮助用户秒懂下一步该干啥，顺利完成任务。
主按钮使用指南：
- 如果界面上没有一个"最"重要的操作，那就用次按钮或三次按钮。
- 千万别在一个屏幕上放多个主按钮。它们会互相"打架"，争夺用户的注意力，让用户一脸懵逼，不知道该点哪个。
在我们的案例中，咱们就假设"关注"是最重要的操作，然后把它变成一个闪亮的主按钮。
4. 大就完事了：确保按钮有足够大的点击区域
小目标比大目标更难点中，这是常识。对于那些运动控制能力受损的用户，或者哪怕只是一个单手拿着手机用大拇指操作的普通人来说，这个问题就更严重了。
尽量遵守下面的准则，确保你的按钮（以及其他交互元素）有足够大的点击区域：
- 按钮尺寸至少做到 48pt x 48pt。这个尺寸既符合 8 点网格，也比 WCAG 推荐的 44pt x 44pt 稍大一点，更保险。
- 那些经常被"宠幸"的按钮，可以做得更大一些，提高效率，也防止用户眼瞎看不见。
- 按钮之间至少留出 8pt 的空隙，防止用户"手滑"点错。
在我们的案例中，这两个按钮的点击区域已经够大了，但空间还很富裕，完全可以把它们做得更宽。既然有地方，那就加宽按钮，进一步增大它们的点击区域，让用户点得更爽。
5. 别藏了，快出来：确保重要内容可见
用户看不见的东西，就等于不存在。把功能藏在交互菜单后面，确实能让界面看起来干净又极简，但这招很危险，因为总有人会错过这些被藏起来的宝贝。如果空间允许，就尽量把重要的内容和操作在需要的时候直接展示出来。
在我们的案例中，为了让设计看起来不那么乱，一些操作被藏在了一个交互菜单里。虽然看起来是挺干净简洁的，但风险就是，有些用户可能根本发现不了这些操作。既然有足够的空间来展示"分享"和"收藏"这两个操作，那就把它们亮出来，确保它们不会被错过。
6. 字间距微调：给大号文本"瘦瘦身"
想让大标题看起来更顺眼？有个小诀窍：减小它的字间距（字母之间的空隙）。具体减多少，取决于字体和字号，但总的来说，字号越大，字间距就应该减得越多。
这是因为很多字体在设计之初，就是为了在小字号的正文中阅读的。它们被称为"正文体"，天生字间距就比较宽，为了在小尺寸下更容易辨认。但对于那些"展示体"字体，你可能就没必要减小字间距了，因为它们就是为大字号而生的，通常字间距本来就比较紧凑。
在我们的案例中，我们减小了人名字体的字间距，纯粹是为了让它更好看。
7. 色盲警告：不要仅靠颜色作为指示器
千万别只用颜色来传达信息或区分视觉元素，因为那些视力不佳或色盲的用户可能根本看不出你的"良苦用心"。记得要用额外的视觉线索来区分界面元素。
在我们的案例中，有两处地方可能会让人迷惑。咱们来把它们弄得更清楚点。
如果你看文章列表上面的那三个标签页，可能不太容易看出"文章"是当前选中的。这是因为只用了一种非常微妙的颜色差异来表示选中状态。给选中的标签页加个下划线，一下子就清晰明了了。
同样地，在底部导航栏，也是用微弱的颜色变化来区分选中和未选中的图标。为了让它更明显，我们把选中的图标变成了实心填充样式。
8. 对齐强迫症：尽量避免使用多种对齐方式
你用的对齐方式（左对齐、右对齐、居中对齐）种类越多，界面看起来就越复杂、越乱。我们的眼睛被迫更辛苦地工作，因为它要跳来跳去地去跟随每一种对齐方式。当在一个小组件或界面的一小块区域内使用多种不同的对齐方式时，这个问题就更突出了。
坚持使用单一的对齐方式（或者尽可能少）有助于简化界面，让它看起来更整洁、更利落。
在我们的案例中，标签页是居中对齐的，而页面上其他大部分元素都是左对齐的。这种混合对齐增加了不必要的复杂性，导致认知负荷（使用界面所需脑力）轻微增加。把标签页也改成左对齐，能让整个界面清爽不少。
9. 文本也要亮：确保文本对比度至少为 4.5:1
为了确保视力有障碍的用户也能清楚地阅读文本，它需要满足以下 WCAG 2.1 AA 级的对比度要求：
- 小号文本（18px 及以下）需要至少 4.5:1 的对比度。
- 大号文本（粗体超过 18px 或常规体超过 24px）需要至少 3:1 的对比度。
在我们的案例中，未选中标签页上的小号文本对比度不足。换个深点的灰色，对比度就达标了。
10. 断舍离：考虑移除容器以简化界面
把信息拆分成一个个相关的元素小组，有助于构建和组织界面。这能让用户更快、更容易地理解和记住内容。
你可以用下面这些方法来给相关元素分组：
- 把相关元素放在同一个容器里
- 让相关元素靠得近一些
- 让相关元素看起来相似
- 让相关元素在一条线上对齐
使用容器是分组最强的视觉提示，但它也可能增加不必要的混乱。多找找机会用其他分组方法，它们通常更微妙，能帮助简化设计。
在我们的案例中，每篇文章周围的容器都是多余的，因为已经用了好几种其他的分组方法了。去掉这些容器，还能给内容腾出更多空间。
11. 字重从简：只用常规和粗体两种字重
Just because there are lots of font weights available in a typeface, doesn't mean you need to use all of them in your UI designs. Using lots of different font weights can add noise and clutter to your interface. It also makes it more difficult to use each font weight consistently.
Keep your design system simple and concise by using regular and bold font weights only. Some typefaces have a semi-bold font option that you can use instead of bold if bold is too heavy.
Quick usage tips:
- Use bold font weight for headings to emphasise them.
- Use regular font weight for other smaller text.
- If you decide to use very thin or thick font weights, reserve them for headings and larger text, as they can be difficult to read at smaller sizes.
在我们的案例中，文章详情部分用了 3 种不同的字重。虽然"极细"和"纤细"这两种字重的对比度都超过了 4.5:1 的要求，但对某些人来说，这些字可能还是看得费劲。把字重增加到"常规"，既能提高可读性，又能简化设计。文章标题用个"半粗体"，就能让它在众多信息中脱颖而出，成为最靓的仔。
只用两种字重，就得到了下面这个设计。咱们应用这些 UI 设计技巧的进展不错，但别急，还有几个小毛病要修理一下。
12. 一致性是亲妈：所有元素都得是一个妈生的
UI 设计中的一致性，意思就是相似的元素，长相和脾气都得差不多。这不仅在你自己的产品内部要做到，跟那些已经混出头的成熟产品比，也得有这个觉悟。这种可预测的功能，能大大提高可用性，减少用户犯错，因为大家不需要一遍又一遍地去学习新东西怎么用，省心！
在我们的案例里，每篇文章的图片都是直角，这跟按钮和图标的圆角风格简直是"异父异母的亲兄弟"，看着别扭。把图片的角也弄成圆角，就能创造出更统一的视觉语言。你可能觉得这种小细节无所谓，但正是这些细节的累加，才让一个设计最终感觉"对味儿"。
13. 极简≠简单：别被"少即是多"给忽悠了
极简不等于简单！设计师们总有一种偏爱极简界面的倾向，因为它们看起来确实漂亮又干净。但一个极简界面，只是元素和样式少，不代表它就一定容易理解和使用。
极简界面常常因为缺少提升可用性的关键细节而显得模糊不清，让人迷惑。简化，可不仅仅是做减法。删减或隐藏太多东西，会严重损害可用性。你必须确保，自己没有把那些至关重要的信息或细节给"咔嚓"掉。
在我们的案例中，底部导航的图标看起来干净又极简，但它们的意思真的清楚吗？对所有人来说，可能并非如此。给图标加上文字标签，就能确保大家都能明白它们是干啥的，特别是对于那些使用屏幕阅读器（一种通过语音或盲文向视障用户描述界面的软件）的用户来说，这至关重要。
14. 图文并茂的艺术：平衡好图标和文字这对 CP
当把图标和文字配对使用时，要尽量确保它们的视觉"分量"差不多，这样看起来才更平衡、更有整体感，像一对和谐的 CP。
在我们的案例中，底部导航里的图标和文字组合就有点失衡。虽然图标和文字颜色一样，但图标更粗更大，显得更"抢镜"。把文字颜色加深，就能增加它的视觉分量，跟图标达到平衡。顺便把文字对比度提高到至少 4.5:1，也保证了低视力用户的无障碍访问。
大功告成！
就靠着这么几个简单直接的 UI 设计技巧，咱们就把案例界面里的一堆问题给找出来并解决了。当然，如果你有需要，还可以更进一步，调整视觉风格来匹配特定的品牌个性。不过在这个例子里，咱们的重点是把基础打扎实。
我希望你现在开始意识到，UI 设计没必要让人觉得压力山大。虽然它有时候看起来像一门只有天才才能掌握的神秘艺术，但实际上，大部分优秀的界面设计，都植根于像你在这里学到的这些清晰、合乎逻辑的准则。
依靠客观的准则，而不是主观的"我觉得"，能让你更容易（也更快）地设计出直观、无障碍且视觉上精致的界面。你练习使用这些 UI 设计技巧越多，它们就会越自然地融入你的设计流程。把它们当作你的基本功，然后大胆地去探索、去实验，在此基础上尽情发挥你的创造力吧！