晋城建站:理解和使用黄金比率的终极指南

2019.07.02 晋城网站建设

108

各地的设计师都应该知道黄金比例。这是一个数学比率,创造美观的设计。由于黄金比率在自然界中如此频繁地存在,所以它的结果看起来自然也就不足为奇了。晋城建站

Bogomil Mihaylov关于Unspash的照片

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

  • 神性比例
  • 黄金中庸
  • 黄金分割
  • 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:


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

Fibonacci序列

Fibonacci序列非常简单:从0和1开始,然后通过将前面的两个数字相加得到下一个数字。0+1=1,1+1=2等。序列中的前几个数是0,1,1,2,3,5,8,13,21,34。

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

资料来源:数学很有趣。

金环晋城建站

有时,你会看到在方格中画出的圆圈,而不是螺旋形。如果您在黄金比率重叠框中绘制完美的圆圈,它们将有一个相邻圆的1:1.618比率。

资料来源:聚光灯部

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

资料来源:混合会谈。

你以前见过这个,很多

大自然充满了黄金比例。它在弗洛拉,贝壳,天气…

资料来源:安妮·斯普拉特关于“不溅”的照片。

资料来源:美国宇航局关于“不溅”的照片。

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

艺术与设计的黄金比例

有时黄金比率超级容易辨认:

消息来源:staceysrichinginc.com

有时你会说:“我不知道你在说什么…哦等等。现在我看到了。我想。“

资料来源:市场内部人士。

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

资料来源:宽墙

…但是如果你把注意力集中在主要的黄金矩形上,它就会变得更加清晰:


让我们来看看一个常见的例子:帕台农神庙

资料来源:CreativeBloq

一开始,你可能会看到这个,然后说,“在我看来,这是对称的。我所看到的如何适合那个金色矩形螺旋的东西呢?“

黄金比率不是关于设计的每个部分是如何完全和只适合于特定的部分。如果这是重点,帕特农神庙的右侧将是一个大街区,左侧将被分割成较小的区块。

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

虽然黄金比率是建立在数学基础上的,但它可以创造性的方式加以调整。在帕台农神庙的情况下,黄金比率决定了设计组件的高度和位置。此外,有许多方法可以将黄金比率图表放在上面:

资料来源:Archinect

资料来源:Esther Sugihto中文版。

资料来源:GoldenNumber.net

黄金分割与网站设计

不管你喜欢数学还是你的脑袋都要爆炸了,黄金比率在设计上更容易理解。你已经完成了重担。现在是时候采取基本的覆盖,并使您的Web组件完美地令人愉快。

黄金分割与布局

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

计算器汤黄金分割计算器可以设置任何项(A、B或A+B)以找到正确的黄金比率值。

或者,您可以简单地使用这种类型的两列布局,其中一列比另一列宽得多。它是有组织的,并且清楚地显示了等级。

资料来源:国家地理

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


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


黄金比率与间距

黄金比例可以帮助你决定在哪里放置你的设计元素,使用比例,以及在哪里留下负面空间。下面是一个简单的例子,您几乎可以看到黄金比率覆盖,甚至不必将其放在顶部:

资料来源:Digiart 2011。

下面是我在Photoshop中应用金螺旋的样子:


同样,黄金比率是建立在数学基础上的,但当涉及到将其应用于设计时,它并不完美。这个设计不是在一个金色的长方形上设计的,所以金色螺旋是不正常的。但是,您可以看到它如何指导设计人员选择将设计中最大的元素以及最小的元素和负面空间放在哪里。

您还可以将黄金比率覆盖层应用于同一设计的不同元素:

资料来源:品牌推广。坎瓦的例子。

黄金比例与内容

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

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


布局被分割,内容沿着螺旋线的中心线排列。在左边,有一大块内容。在右边,内容变得更密集,还有更多的负面空间。向中心的螺旋曲线,你会看到第二个国家地理标志-没有更好的方式来推动家庭品牌,而不是把它放在眼睛自然去的地方。

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

资料来源:Helms讲习班设计。坎瓦的例子。

荣誉奖:黄金分割率与形象

黄金分割率也用于摄影构图。而不是创造一个金色的螺旋,黄金比例分裂成六个街区的形象。在这种类型的网格中使用相同的黄金比率:截面的宽度和高度要么是1,要么是0.618。

资料来源:Canva

然后使用这些交叉口组成镜头。其目标是将一个主题或主题的主要部分放在一条相交的线上-主题不应以中心为中心,一些街区应该是空的(至少在大多数情况下-宏观摄影和特写肖像画几乎会填满整个框架)。通过这样做,您可以创建一个比主题中心更有趣的肖像画。

遵循这条规则的一个更简单、更容易使用的方法是使用三分之一的网格规则,这可能是在手机内置摄像头或DSLR上实现的。

这是我给我表哥的儿子拍的一张照片。我已经在它上面放置了第三格的规则,向你展示主题在哪里,或者没有,填充这个框架。


另外,看看“金色螺旋”是如何完美地围绕着这个主题的:


黄金比率与三分之一的规则不同,因为网格的三分之一有长度和宽度相等的部分。然而,这是如此接近-而且非常容易-这是摄影师在创作或编辑照片时通常使用的。


最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP