The designer's guide to the Golden Ratio
黄金比例是每个设计师都应该知道的. 本文会介绍一下如何去在设计中使用这一概念.
黄金比例呢, 是人类从自然中发现的一个比例值, 这个比例被设计师用于创造那些非常赏心悦目的, 非常自然的作品. 黄金比例有时候也被称为Golden Mean或者Golden Section, 或者是希腊字母:Phi.
本文中, 我们会介绍一下什么是黄金比例, 以及如何使用它, 同时也会介绍一些非常有价值的引申资料供大家查阅~
-
01. What is Golden Ratio?
基于Fibonacci Seuence(也许你还记得那年河畔的数学课...or, 那本著名的悬疑小说"The Da Vinci Code"), 黄金比例所描述的就是两个部分的一个关系(废话...比例啊...).
Fibonacci numbers, 就如同很多发现于自然界的元素一样, 符合一个1:1.61的比率-这样的我们称之为黄金比例, 而且因为它在自然界中随处可见, 所以将这一比例用于设计作品就能到得到一种非常自然的美感.
黄金比例是一个符合Fibonacci序列的元素之间的关系
同时它也反映了一个在自然界中非常常见的比例
我们相信黄金比例在人类的艺术设计中使用的历史已经至少4k年了, 世界上可能追溯的更久远, 一些人认为古埃及人就是用这一原则建造的金字塔. 在当下的时代里, 黄金比例在音乐, 艺术, 以及设计中更是随处可见了.
-
02.Examples
艺术和设计作品中使用黄金比例的历史非常悠久, 从建筑到设计师的大作中都能看到它的应用. 通过一个非常相似的方法, 你也可以把黄金比例带入到你的作品中~ 以下是一些例子, 希望能启发到你:
古希腊的建筑会在很多地方使用到黄金比例, 比如建筑物的宽度和高度, 以及和柱廊, 甚至支柱的位置. 最终导致整个建筑非常的和谐自然, 整体感很强. 新古典建筑中再一次的应用了这些原则.
达芬奇, 如同那个时代的很多艺术家一样, 也使用了黄金比例来创造很多非常悦目的作品. 在最后的晚餐中, 任务被放置在了下2/3里(正好是黄金比例中的大数), 同时Jesus的位置更是画布的黄金矩形的中央位置.
在自然界中也有无数的黄金比例的例子-随处可见. 花朵, 海贝, 凤梨, 甚至是蜂窝都展现出了同样的黄金比例. 所以, 在设计中使用黄金比例无论现在还是未来都是非常合适的~
-
03.How to construct a Golden Ratio rectangle
创建一个黄金矩形是非常简单的, 首先你需要一个简单的矩形. 按照下面的步骤进行就行:
-
Step 01
画一个正方形. 这将是最终矩形的短边.
-
Step 02
用一条竖线将方形分割成2半, 你就可以得到2个矩形了.
-
Step 03
在一个矩形里, 从一角画一条线到对角.
-
Step 04
旋转这一对角线, 放平, 到垂直于第一个矩形.
-
Step 05
根据这个对角线画一个新的矩形--就是挨着之前对角线所属的第二矩形.
-
-
04.How to use the Golden Ratio in your design work.
使用黄金比例其实比你想象的还要简单的. 下面分享几个应用的技巧, 以方便你快速的应用到自己的布局中:
The quick way
如果你以前接触过"Rule of Thirds", 你可能对通过分割区域实现纵向和横向的三等分比较熟悉, 交线围起来的部分就是当前形状的一个自然焦点.
摄影师们经常会被告知通过把拍摄对象放置到这些交线区域可以实现更自然的构图, 同样的原则也适用于你的页面布局, 网页原型以及海报设计.
虽然"rule of thirds"基本适用于所有形状, 但如果你将之应用到比例在1:1.6的矩形上, 那么你所获得的就和黄金矩形非常接近了, 都能实现一个自然的构图.
Full implementation
如果你想要更全面的应用黄金比例, 那么你可以通过设定你的内容区域和工具栏区域比例在1:1.61开始. 这里以网页设计为例.
这个比例只需要精确到一个小数点就行, 偏移0.01还是没啥问题的-所以说如果你有一个640px的内容区域, 你的工具栏区域就可以设定为400px, 如此就能得到一个黄金比例了, 即便它的真实值其实是1:1.6.
当然, 你同时还可以把内容区域再次黄金分割, 然后把整个页面的header, content area, footer area以及navigation area都能满足黄金分割比~
-
05. Golden Ratio Tools
GoldenRATIO
GoldenRATIO--最佳功能是保存你的绘制记录作为模板
Golden Tatio Typography Calculator
辅助创作符合你网站的字体排版! 只需要输入一个字体大小, 内容宽或者两者都输入到网站的输入区域后, 点击"Set my Type"按钮即可. 如果你喜欢逐行的优化字母, 你可以输入可选的CPL值.
Phicalculator
这是个非常简单但是实用的工具, 同时支持mac和windows. 只需要输入任意的数字, 就能获得相应的黄金比例值啦~Atrise Golden Section
这是个屏幕尺子和网格工具, 可以帮助你不用费心的计算黄金比例了, 它直接分割好了黄金比例, 你只需要调整布局即可. -
06. Golden Ratio Tutorials