编者按：研究表明，能欣赏到美是人类与生俱来的一种品质。黄金比例就是最经典的一种美学，在大量艺术与建筑的案例中都能找到黄金比例的身影。但其实，在UI设计中运用黄金比例也可以做出非常赏心悦目的界面，本文提供了如何运用黄金比例来进行UI设计的一些技巧，文章来自编译。

图片来源：pixabay

比例体系以比率为基础，这套体系在建筑和艺术当中已经沿用了好几个世纪。早在公元前 500 年左右，菲狄亚斯、柏拉图以及欧几里得就首先提到了黄金比例。我们说这个比例在历史上曾经被多次发现应该是合理的假设——也因此它有很多个名字，包括中庸之道（golden mean）、黄金比例（golden ratio）、黄金分割（golden section）、神圣比例（divine proportion，列奥纳多·达芬奇）以及希腊符号 φ。

其确切的数学定义如下（根据维基百科）：

黄金比例，又称黄金分割，是一个数学常数，一般以希腊字母φ表示。可以透过以下代数式定义：

黄金分割的两个部分 (a/b = φ)

可以证明黄金比例 φ 具有特殊性质：

这个数约等于 1.618033…（无理数）。（你也可以用 1/0.618=1.618。）

Giacomo Rizzolatti 和与 Cinzia Di Dio 的一项研究表明，人类大脑对于比例为黄金比例的人体有着天生的依赖。在这项研究里，他们给没有艺术背景的受试者呈现雕像的原始图像与扭曲版。原始雕像的比例体现了黄金分割。结果看到原始图像后受试者有一组脑细胞被明显激活了，而看扭曲版的图像那组脑细胞则没有反应，这说明在一定程度上来说美是一种与生俱来的品质。

黄金比例已被用来分析自然、建筑、绘画和音乐里面发现的数目。在使用黄金比例时，大家往往认定这能够创造出一种有机、平衡且美观的构图，这样的构思被认为是人的眼睛所喜欢看到的。

在建筑物和艺术品方面，黄金比例的例子比比皆是，比如吉萨金字塔、雅典帕台农神庙以及达芬奇的蒙娜丽莎。

达芬奇的蒙娜丽莎：头部的长宽比（a1 和 b1 段），以及躯干的长宽度比（从眼线开始到手——a2 和 b2 段）均符合黄金比例。

黄金矩形与黄金螺旋

黄金矩形就是一个边长为黄金比例的矩形。

黄金矩形的边之比符合黄金比例 (a/b = φ)。

黄金矩形有一个有趣的特性：如果你把它分成一个边长等于矩形较短那条边的正方形以及另一个矩形（如下图所示）的话，结果尺寸较小的这个矩形也是黄金矩形。（这一属性可以直接从上一节所述的黄金比例属性派生而来。）

当你像上图那样把黄金矩形划分为正方形和小一点的矩形时，小一点的那个矩形也是黄金矩形。

通过将每一个黄金矩形划分成一个小正方形和另一个小黄金矩形来，你可以无限地重复这一过程。其结果将是一个黄金螺旋——只要把每个正方形的对角连接起来就能得到这个螺旋。

要想画出黄金螺旋，首先将黄金矩形 ABCD 划分为正方形 ABEF 与小黄金矩形 EFDC。然后对小的黄金矩形 EFDC 重复此过程。黄金螺旋是通过连接（画圆弧）所得正方形的对角形成。

很多自然发生的元素都有黄金螺旋的存在，比方说植物以及飓风这样的天气模式。

UI设计中黄金比例的例子

那么界面设计又应该如何应用黄金比例呢？我们不妨看几个常见的例子：

文字大小

不同的字体大小可以用黄金比例来设置。假设网站body元素的字体大小为 16 像素。标题字体大小可以是body大小的黄金比例倍数——也就是说，可以是 16 φ = 16 x 1.618 = 25.88 或大约 26 像素。

有时候也可以利用黄金比例来确定特定字体大小所需的行高。（行高是字体高度加上文本行之间的空白高度——这个基本上决定了文本行在段落里面排列的紧密程度。）比方说，如果正文文案的字体大小为 16px，则行高可以是 16 φ = 16 x 1.618 = 25.88 也即是约为 26px。

行高是字体的高度加上文本行之间的空白高度。

上：标题与正文的大小之比为黄金比例。行高与字体大小之比也成黄金比例。行高的增加可令阅读变得更容易。下：此文本块并未使用黄金比例。

不过，结果证明，事情稍微有点复杂，因为随着行变长，行高也必须增加还能保持可读性。比方说，雷丁大学 2004 年的一项研究得出的结论是，线条越长需要的行间距就得越高，这样才方便眼睛轻松地找到下一行。如果你真的希望按照黄金比例设计排版的话，可以考虑使用黄金比例排版计算器，只要提供字体大小和线宽，它就能够计算出理想的行高。

图像裁剪

要想创作出吸引人的影像，构图很重要。裁剪图像，做出强有力的构图有一种快速简便的方法，那就是让图像的焦点处在金色螺旋之上。

通过让影像的焦点位于黄金螺旋之上，然后对图像进行相应裁剪，即可创建出强大的构图，如左侧的例子所示。

如何用黄金螺旋裁剪图像。

网页布局

当你把黄金矩形划分成一个正方形和一个小一点的黄金矩形时，自然就会创建出一个 2 列的布局。所得到的布局非常适合主要由主要内容区和侧栏构成的排版。宽松地遵循这种布局就可以给界面创建结构，并达到平衡。不过，当今的响应式网站很难完全支持所有视窗尺寸都符合黄金比例。如果你的关注重点是根据比例建立基本网格，然后让组件与其对齐的话，至少某些屏幕尺寸还是可以符合这种比例的。

在左侧运用黄金比例的一个基本的 Web 网格结构。

如何利用黄金比例创建宽松的页面网格

结论

有些设计师对黄金比例十分着迷，会利用它来创建和编辑各种界面设计元素。有的人则认为黄金比例其实也不怎么样，不见得比用来得出尺寸和比例的任何其他办法更有效。不管怎样，对于新的视觉设计师或想要通过具体的数学方法提高技能的设计师来说，黄金比例都是一个有用的参考。

译者：boxi