[译] 写给设计师的黄金比例指南

原文链接:The Golden Ratio: a designer’s guide

原文作者:Sam Hampton-Smith

更新:黄金比例是一个简单优美的数学理论,它可以使你的设计比例恰当,看着舒适。 我们讲解下如何使用它。

在大自然中,有一个常见的数学比例,你可以在设计中利用它创作出舒适自然的作品。我们称它为黄金比例,尽管它又被称作黄金分割(或者希腊字母φ。

基于斐波那契数列(Fibonacci Sequence,你可能是在学校的数学课或者是丹·布朗(Dan Brown)的小说《达·芬奇密码》里记住它的),黄金比例描述了两部分面积的关系。

跟大自然里许多的元素一样,斐波那契数列遵循1:1.61的比例——这就是我们所说的黄金比例。由于在自然中随处可见, 当我们在设计作品中使用这同样的比例时,会让人感觉顺眼。

在斐波那契数列中,相邻数字的关系遵循黄金比例

> 在斐波那契数列中,相邻数字的关系遵循黄金比例…

按比例关系绘制能为我们提供看起来自然的螺旋线

> …按比例关系绘制能为我们提供看起来自然的螺旋线

人们相信在艺术和设计领域里黄金比例的使用至少已有4000年,或许更久——有些人认为,古埃及人利用这个原理建立了金字塔。如今在很多时候,你会发现身边的音乐,艺术和设计领域都利用了黄金比例。

应用实例

在整个艺术和设计的历史中,黄金比例的应用都被很好的记录了下来,你可以在建筑大师的每个设计中看到它。通过应用一个类似的操作方法,你可以把相同的设计理念运用到你的作品中。这里有两个个例子可以启发你:

帕提农神庙(The Parthenon)

帕提农神庙

古希腊建筑利用黄金比例确定了建筑宽高、柱廊大小,甚至是支柱位置间的尺寸关系,令人赏心悦目。达到让人感觉建筑完全成比例的效果。新古典主义建筑运动也再次利用了这些原理。

最后的晚餐

最后的晚餐

列奥纳多·达·芬奇(Leonardo da Vinci)像历代(throughout the ages)许多其他的艺术家一样 ,大量使用了黄金比例来创造让人赏心悦目的作品。在《最后的晚餐》这部作品中,他把人物安排在下面的三分之二处(即黄金比例两部分中较大处),而耶稣(Jesus)的位置则按照黄金矩形的布置完美地划分在画布上。

网页设计的实例

Twitter改版(The Twitter redesign)

Twitter 2010年的改版可不是碰运气。

> Twitter 2010年的改版可不是碰运气。

Twitter的创意总监(creative director)Doug Bowman 在他的 Flickr 公布这个截图,解释公司是如何在2010年的改版中使用黄金比例的。他解释道:“每一个好奇新版 Twitter 的人都知道我们得到这些比例可不是碰运气的。”

Apple iCloud

iCloud 图标设计并不是随意的素描

> iCloud 图标设计并不是随意的素描…

苹果的iCloud 图标设计是牢牢(firmly)建立在黄金比例的数学基础上的,正如Takamasa Matsumoto 在博客文章(原日文版:这里)的解释和下面展示带注解的图片示例一样:

...而是明确基于黄金比例

> …而是明确基于黄金比例

大自然中的实例

身边从贝壳到花儿的大自然中随处可发现黄金比例

> 身边从贝壳到花儿的大自然中随处可发现黄金比例

大自然有无数黄金比例的实例——你能在身边的比例观察到!花,贝壳,菠萝,甚至是蜂窝都在它们的构造中展现出同样的比例原则。所以在日常生活里利用黄金比例在你的设计作品中是理所当然的。

如何构造一个黄金比例矩形

制作一个黄金矩形非常简单,从一个基本的正方形开始。跟着下面的步骤来制作你自己的黄金比例:

第一步:画一个正方形。这将会是矩形短边的长度。

第一步

第二步:用垂线把你的正方形分成两半,这样你会得到两个矩形。

第二步

第三步:在其中一个矩形里,画一条对角线。

第三步

第四步:向下转动对角线直到和相邻的第一个矩形水平。

第四步

第五步:参照原来的矩形,用新的水平线画出一个矩形。

第五步

在你的设计作品里使用黄金比例

使用黄金比例比你预想的还要简单!这里有几个快速技巧用来在你的布局估计它,或者你可以在略加思索后能将这一概念完全融会贯通。

快速方法

如果你已经接触过三分法,你将会对把区域横竖分割成三等分的做法(构图如同“井”字)很熟悉。这些线的交点将标明图形的自然焦点。

摄影师被教导把主要对象放在这些相交线的其中一条上,以获得一个赏心悦目的构图。同样的原理可以运用到你的页面布局,网页原型和海报设计上。

尽管三分法可以应用于任何形状,如果你以约 1:1.6 的比例应用到一个矩形,会得到一个黄金矩形,使构图更加顺眼。

完整的实现

如果你打算在你的设计里完全实现黄金比例,确保内容和侧边栏面积的比例关系是 1:1.61 就很容易做到(例如设计一个网页)。

让这个比例上下浮动一两点来使数字符合像素或者点,这么做是可以的。如果你的内容面积是 640px ,侧边栏是 400px,足矣达到黄金比例的效果,即使确切说比例是 1:1.6 ,而不是上面说的 1:1.61 。

使用黄金比例会让网页布局更自然,更顺眼

> 使用黄金比例会让网页布局更自然,更顺眼

当然,你也可以用同样的比例再细分内容和侧边栏的面积,然后网页的头部,内容区域,底部和导航栏都可以设计成相同的基本黄金比例。

黄金比例工具

01 GoldenRATIO

GoldenRATIO 的收藏功能为重复的任务保存设置

> GoldenRATIO 的收藏功能为重复的任务保存设置

GoldenRATIO 软件方便地把黄金比例运用到网页,界面和布局的设计里。可以在Mac App 商店里花 $2.99 美元购买,它的功能有:视觉反馈的计算器,为重复的任务保存屏幕位置和设置的收藏夹,点击(click-thru)模式可以让它在Photoshop 作为overlay并仍可以在画布(canvas)上操作。

02 Golden Ratio Typography Calculator(字体黄金比例计算器)

这个计算器出自Pearsonified,它帮你创建一行符合黄金比例原则的完美字体。只需输入字体大小,内容区域的宽度,或者两者在网站内的数值都行,然后点击 Set my type! 按钮。如果你想为每行的文字优化,你可以输入一个可选的 CPL 值。

03 Phicalculator

Phicalculator 只做一件事,并且做到最好

> Phicalculator 只做一件事,并且做到最好

这个简单实用的免费软件,可以在 Mac 和 PC 上使用。输入任何数字它都能计算出对应的黄金比例数字。

04 Atrise Golden Section

Atrise工具能让你根据黄金比例做视觉上的设计

> Atrise工具能让你根据黄金比例做视觉上的设计

这个在屏幕上有尺子和网格的软件,能节省你费时杂乱的计算并能让你看得到黄金比例的设计过程。你可以在项目制作过程中,直接看到和更改协调的形式和大小。普通许可证需要 49 美元,但你可以免费下载试用版,为期 30 天。