1.Apple Logo

Apple Logo
从上图的辅助线分解，我们可以发现苹果logo的设计正是采用半径成斐波那契数列（1,1,2,3,5,8,13）的圆切割而成
其实，Apple苹果 的 logo 被咬一口的痕迹设计并不是严格符合黄金分割比例的，只是非常接近。但这样的偏差，是故意的。用数学公式和标准几何图形来设计图标，能够赋予图标一种神性的美感。
当然大多数设计都会有故意的细微偏差，为的是避免刻板形象，同时还能营造一种无法被破解的神秘感。

2.黄金分割

• 从公元前20世纪到16世纪的史前巨石柱记载的关于1:1.618比例的黄金矩形的应用开始到现在，人们对黄金分割的爱从来就没有改变过，五边形和五角星也同样具有黄金分割比例，因为五角星内三角形的边长比例是1：1.618。在海胆和雪花里也能找到相同的五边形/五角形关系。

随着数字的增大,斐波那契数列两数间的比值越来越接近黄金分割率

人体也具有同样的完美比例，人体的高度与伸展开的手臂形成了一个正方形将人体围住，而手和脚正好落在以肚脐为圆心的圆上，肚脐位于黄金分割点上，这在文艺复兴时期的艺术家莱昂纳多·达芬奇和丢勒的《完美的比例》《人体比例四书》也都有所体现。

人体比例四书

• 黄金分割是用实证法对美的图形做出的总结。也就是在历史长河中，总结出来的人类的喜好规律。这种长宽比带给大多数人最舒服的体验是毋庸置疑的。也就是总结出来以后，再运用这个原理。

黄金分割的贝壳曲线

• 画一个图形，在大多数情况下，不会从画黄金分割辅助线开始。你得先有图形，然后在一次一次的修改中，运用黄金分割线去辅助你修改图形，最后，得到一个在视觉上最舒服的图形。而实际上，美学素养高的人，在绘制图形的时候，已经潜移默化得融入了黄金分割这种美学。

黄金分割辅助线

3.黄金分割衍生的-纸张比例

• 人类从黄金分割率中提炼出的√2矩形也具有许多特殊的性质，能被无限的分割成更小的等比矩形，其长宽比也相当接近黄金分割率（1.414与1.618）

√2矩形

• 正是由于这个属性，√2矩形成为欧洲DIN（德国工业标准）纸张尺寸体系的基础。也就是我们最常见的纸张尺寸。这样裁切出来的纸张不仅容易生产，而且不会有一点浪费。

德国工业标准纸张尺寸体系

• 除了√2矩形以外，由其衍生出来的√3、√4、√5矩形也同样具备可以被横向和纵向切割的属性。√3矩形也是正六边形的构成基础，这个形状也可以在自然界中的很多方面找到，例如雪花晶体与蜂巢的形状。

雪花与蜂巢

4.网页设计中的应用

1.画布大小

在网页设计当中，设计师最常用到的是960网格系统，它可以说是具有里程碑式或者具有代表意义的系统，设计之初主要针对的是1024×768的屏幕。虽然现在早已是1200以上像素的天下了，但960网格系统也早已从最初的理性设计的工具变成了网站设计的布局思维。以1024×768的屏幕为例，用户在浏览网站是，视线热区可覆盖大概80%的屏幕，此部分空间尺寸大致为974×650，在浏览器左右预留一些空间，并且为方便响应式设计，我们的可设计区域就成为了现在最常用到的960×650像素，这个尺寸也同样接近黄金分割的尺寸。

2.分栏

用理性的网格将你的页面分栏，这样可以很好的将页面中得图片与文字进行区隔，段落与段落间进行区隔。考虑到黄金分割的原理与响应式页面的可操作性，我们将页面分为12，16或24栏，栏数依据你要设计的网页体量而定。

12栏
16栏
24栏

3.字符大小

横向则依据你所使用的最小字符高度而定，一般使用12pt—16pt的文字，每行60—80字符是比较合理的范围。这样，我们就得到了一张理性，简单，有效的网格，使用网格设计可使网页的连贯性与秩序性增强，内容与内容不会相互影响，减少内容取舍的复杂度，并且很大程度上增加网站代码的复用率。

4.屏幕的第一视觉点

人的视线落点是需要引导的，通过科学理性的方式可快速找到用户的视线范围，把你最想让用户看到的内容放在这个范围内，可以起到绝佳的效果与回馈。同时，也可以帮助你梳理每个元素之间的关系。我们用这个思路再看那些牛逼的网站的时候，才会了解，原来这才是他们这些网站之所以牛逼的原因。比如下面的这几张苹果的官网：

苹果官网视觉点

iPhone6官网不仅用到了网格系统，同时也应用黄金分割率确定文字、图片与连接的间距，让整个页面看起来简洁且合理。

黄金分割率确定文字、图片与连接的间距
理想化页面设计

产品经理和设计师不仅仅需要是审美出众的人，更应该是理性的魔术师，当别人按照你构想的顺序去浏览你的作品，或是在你的作品中看到你思考的过程，是不是仅仅比他们说“挺好看的”要强的多。所以，如果你是一个初学者，对产品设计不知从何下手，或者你的设计已经很不错，但是遇到了瓶颈，那么，通过这些几何学与网格的使用一定会让你的设计更进一步。