在设计中，提到黄金比例，我们总是第一联想到高冷的logo设计线稿类似于

    在制作黄金比例切割logo的前提下，我们先来学习如何画圆。

1.原理

    黄金比例定义：把一条线段分割为两部分，较短部分与较长部分长度之比等于较长部分与整体长度之比，其比值是一个无理数 (√5-1)/2，取其前三位数字的近似值是0.618。（百度百科） 

    我们可以直接用下面的线段和等式来诠释这段话

2.画法

（1）“斐波那契”画法  

    斐波那契数列（Fibonacci sequence），又称黄金分割数列，我们最常用的是根据“斐波那契数”的数列画出系列黄金比例圆。

    设一个数列，它的最前面两个数是1、1，后面的每个数都是它前面的两个数之和，例如1，1，2，3，5，8，13，21，34，55，89，144····，这个数列为“斐波那契数列”（百度百科） 

    我们假设第一个任意圆的直径为单位1做矩形，然后一直往下画矩形，步骤如下：（画的时候开启智能参考线）

    1.画任意长宽矩形（M）（填充为空）

    2.复制该矩形，对齐，将第三个矩形安住shift，得到第二个矩形

    3.全选矩形，逆时针旋转90度（方便之后螺旋线的制作），等比例缩小

    4.重复步骤3

   画完矩形就能轻松完成了圆的绘制。

   1.黑箭头（V）选中矩形，将中心移到矩形中心，同事按住shift和alt，画圆（L）

   2.重复步骤1

   计算发现相邻两个斐波那契数的比值是随序号的增加而逐渐逼近黄金分割比。由于斐波那契数都是整数，两个整数相除之商是有理数，而黄金分割是无理数，所以只是不断逼近黄金分割。

1/2＝0.5

2/3=0.667

3/5=0.6

5/8=0.625

8/13=0.615

13/21=0.617

21/34=0.618

34/55=0.618

55/89=0.618

89/144=0.618

   通过列举归纳，这个“斐波那契”数列的比值由0.5不断接近黄金分割比的数值0.6180339887……。我们可取后几个接近0.618的圆

    为此，我们可以舍去前几个圆以减少误差，个人喜欢直接选择3，5，8，13，21……的圆

（2）直接画法

    我们通过“斐波那契”画矩形，是为了等到黄金比例的圆，其实这个值是已知的，我们可以直接通过画圆（任意大小作为单位1），然后不断地将下一个圆直径除于1.618，即可

    有了圆我们可以直接制作螺旋线。

    1.画圆（参考直接画法）

    2.删除多余锚点

    3.重复步骤1和2

3.黄金比例在前端框架下的应用

    相信很多设计师都在平面排版中有用到黄金比例螺旋线，其实黄金比例在前端中使用只要巧妙运用1.618/0.618这个数值就可以达到我们需要的分割效果

    下面我们以改版的boostrap框架＋1.618：gold boostrap（http://www.goldbootstrap.com/）为例说明如何利用这个比值影响布局

1）容器

    容器宽度col－gold－lg：col－gold－sm＝0.618:（1-0.618）可以得到黄金比例分割的两个大小容器

2）字体

    我们通过对比两份变量参数表

（图1: gold bootstrap h1-h5参数）

    我们利用上面的参数做下对比计算得出如下图

    从上面的等式很容易看出h1-h4都是严格遵从了黄金比例，但是到了h5和h6，我发现作者并没有一路完美到底，我假设继续用1.618去求h5，h6，并都向上取值

    得到的h5和h6的字号分别为9px和6px。本人猜想作者可能是取得的值距离框架默认正文字号14px距离较大做的调整。

    为此，我们来研究下normal的Boostrap框架下的字号。

（图2:boostrap h1-h5参数）

    将这两组数据放在一起做下对比如下图

（图3:对比）

    不难从图3中可以看出，利用黄金比例计算出来的字体大小跨度大，而normal状态下boostrap的字体和Photoshop的取值间隔相同，是比较常用的字号。

    研究黄金比例在前端框架下的应用，是因为，我们可以利用这个比值直接应用在我们的UI布局中，而且计算不用这个框架，我们也可以将这个思想加入到我们的设计中，这是很容易实现的。

    当然，我一直强调黄金比例就是一个比值，但是如果因为这个比值即使脱离实际也要僵硬遵循，往往束缚了我们的思维（eg：gold boostrap 字号），有时循规蹈矩反而失去了灵活的空间。设计师就是不断地打破标准和创造规范中前行的 。