什么(me)是黃金比例？

 

      黃金(jin)比(bi)例是(shi)一(yi)(yi)個比(bi)較(jiao)特(te)殊(shu)的(de)數學比(bi)例，通常我們會用線(xian)段(duan)分(fen)割來(lai)解(jie)釋這個比(bi)例：把一(yi)(yi)條線(xian)段(duan)分(fen)割為兩部分(fen)，較(jiao)短(duan)部分(fen)與(yu)較(jiao)長部分(fen)長度(du)之比(bi)等(deng)于較(jiao)長部分(fen)與(yu)整體長度(du)之比(bi)，其比(bi)值是(shi)一(yi)(yi)個無理數，取其前三位數字(zi)的(de)近似值是(shi)0.618。

 

 

      當(dang)然(ran)，我(wo)們今天探(tan)討的(de)并非是(shi)(shi)數學問題，而是(shi)(shi)設(she)計和美。黃金比(bi)(bi)例(li)之所以被冠(guan)名以“黃金”二字，自然(ran)是(shi)(shi)因為這(zhe)個比(bi)(bi)例(li)帶(dai)來的(de)和諧(xie)與(yu)美感。當(dang)你應用到設(she)計作品中(zhong)的(de)時候，這(zhe)種比(bi)(bi)例(li)會(hui)營(ying)造出藝術感。

 

      黃金(jin)比(bi)例(li)已經(jing)被我們(men)的(de)先輩運(yun)用了(le)幾千年，從埃及的(de)吉薩金(jin)字塔的(de)設計比(bi)例(li)到雅(ya)典的(de)巴(ba)特(te)農神(shen)殿(dian)，從米開郎琪羅(luo)為西斯(si)廷教(jiao)堂所(suo)雕刻(ke)的(de)亞當到達芬奇的(de)蒙娜麗莎，從百事可樂的(de)LOGO到推特(te)的(de)LOGO設計，甚至我們(men)的(de)面(mian)孔(kong)都遵循這個數學比(bi)例(li)。

 

      事實上(shang)，我們(men)的(de)大(da)腦似乎(hu)先天就比較青睞使用黃金比例的(de)對(dui)象和(he)圖片(pian)。這幾(ji)乎(hu)是下意識(shi)的(de)吸引力，大(da)腦甚至會對(dui)眼睛看到(dao)的(de)事物(wu)進行小幅度的(de)微(wei)調以靠近黃金比例，提高我們(men)自身(shen)對(dui)于外物(wu)的(de)記憶和(he)印象。

 

      黃金比例無疑可(ke)以(yi)應用(yong)于各種圖形。如果(guo)你(ni)將一(yi)個正(zheng)方形拉伸為一(yi)個矩形，讓長是寬(kuan)的1.618倍(bei)，就可(ke)以(yi)獲得一(yi)個“完(wan)美”的矩形。

 

 

      最有意思的(de)是，你會發現這(zhe)個漂亮的(de)樣式在(zai)自(zi)然(ran)界中(zhong)幾(ji)乎無處(chu)不在(zai)：蕨(jue)類植物的(de)莖、鮮花、貝殼，甚(shen)至颶風。這(zhe)也就是為什么我們(men)會覺(jue)得它們(men)在(zai)視覺(jue)上有著(zhu)無與倫比的(de)吸引力，因(yin)為它們(men)在(zai)自(zi)然(ran)界中(zhong)是最好的(de)。

 

 

   在設計中使用黃金(jin)比例的(de)5種方法(fa)

 

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

 

      在布局中(zhong)使(shi)用(yong)黃(huang)金比(bi)例的方法并不難，關鍵是(shi)控制比(bi)例和(he)尺(chi)寸。重點很簡單，把(ba)握好(hao)1:1.618的黃(huang)金比(bi)例。

 

      舉個例子，使(shi)用960px的(de)(de)寬度(du)布(bu)局的(de)(de)時候(hou)，除以(yi)1.618可以(yi)得到(dao)594px，這個可以(yi)用作你的(de)(de)布(bu)局的(de)(de)高度(du)，然(ran)后將整個布(bu)局劃分為(wei)兩欄，一(yi)欄方形(xing)，一(yi)欄矩形(xing)，一(yi)個協(xie)調的(de)(de)布(bu)局就出來了。

 

 

      這種兩欄式布局(ju)在網頁上(shang)非常實用(yong)，我們所熟(shu)知的(de)美國(guo)國(guo)家地理的(de)網頁就是使用(yong)的(de)這樣的(de)布局(ju)方式，看起來可讀(du)性非常不(bu)錯(cuo)，比例平衡，符(fu)合網站內容自(zi)然的(de)特性。

 

 

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

 

      間(jian)距的(de)控制和(he)留白一樣，是(shi)設計中(zhong)(zhong)非常(chang)關(guan)鍵(jian)的(de)元素。協調的(de)布局能夠(gou)營造出優秀的(de)作品(pin)，那么如(ru)何借助黃(huang)金(jin)比例來(lai)協調頁(ye)面中(zhong)(zhong)的(de)多種元素呢(ni)？合理的(de)計算有的(de)時候比直(zhi)覺合適，如(ru)果能結合起來(lai)就(jiu)更好了(le)。

 

      在(zai)基本(ben)的布局上，借助黃(huang)金螺(luo)旋(xuan)來調整，是個(ge)不(bu)錯的思路。多種不(bu)同(tong)的元素在(zai)同(tong)一頁面上的時候，黃(huang)金螺(luo)旋(xuan)可以幫你篩選(xuan)出(chu)合(he)理的空(kong)間(jian)布局和間(jian)隙。

 

 

   3、內容：沿(yan)著(zhu)黃金螺旋的軌跡

      對于網(wang)頁內(nei)容(rong)而言，黃金(jin)螺旋的軌跡同樣(yang)可以起到重要的作用。我(wo)們(men)的視覺可以很自然(ran)地(di)沿著黃金(jin)螺旋的軌跡運動，這(zhe)也就(jiu)是說這(zhe)樣(yang)設計網(wang)頁布局會讓(rang)訪客更加自然(ran)地(di)瀏(liu)覽內(nei)容(rong)。

 

 

   4、圖(tu)片(pian)：黃金比例(li)和三分(fen)法

 

      對(dui)于圖片(pian)而(er)言，布(bu)局(ju)自然是很重(zhong)(zhong)要的(de)(de)，無論是用(yong)來傳遞信息還是呈現(xian)圖像布(bu)局(ju)的(de)(de)美(mei)感(gan)。黃金比例可以(yi)讓圖片(pian)變得更加吸引眼球，讓重(zhong)(zhong)要的(de)(de)信息脫穎而(er)出。平時我們所說的(de)(de)三分法布(bu)局(ju)，如何(he)結合黃金比例，可以(yi)讓布(bu)局(ju)更漂亮。

      參考下方(fang)的(de)(de)(de)(de)圖片，借助將(jiang)頁面進行黃金(jin)比例(li)分(fen)割的(de)(de)(de)(de)四(si)條(tiao)線，線條(tiao)兩(liang)(liang)兩(liang)(liang)交匯的(de)(de)(de)(de)地(di)(di)方(fang)是最吸引(yin)用戶的(de)(de)(de)(de)地(di)(di)方(fang)。當(dang)然(ran)，我們常(chang)見的(de)(de)(de)(de)三分(fen)法是讓同一個方(fang)向(xiang)上的(de)(de)(de)(de)兩(liang)(liang)條(tiao)線將(jiang)布局按照1：1: 1的(de)(de)(de)(de)比例(li)分(fen)割開來。

 

 

   5、圖形：黃金比(bi)例圓形

 

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