@喪心病狂十六夜貓?：有好多同學覺得黃金比例有點虛，其實可能是沒遇到一篇足夠簡單實用的教程，比如今天這篇，案例超級豐富，講解逐步深入，不會突然懵住，而且從網頁/攝影構圖/LOGO到封面設計等都有相關的教程，小白花五分鐘看完也能明白個大概了，來收。

從埃及彩繪的大金字塔、蒙娜麗莎，到推特和百事可樂的LOGO，他們的共同點究竟是啥？

答案非常簡單，當然是在設計中利用了黃金比例（英: Golden Ratio）啦。

黃金比例是數學上的一個比例。在自然界和設計中，你所看見的美景有很多都用到了黃金比例。那么，在實際操作中用上他吧。通過運用黃金比例，來改良、提高你的設計。

詳細從以下開始。

黃金比例是什么？

黃金比例（英: Golden Ratio）是，將一條線分割為a，b兩條線，這時，總長度a+b與長度較長的a之比等于a與長度較短的b之比。?這時他們的值剛好為1.618。

用公式來表示的話未免太抽象了。在設計中可以利用黃金比例進行調和或者進行完美的分割。通過在設計中結合黃金比例，可以很輕松的將美的感覺表現出來。

黃金比例這種美麗的比例，已經被應用了很多個世紀了。從吉薩的大金字塔到希臘的帕特農神廟，西斯廷教堂內創作「創造亞當（Creation of Adam）」的米開朗基羅和畫出「蒙娜麗莎」的達爾文，到現在的推特和百事的LOGO都有他的身影。甚至從我們的臉到身體的各個部位，都可以通過這一數學的比例來表現出來

實際上，我們的大腦，也比較喜歡利用了黃金比例的物體或者圖像，是真正的潛意識的選擇。通過利用黃金比例在設計中進行一些微調，可以給你的大腦帶來一些強烈的沖擊。

黃金比例，也可以應用到圖形當中。首先我們來準備一個正方形，然后將他的一邊增長為另一邊的1.618倍，這樣就制作了一個美麗均等的黃金長方形了。

將正方形和長方形并排放在一起，就可以將黃金比例直觀的表現出來了。

上面的這個案例，由于最右邊的長方形適用了黃金比例，左邊的正方形將會不斷變小。

上面的這個例子中正方形的每個角都被使用了，通過繪制拱形的平滑曲線，螺旋狀的線（斐波那契數列）被描繪出來了。這組數列，從0開始，后面的數是前面兩個數的和，像0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144這樣連續不斷下去。

這樣美麗的螺旋設計，在向日葵的花，貝殼，臺風，蕨草等自然界中是很常見的。無疑也是非常有吸引力的。

我們繼續進行下一個步驟，讓我們在每一個正方形中都畫上一個圓。因為利用了1：1.618這樣一個黃金比例，你可以繪制得到每一個平衡的圓。

那么利用黃金比例來繪制正方形，長方形和圓形的方法都學會了嗎？有效的去利用這些技術，讓我們的設計變得更加有魅力吧！

基礎知識講完了，那么實例從以下開始。

在設計中利用黃金比例的五個要點

黃金比例的基礎知識在上文中已經全部教給大家了，實際去利用黃金比例，如何通過黃金比例來改善設計的五個要點，請讓我一一道來。

特別是黃金比例，不管是布局、空間留白、內容、攝影還是標志設計，可以適用于任何構圖之中。

01. 布局：在尺寸上運用黃金比例

在決定布局的大小的時候，試著以黃金比例為方針設計吧。讓我們試著用最簡單的方法，也就是1：1.618這個比例來決定布局的尺寸吧。

舉個例子，考慮到一般的網頁是960px，按照1：1.618這個比例來計算的話，那么高度就可以設置為594px。

同時在布局上也可以利用黃金比例，將其分為兩個部分。通過這種方法，可以將兩個美麗的景色完美的調和在一起。

二列式的布局，和網頁有著很好的相容性，也是常見的網頁設計布局方法。下面的這個設計案例，利用好看的黃金比例，我們可以由此建立一個整潔有序的網站，同時還能提高網頁的清潔度和易讀性。通過這種無意識的排列，將這種層次感傳遞給用戶。

Photography

02.?留白的空間：利用黃金比例去配置

不管在什么樣的設計中，確保留白的空間都是十分重要的。通過使用這種方法，可以分辨出設計的好壞。確定留白的空間是需要時間的，但是我們可以通過利用黃金比例來代替他，將各種各樣的正方形作為設計零件來設置。

有吸引力的設計和較為直觀的位置，通過使用黃金比例進行微調，在視覺上就會有很大的改觀。

當幾種設計要素并列的場合，通過結合下面的幾組黃金比例，將設計中的統一感的魅力給表現出來。

下面的這個設計案例，是用來做藝術節宣傳的傳單，從LOGO到圖案，都利用了黃金比例來進行配置。看起來很棒不是么？標志周圍的留白得到了保證，通過黃金比例，LOGO的大小和位置都很直觀的看到，并確定下來。

再下面這個設計案例，由三個設計要素組成（小的老鷹，文字，大的老鷹），他們所配置的場所，都可以通過黃金比例來確定下來。

然后在小的老鷹上加上黃金比例，一個漂亮的外觀就設計完成了。

03.?內容：設法利用上黃金比例的螺旋線

可以由黃金比例的螺旋線，來決定整個頁面的內容應該怎么來布局。我們的眼睛，在他最細的部分可以看到他的細節，而螺旋線最密集的部分，視線往往會更加集中。因此，我們可以將焦點放在螺旋線的中心。

讓我們再來看看技巧1中的這個案例。你可以看到，他將小LOGO全部都放在了螺旋線的中心。通過利用黃金比例，可以自然的將用戶的注意吸引過去。

下面的這個設計案例，雖然將很多內容混合在了一起，但通過使用黃金比例和黃金螺旋，我們可以很輕松的將信息整理出來。首先將用戶的目光集中在“Bonjour My Nameis Tim”，然后將視線集中在左邊的側邊欄上，也很好的保證了留白的空間。

下面這個設計案例，通過螺旋線的不斷延伸，字符的大小也一點點的變小，設計也變得越來越密集。

Behance

在另一個設計案例中，利用黃金比例和黃金螺旋，確定了內容和布局。通過將不同大小的正方形作為設計要素來配置，將視線進行誘導，將設計的故事性很好的演繹了出來。

04.?攝影圖片：利用三分法

圖像的構圖（英:Composition）可以將重要的情報傳遞出來，也是創造出美麗的設計的一個重要的方法。在攝影圖片上利用黃金比例，是可以幫助我們引導視線的重要的設計要素。利用黃金比例，可以將圖像劃分為橫豎三個部分。

此時，畫面的的比率就可以利用黃金分割法來設置為1：0.618：1，。在線交匯的地方將設計要素配置上去，將視線集中起來，表現出充滿魅力的構圖。

利用黃金比例，還有另一種攝影照片的構圖技巧可以利用，也就是三分割法（英:Rule of Thirds）。將攝影圖片按照1：1：1均等的方法劃分出來，所有的空間都是相同的大小。最重要的設計要素可以配置在中央的長方形的四個角周圍。

下面的這個設計案例，就是利用了黃金比例，來確定了留白的位置。女性模特的鼻子和額頭，和水平線的頂部對齊，眼睛和鼻子的位置是沿著中心垂直的線來對齊配置的。

下面的這個設計案例也是利用了三分割法（英: Rule of Thirds）。這里，幾乎空白的中央的長方形，設計成了集中注意力的焦點。女性模特的眼睛，配置在長方形的角的附近，通過這樣的設計將魅力展現給用戶。

下面的另一種設計案例也是利用了黃金比例，他將女性模特的眼睛放在了中心，從中心開始一點點向外配置，垂直的線和女性模特的臉呈一條直線，讓人可以看出他的布局是十分整齊的。

然后從整體的設計來看，他利用了黃金比例和黃金螺旋線。他還沿著螺旋線來進行設計，隨著螺旋線的不斷集中，將詳細的信息也列舉到了出來。

05.?LOGO的設計：利用黃金比例中的圓

利用黃金比例，可以按照一定的比例均得的得到正方形和長方形，同時也能獲得均等的圓圈。利用正方形畫出一個個相連接的圓，其中的任何一個都是遵循了1：1.618這個比例的。

利用黃金比例畫的圓，也就是「黃金圓（英: GoldenCircles）」不僅可以表現出美麗的視覺感、統一感，同樣也能應用于LOGO設計之中。讓我們一起來看看Pepsi和Twitter的LOGO設計吧。

Pepsi的LOGO設計，利用了黃金比例，將兩個獨特的圓圈配置在了一起。不管是兩個圓圈相結合，還是LOGO中間的白色部分，都利用了黃金比例來進行配置。

Twitter的LOGO設計則是運用了幾何學（英: Geometry，利用多個圓圈配置在一起而構成的。相比起通過并列的配置黃金比例的元素，雖然看起來不是很準確，但是為了讓平衡和設計調整的更加和諧，在他的表面也使用了一個黃金圓。

你可以利用各種各樣的設計要素來靈活的使用黃金比例（英: Golden Ratio）。可能僅僅只是幾個微小的調整，就能讓你的設計從一個「不錯的設計（Good Design）」變成「特別」

「優設優秀教程合集」

地圖圖標教程：
《PS教程！手把手教你打造一個配色小清新的地圖圖標》

卡通動物肖像：
《AI教程！教你繪制六個扁平化風格的卡通小動物肖像》

卡通人物肖像：
《AI教程！教你繪制扁平化風格的卡通人物肖像（四人組合篇）》

原文地址：photoshopvip
優設譯者：@喪心病狂十六夜貓

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量112萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com

a