网页设计设计理论（纯干货），看这一篇就够了

时间：2023-10-03 20:36:01 | 来源：网站运营

时间：2023-10-03 20:36:01 来源：网站运营

网页设计设计理论（纯干货），看这一篇就够了：

这两天正好接了一私单，钻研了一下网页设计，也和业内大佬做了很多探讨，得出以下结论，分享出来（有点长，请耐心看完）：

看不见的力：间距和形状（排版及结构）

您的“数据/墨水”比率

留意使用空白越多，“数据/墨水比率”越高。这是信息设计大师Edward Tufte提出的概念。这是每滴墨水（或者在移动和网页设计的情况下）每一个像素传递多少信息的函数。

左侧的图形比右侧的图形具有更高的数据/墨水比。图形是否真的需要用“墨水”填充？不，它可以与点和线很好地通信。

如果您更进一步，然后删除线，只留下点，该怎么办？

现在，沟通破裂了。是的，您可以看到所有数据点，但是现在您已经失去了有关数据如何随时间变化的“故事”。另外，很难与简单的散点图区分开来，在散点图中，“时间”不是变量之一，数据也不是线性的。

认为更接近的项目是相关的

我们了解了元素的对齐方式如何暗示这些元素之间的关系。同样重要的是这些元素之间的距离如何。

这只是一个简单的正方形网格，就像地板上的瓷砖一样。

但是，如果在正方形的垂直行之间创建更宽的水平间距，则现在有一系列。

因此，当上图中的数据发生急剧变化时，大脑可能会想以错误的顺序连接点，因为一个点与另一个点更近。

将空白用于干净的布局

这些原理超越了线形图。它们存在于您设计的所有内容中。尤其是在为小屏幕设计时，您不希望浪费像素，而是要设计具有高数据/墨水比的设计。

设计人员倾向于使用网格来帮助组织布局中的信息。网格有助于对齐元素（例如文本行），然后创建彼此相关的信息区域。

这是在网格上设计的基本布局。左侧是导航，较大的区域包含主要内容。

这种布局很好，但是请注意导航之间的空白与主要内容区域内的文本列之间的空白是相同的。

稍微扩大导航区域和主要内容区域之间的装订线是有意义的。

现在，导航和主要内容之间有了更清晰的界限，我们要做的就是添加一些空白。

使用空格进行清晰的排版

我们了解了大小调整是可用于创建印刷层次结构的众多因素之一。空格也可以帮助您组织排版。

例如，查看此标头，元数据和正文。

由于它们的尺寸是从不同的比例中选择的，因此它们之间具有和谐的尺寸关系，但是它们看起来很草率！

问题是没有考虑这些元素之间的负空间。

元数据行已经与标头很好地区分了：它的大小不同，大小写都大，甚至间隔很小。

一个很棒的技巧是使用元数据类型的高度来确定它与标头之间应该有多少空间。像这样：

通常，您会用眼球找出此间距。没有数学方法可以准确地告诉您多少间距。它是行高，使用的边距或填充量以及特定字体的特征的函数。

现在，那个身体副本怎么样？

元数据确实非常靠近标头是有意义的，但是标头不必太靠近正文副本。实际上，标头和元数据可以是它们自己的单元。

您可以使用从标题顶部到元数据底部的距离作为指导，并将该距离的一半放在元数据和正文之间。

结论

通过考虑如何塑造布局并与空白空间进行交流，您的设计将看起来更清晰，更清晰，同时更加实用，并且转换效果更好。

---

看不见的力：大小，对比度和平衡

更大的东西看起来更重要

显而易见，当您将元素放大时，它看起来比较小的元素更重要。

但是，这需要与影响视觉层次的其他因素一起考虑。例如，这两个元素具有相同的重要性级别，因为它们的大小相同：

如果有的话，您将在看到底部元素之前先看到顶部元素。

但是，如果将底部元素设置为大于顶部元素，它将显得更为重要。

但是，其他因素，例如视觉重量（您使用的是粗体还是浅色字体）或颜色对比，可能会逆转较大尺寸的效果。

在此插图中，较轻的元素看起来不那么重要，即使它更大。

但是，仅通过给相同的插图提供深色背景，现在，较轻（和较大）的元素就占了主导地位，这要归功于它与较小元素相比对背景的反差更大。

进行有意义的尺寸更改

尤其是在设计当今时代的小屏幕时，您应该有目的地使用尺寸更改。如果没有必要的话，将字体变大（从而占用宝贵的屏幕空间）毫无意义。

只要有可能，您都可以使用上述因素来更改视觉层次，但是迟早需要使一件事比另一件事大。只是不要随便做。

看一下这些不同的元素，每个元素都比前一个更大。

现在，对您来说更清晰地读：是该布局还是该布局？

第二个示例中的元素是根据变化的比例来确定大小的。每个字体大小都与下一个最小大小相关，并且与较大字体具有相同的数学关系。

可变比例的字体大小彼此之间成比例关系。比例有助于使设计的各个部分看起来像它们属于一起。

您可以在MailChimp徽标中看到实际的比例。

构成黑猩猩特征的每个圆圈彼此之间的相关系数是0.75。例如，组成腹部的圆是组成身体的圆的0.75。设计此徽标的公司Hicks Design是故意这样做的！

不要一味崇拜黄金比

你们中的许多人可能正在考虑所谓的“黄金比例”，该比例大肆宣传。黄金比率约为1：1.618。是的，如果黑猩猩建立在黄金分割率的基础上，它仍然会很有吸引力，但是从客观上讲，它不会更具吸引力。尽管进行了大肆宣传，但没有证据表明“黄金比例”比其他受欢迎的比例（例如.75或.67）更具吸引力。

为了说明这一点，我曾经对我的电子邮件列表进行过调查，以了解他们发现上述哪个矩形更具吸引力。其中一个是正方形，另一个是0.75矩形，另一个是0.67矩形，另一个是“金色”矩形。哪个矩形对您最有吸引力？

以下是民意调查结果：

• 左上（平方）：8％
• 右上角（3：4矩形）：29％
• 左下角（2：3矩形）：37％
• 右下角（“黄金”比例）：25％

如您所见，所谓的金色矩形效果非常好，但它并不是最吸引人的矩形。

在这种情况下，2：3矩形会获胜，但请不要过多阅读。关键是，从黄金分割率到3：4的任何事物都将比正方形更具吸引力。

您可以使用这方面的知识，让您排版美观，而且节省时间，如果你与你的排版预先设置不同的规模运行。

例如，这些是我一直使用的字体大小。每个尺寸大约是先前尺寸的0.75（略有四舍五入）。

使用.75刻度而不是黄金分割比例的附带好处是，数学在您的脑海中变得容易得多：16％的75％是多少？简单！16的61.8％是多少？嗯

结论

通过考虑您所做的尺寸更改，您的设计将变得更清晰，更清晰，同时更加实用，并且转换效果更好。如果使用不同的比例，实际上可以更快地进行出色的设计！

---

隐形力：对齐，方向和焦点

设计充满了“无形的力量”，所有这些都有助于进行清晰清晰的沟通。如果您不愿意只获得正确的字体或只选择正确的颜色组合，那么如果您不注意这些看不见的力量，您的设计就会惨败。

这是关于这些力的由三部分组成的系列文章中的第一篇，因此让我们从对齐，方向和聚焦开始。

介绍“元素”

要真正地通过设计的无形力量来思考，您需要停止将设计视为字体，颜色，图像和文本，而开始将所有这些事物视为“元素”。

您的每个标题都是一个“元素”，正文的每个段落都是一个大的“元素”，每个图像都是一个“元素”。

在每个元素中都有另一个元素-您也可以将它们称为“子元素”。您的徽标可能具有“符号”元素和“文本”元素。文本部分中的每个字母都可以视为自己的元素。

所有这些元素讨论都让我想到了化学课（我从没参加过），但这实际上是适当的。当您正确排列元素时，您会从页面跳出爆炸性的东西。当您随意安排它们时，您会感到很傻。

对准

设计具有挑战性，因为您必须占用无聊的二维空间，并使其有趣，同时还要清晰地进行交流。尤其是在今天，对于微小的可移动屏幕和可穿戴屏幕，尽可能高效地执行此操作很重要。每个小像素都需要做好工作。

这就是为什么对齐如此重要的原因。通过使元素彼此对齐，您可以说很多话。

例如，这些正方形全部对齐。

而且，如果我们改变对齐方式，则会完全改变构图。

而且，如果我们打破这种一致，那就显得混乱了。

如果我们使用社交媒体图标代替正方形，则可以直接看到对齐方式如何变得有用。

方向

对齐元素时，可以用假想线创建方向感。真正的幻想设计师将这条假想线称为“轴”。可以将其视为车轮上的轴：车轮的所有重量都围绕该轴旋转。必须保持平衡。同样，轴有助于控制合成物的平衡。

看到所有排列的元素了吗？您可以将它们称为此合成的轴。

如果在该轴附近对齐其他元素，它仍将主导并控制构图。

您可以排列文本：居中，向左齐平或向右齐平（避免在Web上对齐字体），然后沿该对齐方式创建一个轴。

将文本居中时，将创建一个轴，文本的所有粗细都围绕该轴旋转。其余的构图也希望以该轴为中心。

因此，如果您在居中的文本旁边扔一些齐平的左文本，则该组合开始变得混乱。现在您有两个互相对抗的轴，这不是一个可怕的想法吗？

例外情况是居中对齐的元素跨构图的宽度，并且向左平移或向右平移元素在该构图内。这样，轴就不会互相打架了。

请注意，两列内容都设置为向左对齐。

或者，您可以通过使一列向右平移而另一列向左平移来在排水沟外创建轴。

焦点

到目前为止，我一直专注于垂直轴。您也可以有水平轴（或对角线，但这在Web和移动设计中很少见）。

当两个强轴相交时，通常会创建一个焦点区域。眼睛自然会跟随任何强轴，因此如果两个轴相交，则眼睛将在该位置花费大量时间。

在网络或移动设计中的任何给定时刻，您可能都希望用户集中精力，因此您可以使用相交的轴来吸引对该点的关注

结论

通过使用对齐来构建轴，控制方向并建立焦点区域，您可以更好地实现您的设计目标：是提高可读性还是推动转换。

---

这便是网页设计关于排版的理论，希望能助您一臂之力~奥利给