前端开发人员的 3 个设计原则

您可以编写世界上最好的代码，但如果您的网站不遵循最基本的设计原则，您的应用程序或页面可能会在搜索排名、用户体验等方面失败，因此在这篇文章中，我们将深入探讨开发人员或任何其他编写网站代码的技术人员的 3 个设计原则。

嗨，我的名字是 Adrian，我是一名 UX 开发人员，已有大约十年了（是的，当我大声说出来时，这听起来很长） - 但无论如何，如果您喜欢这篇文章，请在下面发表评论让我知道。

此外，如果您愿意以其他方式使用它，我还在这篇文章上创建了一些Google 幻灯片和Youtube 视频！

1. 掌握层次结构，你就能掌握设计

层级结构是一项基本的设计原则，它能帮助浏览者聚焦关键信息。良好的层级结构能引导浏览者流畅地完成购买产品或轻松找到所需信息等流程。

图片来源 - React Material-ui Kit Pro

您可能已经看出来了，带有复选标记的版本的关键信息更加明显。

首先，页面标题要足够大，以便快速阅读项目内容。在其下方，是占据大部分空间的简要细节，这些细节是关键信息。因此，首先你需要了解你的浏览者或客户最需要什么，并使用层级结构来强调它。

因此，你可以通过把重要的东西做得更大来摆脱层次结构，但请记住，如果所有东西看起来都很重要，那么就没有什么重要了，所以要控制好字体。

充分利用这一原则的另一种方法是运用颜色，但请注意，最多使用三种颜色。一种原色（用于正文），一种间色（一种柔和的、柔和的颜色），以及一种强调色（在我的例子中，强调色用于最重要的目的，即项目应用）。

大并不一定意味着明显

在某些情况下，字体大小也无济于事。那么我们该怎么办呢？嗯，有一种叫做字体粗细的东西，如果使用得当，你的字体层次就会恰到好处。让我们看一些例子：

我想说，这些小细节能让浏览者更加清晰，这对于跳出率等指标来说非常重要，而且看起来空间也更大了。所以，下次不要只是给元素增加一些尺寸，而是可以随意添加一些额外的权重，效果会大有不同！

3. 灵活性被高估了

我们人类讨厌混乱和不确定性，所以你应该始终使用库（设计系统），或者如果项目规模不大，就自己创建一个小型库。这样，你就不用再浪费时间纠结于“我应该在这里用 13px 还是 15px？”之类的问题了。

从一开始就定义一些填充和边距，并直接使用它们，避免使用不常见的值。我通常使用 4 的倍数（8、16、24、32 等），如果某个元素的填充看起来太小，就一次增加一级，反之亦然。

我学到的一个快速技巧是，一开始元素之间的间距要很大，然后再根据这个间距进行调整。这样，你的项目就更有可能拥有更大的“呼吸空间”。

如果您确实想自己创建一个设计系统，而不仅仅是选择字体和颜色，您可能需要定义以下内容：

• 字体粗细
• 行高
• 颜色
• 边距
• 填充
• 宽度
• 高度
• 框阴影
• 边框半径
• 边框宽度
• 不透明度

...这就是为什么使用一个提供所有这些开箱即用的库听起来更好。

坚持你的排版

对排版使用相同的策略 - 即从一开始就定义一个并坚持下去，您可以使用Typescale之类的工具来减轻您选择合适的行高、大小等的努力。

如果您必须在一个项目中使用多种字体，我建议使用像Typewolf这样的字体对工具，因为您需要尝试多种字体才能找到良好的平衡，而这些人知道他们在做什么。

定义你的颜色

说到颜色，你需要的色调比你想象的要多。有时候，你需要在一个屏幕上使用三种不同的灰色，而选择色调非常困难，尤其是如果你不是设计师的话。我建议使用Material或Tailwind等系统中的颜色色调——这样你就不会出错，因为培养对良好色彩搭配的眼光需要一段时间——即使在今天，我仍然在努力寻找中性色和品牌色（强调色）之间的平衡。

3. 可读性高于一切

可读性主要由排版和空白决定，因此我们将探索一些如何使您的页面更易于理解的解决方案。

当你不确定文本应该居中还是左对齐（如果是 RTL 网站，则应该右对齐）时，经验法则是选择左对齐，这样出错的可能性更小。但以下情况看起来居中文本是个好主意。

如果您的副本足够小，可以容纳两行，则居中是有意义的，否则将上下文中的所有元素左对齐。

就这样！感谢你读到最后。

关注我：
⚡️ https://twitter.com/shpadrian

订阅我的时事通讯：
⚡️ https://devias.io