原文作者 Marc Andrew ：设计师，讲师，为 Figma 创建了 Cabana 设计系统

——

UI & UX 小技巧（一）>点这里

6种小技巧，立即改善你的设计。

当你在设计高效、易用、漂亮的 UI 界面时，一些看似微不足道的细小调整就可以明显提升你的设计质量。

有时，只需简单的调整就可以设计出让客户、用户和你自己真正满意的作品。

在这篇文章中，我列出了一些细小的、易于实践的小技巧，只需用很少的成本，就可以改善你的设计和用户体验。

· · ·

UI & UX 小技巧（二）

1. 在你的用户界面中使用既定的图标，以避免用户认知混乱

当在你的设计中添加图标时，尽量选择一个已经（在很多 App 中使用的）公认的图标，来表示即将采取的行动。

选择一个能传达正确含义和功能的图标，否则会引起混淆，并成为用户的认知障碍。

不要让你的图标过于个性化。

· · ·

2. 使用接近原则来表示各元素之间的关系在许多久经考验的设计原则中（如对比、空间、重复等），其中有一条是你能否设计出清晰易懂的UI的关键。

接近原则

接近性仅仅是确保相关的设计元素被放在一起的过程，表示彼此之间的关系，这有助于加快用户在快速浏览你的 Web 或 App 时的认知速度。

• · · ·
• 
  

3. 4pt 基线网格 + 8pt 网格 = 和谐的垂直节奏

当 UI 设计中使用字体时，使用 4pt 单位的基线和永远通用的基于 8pt 倍数的网格可以让页面的垂直排列更和谐。

你需要将你的字体对准4的基线网格（Baseline Girid），使用 4 的倍数的行高（line-height ）值（如 16、20、24、28等…）

为什么是 4？因为我发现过去在处理特定的文本尺寸时，以 8 的倍数进行缩放并不够用。

4pt 基线网格 + 8pt 网格 = 舒适的垂直和谐。

· · ·

4. 减少标题的行高是不错的选择

相对于需要足够的行高（line-height）以提高可读性的长篇正文，标题通常要短得多，所以你可以把标题的行距设置的相对小一些。

建议标题的行高通常是文本大小（字号）的1到1.3倍，你的字号越大，你需要增加的行高就越少。

调整一下你的标题行高吧。

· · ·

5. 在挑选颜色方案方面有困难？在色轮上挑选类似色

类似色，也被称为相似色，是最和谐的配色方案之一，如果你在挑选颜色时遇到困难，类似色可以帮助你很好地进行搭配。

一组由原色、次色和第三色组成的相邻色调可以帮助你快速创建一个简单、无懈可击的配色方案。

当你需要尽快得出一个和谐的配色方案，可以采用类似色。

· · ·

6. 试着在你的设计中尽量提高信噪比（Signal-to-Noise）

你可以通过最大化信号（有用的信息）和最小化噪音（无用的信息）来实现设计的清晰性和可用性，从而提高产品的信噪比。

你可以通过有效地呈现相关信息（信号），并减少或完全消除不相关的信息（噪音）来实现这一目标。

删掉多余的内容，让信息展示更清晰，提高你的信噪比。

· · ·

7. 想用更非正式的语气说话吗？试试全部采用小写字母

使用较粗的字重和大写字母，偶尔会显得有点过于正式和强烈。

尝试选择全小写字母和较细的字重。

在特定的项目中，使用全小写的文案可以传达出一种更非正式、更容易接近的信息。

图片和文字之间可以使用某种颜色覆盖，好呈现足够的对比度。

· · ·

8. 使用重量、大小和颜色来表示不同元素的层级

在使用字体时，不要试图把每个部分的元素都突出显示。

他们确实需要有一个平衡的层次结构，只需通过对字重、字号和颜色的细微调整就可以实现这一点。

这样可以让用户在快速浏览时就能轻易筛选出重要的信息，避免在寻找信息的过程中出现混乱。

· · ·

9. 深色背景上使用浅色文本时，为了获得最佳的可读性，请使用较粗的字重

当在浅色背景下设置深色文本时，你偶尔可以选择较细的字重。

但是...

当情况相反时：浅色文本在深色背景上。

最好的办法是将字重增加一些，尤其是对于长篇幅的文章。

以提高可读性为原则，避免使用户的眼睛感到疲劳。

· · ·

10. 根据需要的情感反应来选择适合的字体

尽量为你所展示的内容选择合适的字体。

用户在观看内容时会有一个直观的感觉的，什么时候这种感觉和内容是相关联的，什么时候是不相关的，他们都能感知到。

正确的字体选择对于页面上的内容和他们在情感层面上的关联是至关重要的。

· · ·

11. 如果你（不得不）使用多种字体，尽量坚持最多两种的原则

对我来说，只要可以，我会尽量坚持使用一种字体的规则。

但是，如果项目需要，我建议将最多使用两种字体。

不能再多了。

对于没有经验的人来说，很好地组合字体可能是很棘手的。

不要仅仅因为你可以添加另一种字体，就使用两种字体，不要给自己添麻烦。

最多使用两种，并结合字重、字号和颜色，可以立刻使你的设计视觉和谐。

· · ·

12. 全大写字母 + 字母间距 = 更好的可读性

你是否在处理全大写字母（all-uppercase）的短行文字？

那么...

增加这些字母之间的间距会是一个好办法，可以为用户提供更好的可读性。

这样做可以使文字更容易阅读和处理，因为字母之间更容易区分了。

只需小幅增加字母之间的间距，就可以提高可读性，并为你的大写字体增加一抹亮色。

2021年4月20日

Powered by Froala Editor