有手就会的 UI&UX 小技巧（第3篇）

▲点击 "TCC翻译情报局" 关注，回复 "社群" 加入我们

本文共 2994 字，预计阅读 8 分钟

TCC 情报局的 第 191 篇 干货分享

2023 年的 第 20 篇

TCC 推荐：大家好，这里是 TCC 翻译情报局，我是李泽慧。在做界面设计时，往往细节决定成败。好的细节往往可以起到“四两拨千斤”的作用，让你的设计档次大幅提升。今天我们就来看看web设计中有哪些好用的小技巧吧～

当你在为项目创建高效、无障碍、美观的UI界面时，有时候只需要一些小小的调整就可以快速改善你的设计。

在这篇文章中，我收集了一些易于投入实践的小技巧，只需要付出一点点努力，就可以改善你的设计和用户体验。

1.想要说得不那么正式？用全小写吧。

1.Want to speak in a more informal tone? Try going all lowercase.

使用较大的字重和大写字母会让人感觉有点过于正式，而且有时会嘈杂。尝试使用全小写字母和更轻的字重。在设计某些项目时，这可以呈现出更非正式、友好的信息。

2.用字重、字号和颜色来表现文字层级

2.Use weight, size, and colour to indicate hierarchy within your type.

当设计文字时，所有元素不需要总是喊着说“快看我，快看我”。它们需要一个合适均衡的层级结构。只需要通过字重、字号和颜色的细微调节，就可以达到这个效果。这可以让用户在快速扫描后找到最重要的元素，避免过程中的出现疑惑。

3.深色背景上的亮文本？增加字重可读性更佳

3.Light Text on dark? Fatten up that font-weight for the best legibility.

当把深色文字放在亮色背景中时，你可以偶尔尝试一下选较轻的字重。但是，当情况反过来的时候，即亮色文本放在暗色背景时，你应该考虑加重一点字重，特别是对于那些长篇幅的文本。以此来达到最佳的可读性，并避免用户的眼睛疲劳。

4.选择合适的字体来创建正确情绪反应

4.Create the right emotional response with your typeface choices.

尝试为你要呈现的内容选择合适的字体。用户们都很聪明，他们有一种直觉，知道什么时候内容在与他们交谈，什么时候不是。选择正确的字体是使你的内容直接与他们对话的关键，且是在情感层面的。

           （右边的案例，用更加浑厚稳重的字体，配合营造出“工作-生活”平衡的稳重感）

5.如果你不得不使用多种字体，坚持最多2个原则

5.If you (have to) use multiple typefaces, try to stick to the 2 max rule.

对我来说，只要有可能，我就会尽量坚持只使用1种字体的原则。但是，如果项目实在需要（多种字体），我建议将这些字体进行组合并控制数量最大为2。对于经验欠缺的人来说，很好地组合字体是比较困难的。放轻松点，但不要因为你可以加就随意加另一种字体。最多使用2个，然后结合字重、字号和颜色，瞬时就可以为你的设计带来视觉和谐。

           （右边的案例，控制字体数量最多2个，并调整字体属性来达到视觉和谐）

6.全大写字母+字母间距=更佳可读性

6.All-Uppercase + Letter-Spacing = Better Legibility.

正在用全大写字母处理短行文字？为这些字母增加间距是一个为用户创造更佳可读性的好方法。这样做可以使单词更容易阅读和处理，因为字母的区别更大。只需要略微增加字母之间的间距，就能提高可读性，并为你的大写字母字体增添一些亮点。

7.设计元素保持一致性

7.Be consistent with your design elements.

我们是习惯性的生物，总是期望产品以我们所熟悉的方式呈现。我们期望在浏览一个网站或者 app 时整体能够保持一致，这也是一条需要执行的基本设计原则。

在布局、图标、颜色和按钮以及其他方面需要做到这样。保持一致性，减少困惑，改善用户体验。

           （右边的案例，圆角保持一致）

8.大方地使用留白

8.White Space. Use it generously

留白是负空间。但同样的事物，也能有不同的意义。我的建议是，大方或适度地使用它，但是也要用好它。

在你的设计中添加留白是快速改进它们的最简单方法之一，让你的作品有呼吸感，并看起来更优雅。

9.为开头段落设计风格，吸引用户

9.Style that opening paragraph, and draw the user in.

如果你在处理长篇幅的内容，例如博客推送或文章，吸引读者进入内容至关重要。要做到这点，开头段落的外观几乎与内容本身一样重要。一些简单的调整，诸如不同的字号、行高、字重和颜色，就可以有更好的第一印象。

10.为扫读者设计，用短段落

10.Design for scanners. Use short paragraphs.

在处理长篇幅的内容时，尝试将段落变得简洁会很实用。我们现在都是扫读者，希望尽可能快地消化信息。尽可能用简短、清晰的段落来呈现你的文案，是令你的信息更好地被用户阅读和消化的可靠方法。

11.定义调色板，在设计中创造统一性

11.Define a colour palette, and create uniformity in your designs.

想要创造出看起来更专业的UI界面？定义你的调色板！不要用大量的随机颜色选择来填充你的设计。从开始就创建一个好的调色板，并坚持使用。这样子可以避免（选择颜色时）头痛，为你的设计增添统一性。

12.用8pt网格系统统一布置你的图标

12.Lay out your icons consistently when using the 8pt Grid System.

（例如：16×16, 24×24, 32×32等）。只有偶尔，才并非如此。如果不是特殊情况，确保任何插入到你的设计中的图标，都要放在一个8pt网格值（例如24×24）的容器内。这样做可以让你的图标在设计中得到一致的布局。

希望通过这些小技巧集，你能够认识到即使是设计中一些小小的调整，都可以对你和你的用户产生很好的结果。

往期精选文章：

​

​