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

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

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

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

詳細從以下開始。

黃金比例是什么枢希？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1剥扣、布局：在尺寸上運用黃金比例

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

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

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

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

Photography

2衣式、 留白的空間：利用黃金比例去配置

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

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

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

下面的這個設計案例，是用來做藝術節(jié)宣傳的傳單耳幢，從LOGO到圖案岸晦，都利用了黃金比例來進行配置【υ澹看起來很棒不是么启上？標志周圍的留白得到了保證，通過黃金比例店印，LOGO的大小和位置都很直觀的看到冈在，并確定下來。

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

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

3盹牧、內容：設法利用上黃金比例的螺旋線

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

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

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

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

Behance

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

4右遭、 攝影圖片：利用三分法

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

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

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

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

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

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

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

5、 LOGO的設計：利用黃金比例中的圓

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

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

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

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

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

譯者：喪心病狂十六夜貓

來源：學ui網