之前在 Medium 上看到的这篇文章，翻译了一下，介绍给大家。作者信息见文章末尾。

黄金分割比在建筑、电器、logo 设计和摄影等领域都有着举足轻重的作用。我不准备用过多的篇幅去讲它的概念，大家可以在维基百科中去了解。

我们的意识总是倾向于接受和谐和美好事物，而黄金分割比就可以在感知上使一款产品让人感到舒适和愉悦。简单点说，它就是一个让产品在设计中达到某种平衡的工具。

这种方法在 UI 设计中却不是那么流行，因为它看起来太难了。在这篇文章里，我将用一些简单的语言解释如何动手画出一个黄金分割比并且将其应用到设计工作中。

几何学

如果一条边比另一边的值为 1：1.618，那么这个比例就是黄金分割比。它画起来非常的容易：

1. 画一个正方形。

2. 画一条直线，连接正方形一边的中点（A）和对角（B）。

3. 将画好的直线作为圆的半径，然后将圆形从 B 点画到 C 点，由此产生了一个新的矩形（红色部分）。原来的正方形加上新形成的矩形即为“黄金矩形”。

4. 如果我们在大矩形和小矩形中各画一条对角线，两条对角线相交的点即为“黄金矩形”的焦点。如果我们把界面中的重要的交互按钮放在这个焦点附近，那么可以很容易的吸引用户的注意力。

5. 这个图形特殊的好处在于，通过两条对角线的切分，我们可以得到一个更小的矩形，它包含一个正方形和一个长方形，一个倒着的矩形。

6. 最神奇的事来了：如果我们把每个正方形的边做圆形的半径，那么所有的 1/4 弧形可以连接起来，这就是“黄金螺旋”。

这个矩形可以旋转、调整至任意想要的大小和形式，从而可以适合画布、界面的大小。

三角形

1. 画一个三角形ABC，其中 AC=2AB.

2. 以 B 为圆心，AB 为半径画圆，圆形与 BC 相交于 D 点。

3. 以 C 为圆心，CD 为半径画圆，圆形与 AC相交于 E 点。

4. 过 E 点画一条垂直的线到 BC。

这时，我们可以得到一个与大三角形成比例的小三角形。这两个三角形的比也是 1：1.618，是一个非常重要的“黄金分割比”。

自然之美

如果我们继续分割三角形然后在它们之间画圆，我们会发现后两个圆形的半径之和等于前一个圆形的半径。这就是斐波那契数列（Fibonacci sequence）：

1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, ..

（从第3项开始，每一项都等于前两项之和）

如果你把“黄金螺旋”以 40° 或 60° 的角度旋转，你会画出一个美丽的图形：

如果你将它以 20° 的角度旋转，并且以水平的方向延展，你会得到：

有了黄金分割比的帮助，我们可以在 icon，logo，和界面等设计中画出任何形状。

移动界面的设计

下面举几个使用“黄金分割比”来设计的例子。第一个是 ASOS 商店的产品。起初，在它的首屏，有图片和几个按钮：收藏、播放视频和分享。这非常不友好，因为你需要滚动页面来找到关于大小、材质的信息，甚至将它加入购物车也很困难。

如果你画一个“黄金矩形”，在这个界面中如何放置元素就会变得很明显。这种结构可以很直观的展示出操作功能。

从下图可以看到，在“关键点”上，我们放置了非常重要的收藏按钮。

而且，所有的元素都足够大并且相互之间的距离和到页面边缘的距离很合适，所以用一个拇指可以很轻松的进行点按操作。

第二个例子是一款博客应用。如下图所示，我们把所有的元素都放到了矩形中，包括一个很大的图片、和大面积的文字区域。而“喜欢”和“评论”按钮被放置在了图片的右下侧区域，这样，它可以显眼但不唐突。同时，它们不会覆盖图片，而且用户看起来也足够清晰。

这就是我要介绍的所有内容。希望你今后不会害怕“1:1.618”这个比例，并且愿意使用它进行页面设计。
：）

本文作者：
Mariya Tereshkova: maws.ru | UI‐designer from Saint‐Petersburg | Teacher on design courses at Epic Skills