深入了解高大上的黃金比例設(shè)計法
- 來源:
- Hipop Dueng
- 時間:
- 2017-05-18 21:47:47
- 閱讀:
- 4788
什么是黃金比例?
黃金比例是一個比較特殊的數(shù)學(xué)比例,通常我們會用線段分割來解釋:把一條線段分割為兩部分,較短部分與較長部分長度之比等于較長部分與整體長度之比,其比值是一個無理數(shù),取其前三位數(shù)字的近似值是0.618
當(dāng)然,我們今天探討的并非是數(shù)學(xué)問題,而是設(shè)計和美。黃金比例之所以被冠名以"黃金"二字,自然是因為這個比例帶來的和諧與美感。當(dāng)你應(yīng)用到設(shè)計作品中的時候,這種比例會營造出藝術(shù)感。
事實(shí)上,我們的大腦似乎先天就比較青睞使用黃金比例的對象和圖片。這幾乎是下意識的吸引力,大腦甚至?xí)ρ劬吹降氖挛镞M(jìn)行小幅度的微調(diào)以靠近黃金比例,提高我們自身對于外物的記憶和印象。
黃金比例無疑可以應(yīng)用于各種圖形。如果你將一個正方形拉伸為一個矩形,讓長是寬的1.618倍,就可以獲得一個“完美”的矩形。
將兩個圖形疊加,你就可以獲得一個清晰直觀的黃金比例,被分割出來的小矩形同樣遵循著黃金比例。
如果你繼續(xù)以這樣的方式向新的矩形中填充正方形,那么你填充的正方形會越來越?。?/p>
像上圖所示,你最終繪制出來的將會是一個黃金螺旋(而其中的矩形也就遵循著傳說中的斐波那契數(shù)列)曲線,它所包含的數(shù)列遵循的規(guī)律是,每個數(shù)字都是前兩個的和:0、1、1、2、3、5、8、13、21、34 、55、89、144......
這就是黃金螺旋:
最有意思的是,你會發(fā)現(xiàn)這個漂亮的樣式在自然界中幾乎無處不在:蕨類植物的莖、鮮花、貝殼,甚至颶風(fēng)。這也就是為什么我們會覺得它們在視覺上有著無與倫比的吸引力,因為它們在自然界中是最好的。
接下來,你可以在每個正方形中內(nèi)切一個圓形,那么這組圓形將遵循1.618的黃金比例,擁有著均勻而平衡的比例關(guān)系。
這樣一來,我們就擁有了遵循黃金比例的正方形、矩形、圓形,而它們就可以被你運(yùn)用到設(shè)計當(dāng)中去。
這么解釋相信你都能明白吧?
在設(shè)計中使用黃金比例的5種方法
既然你已經(jīng)了解了黃金比例的基礎(chǔ)知識,那么接下來看看如何借助它來提升你的設(shè)計。由于黃金比例的呈現(xiàn)形式很多,所以你可以將它用到布局、間隔、內(nèi)容、圖像和圖形當(dāng)中。
1、布局:將尺寸設(shè)置成黃金比例
在布局中使用黃金比例的方法并不難,關(guān)鍵是控制比例和尺寸。重點(diǎn)很簡單,把握好1:1.618的黃金比例。
舉個例子,使用960px的寬度布局的時候,除以1.618可以得到594px,這個可以用作你的布局的高度,然后將整個布局劃分為兩欄,一欄方形,一欄矩形,一個協(xié)調(diào)的布局就出來了。
這種兩欄式布局在網(wǎng)頁上非常實(shí)用,我們所熟知的美國國家地理的網(wǎng)頁就是使用的這樣的布局方式,看起來可讀性非常不錯,比例平衡,符合網(wǎng)站內(nèi)容自然的特性。
2、間距:使用黃金螺旋布局
間距的控制和留白一樣,是設(shè)計中非常關(guān)鍵的元素。協(xié)調(diào)的布局能夠營造出優(yōu)秀的作品,那么如何借助黃金比例來協(xié)調(diào)頁面中的多種元素呢?合理的計算有的時候比直覺合適,如果能結(jié)合起來就更好了。
在基本的布局上,借助黃金螺旋來調(diào)整,是個不錯的思路。多種不同的元素在同一頁面上的時候,黃金螺旋可以幫你篩選出合理的空間布局和間隙。
Moodley 設(shè)計工作室為Bregenzer Festspiele 藝術(shù)節(jié)設(shè)計了海報、應(yīng)用、節(jié)目單和大量的品牌標(biāo)識。節(jié)目單的整體設(shè)計采用了拼貼的方式,有大量的留白,而其中各種元素的設(shè)計比例、位置和留白就是借助黃金螺旋來布置的。
總部位于新加坡的Lemon Graphic 為Terkaya財富管理進(jìn)行視覺形象設(shè)計,名片的設(shè)計元素也同樣借助黃金螺旋來設(shè)計。
3、內(nèi)容:沿著黃金螺旋的軌跡
對于網(wǎng)頁內(nèi)容而言,黃金螺旋的軌跡同樣可以起到重要的作用。我們的視覺可以很自然地沿著黃金螺旋的軌跡運(yùn)動,這也就是說這樣設(shè)計網(wǎng)頁布局會讓訪客更加自然地瀏覽內(nèi)容。
如果你仔細(xì)查看美國國家地理的網(wǎng)頁,會看到它們的網(wǎng)頁布局就是如此,用戶會下意識地隨著這個布局來瀏覽,這是一種潛意識行為。
這個網(wǎng)站是平面設(shè)計師Tim Roussilhe 的作品,信息量很大,布局也緊密,關(guān)鍵是信息組織的相當(dāng)有條理,多而不亂。左上角的內(nèi)容就是借助黃金螺旋的軌跡來設(shè)計的,關(guān)鍵的點(diǎn)和位置都落在黃金螺旋的軌跡上。功能性的組件在這個布局中都位于矚目的位置,留白也分布到了合理的間隙中,所有的細(xì)節(jié)都精致到位。
Saastamoisen säätiö 的這個視覺設(shè)計稿就更典型了。圖中的字母分布看起來亂中有序,它們就是沿著黃金螺旋來分布的,并且隨著螺旋半徑的縮小而逐漸縮減字體尺寸,并且提升字母的密度。這樣的設(shè)計保證了視覺的平衡,富有設(shè)計感而不混亂。
Helms 工作室 為Fullsteam 啤酒進(jìn)行品牌設(shè)計的時候,也同樣借助黃金螺旋來布局內(nèi)容。
4、圖片:黃金比例和三分法
對于圖片而言,布局自然是很重要的,無論是用來傳遞信息還是呈現(xiàn)圖像布局的美感。黃金比例可以讓圖片變得更加吸引眼球,讓重要的信息脫穎而出。平時我們所說的三分法布局,如何結(jié)合黃金比例,可以讓布局更漂亮。
Jason Mildren 為Pilot 雜志設(shè)計封面,其中的布局采用的是均勻三分法(1:1:1)來構(gòu)建視覺重心,圖中模特的眼、拇指和手臂軸心都處在視覺重心上,人物位置靠右下,留白靠左上,又是一個平衡的布局。
Feld雜志的設(shè)計,也參考了黃金比例三分法,左上方的標(biāo)題和內(nèi)容區(qū)塊明顯是參考分割線來設(shè)計的,而右下方的背景中的人物的鼻子,也就是人物的中心點(diǎn)正好壓在右下方的交點(diǎn)上。
5、圖形:黃金比例圓形
黃金比例可以用來創(chuàng)建矩形也能用來創(chuàng)建比例協(xié)調(diào)的圓形。使用黃金比例不僅可以產(chǎn)生和諧的比例,而且能夠讓圖形保持較高的一致性。從百事和Twitter的LOGO來說說這個事情吧。
百事的LOGO是使用兩個遵循黃金比例的圓圈來構(gòu)建的,較小圓形并不是顯而易見的那種,而是隱藏在內(nèi)部的曲線中。
Twitter的LOGO設(shè)計則是借助若干完美的圓形來進(jìn)行構(gòu)建的,只不過它在使用黃金比例的圓形的時候,并沒有使用相鄰比例的圓形來構(gòu)建,乍一看不夠精確,但卻同樣營造出和諧的標(biāo)識。
Photoshop黃金分割工具
小編在這里為大家分享一個Photoshop黃金分割工具(Divine Proportions Toolkit),使用它可以輕易畫出黃金螺旋,黃金三角,三分法,對角線等比例。
文件大小:5.25M