1.Apple Logo

Apple Logo

從上圖的輔助線分解，我們可以發(fā)現(xiàn)蘋(píng)果logo的設(shè)計(jì)正是采用半徑成斐波那契數(shù)列（1,1,2,3,5,8,13）的圓切割而成
其實(shí)，Apple蘋(píng)果 的 logo 被咬一口的痕跡設(shè)計(jì)并不是嚴(yán)格符合黃金分割比例的，只是非常接近。但這樣的偏差，是故意的。用數(shù)學(xué)公式和標(biāo)準(zhǔn)幾何圖形來(lái)設(shè)計(jì)圖標(biāo)，能夠賦予圖標(biāo)一種神性的美感。
當(dāng)然大多數(shù)設(shè)計(jì)都會(huì)有故意的細(xì)微偏差，為的是避免刻板形象，同時(shí)還能營(yíng)造一種無(wú)法被破解的神秘感。

2.黃金分割

• 從公元前20世紀(jì)到16世紀(jì)的史前巨石柱記載的關(guān)于1:1.618比例的黃金矩形的應(yīng)用開(kāi)始到現(xiàn)在，人們對(duì)黃金分割的愛(ài)從來(lái)就沒(méi)有改變過(guò)，五邊形和五角星也同樣具有黃金分割比例，因?yàn)槲褰切莾?nèi)三角形的邊長(zhǎng)比例是1：1.618。在海膽和雪花里也能找到相同的五邊形/五角形關(guān)系。

隨著數(shù)字的增大,斐波那契數(shù)列兩數(shù)間的比值越來(lái)越接近黃金分割率

人體也具有同樣的完美比例，人體的高度與伸展開(kāi)的手臂形成了一個(gè)正方形將人體圍住，而手和腳正好落在以肚臍為圓心的圓上，肚臍位于黃金分割點(diǎn)上，這在文藝復(fù)興時(shí)期的藝術(shù)家萊昂納多·達(dá)芬奇和丟勒的《完美的比例》《人體比例四書(shū)》也都有所體現(xiàn)。

人體比例四書(shū)

• 黃金分割是用實(shí)證法對(duì)美的圖形做出的總結(jié)。也就是在歷史長(zhǎng)河中，總結(jié)出來(lái)的人類(lèi)的喜好規(guī)律。這種長(zhǎng)寬比帶給大多數(shù)人最舒服的體驗(yàn)是毋庸置疑的。也就是總結(jié)出來(lái)以后，再運(yùn)用這個(gè)原理。

黃金分割的貝殼曲線

• 畫(huà)一個(gè)圖形，在大多數(shù)情況下，不會(huì)從畫(huà)黃金分割輔助線開(kāi)始。你得先有圖形，然后在一次一次的修改中，運(yùn)用黃金分割線去輔助你修改圖形，最后，得到一個(gè)在視覺(jué)上最舒服的圖形。而實(shí)際上，美學(xué)素養(yǎng)高的人，在繪制圖形的時(shí)候，已經(jīng)潛移默化得融入了黃金分割這種美學(xué)。

黃金分割輔助線

3.黃金分割衍生的-紙張比例

• 人類(lèi)從黃金分割率中提煉出的√2矩形也具有許多特殊的性質(zhì)，能被無(wú)限的分割成更小的等比矩形，其長(zhǎng)寬比也相當(dāng)接近黃金分割率（1.414與1.618）

√2矩形

• 正是由于這個(gè)屬性，√2矩形成為歐洲D(zhuǎn)IN（德國(guó)工業(yè)標(biāo)準(zhǔn)）紙張尺寸體系的基礎(chǔ)。也就是我們最常見(jiàn)的紙張尺寸。這樣裁切出來(lái)的紙張不僅容易生產(chǎn)，而且不會(huì)有一點(diǎn)浪費(fèi)。

德國(guó)工業(yè)標(biāo)準(zhǔn)紙張尺寸體系

• 除了√2矩形以外，由其衍生出來(lái)的√3、√4、√5矩形也同樣具備可以被橫向和縱向切割的屬性?！?矩形也是正六邊形的構(gòu)成基礎(chǔ)，這個(gè)形狀也可以在自然界中的很多方面找到，例如雪花晶體與蜂巢的形狀。

雪花與蜂巢

4.網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用

1.畫(huà)布大小

在網(wǎng)頁(yè)設(shè)計(jì)當(dāng)中，設(shè)計(jì)師最常用到的是960網(wǎng)格系統(tǒng)，它可以說(shuō)是具有里程碑式或者具有代表意義的系統(tǒng)，設(shè)計(jì)之初主要針對(duì)的是1024×768的屏幕。雖然現(xiàn)在早已是1200以上像素的天下了，但960網(wǎng)格系統(tǒng)也早已從最初的理性設(shè)計(jì)的工具變成了網(wǎng)站設(shè)計(jì)的布局思維。以1024×768的屏幕為例，用戶(hù)在瀏覽網(wǎng)站是，視線熱區(qū)可覆蓋大概80%的屏幕，此部分空間尺寸大致為974×650，在瀏覽器左右預(yù)留一些空間，并且為方便響應(yīng)式設(shè)計(jì)，我們的可設(shè)計(jì)區(qū)域就成為了現(xiàn)在最常用到的960×650像素，這個(gè)尺寸也同樣接近黃金分割的尺寸。

2.分欄

用理性的網(wǎng)格將你的頁(yè)面分欄，這樣可以很好的將頁(yè)面中得圖片與文字進(jìn)行區(qū)隔，段落與段落間進(jìn)行區(qū)隔?？紤]到黃金分割的原理與響應(yīng)式頁(yè)面的可操作性，我們將頁(yè)面分為12，16或24欄，欄數(shù)依據(jù)你要設(shè)計(jì)的網(wǎng)頁(yè)體量而定。

12欄

16欄

24欄

3.字符大小

橫向則依據(jù)你所使用的最小字符高度而定，一般使用12pt—16pt的文字，每行60—80字符是比較合理的范圍。這樣，我們就得到了一張理性，簡(jiǎn)單，有效的網(wǎng)格，使用網(wǎng)格設(shè)計(jì)可使網(wǎng)頁(yè)的連貫性與秩序性增強(qiáng)，內(nèi)容與內(nèi)容不會(huì)相互影響，減少內(nèi)容取舍的復(fù)雜度，并且很大程度上增加網(wǎng)站代碼的復(fù)用率。

4.屏幕的第一視覺(jué)點(diǎn)

人的視線落點(diǎn)是需要引導(dǎo)的，通過(guò)科學(xué)理性的方式可快速找到用戶(hù)的視線范圍，把你最想讓用戶(hù)看到的內(nèi)容放在這個(gè)范圍內(nèi)，可以起到絕佳的效果與回饋。同時(shí)，也可以幫助你梳理每個(gè)元素之間的關(guān)系。我們用這個(gè)思路再看那些牛逼的網(wǎng)站的時(shí)候，才會(huì)了解，原來(lái)這才是他們這些網(wǎng)站之所以牛逼的原因。比如下面的這幾張?zhí)O果的官網(wǎng)：

蘋(píng)果官網(wǎng)視覺(jué)點(diǎn)

iPhone6官網(wǎng)不僅用到了網(wǎng)格系統(tǒng)，同時(shí)也應(yīng)用黃金分割率確定文字、圖片與連接的間距，讓整個(gè)頁(yè)面看起來(lái)簡(jiǎn)潔且合理。

黃金分割率確定文字、圖片與連接的間距

理想化頁(yè)面設(shè)計(jì)

產(chǎn)品經(jīng)理和設(shè)計(jì)師不僅僅需要是審美出眾的人，更應(yīng)該是理性的魔術(shù)師，當(dāng)別人按照你構(gòu)想的順序去瀏覽你的作品，或是在你的作品中看到你思考的過(guò)程，是不是僅僅比他們說(shuō)“挺好看的”要強(qiáng)的多。所以，如果你是一個(gè)初學(xué)者，對(duì)產(chǎn)品設(shè)計(jì)不知從何下手，或者你的設(shè)計(jì)已經(jīng)很不錯(cuò)，但是遇到了瓶頸，那么，通過(guò)這些幾何學(xué)與網(wǎng)格的使用一定會(huì)讓你的設(shè)計(jì)更進(jìn)一步。