博尊官网

博尊(中国)有限公司-官方网站

最佳比例的秘密!教你如何在设计中充分运用黄金比例

2017/11/3 17:22:29 技术文章

   什么是黄金比例?

 

      黄金比例是一个比较特殊的数学比例,通常我们会用线段分割来解释这个比例:把一条线段分割为两部分,较短部分与较长部分长度之比等于较长部分与整体长度之比,其比值是一个无理数,取其前三位数字的近似值是0.618。

 

 

      当然,我们今天探讨的并非是数学问题,而是设计和美。黄金比例之所以被冠名以“黄金”二字,自然是因为这个比例带来的和谐与美感。当你应用到设计作品中的时候,这种比例会营造出艺术感。

 

      黄金比例已经被我们的先辈运用了几千年,从埃及的吉萨金字塔的设计比例到雅典的巴特农神殿,从米开郎琪罗为西斯廷教堂所雕刻的亚当到达芬奇的博尊官网,从百事可乐的LOGO到推特的LOGO设计,甚至我们的面孔都遵循这个数学比例。

 

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

 

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

 

 

      最有意思的是,你会发现这个漂亮的样式在自然界中几乎无处不在:蕨类植物的茎、鲜花、贝壳,甚至飓风。这也就是为什么我们会觉得它们在视觉上有着无与伦比的吸引力,因为它们在自然界中是最好的。

 

 

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

 

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

 

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

 

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

 

 

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

 

 

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

 

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

 

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

 

 

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


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

 

 

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

 

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


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

 

 

   5、图形:黄金比例圆形

 

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