之前在 Medium 上看到的這篇文章，翻譯了一下，介紹給大家。作者信息見文章末尾。
黃金分割比在建筑、電器、logo 設計和攝影等領域都有著舉足輕重的作用。我不準備用過多的篇幅去講它的概念，大家可以在維基百科中去了解。
我們的意識總是傾向于接受和諧和美好事物，而黃金分割比就可以在感知上使一款產品讓人感到舒適和愉悅。簡單點說，它就是一個讓產品在設計中達到某種平衡的工具。
這種方法在 UI 設計中卻不是那么流行，因為它看起來太難了。在這篇文章里，我將用一些簡單的語言解釋如何動手畫出一個黃金分割比并且將其應用到設計工作中。
幾何學
如果一條邊比另一邊的值為 1：1.618，那么這個比例就是黃金分割比。它畫起來非常的容易：
畫一個正方形。
畫一條直線，連接正方形一邊的中點（A）和對角（B）。
將畫好的直線作為圓的半徑，然后將圓形從 B 點畫到 C 點，由此產生了一個新的矩形（紅色部分）。原來的正方形加上新形成的矩形即為“黃金矩形”。
如果我們在大矩形和小矩形中各畫一條對角線，兩條對角線相交的點即為“黃金矩形”的焦點。如果我們把界面中的重要的交互按鈕放在這個焦點附近，那么可以很容易的吸引用戶的注意力。
這個圖形特殊的好處在于，通過兩條對角線的切分，我們可以得到一個更小的矩形，它包含一個正方形和一個長方形，一個倒著的矩形。
最神奇的事來了：如果我們把每個正方形的邊做圓形的半徑，那么所有的 1/4 弧形可以連接起來，這就是“黃金螺旋”。
這個矩形可以旋轉、調整至任意想要的大小和形式，從而可以適合畫布、界面的大小。
三角形
畫一個三角形ABC，其中 AC=2AB.
以 B 為圓心，AB 為半徑畫圓，圓形與 BC 相交于 D 點。
以 C 為圓心，CD 為半徑畫圓，圓形與 AC相交于 E 點。
過 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
