2020年流行的UX/UI设计技巧「秘籍」分享（上）

创建美观又实用的用户界面需要花费一定时间，而且在设计过程中，还要进行大量的迭代与优化。通过多年来的经验累积，我发现有的设计进行一些简单、快速的调整后，就可以大大提升效果。

本指南中，我整理了2020年12个月中流行的UI/UX技巧，而这些技巧可以毫不费力地帮助我们改善设计与用户体验。

01 使用细微的边框，使元素看起来更加清晰

在某些元素周围使用多重阴影或是一个细微的边框，能使元素看起来更清晰，并帮助避免那些看起来很混乱的阴影。

02 减少标题中的字母间距，保持视觉平衡

标题通常会比正文的字号要大，字重也不同，也会使字母的间距显得较大，在视觉上会觉的很散。通过降低字间距值，使标题在视觉上更平衡易读。

03 图标视觉风格保持统一

用户界面中的图标风格，请保持一致，如相同的视觉风格、颜色和轮廓，不要混搭。

04 在设计中只使用一种字体并没有错

在创建设计时，只使用一种字体并没有坏处，这样做实际上可以帮助你的界面简洁一致。你可能会产生“是否会显得单调？”的问题，结合Weights，Sizes和Color，即便用同一种字样，用户也是可以接受的。

05 界面中巧用空白

在界面中适度地使用空白，可以让画面更有呼吸感，这是最快、最直接的设计改进方法之一。

06 创建长篇内容？尝试20pt

对于长篇内容（例如，博客文章，项目描述等），请尝试使用20pt作正文字号，当然，这也取决于具体选择的字体，不过大多流行的正文字体，在20pt时效果很好，当用户面对文字模块时也不会太糟糕。

07 使用字体比例，创造字体组

使用字体比例可以帮助你轻松实用地定义一组字体大小，Type Scale是基于比例因子（例如1.25）工作的。从基本字号18px开始，将其与比例因子相乘（或除以），以得到高层级字体（即H1，H2等）或较低层级，如字幕，按钮的注释说明。

不妨来这个网站，详细了解下字体比例——https://type-scale.com

08 选择一种底色，用色调和阴影进行统一变化

在界面中，不必用大量的颜色来填充，会造成画面花哨。如果项目允许，只需选择一个基础颜色，调整色调和阴影，效果就很棒了。

09 改善用户流程体验

使用户可以随时跳过你的开屏动画，请将“跳过”按钮放置在容易触及的范围内，也能给新用户建立不错的应用体验。

10 页面中的按钮阴影来自相同光源

确保你的按钮阴影始终来自一个光源，我发现这是设计师常犯的一个错误，虽然不大但也让整体设计有了瑕疵。

11 使用字体家族

选择困难症设计师的福音，更降低了出错率。字体家族是字体的集合，例如Serif和Sans-Serif变体，但在视觉上仍是一致的。我强烈推荐的一些是  Merriweather & Merriweather Sans 和 Roboto & Roboto Slab 你可以在Google字体库中找到。

12 叠加颜色蒙版，提升图片与文字的对比度

根据文本在图像上的位置，来测试叠加层的具体色值，也可以使用渐变叠加层（从下到上，或从上到下），以实现两者之间的简单对比，无需太复杂。

13 适度居中文本

文本居中，尽量用作标题和少量文字段落，而其他内容请左对齐。

14 多用途文字，选择多种字重的字体

你找的字体是否有大量的字重和样式？建议避免使用仅有一种样式与字重的字体。有的设计项目可能在标题上进行特别设计，但从多数情况来看，选择的字体样式尽量丰富。

15 在浅色背景上使文本变暗

在浅色背景下工作时，别使文本颜色太浅，避免增加用户的阅读成本。

16 文本色过于厚重，请使其变亮

当涉及到长篇内容时，某些常规粗体字体就显得很沉重，在屏幕上也显得很呆板。不妨试试Dark Gray（即#4F4F4F）之类的色号来淡化文本，使其在视觉上更容易阅读。

17 行为号召按钮，放在最醒目的位置

通过使用颜色对比、大小和标签，确保行为号召按钮尽可能突出。

如果可以的话，不要总是依赖Icon，使用文本标签，也能实现，还能使用户更好地理解。

原文：https://uxdesign.cc/the-ui-ux-tips-collection-volume-one-f69f0969ed17

翻译：UX辞典