1.Apple Logo
Apple Logo
從上圖的輔助線分解，我們可以發(fā)現(xiàn)蘋果logo的設(shè)計正是采用半徑成斐波那契數(shù)列（1,1,2,3,5,8,13）的圓切割而成
其實候引，Apple蘋果 的 logo 被咬一口的痕跡設(shè)計并不是嚴(yán)格符合黃金分割比例的劣欢，只是非常接近掖看。但這樣的偏差允悦，是故意的汁咏。用數(shù)學(xué)公式和標(biāo)準(zhǔn)幾何圖形來設(shè)計圖標(biāo)，能夠賦予圖標(biāo)一種神性的美感样悟。
當(dāng)然大多數(shù)設(shè)計都會有故意的細(xì)微偏差拂募，為的是避免刻板形象，同時還能營造一種無法被破解的神秘感窟她。
2.黃金分割
- 從公元前20世紀(jì)到16世紀(jì)的史前巨石柱記載的關(guān)于1:1.618比例的黃金矩形的應(yīng)用開始到現(xiàn)在陈症，人們對黃金分割的愛從來就沒有改變過，五邊形和五角星也同樣具有黃金分割比例礁苗，因為五角星內(nèi)三角形的邊長比例是1：1.618爬凑。在海膽和雪花里也能找到相同的五邊形/五角形關(guān)系。
隨著數(shù)字的增大,斐波那契數(shù)列兩數(shù)間的比值越來越接近黃金分割率
人體也具有同樣的完美比例试伙，人體的高度與伸展開的手臂形成了一個正方形將人體圍住，而手和腳正好落在以肚臍為圓心的圓上于样，肚臍位于黃金分割點上疏叨，這在文藝復(fù)興時期的藝術(shù)家萊昂納多·達(dá)芬奇和丟勒的《完美的比例》《人體比例四書》也都有所體現(xiàn)。
人體比例四書
- 黃金分割是用實證法對美的圖形做出的總結(jié)穿剖。也就是在歷史長河中蚤蔓，總結(jié)出來的人類的喜好規(guī)律。這種長寬比帶給大多數(shù)人最舒服的體驗是毋庸置疑的糊余。也就是總結(jié)出來以后秀又，再運用這個原理。
黃金分割的貝殼曲線
- 畫一個圖形贬芥，在大多數(shù)情況下吐辙，不會從畫黃金分割輔助線開始。你得先有圖形蘸劈，然后在一次一次的修改中昏苏，運用黃金分割線去輔助你修改圖形，最后威沫，得到一個在視覺上最舒服的圖形贤惯。而實際上，美學(xué)素養(yǎng)高的人棒掠，在繪制圖形的時候孵构，已經(jīng)潛移默化得融入了黃金分割這種美學(xué)。
黃金分割輔助線
3.黃金分割衍生的-紙張比例
- 人類從黃金分割率中提煉出的√2矩形也具有許多特殊的性質(zhì)烟很，能被無限的分割成更小的等比矩形颈墅，其長寬比也相當(dāng)接近黃金分割率（1.414與1.618）
√2矩形
- 正是由于這個屬性棒假，√2矩形成為歐洲D(zhuǎn)IN（德國工業(yè)標(biāo)準(zhǔn)）紙張尺寸體系的基礎(chǔ)。也就是我們最常見的紙張尺寸精盅。這樣裁切出來的紙張不僅容易生產(chǎn)帽哑，而且不會有一點浪費。
德國工業(yè)標(biāo)準(zhǔn)紙張尺寸體系
- 除了√2矩形以外叹俏，由其衍生出來的√3妻枕、√4、√5矩形也同樣具備可以被橫向和縱向切割的屬性粘驰÷判常√3矩形也是正六邊形的構(gòu)成基礎(chǔ)，這個形狀也可以在自然界中的很多方面找到蝌数，例如雪花晶體與蜂巢的形狀愕掏。
雪花與蜂巢
4.網(wǎng)頁設(shè)計中的應(yīng)用
1.畫布大小
在網(wǎng)頁設(shè)計當(dāng)中，設(shè)計師最常用到的是960網(wǎng)格系統(tǒng)顶伞，它可以說是具有里程碑式或者具有代表意義的系統(tǒng)饵撑，設(shè)計之初主要針對的是1024×768的屏幕。雖然現(xiàn)在早已是1200以上像素的天下了唆貌，但960網(wǎng)格系統(tǒng)也早已從最初的理性設(shè)計的工具變成了網(wǎng)站設(shè)計的布局思維滑潘。以1024×768的屏幕為例，用戶在瀏覽網(wǎng)站是锨咙，視線熱區(qū)可覆蓋大概80%的屏幕语卤，此部分空間尺寸大致為974×650，在瀏覽器左右預(yù)留一些空間酪刀，并且為方便響應(yīng)式設(shè)計粹舵，我們的可設(shè)計區(qū)域就成為了現(xiàn)在最常用到的960×650像素，這個尺寸也同樣接近黃金分割的尺寸骂倘。
2.分欄
用理性的網(wǎng)格將你的頁面分欄眼滤，這樣可以很好的將頁面中得圖片與文字進(jìn)行區(qū)隔，段落與段落間進(jìn)行區(qū)隔稠茂∧迹考慮到黃金分割的原理與響應(yīng)式頁面的可操作性，我們將頁面分為12睬关，16或24欄诱担，欄數(shù)依據(jù)你要設(shè)計的網(wǎng)頁體量而定。
12欄
16欄
24欄
3.字符大小
橫向則依據(jù)你所使用的最小字符高度而定电爹，一般使用12pt—16pt的文字蔫仙，每行60—80字符是比較合理的范圍。這樣丐箩，我們就得到了一張理性摇邦，簡單恤煞，有效的網(wǎng)格，使用網(wǎng)格設(shè)計可使網(wǎng)頁的連貫性與秩序性增強(qiáng)施籍，內(nèi)容與內(nèi)容不會相互影響居扒，減少內(nèi)容取舍的復(fù)雜度，并且很大程度上增加網(wǎng)站代碼的復(fù)用率丑慎。
4.屏幕的第一視覺點
人的視線落點是需要引導(dǎo)的喜喂，通過科學(xué)理性的方式可快速找到用戶的視線范圍，把你最想讓用戶看到的內(nèi)容放在這個范圍內(nèi)竿裂，可以起到絕佳的效果與回饋玉吁。同時，也可以幫助你梳理每個元素之間的關(guān)系腻异。我們用這個思路再看那些牛逼的網(wǎng)站的時候进副，才會了解，原來這才是他們這些網(wǎng)站之所以牛逼的原因悔常。比如下面的這幾張?zhí)O果的官網(wǎng)：
蘋果官網(wǎng)視覺點
iPhone6官網(wǎng)不僅用到了網(wǎng)格系統(tǒng)影斑，同時也應(yīng)用黃金分割率確定文字、圖片與連接的間距这嚣，讓整個頁面看起來簡潔且合理鸥昏。
黃金分割率確定文字、圖片與連接的間距
理想化頁面設(shè)計
產(chǎn)品經(jīng)理和設(shè)計師不僅僅需要是審美出眾的人姐帚，更應(yīng)該是理性的魔術(shù)師，當(dāng)別人按照你構(gòu)想的順序去瀏覽你的作品障涯，或是在你的作品中看到你思考的過程罐旗，是不是僅僅比他們說“挺好看的”要強(qiáng)的多。所以唯蝶，如果你是一個初學(xué)者九秀，對產(chǎn)品設(shè)計不知從何下手，或者你的設(shè)計已經(jīng)很不錯粘我，但是遇到了瓶頸鼓蜒，那么，通過這些幾何學(xué)與網(wǎng)格的使用一定會讓你的設(shè)計更進(jìn)一步征字。
