黄金分割概念

01 黄金分割、斐波那契螺旋、三分法

       黄金比例的有三个常见的用法，分别为：黄金分割、斐波那契螺旋、三分法。斐波那契螺旋和三分法虽然说不是和黄金比例完全的吻合，但是他们都是比较接近黄金比例的，我们也默认将他们归为黄金比例的队列里面。

黄金分割：

         0.618这个比例被公认为是最能引起美感的比例，因此被称为黄金分割。但是0.618这个比例是非常难以计算的，我们可以记下1.618这个数值，具体的计算公式如上图所示

                                                                        斐波那契螺旋、三分法的概念

        我们什么时候才能拍出这么看的照片？接下我们还是回到正题，怎么拍照？答案很简单，摄影师采用了黄金比例规范。大家肯定会说作者又开始胡说八道了，如果大家了解黄金比例的概念，就会发现很有道理的。接下来我就把黄金比例的概念画到照片上。

       哦？大家是不是发现什么有趣的现象？摄影师采用了九宫格拍照的方法，将事物定格在就九宫格的每个点上。每个点恰恰是黄金分割点。九宫格也是黄金比例的一种实践。这就是摄影，将摄影和数学融合，当然每个人都有不一样的想法，所以每一张作品都应有拍摄者自己的想法。

        跑偏了跑偏了，接下来才是正题。设计日益更新，出现了各种设计规范。但是有一种规范恒久不变，那就是黄金比例规范。吉萨金字塔、蒙娜丽莎、Twitter和百事可乐有什么共同点？答案很简单，它们的设计都遵循了黄金比例。作为一个常见的数学比例，黄金比例实际上是从自然界中总结并发现的，用于设计中的时候能赋予作品更多的设计美感，赏心悦目。那么，黄金比例到底是怎么样的比例，它又是如何运用到设计中并提升设计作品的呢？

        事实上，我们的大脑似乎先天就比较青睐使用黄金比例的对象和图片。这几乎是下意识的吸引力，大脑甚至会对眼睛看到的事物进行小幅度的微调以靠近黄金比例，提高我们自身对于外物的记忆和印象。

黄金比例无疑可以应用于各种图形。如果你将一个正方形拉伸为一个矩形，让长是宽的1.618倍，就可以获得一个“完美”的矩形。

将两个图形叠加，你就可以获得一个清晰直观的黄金比例，被分割出来的小矩形同样遵循着黄金比例。

  如果你继续以这样的方式向新的矩形中填充正方形，那么你填充的正方形会越来越小：

像上图所示，你最终绘制出来的将会是一个黄金螺旋（而其中的矩形也就遵循着传说中的斐波那契数列）曲线，它所包含的数列遵循的规律是，每个数字都是前两个的和：0、1、1、2、3、5、8、13、21、34 、55、89、144……

这就是黄金螺旋：

在设计中使用黄金比例的5种方法

既然你已经了解了黄金比例的基础知识，那么接下来看看如何借助它来提升你的设计。由于黄金比例的呈现形式很多，所以你可以将它用到布局、间隔、内容、图像和图形当中。

1、布局：将尺寸设置成黄金比例

在布局中使用黄金比例的方法并不难，关键是控制比例和尺寸。重点很简单，把握好1:1.618的黄金比例。

举个例子，使用960px的宽度布局的时候，除以1.618可以得到594px，这个可以用作你的布局的高度，然后将整个布局划分为两栏，一栏方形，一栏矩形，一个协调的布局就出来了。

这种两栏式布局在网页上非常实用，我们所熟知的美国国家地理的网页就是使用的这样的布局方式，看起来可读性非常不错，比例平衡，符合网站内容自然的特性。

2、间距：使用黄金螺旋布局

间距的控制和留白一样，是设计中非常关键的元素。协调的布局能够营造出优秀的作品，那么如何借助黄金比例来协调页面中的多种元素呢？合理的计算有的时候比直觉合适，如果能结合起来就更好了。

在基本的布局上，借助黄金螺旋来调整，是个不错的思路。多种不同的元素在同一页面上的时候，黄金螺旋可以帮你筛选出合理的空间布局和间隙。

Moodley 设计工作室为Bregenzer Festspiele 艺术节设计了海报、应用、节目单和大量的品牌标识。节目单的整体设计采用了拼贴的方式，有大量的留白，而其中各种元素的设计比例、位置和留白就是借助黄金螺旋来布置的。

总部位于新加坡的Lemon Graphic 为Terkaya财富管理进行视觉形象设计，名片的设计元素也同样借助黄金螺旋来设计。

3、内容：沿着黄金螺旋的轨迹

对于网页内容而言，黄金螺旋的轨迹同样可以起到重要的作用。我们的视觉可以很自然地沿着黄金螺旋的轨迹运动，这也就是说这样设计网页布局会让访客更加自然地浏览内容。

如果你仔细查看美国国家地理的网页，会看到它们的网页布局就是如此，用户会下意识地随着这个布局来浏览，这是一种潜意识行为。

这个网站是平面设计师Tim Roussilhe 的作品，信息量很大，布局也紧密，关键是信息组织的相当有条理，多而不乱。左上角的内容就是借助黄金螺旋的轨迹来设计的，关键的点和位置都落在黄金螺旋的轨迹上。功能性的组件在这个布局中都位于瞩目的位置，留白也分布到了合理的间隙中，所有的细节都精致到位。

Saastamoisen säätiö 的这个视觉设计稿就更典型了。图中的字母分布看起来乱中有序，它们就是沿着黄金螺旋来分布的，并且随着螺旋半径的缩小而逐渐缩减字体尺寸，并且提升字母的密度。这样的设计保证了视觉的平衡，富有设计感而不混乱。

Helms 工作室 为Fullsteam 啤酒进行品牌设计的时候，也同样借助黄金螺旋来布局内容。

4、图片：黄金比例和三分法

对于图片而言，布局自然是很重要的，无论是用来传递信息还是呈现图像布局的美感。黄金比例可以让图片变得更加吸引眼球，让重要的信息脱颖而出。平时我们所说的三分法布局，如何结合黄金比例，可以让布局更漂亮。

参考下方的图片，借助将页面进行黄金比例分割的四条线，线条两两交汇的地方是最吸引用户的地方。当然，我们常见的三分法是让同一个方向上的两条线将布局按照1：1: 1的比例分割开来。

这个案例是Complex杂志的封面，整体布局符合黄金比例，而黄金比例三分法下的两个交点上则正好和女性的鼻子与眼睛上。

Jason Mildren 为Pilot 杂志设计封面，其中的布局采用的是均匀三分法来构建视觉重心，图中模特的眼、拇指和手臂轴心都处在视觉重心上，人物位置靠右下，留白靠左上，又是一个平衡的布局。

Feld杂志的设计，也参考了黄金比例三分法，左上方的标题和内容区块明显是参考分割线来设计的，而右下方的背景中的人物的鼻子——也就是人物的中心点正好压在右下方的交点上。

5、图形：黄金比例圆形

黄金比例可以用来创建矩形也能用来创建比例协调的圆形。使用黄金比例不仅可以产生和谐的比例，而且能够让图形保持较高的一致性。从百事和Twitter的LOGO来说说这个事情吧。

百事的LOGO是使用两个遵循黄金比例的圆圈来构建的，较小圆形并不是显而易见的那种，而是隐藏在内部的曲线中。

Twitter的LOGO设计则是借助若干完美的圆形来进行构建的，只不过它在使用黄金比例的圆形的时候，并没有使用相邻比例的圆形来构建，乍一看不够精确，但却同样营造出和谐的标识。

web与App实战应用

网页中黄金比例的运用

UI中黄金比例的运用

平面设计中黄金比例的运用

黄金比例应该是作为设计师的辅助工具，而不是一个固定的设计模式。如果一开始就去想着我一定要在设计中运用黄金比例的话，那基本上我们的思维就会围绕黄金比例去做设计了，这样我们的设计就会被它框住。黄金比例最好是用在最后设计的修正上，我们可以根据黄金比例去调整我们元素的位置，让它们更加的规范。

改造前的界面

03 案例操作

上面的案例中是一个常见的登录界面，存在很多问题：

图片太压抑而且背景太杂乱，图片比例不协调

登录元素太简陋，间距混乱，按钮点击区域太小

第三方登录和用户登录层级不明显，图标空间太满

接下来我根据所发现的这些问题进行再造，并且运用到黄金比例进行设计的修正。

改后的界面

将改造前后的界面做对比，可以发现运用了黄金比例的界面显得更加的规范和有章法，图片比例、元素间距、元素位置也是更加的协调。

————————————————

版权声明：本文为CSDN博主「请尊重下我的职业」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/duilan3356/article/details/86525066