11 个 Web 开发者的 UI 设计技巧

在学习网页开发的过程中，我们大多数人缺乏丰富的设计经验，也缺乏 UI 设计师的帮助。因此，我们总结了 11 个简单易用的 UI 设计基础知识，助您打造时尚现代的项目。

本文最初发布在我的个人博客DoableDanny.com上。如果您喜欢这篇文章，不妨订阅我的YouTube 频道！

1.保持一致

在上面的图中你可以看到图标有不同的样式和颜色：

• 日历图标有一些绿色和灰色轮廓。
• 锁定图标周围有一个实心橙色圆圈，并且以白色填充，没有轮廓。
• 竖起的大拇指具有细的黑色轮廓和更平滑的线条。

没有一致的主题——不同的形状、颜色、大小和轮廓粗细。

在下图中，这些图标看起来来自同一个图标集。它们都拥有简单的深灰色轮廓，仅此而已。图标的高度和宽度也相同。

在下图中，文本左对齐，图标也左对齐。我也可以把文本居中，然后把每个图标放在中心位置。两种方法都可以——关键是保持一致。

经验法则是，较长的文本（例如博客文章）应左对齐，因为这样更容易阅读。对于较短的文本，可以左对齐或居中。

2. 使用优质图像

当你 10 岁的时候，剪贴画可能很棒，但现在使用那样的东西看起来非常不专业。

您可以从https://www.unsplash.com完全免费下载专业图像并将其用于您的项目中。

3. 对比

如果背景是浅色，就用深色文字。如果是深色，就用浅色文字。很简单。我经常在网站上看到的一个问题是，人们用彩色图片作为背景，上面点缀着明暗斑点，然后在上面放一些文字。这通常很难阅读。

解决方案：

1. 使用图像叠加层。例如，如果您使用的是浅色文本，请在图像上放置一个深色叠加层（一个半透明的 div，其背景色使用 rgba 格式），并降低不透明度，使图像外观变暗，使浅色文本更清晰。记住要将文本的 z-index 设置为高于叠加层，使其位于图像顶部！
2. 选择如上图所示的图像，其中有一个漂亮的一致颜色的部分来放置您的文本。

另外，请注意导航栏中的徽标如何与文本左边缘和“开始我的旅程”号召性用语按钮垂直对齐……这才是一致性！这是打造时尚外观的关键。

4. 空白

在上图中，顶部的“SomeCompany”徽标左侧的空间比最右侧的导航链接右侧的空间要小。在下图中，我们可以看到空间大致相等。

上图中的一段文字过于靠近标题和行动号召按钮。下图中，这段文字有更大的空间。

我们还可以看到，标题与段落的距离比与徽标的距离更近。密切相关的内容应该更靠近……但不要太近。

5. 视觉层次——尺寸很重要

你的目光可能会被技巧4中图片中的“少有人走的路”吸引。显然是因为它更大，而且更醒目。颜色也可以吸引注意力，例如“开始我的旅程”按钮。

一个常见的错误是使导航徽标太大，或者导航链接的颜色太突出。

我们希望用户的注意力集中在内容上，而不是徽标和导航链接上。

6.一种字体就好！

只用一种字体就好，没必要搞得太复杂。只要避免使用“Times New Roman”（用得太多了）和“Comic Sans”（看起来太俗气了！）就行。

Nunito、Helvetica 或 sans serif 都是非常漂亮的现代字体。

如果您的设计看起来有点太无趣，您仍然可以使用第二种字体作为标题（请查看这篇博文的标题！）。

对于字体大小，段落通常为 18px 到 21px。

7. 色调和阴影

尽量使用少量颜色。过多的颜色会显得杂乱无章，不专业，尤其是在你不知道自己在做什么的时候。保持简洁。

选择一种基色，然后使用色调（添加白色）和阴影（添加黑色）进行变化。

然后，为需要突出的区域选择一种主要的“行动号召”颜色。请查看“互补色方案”。

我使用冷色来寻找互补色并获得色调和阴影。

8. 圆形 vs 尖锐

尖锐的角和边缘会吸引你的注意力。想象一下对话泡泡里尖锐的部分。

我们能用这些知识做什么呢？把按钮的角弄圆。为什么要把注意力集中到按钮的角上呢？

9. 边界已过时

在旧时代的网络里，边框随处可见。如今，最好少用边框——这样通常看起来更简洁。边框看起来可能有点过头了。

当然，不要完全反对边界，它们仍然可以用来区分事物。只是不要把它们弄得太厚，以免太引人注目。

10. 不要在导航栏链接下划线

挺老派的。没了它们看起来更干净。

为方便使用，在鼠标悬停和键盘焦点时加下划线/更改颜色或大小。

为了方便阅读，您仍然应该在正文中为链接添加下划线，这样可以清楚地看到它们是链接。但请避免在非链接文本上添加下划线。

11.下载设计软件

我以前在开始编写一个项目时，几乎完全没有规划过最终效果。我花了很长时间，反复尝试各种颜色和元素的位置，最终编写出所有代码。

使用设计软件可以更快地迭代创意。我现在使用 Adob​​eXD（免费），只需将内容拖放到位，就能快速获得一个漂亮的设计，然后准备进行编码。Figma 也很受欢迎，但不是免费的。

精彩参考

• 有说服力的网页设计心理学：https://www.doabledanny.com/persuasive-web-design
• 将糟糕的设计变成好的设计：https://www.youtube.com/watch?v= 0JCUH5daCCE&t=112s
• 精彩的 UI 技巧：https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886
• 优秀 UI 的科学：https://www.youtube.com/watch?v= nx1tOOc_3fU

如果您喜欢这篇文章，您可以通过订阅我的YouTube 频道或注册我的博客来表示感谢，以便收到新帖子的通知🙏

另外，欢迎随时通过Twitter与我联系！

感谢阅读！