之前在 Medium 上看到的這篇文章盐数，翻譯了一下埂淮，介紹給大家姑隅。作者信息見文章末尾。
黃金分割比在建筑倔撞、電器讲仰、logo 設計和攝影等領域都有著舉足輕重的作用。我不準備用過多的篇幅去講它的概念痪蝇，大家可以在維基百科中去了解鄙陡。
我們的意識總是傾向于接受和諧和美好事物冕房，而黃金分割比就可以在感知上使一款產(chǎn)品讓人感到舒適和愉悅。簡單點說趁矾，它就是一個讓產(chǎn)品在設計中達到某種平衡的工具耙册。
這種方法在 UI 設計中卻不是那么流行，因為它看起來太難了毫捣。在這篇文章里详拙，我將用一些簡單的語言解釋如何動手畫出一個黃金分割比并且將其應用到設計工作中。
幾何學
如果一條邊比另一邊的值為 1：1.618蔓同，那么這個比例就是黃金分割比溪厘。它畫起來非常的容易：
畫一個正方形。
畫一條直線牌柄，連接正方形一邊的中點（A）和對角（B）畸悬。
將畫好的直線作為圓的半徑，然后將圓形從 B 點畫到 C 點珊佣，由此產(chǎn)生了一個新的矩形（紅色部分）蹋宦。原來的正方形加上新形成的矩形即為“黃金矩形”。
如果我們在大矩形和小矩形中各畫一條對角線咒锻，兩條對角線相交的點即為“黃金矩形”的焦點丙挽。如果我們把界面中的重要的交互按鈕放在這個焦點附近，那么可以很容易的吸引用戶的注意力拦英。
這個圖形特殊的好處在于懊蒸，通過兩條對角線的切分，我們可以得到一個更小的矩形滨巴，它包含一個正方形和一個長方形思灌，一個倒著的矩形。
最神奇的事來了：如果我們把每個正方形的邊做圓形的半徑恭取，那么所有的 1/4 弧形可以連接起來泰偿，這就是“黃金螺旋”。
這個矩形可以旋轉(zhuǎn)蜈垮、調(diào)整至任意想要的大小和形式耗跛，從而可以適合畫布、界面的大小攒发。
三角形
畫一個三角形ABC调塌，其中 AC=2AB.
以 B 為圓心，AB 為半徑畫圓惠猿，圓形與 BC 相交于 D 點羔砾。
以 C 為圓心，CD 為半徑畫圓，圓形與 AC相交于 E 點蜒茄。
過 E 點畫一條垂直的線到 BC唉擂。
這時，我們可以得到一個與大三角形成比例的小三角形檀葛。這兩個三角形的比也是 1：1.618玩祟，是一個非常重要的“黃金分割比”。
自然之美
如果我們繼續(xù)分割三角形然后在它們之間畫圓屿聋，我們會發(fā)現(xiàn)后兩個圓形的半徑之和等于前一個圓形的半徑空扎。這就是斐波那契數(shù)列（Fibonacci sequence）：
1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, ..
（從第3項開始，每一項都等于前兩項之和）
如果你把“黃金螺旋”以 40° 或 60° 的角度旋轉(zhuǎn)润讥，你會畫出一個美麗的圖形：
如果你將它以 20° 的角度旋轉(zhuǎn)转锈，并且以水平的方向延展，你會得到：
有了黃金分割比的幫助楚殿，我們可以在 icon撮慨，logo，和界面等設計中畫出任何形狀脆粥。
移動界面的設計
下面舉幾個使用“黃金分割比”來設計的例子砌溺。第一個是 ASOS 商店的產(chǎn)品。起初变隔，在它的首屏规伐，有圖片和幾個按鈕：收藏、播放視頻和分享匣缘。這非常不友好猖闪，因為你需要滾動頁面來找到關于大小、材質(zhì)的信息肌厨，甚至將它加入購物車也很困難培慌。
如果你畫一個“黃金矩形”，在這個界面中如何放置元素就會變得很明顯夏哭。這種結(jié)構(gòu)可以很直觀的展示出操作功能检柬。
從下圖可以看到献联，在“關鍵點”上竖配，我們放置了非常重要的收藏按鈕。
而且里逆，所有的元素都足夠大并且相互之間的距離和到頁面邊緣的距離很合適进胯，所以用一個拇指可以很輕松的進行點按操作。
第二個例子是一款博客應用原押。如下圖所示胁镐，我們把所有的元素都放到了矩形中，包括一個很大的圖片、和大面積的文字區(qū)域盯漂。而“喜歡”和“評論”按鈕被放置在了圖片的右下側(cè)區(qū)域颇玷，這樣，它可以顯眼但不唐突就缆。同時帖渠，它們不會覆蓋圖片，而且用戶看起來也足夠清晰竭宰。
這就是我要介紹的所有內(nèi)容空郊。希望你今后不會害怕“1:1.618”這個比例，并且愿意使用它進行頁面設計切揭。
本文作者：
Mariya Tereshkova: maws.ru | UI‐designer from Saint‐Petersburg | Teacher on design courses at Epic Skills
