成为更优秀的前端开发人员的 5 个 UI 技巧

1. 保持一致

2. 内容间隔开

3. 颜色和对比度

4. 排版

5.视觉层次

结论

感谢阅读

新手刚开始使用应用程序时，常常会遇到难以创建引人入胜的用户 界面，让用户沉迷其中的问题。今天，我们将解决这个问题。

但在开始之前，我想指出的是，设计没有唯一正确的答案，任何能让大多数人赏心悦目的设计都被认为是好的设计。在本文中，我们将介绍5个被认为是良好设计实践的技巧。

1. 保持一致

很多网站遵循不一致的对齐方式，导航栏和网站的主要内容采用不同的对齐方式。这导致网站看起来像这样：

下面的例子看起来更加结构化：

2. 内容间隔开

随着你开发网站的经验越来越丰富，你自然而然地会注意到这一点。正如你所见，内容更分散的网站看起来更专业。

注意：更大的间距并不总是必需的，例如，在博客网站中，标题和日期之间只需要很小的间距即可。

与上一点密切相关，保持一致的间距：左侧和右侧的填充/边距应该相等，顶部和底部的填充/边距也是如此。

3. 颜色和对比度

颜色是设计中不可或缺的一部分，也是开发现代UI时需要牢记的最重要的因素。如果没有合适的颜色和对比度，即使是拥有最佳UI 的网站最终也会看起来很糟糕。只需更改颜色，您就可以在下图中看到显著的改进：

您可以使用Coolors之类的工具来生成相互协调的颜色。建议将使用的颜色数量限制为两种（您可以使用相同颜色的不同色调以及一些通用颜色，例如白色、黑色和灰色）。

对于Web 可访问性，WCAG 2.0 AA 级要求普通文本的对比度至少为4.5:1 ，大文本的对比度至少为3:1。WCAG 2.1要求图形和用户界面组件（例如表单输入边框）的对比度至少为3:1。WCAG AAA 级要求普通文本的对比度至少为7:1 ，大文本的对比度至少为 4.5:1。

要检查您的网站的可访问性，您可以使用Lighthouse（来自Chrome Dev Tools）和Wave等工具。

4. 排版

在整个网站上，你可以轻松地只使用一种字体系列。你应该尽量将字体系列限制为两种，因为使用多种字体很容易让用户感到不知所措，甚至会让网站看起来结构混乱、不够专业。

5.视觉层次

视觉层次结构也是出色UI的最关键组件之一。一位伟大的开发人员曾说过这样一句话（阅读：我😜）：

优秀的开发人员能够让隐含的操作变得显而易见

视觉层次结构用于突出显示网站中您希望用户关注的某些部分。您可以采用多种策略来让用户专注于网站的某个部分。

没有焦点

利用对比聚焦

使用颜色聚焦

使用比例尺聚焦

使用对比度、颜色和比例来聚焦

视觉层次结构为用户提供他们应该查看的信息

在这个例子中，我们一眼看去并不清楚应该把注意力集中在哪里。只需进行一些细微的修改，就能轻松改善这个问题：

结论

在本文中，我们探讨了一些UI概念，它们能帮助你开发更具吸引力的UI。我想提醒你，UI设计非常主观，正如简介中所述，没有唯一正确的答案。希望你能将这些概念运用到你的应用程序中，打造出令人惊艳的网站 :)

感谢阅读

需要一位顶级软件开发自由职业者来解决你的开发难题吗？在Upwork上联系我

想看看我正在做什么吗？查看我的个人网站和GitHub

想联系我吗？请在LinkedIn上联系我

关注我的博客，每两周在Medium上获取最新资讯

常问问题

这些是我经常收到的一些问题。希望这个常见问题解答部分能解决您的问题。

1. 我是初学者，该如何学习前端 Web 开发？
   可以参考以下文章：

   1. 前端流行语
   2. 前端开发路线图
   3. 前端项目构想
   4. 从初学者过渡到中级前端开发人员

2. 你能指导我吗？
   
   抱歉，我工作已经很忙了，没时间指导任何人。