黃金比例：理解和使用它的終極指南
已發表: 2019-06-07世界各地的設計師都應該知道黃金比例。 這是一個數學比率，可以創造出美觀的設計。 由於黃金比例在自然界中如此頻繁地存在，因此其結果看起來很自然也就不足為奇了。
Bogomil Mihaylov 在 Unsplash 上的照片
黃金比例還有其他幾個名稱：
- 神聖的比例
- 中庸之道
- 黃金分割
- Phi（希臘字母）
黃金比例背後的數學
我將盡可能簡單地解釋黃金分割率的數學原理，而不涉及您實際上不需要知道的細節。 如果你能跟上數學，那太好了。 但如果你不能，那也沒關係——你仍然可以在你的設計中使用這個概念。
要了解黃金比例，首先要了解黃金矩形
黃金矩形是一個大矩形，裡面有一個正方形。 正方形的邊等於長方形的最短長度：
資料來源：維基百科
黃金比例是一個（有點）等於 1.618 的數字，就像 pi 大約等於 3.14，但不完全等於。
你把一條線分成兩部分——長部分 (a) 和短部分 (b)。 整個長度 (a + b) 除以 (a) 等於 (a) 除以 (b)。 這兩個數字都等於 1.618。 因此，(a + b) 除以 (a) 等於 1.618，而 (a) 除以 (b)也等於 1.618。
回到黃金矩形，因為它更容易理解
當您在矩形內放置一個正方形時，它會創建另一個較小的矩形。 忽略黑線並查看紅色和綠色框：
紅色正方形有四個等長的邊，該長度等於矩形的最短長度。 通過分割那個正方形，您會自動創建另一個較小的矩形（以綠色輪廓）。 他們一起創建了一個完整的黃金比例佈局和黃金螺旋的基礎。
您還可以使用較小的矩形製作一個新的黃金矩形，就像我用藍色標出的那個：
傳統的黃金比例圖有八個黃金矩形：
這是最小的黃金矩形，#8：
如果你從左下角開始，做一個拱形連接每個方形和小矩形橫截面的遠端，你會得到金色螺旋。
斐波那契數列
斐波那契數列非常容易理解：從零和 1 開始，然後通過將前面的兩個數字相加得到下一個數字。 0 + 1 = 1，然後 1 + 1 = 2，等等。序列中的前幾個數字是 0, 1, 1, 2, 3, 5, 8, 13, 21, 34。
如果您使用這些數字創建具有這些寬度的正方形，您幾乎可以創建一個金色螺旋：
資料來源：數學很有趣
黃金圈
有時，您會看到在正方形中繪製的圓圈代替螺旋線或除了螺旋線之外。 如果您在黃金比例疊加的框中繪製完美的圓，它們將與一個相鄰的圓的比例為 1:1.618。
資料來源：聚光燈部
百事可樂和 Twitter 標誌使用黃金圈：
資料來源：混合會談
你以前見過這個，很多
大自然充滿了黃金比例。 它存在於植物群、貝殼、天氣中……
來源：Annie Spratt 在 Unsplash 上的照片
來源：美國宇航局在 Unsplash 上的照片
因為我們經常看到它，我們的大腦更喜歡它。 這種與生俱來的吸引力就是為什麼它是如此強大的佈局供設計師使用。
藝術與設計的黃金比例
有時黃金比例超級容易識別：
資料來源：staceysdetailinginc.com
有時你會說，“我不知道你在說什麼……哦等等。 現在我看到了。 我認為。”
資料來源：營銷內部人士
其他時候你可能會發瘋看它......
資料來源：寬牆
……但是如果您將主要黃金矩形歸零，它會變得更加清晰：
我們來看一個經常被引用的例子：帕台農神廟
來源：創意博客
一開始，你可能會看到這個然後說，“這對我來說看起來是對稱的。 我看到的東西怎麼會和那個金矩形螺旋的東西相配？”
黃金比例不是關於設計的每個部分如何完全適合併且只適合特定部分。 如果是這樣的話，帕台農神廟的右側將是一個大街區，而左側將被分割成更小的街區。
相反，比例用於創造和諧和比例，這可以用幾種不同的方式來解釋。
雖然黃金比例以數學為基礎，但它可以以創造性的方式進行調整。 就帕台農神廟而言，黃金比例決定了設計組件的高度和位置。 另外，有很多方法可以在上面放置黃金比例圖：
資料來源：Archinect
資料來源：Medium 上的 Esther Sugihto
資料來源：GoldenNumber.net
黃金比例和網站設計
無論您是在學習數學還是您的頭腦即將爆炸，黃金比例在設計方面都更容易理解。 你已經完成了繁重的工作。 現在是時候採用基本的疊加層並使您的 Web 組件非常令人愉悅了。
黃金比例和佈局
如果您想要完美的黃金比例佈局，請將尺寸設置為 1:1.618。 例如，您可以將寬度設置為 960 像素，將高度設置為 594 像素。 黃金矩形每邊 594 像素，矩形佔據佈局的其餘部分 (594 x 366)。
Calculator Soup 有一個有用的黃金比例計算器，您可以在其中設置任何項（A、B 或 A + B）以找到正確的黃金比例值。
或者，您可以簡單地使用這種類型的兩列佈局，其中一列比另一列寬很多。 它井井有條，清楚地顯示了層次結構。
資料來源：國家地理
我在我的網站上使用它是因為主頁是我博客文章的集合，我覺得這是最受認可的博客佈局之一：
不過，在我看來，我們在 Elegant Themes 上使用的對稱佈局更現代：
黃金比例和間距
黃金比例可以幫助您確定放置設計元素的位置、使用的比例以及留出負空間的位置。 這是一個簡單的例子，你幾乎可以看到黃金比例疊加，甚至不需要把它放在上面：
資料來源：Digiarts 2011
這是我在 Photoshop 中應用金色螺旋時的樣子：
同樣，黃金比例以數學為基礎，但將其應用於設計時，它並不完美。 該設計不是在黃金矩形上創建的，因此黃金螺旋不符合正常比例。 但是，您可以看到它如何引導設計師選擇放置設計中最大元素以及最小元素和負空間的位置。
您還可以將黃金比例疊加層分層以將其應用於同一設計的不同元素：
資料來源：Lemongraphic 品牌。 來自 Canva 的示例。
黃金比例和內容
當您同時考慮黃金比例的佈局和間距時，您就可以開始決定在您的網站上放置內容的位置。
讓我們再看看國家地理網站，這次是 Canva 的黃金比例疊加：
佈局被拆分，以便內容沿著螺旋的中心線排列。 在左側，有一大塊內容。 在右側，內容變得更密集，並且有更多的負空間。 朝向螺旋的中心花飾，你會看到第二個國家地理標誌——沒有比將它放在眼睛自然去的地方更好的方式來推動家居品牌。
這是一個很好的例子，說明 Golden Spiral 如何引導您的眼睛瀏覽設計，甚至超越其主要組件。 如果您有很多內容要擠在一頁上，這將非常有用。 你還會注意到，即使有如此緊湊和詳細的設計，裡面仍然有負空間。
資料來源：Helms Workshop 設計。 來自 Canva 的示例。
榮譽獎：黃金比例和圖像
黃金比例也用於攝影構圖。 黃金比例不是創建黃金螺旋，而是將圖像分成六個塊。 在這種類型的網格中使用相同的黃金比例：部分的寬度和高度為 1 或 0.618。
資料來源：帆布
然後使用交叉點來構圖。 目標是將主體或主體的主要部分放在一條交叉線上——主體不應該居中，一些塊應該留空（至少在大多數情況下——微距攝影和特寫肖像將填滿幾乎所有的框架）。 通過這樣做，您可以創建比主體居中更有趣的肖像。
遵循此規則的一種更簡單且更易於使用的方法是使用三分法網格，您可能在手機的內置相機或數碼單反相機上使用了該網格。
這是我給我表弟的兒子拍的照片。 我已經在它上面放置了三分法網格，以向您展示主題填充和不填充框架的位置。
另外，看看金色螺旋如何幾乎完美地環繞主題：
黃金比例與三分法不同，因為三分法網格具有相同長度和寬度的部分。 然而，它非常接近——而且容易得多——這是攝影師在構圖或編輯照片時通常使用的。
包起來
黃金比例可以按原樣使用，也可以根據您的目的進行調整併調整大小——數學可能有嚴格的規則，但創造力沒有。 雖然您可以從一開始就使用黃金比例來指導您的設計，但您也可以在開始設計後使用它來進行調整和改進。 目標是讓比率指導您，而不是強行將設計融入其中。
準備好更多地使用您的網站佈局了嗎？ 查看我們關於使用 Divi 的新高度和寬度選項來創建響應式設計的文章。