教你如何在設(shè)計(jì)中充分運(yùn)用黃金比例

2015-11-13 用心設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)( www.alimai.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，請(qǐng)點(diǎn)這里

來源：莫貝網(wǎng)

吉薩金字塔、蒙娜麗莎、Twitter和百事可樂有什么共同點(diǎn)？答案很簡(jiǎn)單，它們的設(shè)計(jì)都遵循了黃金比例。作為一個(gè)常見的數(shù)學(xué)比例，黃金比例實(shí)際上是從自然界中總結(jié)并發(fā)現(xiàn)的，用于設(shè)計(jì)中的時(shí)候能賦予作品更多的設(shè)計(jì)美感，賞心悅目。那么，黃金比例到底是怎么樣的比例，它又是如何運(yùn)用到設(shè)計(jì)中并提升設(shè)計(jì)作品的呢？

什么是黃金比例？

黃金比例是一個(gè)比較特殊的數(shù)學(xué)比例，通常我們會(huì)用線段分割來解釋這個(gè)比例：把一條線段分割為兩部分，較短部分與較長(zhǎng)部分長(zhǎng)度之比等于較長(zhǎng)部分與整體長(zhǎng)度之比，其比值是一個(gè)無理數(shù)，取其前三位數(shù)字的近似值是0.618。

當(dāng)然，我們今天探討的并非是數(shù)學(xué)問題，而是設(shè)計(jì)和美。黃金比例之所以被冠名以“黃金”二字，自然是因?yàn)檫@個(gè)比例帶來的和諧與美感。當(dāng)你應(yīng)用到設(shè)計(jì)作品中的時(shí)候，這種比例會(huì)營(yíng)造出藝術(shù)感。

黃金比例已經(jīng)被我們的先輩運(yùn)用了幾千年，從埃及的吉薩金字塔的設(shè)計(jì)比例到雅典的巴特農(nóng)神殿，從米開郎琪羅為西斯廷教堂所雕刻的亞當(dāng)?shù)竭_(dá)芬奇的蒙娜麗莎，從百事可樂的LOGO到推特的LOGO設(shè)計(jì)，甚至我們的面孔都遵循這個(gè)數(shù)學(xué)比例：

事實(shí)上，我們的大腦似乎先天就比較青睞使用黃金比例的對(duì)象和圖片。這幾乎是下意識(shí)的吸引力，大腦甚至?xí)?duì)眼睛看到的事物進(jìn)行小幅度的微調(diào)以靠近黃金比例，提高我們自身對(duì)于外物的記憶和印象。

黃金比例無疑可以應(yīng)用于各種圖形。如果你將一個(gè)正方形拉伸為一個(gè)矩形，讓長(zhǎng)是寬的1.618倍，就可以獲得一個(gè)“完美”的矩形。

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

如果你繼續(xù)以這樣的方式向新的矩形中填充正方形，那么你填充的正方形會(huì)越來越?。?/span>

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

這就是黃金螺旋：

最有意思的是，你會(huì)發(fā)現(xiàn)這個(gè)漂亮的樣式在自然界中幾乎無處不在：蕨類植物的莖、鮮花、貝殼，甚至颶風(fēng)。這也就是為什么我們會(huì)覺得它們?cè)谝曈X上有著無與倫比的吸引力，因?yàn)樗鼈冊(cè)谧匀唤缰惺亲詈玫摹?/span>

接下來，你可以在每個(gè)正方形中內(nèi)切一個(gè)圓形，那么這組圓形將遵循1.618的黃金比例，擁有著均勻而平衡的比例關(guān)系。

這樣一來，我們就擁有了遵循黃金比例的正方形、矩形、圓形，而它們就可以被你運(yùn)用到設(shè)計(jì)當(dāng)中去。

這么解釋相信你都能明白吧？

在設(shè)計(jì)中使用黃金比例的5種方法

既然你已經(jīng)了解了黃金比例的基礎(chǔ)知識(shí)，那么接下來看看如何借助它來提升你的設(shè)計(jì)。由于黃金比例的呈現(xiàn)形式很多，所以你可以將它用到布局、間隔、內(nèi)容、圖像和圖形當(dāng)中。

1、布局：將尺寸設(shè)置成黃金比例

在布局中使用黃金比例的方法并不難，關(guān)鍵是控制比例和尺寸。重點(diǎn)很簡(jiǎn)單，把握好1:1.618的黃金比例。

舉個(gè)例子，使用960px的寬度布局的時(shí)候，除以1.618可以得到594px，這個(gè)可以用作你的布局的高度，然后將整個(gè)布局劃分為兩欄，一欄方形，一欄矩形，一個(gè)協(xié)調(diào)的布局就出來了。

這種兩欄式布局在網(wǎng)頁上非常實(shí)用，我們所熟知的美國(guó)國(guó)家地理的網(wǎng)頁就是使用的這樣的布局方式，看起來可讀性非常不錯(cuò)，比例平衡，符合網(wǎng)站內(nèi)容自然的特性。

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

間距的控制和留白一樣，是設(shè)計(jì)中非常關(guān)鍵的元素。協(xié)調(diào)的布局能夠營(yíng)造出優(yōu)秀的作品，那么如何借助黃金比例來協(xié)調(diào)頁面中的多種元素呢？合理的計(jì)算有的時(shí)候比直覺合適，如果能結(jié)合起來就更好了。

在基本的布局上，借助黃金螺旋來調(diào)整，是個(gè)不錯(cuò)的思路。多種不同的元素在同一頁面上的時(shí)候，黃金螺旋可以幫你篩選出合理的空間布局和間隙。

Moodley 設(shè)計(jì)工作室為Bregenzer Festspiele 藝術(shù)節(jié)設(shè)計(jì)了海報(bào)、應(yīng)用、節(jié)目單和大量的品牌標(biāo)識(shí)。節(jié)目單的整體設(shè)計(jì)采用了拼貼的方式，有大量的留白，而其中各種元素的設(shè)計(jì)比例、位置和留白就是借助黃金螺旋來布置的。

總部位于新加坡的Lemon Graphic 為Terkaya財(cái)富管理進(jìn)行視覺形象設(shè)計(jì)，名片的設(shè)計(jì)元素也同樣借助黃金螺旋來設(shè)計(jì)。

3、內(nèi)容：沿著黃金螺旋的軌跡

對(duì)于網(wǎng)頁內(nèi)容而言，黃金螺旋的軌跡同樣可以起到重要的作用。我們的視覺可以很自然地沿著黃金螺旋的軌跡運(yùn)動(dòng)，這也就是說這樣設(shè)計(jì)網(wǎng)頁布局會(huì)讓訪客更加自然地瀏覽內(nèi)容。

如果你仔細(xì)查看美國(guó)國(guó)家地理的網(wǎng)頁，會(huì)看到它們的網(wǎng)頁布局就是如此，用戶會(huì)下意識(shí)地隨著這個(gè)布局來瀏覽，這是一種潛意識(shí)行為。

這個(gè)網(wǎng)站是平面設(shè)計(jì)師Tim Roussilhe 的作品，信息量很大，布局也緊密，關(guān)鍵是信息組織的相當(dāng)有條理，多而不亂。左上角的內(nèi)容就是借助黃金螺旋的軌跡來設(shè)計(jì)的，關(guān)鍵的點(diǎn)和位置都落在黃金螺旋的軌跡上。功能性的組件在這個(gè)布局中都位于矚目的位置，留白也分布到了合理的間隙中，所有的細(xì)節(jié)都精致到位。

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