WordPress divi主题

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

by | May 12, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

黄金比例

黄金比例

照片由 Bogomil Mihaylov 在 Unsplash 上拍摄

黄金比例还有其他几个名字:

  • 神圣比例
  • 中庸之道
  • 黄金分割
  • 披(希腊字母)

黄金比例背后的数学

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

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

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

黄金比例

资料来源:维基百科

黄金比例是一个(有点)等于 1.618 的数字,就像 pi 大约等于 3.14,但不完全一样。

WordPress divi主题

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

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

当您在矩形内放置一个正方形时,它会创建另一个较小的矩形。 忽略黑线,看红绿框:

黄金比例

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

你也可以用较小的矩形制作一个新的黄金矩形,就像我用蓝色勾勒出来的那样:

黄金比例

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

黄金比例

这是最小的黄金矩形,#8:

黄金比例

fiverr建站WordPress程序员

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

斐波那契数列

斐波那契数列很容易理解:你从 0 和 1 开始,然后通过将前面的两个数字相加得到下一个数字。 0 + 1 = 1,然后 1 + 1 = 2,依此类推。序列中的前几个数字是 0、1、1、2、3、5、8、13、21、34。

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

黄金比例

资料来源:数学很有趣

独立站选品工具

黄金圈

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

黄金比例

来源:聚光灯部

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

黄金比例

高质量外链购买

资料来源:混合会谈

你以前看过这个, 很多

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

黄金比例

资料来源:照片由 Annie Spratt 在 Unsplash 上拍摄

黄金比例

JasperAI 10000字免费额度试用

资料来源:美国宇航局在 Unsplash 上拍摄的照片

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

艺术与设计的黄金比例

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

黄金比例

资料来源:staceysdetailinginc.com

WordPress备份工具updrafplus

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

黄金比例

资料来源:营销内幕

其他时候你可能会疯狂地看着它……

黄金比例

资料来源:宽墙

…但是如果你在主要的黄金矩形上归零,它会变得更清楚一点:

黄金比例

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

黄金比例

资料来源:创意博客

起初,你可能会看到这个并说,“这对我来说看起来是对称的。 我正在看的东西如何适合那个金色矩形螺旋的东西?

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

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

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

黄金比例

资料来源:建筑师

黄金比例

资料来源:Esther Sugihto on Medium

黄金比例

资料来源:GoldenNumber.net

黄金比例和网站设计

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

黄金比例和布局

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

Calculator Soup 有一个有用的黄金比例计算器,您可以在其中设置任何术语(A、B 或 A + B)来找到正确的黄金比例值。

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

黄金比例

来源:国家地理

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

不过,在我看来,我们在优雅主题中使用的对称布局更现代:

黄金比例

黄金比例和间距

黄金比例可以帮助您确定在哪里放置设计元素、使用比例以及在哪里留下负空间。 这是一个简单的示例,您几乎可以看到黄金比例叠加层,甚至不必将其放在顶部:

黄金比例

资料来源:Digiarts 2011

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

黄金比例

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

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

黄金比例

资料来源:Lemongraphic 的品牌推广。 来自 Canva 的示例。

黄金比例和内容

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

让我们再看看国家地理网站,这次是 Canva 的黄金比例覆盖在上面:

黄金比例

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

这是一个很好的例子,说明金色螺旋如何引导您的眼睛通过设计,甚至超越它的主要组成部分。 如果您有很多内容要挤到一页上,这很有用。 您还会注意到,即使设计如此紧凑和详细,那里仍然存在负空间。

黄金比例

资料来源:赫尔姆斯工作室设计。 来自 Canva 的示例。

荣誉奖:黄金比例和图像

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

黄金比例

资料来源:帆布

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

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

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

黄金比例

另外,看看金色螺旋是如何几乎完美地环绕主题的:

黄金比例

黄金比例不同于三分法则,因为三分法则网格具有相同长度和宽度的部分。 然而,它是如此接近 – 也如此容易 – 这是摄影师在构图或编辑照片时通常使用的。

包起来

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

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

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题