细节提升！设计师必须注意的18个UI设计小技巧

在创建高效且美观的 UI 设计时，您可能只需稍作调整即可快速改进您的设计。

本文总结UI设计师从实践中学到的设计技巧。

01. 用好装饰元素

在不影响用户体验的情况下，我们可以添加一些装饰元素。比如以下案例：

显示原本不需要的字符“Tip 02.”的示例。通过将文本颜色设为浅灰色，可以很好地表达层次。

02.区分UI设计元素

按钮和通知。虽然两者都是独立的元素，但它们对于 UI 设计来说是必不可少的。

如果可能，我们希望用户在访问网站或应用程序时能够快速直观地进行识别。

在大多数情况下，按钮优先，所以让它们成为屏幕上最突出的项目，这样你就可以轻松地将它们与通知等其他元素区分开来。

左：按钮和通知具有相同的设计 ； 右：只有按钮被着色以使其脱颖而出

03.轻微阴影

许多网站使用的阴影在适度使用时可以成为您设计中一个微妙而有效的视觉效果。

但是，这里的重点是使用它“非常少（英语：Subtlety）”。

左：鼠标悬停时阴影太强 ； 右：使用极少量更细腻的阴影

04.注意大写英文字体

你会经常在你的设计中使用大写英文字体。

通过将大写英文字体应用于特定文本元素，您可以将它们与设计中使用的其他文本元素区分开来，并具有视觉增强效果，让您形成鲜明对比。

使用大写英文字体时，请选择具有粗竖音和粗细的字体，以便用户更容易理解。

左：使用细字体难以阅读 ； 右：通过使字体更粗来提高可读性

05.突出面包屑路径，让用户更容易理解

在内容量大的网站上使用的“面包屑路径”，只需进行一些调整，您就可以快速确定您的网站在哪里以及您需要去哪里。

上：显示页面为小字，难以理解，难以判断是否为链接 ； 下：显示页面为粗体，每个链接都有下划线，更容易理解您所在的位置。

06.使用高饱和度的颜色时，调整色调和颜色。

饱和颜色（亮蓝色、红色、绿色等）在网站上看起来很棒，但过度使用可能会让用户的眼睛感到疲劳，尤其是对于包含大量文本的内容。

考虑到眼睛疲劳，在高度饱和的颜色中考虑“色调”和“颜色”，并考虑柔和的颜色组合。

使用这种方法，您可以专注于明亮的颜色，将最重要的内容推到最前面，让用户的眼睛休息一下，而淡色则不明显。

但是，请记住，在决定配色方案时，可读性、易用性和可访问性应该是最重要的。

07.使用熟悉的UI图标，避免混淆用户

在您的设计中添加图标时，请务必选择用户流行和熟悉的现有样式。

独特的图标可能会让用户感到困惑和难以识别，因此请选择能够传达正确含义和功能的图标。

左：用户难以理解动作的图标 ； 右：用户可以明确知道点击时会发生什么的动作

08. 接近原则

“接近”基本设计原则是创建用户友好 UI 的关键。

左：排列不连贯，信息难以理解 ； 右：通过缩小文本之间的距离，相关性变得更容易理解。

09. 4pt基线网格+8pt网格

使用文本文本时，您可以将 4pt 基线与流行的 8pt 网格相结合，将更和谐的垂直节奏融入您的设计中。

字体应为基线 4pt，行高应设置为 4 的倍数。

“4”的原因是到目前为止以 8 的倍数进行缩放使得难以用于某些文本大小。

以 4 的倍数设置 line-height，易于阅读。

10.缩小标题的行距

对于包含少量字符的标题，尝试缩小行距，而不是长文本，后者需要足够的行距以提高可读性。

标题推荐的行距通常是文字大小的1～1.3倍，文字越大，行距越窄。

左：行与行之间距离过远 ； 右：缩小行与行之间的空间使其更易于阅读

11.配色困难时，请选择相似色

相似色（英文：Analogous Colors）是配色方案中最和谐的基本原则之一，对于那些很难选择自己想要的颜色的人来说，这是一项有用的配色技巧。

在色轮上选择的主色两侧添加颜色的配色方案简单易上手，当你想快速决定颜色时也很方便。

按钮使用的颜色更改为类似的蓝色和紫色，给人一种统一的感觉。

12. 减少不必要的信息

通过最大化相关信息（信号）和最小化不相关信息（噪声），您可以提高设计的清晰度和可用性。

去掉不必要的东西，让你真正需要的信息越来越清晰。

左：信息多，设计难懂 ； 右：减少不不要的信息，看起来整洁。

13.适当英文小写表达轻松气氛

粗字体和大写英文字体可以给人一种略显正式和巧妙的印象。

在处理特定项目时，使用所有小写英文字体可以传达更随意和友好的信息。在图像上叠加文本时，不要忘记使用颜色叠加来创建更清晰的对比度。

左：大胆而略带杂乱 ； 右：小写字母使其更加友好和随意

14. 使用粗细、大小和颜色来阐明文本的层次结构

使用排版文本时，您不必专注于每个元素。但是，您需要有一个平衡的层次结构（Hierarchy）。

为此，稍微调整字体粗细、大小、颜色等。这将帮助用户找到他们需要的元素并避免迷路。

左：使用所有相同字体和粗细字体的示例 ； 右：根据元素调整字体大小和粗细，使其更易于阅读

15. 深色背景上的粗字体

设置具有明亮背景颜色（例如白色）的文本时，您可以减少字体粗细。

但是，如果您有黑色等深色背景色，请尝试稍微增加字体粗细。它对长文本尤其有用，它的设计强调可读性，不会让你的眼睛感到疲倦。

左：文字较细，难以阅读；右：字体较粗，便于阅读。

16.选择合适字体

选择适合内容字体对于 UI 设计很重要。就像您在与用户交谈一样，选择正确的字体是一种直接触及用户情绪的技巧。

左：精致奢华的设计不符合“家庭娱乐”的内容 ；右：粗体无衬线字体匹配得很好

17.使用多种字体时，最多使用2种字体。

如果可能的话，我想遵循只使用一种字体的规则，但如果有必要，建议最多使用两种字体组合。

即使是专业设计师也发现很难很好地结合字体，尤其是对于没有经验的人。

您可以通过将最大字体限制为两种并结合粗细、大小和颜色来创建和谐的设计，而不是不加思索地添加字体。

左：所有元素的字体是脱节的；右：字体是统一的，并调整了权重，给人耳目一新的印象。

18.大写英文字体+宽字符间距=更好的可读性

如果您使用只有大写字母的英文字体（导航菜单等），请尝试扩大字符之间的距离。

这使得区分字母变得更容易，使单词更易于阅读和处理。

仅仅通过扩大字母之间的间距，就可以提高可读性，营造时尚时尚的氛围。

左：大写字体的字符之间的空间被堵塞；右：字符之间的宽阔空间更易于阅读并营造出时尚氛围。