最佳比例的秘密:如何在設計中充分運用黃金比例?

最佳比例的秘密:如何在設計中充分運用黃金比例?

你的所有努力,上天都知道

願所有的夢想都指日可待

嗨,親愛的設計師:

今天要和你分享的是黃金比例的秘密。你發現了嗎?

吉薩金字塔、蒙娜麗莎、Twitter和百事可樂有什麼共同點?答案很簡單,它們的設計都遵循了黃金比例。作為一個常見的數學比例,黃金比例實際上是從自然界中總結並發現的,用於設計中的時候能賦予作品更多的設計美感,賞心悅目。那麼,黃金比例到底是怎麼樣的比例,它又是如何運用到設計中並提升設計作品的呢?一起往下看:

什麼是黃金比例?

黃金比例是一個比較特殊的數學比例,通常我們會用線段分割來解釋這個比例:把一條線段分割為兩部分,較短部分與較長部分長度之比等於較長部分與整體長度之比,其比值是一個無理數,取其前三位數字的近似值是0.618。

當然,我們今天探討的並非是數學問題而是設計和美。黃金比例之所以被冠名以「黃金」二字,自然是因為這個比例帶來的和諧與美感,當你應用到設計作品中的時候,這種比例會營造出藝術感。

黃金比例已經被我們的先輩運用了幾千年,從埃及的吉薩金字塔的設計比例到雅典的巴特農神殿,從米開郎琪羅為西斯廷教堂所雕刻的亞當到達芬奇的蒙娜麗莎,從百事可樂的LOGO到推特的LOGO設計,甚至我們的面孔都遵循這個數學比例:

事實上,我們的大腦似乎先天就比較青睞使用黃金比例的對象和圖片,這幾乎是下意識的吸引力,大腦甚至會對眼睛看到的事物進行小幅度的微調以靠近黃金比例,提高我們自身對於外物的記憶和印象。

黃金比例無疑可以應用於各種圖形,如果你將一個正方形拉伸為一個矩形,讓長是寬的1.618倍,就可以獲得一個「完美」的矩形。

將兩個圖形疊加,你就可以獲得一個清晰直觀的黃金比例,被分割出來的小矩形同樣遵循著黃金比例。

如果你繼續以這樣的方式向新的矩形中填充正方形,那麼你填充的正方形會越來越小:

像上圖所示,你最終繪製出來的將會是一個黃金螺旋(而其中的矩形也就遵循著傳說中的斐波那契數列)曲線,它所包含的數列遵循的規律是,每個數字都是前兩個的和:0、1、1、2、3、5、8、13、21、34 、55、89、144……這就是黃金螺旋:

最有意思的是,你會發現這個漂亮的樣式在自然界中幾乎無處不在:蕨類植物的莖、鮮花、貝殼,甚至颶風。這也就是為什麼我們會覺得它們在視覺上有著無與倫比的吸引力,因為它們在自然界中是最好的。

接下來,你可以在每個正方形中內切一個圓形,那麼這組圓形將遵循1.618的黃金比例,擁有著均勻而平衡的比例關係。

這樣一來,我們就擁有了遵循黃金比例的正方形、矩形、圓形,而它們就可以被你運用到設計當中去,這麼解釋相信你都能明白吧?

在設計中使用黃金比例的5種方法

既然你已經了解了黃金比例的基礎知識,那麼接下來看看如何藉助它來提升你的設計。由於黃金比例的呈現形式很多,所以你可以將它用到布局、間隔、內容、圖像和圖形當中。

1、布局:將尺寸設置成黃金比例

在布局中使用黃金比例的方法並不難,關鍵是控制比例和尺寸,重點很簡單,把握好1:1.618的黃金比例。舉個例子,使用960px的寬度布局的時候,除以1.618可以得到594px,這個可以用作你的布局高度,然後將整個布局劃分為兩欄,一欄方形,一欄矩形,一個協調的布局就出來了。

這種兩欄式布局在網頁上非常實用,我們所熟知的美國國家地理的網頁就是使用這樣的布局方式,看起來可讀性非常不錯,比例平衡,符合網站內容自然的特性。

2、間距:使用黃金螺旋布局

間距的控制和留白一樣,是設計中非常關鍵的元素。協調的布局能夠營造出優秀的作品,那麼如何藉助黃金比例來協調頁面中的多種元素呢?合理的計算有的時候比直覺合適,如果能結合起來就更好了。

在基本的布局上,藉助黃金螺旋來調整,是個不錯的思路,多種不同的元素在同一頁面上的時候,黃金螺旋可以幫你篩選出合理的空間布局和間隙。

Moodley設計工作室為Bregenzer Festspiele藝術節設計了海報、應用、節目單和大量的品牌標識,節目單的整體設計採用了拼貼的方式,有大量的留白,而其中各種元素的設計比例、位置和留白就是藉助黃金螺旋來布置的。

總部位於新加坡的Lemon Graphic為Terkaya財富管理進行視覺形象設計,名片的設計元素也同樣藉助黃金螺旋來設計。

3、內容:沿著黃金螺旋的軌跡

對於網頁內容而言,黃金螺旋的軌跡同樣可以起到重要的作用,我們的視覺可以很自然地沿著黃金螺旋的軌跡運動,這也就是說這樣設計網頁布局會讓訪客更加自然地瀏覽內容。

如果你仔細查看美國國家地理的網頁,會看到它們的網頁布局就是如此,用戶會下意識地隨著這個布局來瀏覽,這是一種潛意識行為。

這個網站是平面設計師Tim Roussilhe的作品,信息量很大,布局也緊密,關鍵是信息組織的相當有條理,多而不亂。左上角的內容就是藉助黃金螺旋的軌跡來設計的,關鍵的點和位置都落在黃金螺旋的軌跡上。功能性的組件在這個布局中都位於矚目的位置,留白也分布到了合理的間隙中,所有的細節都精緻到位。

Saastamoisen s??ti?的這個視覺設計稿就更典型了,圖中的字母分布看起來亂中有序,它們就是沿著黃金螺旋來分布的,並且隨著螺旋半徑的縮小而逐漸縮減字體尺寸,並且提升字母的密度,這樣的設計保證了視覺的平衡,富有設計感而不混亂。

Helms工作室為Fullsteam啤酒進行品牌設計的時候,也同樣藉助黃金螺旋來布局內容。

4、圖片:黃金比例和三分法

對於圖片而言,布局自然是很重要的,無論是用來傳遞信息還是呈現圖像布局的美感,黃金比例可以讓圖片變得更加吸引眼球,讓重要的信息脫穎而出。平時我們所說的三分法布局,如何結合黃金比例,是可以讓布局變得更漂亮的。

參考下方的圖片,藉助將頁面進行黃金比例分割的四條線,線條兩兩交匯的地方是最吸引用戶的地方。當然,我們常見的三分法是讓同一個方向上的兩條線將布局按照1:1: 1的比例分割開來。

這個案例是Complex雜誌的封面,整體布局符合黃金比例,而黃金比例三分法下的兩個交點上則正好和女性的鼻子與眼睛上。

Jason Mildren為Pilot雜誌設計封面,其中的布局採用的是均勻三分法來構建視覺重心,圖中模特的眼、拇指和手臂軸心都處在視覺重心上,人物位置靠右下,留白靠左上,又是一個平衡的布局。

Feld雜誌的設計,也參考了黃金比例三分法,左上方的標題和內容區塊明顯是參考分割線來設計的,而右下方的背景中的人物的鼻子——也就是人物的中心點正好壓在右下方的交點上。

5、圖形:黃金比例圓形

黃金比例可以用來創建矩形也能用來創建比例協調的圓形,使用黃金比例不僅可以產生和諧的比例,而且能夠讓圖形保持較高的一致性,從百事和Twitter的LOGO來說說這個事情吧。

百事的LOGO是使用兩個遵循黃金比例的圓圈來構建的,較小圓形並不是顯而易見的那種,而是隱藏在內部的曲線中。

Twitter的LOGO設計則是藉助若干完美的圓形來進行構建的,只不過它在使用黃金比例的圓形的時候,並沒有使用相鄰比例的圓形來構建,乍一看不夠精確,但卻同樣營造出和諧的標識。


【我的小幸福之願你和溫暖相擁】

天冷了

記得保暖

只有身體暖了

心才會暖

天氣漸冷

運動讓你的世界升溫

難過的時候

安慰沒用

而是在你身邊

陪你哭

走一個

即便再孤單

也要相信你會遇見溫暖的陪伴

最溫暖就是那些

一起吃著火鍋唱著歌的老朋友

獨處的時候

一杯咖啡

一本書

讓別人的故事溫暖你

當煙火的溫度褪去

讓我的擁抱一直陪你

還有什麼比做愛做的事更溫暖

別辜負那個總是為你留燈的人

【你可能還想看】

你過來,悄悄告訴你怎樣適配iPhone X?

2018用戶體驗設計的10個核心趨勢,你Get到了嗎?

人生兩萬天,我只想回到小時候

一覺設計,都是插畫

為了讓你用著舒服,設計師想到頭都炸了

10大修圖最強秘訣,你會嗎?


推薦閱讀:

迅速提升浴室顏值,這些大勢設計你值得PICK!
萬科頂級精裝豪宅的29個標準!設計必學寶典
木犀UED周刊(十一)
奧特萊斯簡介是什麼?
海報設計的嘗試

TAG:設計 | 黃金比例 |