黄金比例：理解和使用它的终极指南

各地的设计师都应该了解黄金比例。 这是一个数学比率，可以创造出美观的设计。 由于黄金比例在自然界中如此频繁地存在，因此其结果看起来很自然也就不足为奇了。

Bogomil Mihaylov 在 Unsplash 上的照片

黄金比例还有其他几个名称：

• 神圣的比例
• 中庸之道
• 黄金分割
• Phi（希腊字母）

黄金比例背后的数学

我将尽可能简单地解释黄金分割率的数学原理，而不涉及您实际上不需要知道的细节。 如果你能跟上数学，那太好了。 但如果你不能，那也没关系——你仍然可以在你的设计中使用这个概念。

要了解黄金比例，首先要了解黄金矩形

黄金矩形是一个大矩形，里面有一个正方形。 正方形的边等于长方形的最短长度：

资料来源：维基百科

黄金比例是一个（有点）等于 1.618 的数字，就像 pi 大约等于 3.14，但不完全等于。

你把一条线分成两部分——长部分 (a) 和短部分 (b)。 整个长度 (a + b) 除以 (a) 等于 (a) 除以 (b)。 这两个数字都等于 1.618。 因此，(a + b) 除以 (a) 等于 1.618，而 (a) 除以 (b)也等于 1.618。

回到黄金矩形，因为它更容易理解

当您在矩形内放置一个正方形时，它会创建另一个较小的矩形。 忽略黑线并查看红色和绿色框：

红色正方形有四个等长的边，该长度等于矩形的最短长度。 通过分割那个正方形，您会自动创建另一个较小的矩形（以绿色轮廓）。 他们一起创建了一个完整的黄金比例布局和黄金螺旋的基础。

您还可以使用较小的矩形制作一个新的黄金矩形，就像我用蓝色标出的那个：

传统的黄金比例图有八个黄金矩形：

这是最小的黄金矩形，#8：

如果你从左下角开始，做一个拱形连接每个方形和小矩形横截面的远端，你会得到金色螺旋。

斐波那契数列

斐波那契数列非常容易理解：从零和 1 开始，然后通过将前面的两个数字相加得到下一个数字。 0 + 1 = 1，然后 1 + 1 = 2，等等。序列中的前几个数字是 0, 1, 1, 2, 3, 5, 8, 13, 21, 34。

如果您使用这些数字创建具有这些宽度的正方形，您几乎可以创建一个金色螺旋：

资料来源：数学很有趣

黄金圈

有时，您会看到在正方形中绘制的圆圈代替螺旋线或除了螺旋线之外。 如果您在黄金比例叠加的框中绘制完美的圆，它们将与一个相邻圆的比例为 1:1.618。

资料来源：聚光灯部

百事可乐和 Twitter 标志使用黄金圈：

资料来源：混合会谈

你以前见过这个，很多

大自然充满了黄金比例。 它存在于植物群、贝壳、天气中……

来源：Annie Spratt 在 Unsplash 上的照片

来源：美国宇航局在 Unsplash 上的照片

因为我们经常看到它，我们的大脑更喜欢它。 这种与生俱来的吸引力就是为什么它是如此强大的布局供设计师使用。

艺术与设计的黄金比例

有时黄金比例超级容易识别：

资料来源：staceysdetailinginc.com

有时你会说，“我不知道你在说什么……哦等等。 现在我看到了。 我认为。”

资料来源：营销内部人士

其他时候你可能会发疯看它......

资料来源：宽墙

……但是如果您将主要黄金矩形归零，它会变得更加清晰：

我们来看一个经常被引用的例子：帕台农神庙

来源：创意博客

一开始，你可能会看到这个然后说，“这对我来说看起来是对称的。 我看到的东西怎么会和那个金矩形螺旋的东西相配？”

黄金比例不是关于设计的每个部分如何完全适合并且只适合特定部分。 如果是这样的话，帕台农神庙的右侧将是一个大街区，而左侧将被分割成更小的街区。

相反，比例用于创造和谐和比例，这可以用几种不同的方式来解释。

虽然黄金比例以数学为基础，但它可以以创造性的方式进行调整。 就帕台农神庙而言，黄金比例决定了设计组件的高度和位置。 另外，有很多方法可以在上面放置黄金比例图：

资料来源：Archinect

资料来源：Medium 上的 Esther Sugihto

资料来源：GoldenNumber.net

黄金比例和网站设计

无论您是在学习数学还是您的头脑即将爆炸，黄金比例在设计方面都更容易理解。 你已经完成了繁重的工作。 现在是时候采用基本的叠加层并使您的 Web 组件非常令人愉悦了。

黄金比例和布局

如果您想要完美的黄金比例布局，请将尺寸设置为 1:1.618。 例如，您可以将宽度设置为 960 像素，将高度设置为 594 像素。 黄金矩形每边 594 像素，矩形占据布局的其余部分 (594 x 366)。

Calculator Soup 有一个有用的黄金比例计算器，您可以在其中设置任何项（A、B 或 A + B）以找到正确的黄金比例值。

或者，您可以简单地使用这种类型的两列布局，其中一列比另一列宽很多。 它井井有条，清楚地显示了层次结构。

资料来源：国家地理

我在我的网站上使用它是因为主页是我博客文章的集合，我觉得这是最受认可的博客布局之一：

不过，在我看来，我们在 Elegant Themes 上使用的对称布局更现代：

黄金比例和间距

黄金比例可以帮助您确定放置设计元素的位置、使用的比例以及留出负空间的位置。 这是一个简单的例子，你几乎可以看到黄金比例叠加，甚至不需要把它放在上面：

资料来源：Digiarts 2011

这是我在 Photoshop 中应用金色螺旋时的样子：

同样，黄金比例以数学为基础，但将其应用于设计时，它并不完美。 该设计不是在黄金矩形上创建的，因此黄金螺旋不符合正常比例。 但是，您可以看到它如何指导设计师选择放置设计中最大元素以及最小元素和负空间的位置。

您还可以将黄金比例叠加层分层以将其应用于同一设计的不同元素：

资料来源：Lemongraphic 品牌。 来自 Canva 的示例。

黄金比例和内容

当您同时考虑黄金比例的布局和间距时，您就可以开始决定在您的网站上放置内容的位置。

让我们再看看国家地理网站，这次是 Canva 的黄金比例叠加：

布局被拆分，以便内容沿着螺旋的中心线排列。 在左侧，有一大块内容。 在右侧，内容变得更密集，并且有更多的负空间。 朝向螺旋的中心花饰，你会看到第二个国家地理标志——没有比将它放在眼睛自然去的地方更好的方式来推动家居品牌。

这是一个很好的例子，说明 Golden Spiral 如何引导您的眼睛浏览设计，甚至超越其主要组件。 如果您有很多内容要挤在一页上，这将非常有用。 你还会注意到，即使有如此紧凑和详细的设计，里面仍然有负空间。

资料来源：Helms Workshop 设计。 来自 Canva 的示例。

荣誉奖：黄金比例和图像

黄金比例也用于摄影构图。 黄金比例不是创建黄金螺旋，而是将图像分成六个块。 在这种类型的网格中使用相同的黄金比例：部分的宽度和高度为 1 或 0.618。

资料来源：帆布

然后使用交叉点来构图。 目标是将主体或主体的主要部分放在一条交叉线上——主体不应该居中，一些块应该留空（至少在大多数情况下——微距摄影和特写肖像将填满几乎所有的框架）。 通过这样做，您可以创建比主体居中更有趣的肖像。

遵循此规则的一种更简单且更易于使用的方法是使用三分法网格，您可能在手机的内置相机或数码单反相机上使用了该网格。

这是我给我表弟的儿子拍的照片。 我已经在它上面放置了三分法网格，以向您展示主题填充和不填充框架的位置。

另外，看看金色螺旋如何几乎完美地环绕主题：

黄金比例与三分法不同，因为三分法网格具有相同长度和宽度的部分。 然而，它非常接近——而且容易得多——这是摄影师在构图或编辑照片时通常使用的。

包起来

黄金比例可以按原样使用，也可以根据您的目的进行调整并调整大小——数学可能有严格的规则，但创造力没有。 虽然您可以从一开始就使用黄金比例来指导您的设计，但您也可以在开始设计后使用它来进行调整和改进。 目标是让比率指导您，而不是强行将设计融入其中。

准备好更多地使用您的网站布局了吗？ 查看我们关于使用 Divi 的新高度和宽度选项来创建响应式设计的文章。