黃金比例設(shè)計(jì)市公開課金獎(jiǎng)市賽課一等獎(jiǎng)?wù)n件

黃金百分比設(shè)計(jì)第1頁(yè)

黃金百分比是數(shù)學(xué)上一個(gè)百分比。在自然界和設(shè)計(jì)中，你所看見美景有很多都用到了黃金百分比。那么，在設(shè)計(jì)中怎樣利用黃金百分比，來(lái)改良、提升你設(shè)計(jì)。第2頁(yè)黃金百分比是什么？

關(guān)于黃金分割百分比起源大多認(rèn)為來(lái)自畢達(dá)哥拉斯，聽說(shuō)在古希臘，有一天畢達(dá)哥拉斯走在街上,在經(jīng)過(guò)鐵匠鋪前他聽到鐵匠打鐵聲音非常好聽，于是駐足傾聽。他發(fā)覺(jué)鐵匠打鐵節(jié)奏很有規(guī)律，這個(gè)聲音百分比被畢達(dá)哥拉斯用數(shù)理方式表示出來(lái)。被應(yīng)用在很多領(lǐng)域，以后很多人專門研究過(guò)，開普勒稱其為“神圣分割”也有些人稱其為“金法”。

黃金分割又稱黃金律，是指事物各部分間一定數(shù)學(xué)百分比關(guān)系，即將整體一分為二，較大部分與較小部分之比等于整體與較大部分之比，其比值為1∶0.618或1.618∶1，即長(zhǎng)段為全段0.618。0.618被公認(rèn)為最含有審美意義百分比數(shù)字。上述百分比是最能引發(fā)人美感百分比，所以被稱為黃金分割。第3頁(yè)

黃金分割被認(rèn)為是建筑和藝術(shù)中最理想百分比。建筑師們對(duì)數(shù)字0.618…尤其偏愛，不論是古埃及金字塔，還是巴黎圣母院，或者是近世紀(jì)法國(guó)埃菲爾鐵塔，都有與0.618…相關(guān)數(shù)據(jù)。還有，在古希臘神廟設(shè)計(jì)中就用到了黃金分割。第4頁(yè)

用公式來(lái)表示話未免太抽象了。在設(shè)計(jì)中能夠利用黃金百分比進(jìn)行調(diào)和或者進(jìn)行完美分割。經(jīng)過(guò)在設(shè)計(jì)中結(jié)合黃金百分比，能夠很輕松將美感覺(jué)表現(xiàn)出來(lái)。

黃金百分比這種漂亮百分比，已經(jīng)被應(yīng)用了很多個(gè)世紀(jì)了。從吉薩大金字塔\帕特農(nóng)神廟\\「蒙娜麗莎」，到現(xiàn)在蘋果和百事LOGO都有他身影。甚至從我們臉到身體各個(gè)部位，都能夠經(jīng)過(guò)這一數(shù)學(xué)百分比來(lái)表現(xiàn)出來(lái)。

第5頁(yè)實(shí)際上，我們大腦，比較喜歡利用了黃金百分比物體或者圖像，是真正潛意識(shí)選擇。經(jīng)過(guò)利用黃金百分比在設(shè)計(jì)中進(jìn)行一些微調(diào)，能夠給你大腦帶來(lái)一些強(qiáng)烈沖擊。

黃金百分比，也能夠應(yīng)用到圖形當(dāng)中。首先我們來(lái)準(zhǔn)備一個(gè)正方形，然后將他一邊增加為另一邊1.618倍，這么就制作了一個(gè)漂亮均等黃金長(zhǎng)方形了。將正方形和長(zhǎng)方形并排放在一起，就能夠?qū)ⅫS金百分比直觀表現(xiàn)出來(lái)了。第6頁(yè)上面這個(gè)案例，因?yàn)樽钣疫呴L(zhǎng)方形適用了黃金百分比，左邊正方形將會(huì)不停變小。上面這個(gè)例子中正方形每個(gè)角都被使用了，經(jīng)過(guò)繪制拱形平滑曲線，螺旋狀線被描繪出來(lái)了。第7頁(yè)這么漂亮螺旋設(shè)計(jì)，在向日葵花，貝殼，臺(tái)風(fēng)，蕨草等自然界中是很常見。無(wú)疑也是非常有吸引力。第8頁(yè)我們繼續(xù)進(jìn)行下一個(gè)步驟，讓我們?cè)诿恳粋€(gè)正方形中都畫上一個(gè)圓。因?yàn)槔昧?：1.618這么一個(gè)黃金百分比，你能夠繪制得到每一個(gè)平衡圓。第9頁(yè)在設(shè)計(jì)中利用黃金百分比五個(gè)關(guān)鍵點(diǎn)01.布局：在尺寸上利用黃金百分比在決定布局大小時(shí)候，試著以黃金百分比為方針設(shè)計(jì)吧。讓我們?cè)囍米詈?jiǎn)單方法，也就是1：1.618這個(gè)百分比來(lái)決定布局尺寸吧。舉個(gè)例子，考慮到普通網(wǎng)頁(yè)是960px，按照1：1.618這個(gè)百分比來(lái)計(jì)算話，那么高度就能夠設(shè)置為594px。同時(shí)在布局上也能夠利用黃金百分比，將其分為兩個(gè)部分。經(jīng)過(guò)這種方法，能夠?qū)蓚€(gè)漂亮景色完美調(diào)和在一起。第10頁(yè)在設(shè)計(jì)中利用黃金百分比五個(gè)關(guān)鍵點(diǎn)

二列式布局，和網(wǎng)頁(yè)有著很好相容性，也是常見網(wǎng)頁(yè)設(shè)計(jì)布局方法。下面這個(gè)設(shè)計(jì)案例，利用好看黃金百分比，我們能夠由此建立一個(gè)整齊有序網(wǎng)站，同時(shí)還能提升網(wǎng)頁(yè)清潔度和易讀性。經(jīng)過(guò)這種無(wú)意識(shí)排列，將這種層次感傳遞給用戶。第11頁(yè)在設(shè)計(jì)中利用黃金百分比五個(gè)關(guān)鍵點(diǎn)

02.留白空間：利用黃金百分比去配置不論在什么樣設(shè)計(jì)中，確保留白空間都是十分主要。經(jīng)過(guò)使用這種方法，能夠分辨出設(shè)計(jì)好壞。確定留白空間是需要時(shí)間，不過(guò)我們能夠經(jīng)過(guò)利用黃金百分比來(lái)代替他，將各種各樣正方形作為設(shè)計(jì)零件來(lái)設(shè)置。有吸引力設(shè)計(jì)和較為直觀位置，經(jīng)過(guò)使用黃金百分比進(jìn)行微調(diào)，在視覺(jué)上就會(huì)有很大改觀。當(dāng)幾個(gè)設(shè)計(jì)要素并列場(chǎng)所，經(jīng)過(guò)結(jié)合下面幾組黃金百分比，將設(shè)計(jì)中統(tǒng)一感魅力給表現(xiàn)出來(lái)。第12頁(yè)在設(shè)計(jì)中利用黃金百分比五個(gè)關(guān)鍵點(diǎn)

下面這個(gè)設(shè)計(jì)案例，是用來(lái)做藝術(shù)節(jié)宣傳傳單，從LOGO到圖案，都利用了黃金百分比來(lái)進(jìn)行配置?？雌饋?lái)很棒不是么？標(biāo)志周圍留白得到了確保，經(jīng)過(guò)黃金百分比，LOGO大小和位置都很直觀看到，并確定下來(lái)。第13頁(yè)在設(shè)計(jì)中利用黃金百分比五個(gè)關(guān)鍵點(diǎn)

再下面這個(gè)設(shè)計(jì)案例，由三個(gè)設(shè)計(jì)要素組成（小老鷹，文字，大老鷹），他們所配置場(chǎng)所，都能夠經(jīng)過(guò)黃金百分比來(lái)確定下來(lái)。然后在小老鷹上加上黃金百分比，一個(gè)漂亮外觀就設(shè)計(jì)完成了。第14頁(yè)在設(shè)計(jì)中利用黃金百分比五個(gè)關(guān)鍵點(diǎn)

03.內(nèi)容：設(shè)法利用上黃金百分比螺旋線能夠由黃金百分比螺旋線，來(lái)決定整個(gè)頁(yè)面內(nèi)容應(yīng)該怎么來(lái)布局。我們眼睛，在他最細(xì)部分能夠看到他細(xì)節(jié)，而螺旋線最密集部分，視線往往會(huì)愈加集中。所以，我們能夠?qū)⒔裹c(diǎn)放在螺旋線中心。讓我們?cè)賮?lái)看看前面案例。你能夠看到，他將小LOGO全部都放在了螺旋線中心。經(jīng)過(guò)利用黃金百分比，能夠自然將用戶注意吸引過(guò)去。第15頁(yè)在設(shè)計(jì)中利用黃金百分比五個(gè)關(guān)鍵點(diǎn)

下面這個(gè)設(shè)計(jì)案例，即使將很多內(nèi)容混合在了一起，但經(jīng)過(guò)使用黃金百分比和黃金螺旋，我們能夠很輕松將信息整理出來(lái)。首先將用戶目光集中在“BonjourMyNameisTim”，然后將視線集中在左邊側(cè)邊欄上，也很好確保了留白空間。第16頁(yè)在設(shè)計(jì)中利用黃金百分比五個(gè)關(guān)鍵點(diǎn)下面這個(gè)設(shè)計(jì)案例，經(jīng)過(guò)螺旋線不停延伸，字符大小也一點(diǎn)點(diǎn)變小，設(shè)計(jì)也變得越來(lái)越密集。第17頁(yè)在設(shè)計(jì)中利用黃金百分比五個(gè)關(guān)鍵點(diǎn)在另一個(gè)設(shè)計(jì)案例中，利用黃金百分比和黃金螺旋，確定了內(nèi)容和布局。經(jīng)過(guò)將不一樣大小正方形作為設(shè)計(jì)要素來(lái)配置，將視線進(jìn)行誘導(dǎo)，將設(shè)計(jì)故事性很好演繹了出來(lái)第18頁(yè)在設(shè)計(jì)中利用黃金百分比五個(gè)關(guān)鍵點(diǎn)04.攝影圖片：利用三分法圖像構(gòu)圖（英:Composition）能夠?qū)⒅饕閳?bào)傳遞出來(lái)，也是創(chuàng)造出漂亮設(shè)計(jì)一個(gè)主要方法。在攝影圖片上利用黃金百分比，是能夠幫助我們引導(dǎo)視線主要設(shè)計(jì)要素。利用黃金百分比，能夠?qū)D像劃分為橫豎三個(gè)部分。此時(shí)，畫面比率就能夠利用黃金分割法來(lái)設(shè)置為1：0.618：1，。在線交匯地方將設(shè)計(jì)要素配置上去，將視線集中起來(lái)，表現(xiàn)出充滿魅力構(gòu)圖。第19頁(yè)在設(shè)計(jì)中利用黃金百分比五個(gè)關(guān)鍵點(diǎn)

利用黃金百分比，還有另一個(gè)攝影照片構(gòu)圖技巧能夠利用，也就是三分割法（英:RuleofThirds）。將攝影圖片按照1：1：1均等方法劃分出來(lái)，全部空間都是相同大小。最主要設(shè)計(jì)要素能夠配置在中央長(zhǎng)方形四個(gè)角周圍。下面這個(gè)設(shè)計(jì)案例，就是利用了黃金百分比，來(lái)確定了留白位置。女性模特鼻子和額頭，和水平線頂部對(duì)齊，眼睛和鼻子位置是沿著中心垂直線來(lái)對(duì)齊配置。第20頁(yè)在設(shè)計(jì)中利用黃金百分比五個(gè)關(guān)鍵點(diǎn)

下面這個(gè)設(shè)計(jì)案例也是利用了三分割法（英:RuleofThirds）。這里，幾乎空白中央長(zhǎng)方形，設(shè)計(jì)成了集中注意力焦點(diǎn)。女性模特眼睛，配置在長(zhǎng)方形角附近，經(jīng)過(guò)這么設(shè)計(jì)將魅力展現(xiàn)給用戶。第21頁(yè)在設(shè)計(jì)中利用黃金百分比五個(gè)關(guān)鍵點(diǎn)

下面另一個(gè)設(shè)計(jì)案例也是利用了黃金百分比，他將女性模特眼睛放在了中心，從中心開始一點(diǎn)點(diǎn)向外配置，垂直線和女性模特臉呈一條直線，讓人能夠看出他布局是十分整齊。第22頁(yè)在設(shè)計(jì)中利用黃金百分比五個(gè)關(guān)鍵點(diǎn)

然后從整體設(shè)計(jì)來(lái)看，他利用了黃金百分比和黃金螺旋線。他還沿著螺旋線來(lái)進(jìn)行設(shè)計(jì)，伴隨螺旋線不停集中，將詳細(xì)信息也列舉到了出來(lái)。第23頁(yè)在設(shè)計(jì)中利用黃金百分比五個(gè)關(guān)鍵點(diǎn)05.LOGO設(shè)計(jì)：利用黃金百分比中圓利用黃金百分比，能夠按照一定百分比均得得到正方形和長(zhǎng)方形，同時(shí)也能取得均等圓圈。利用正方形畫出一個(gè)個(gè)相連接圓，其中任何一個(gè)都是遵照了1：1.618這個(gè)百分比第24頁(yè)在設(shè)計(jì)中利用黃金百分比五個(gè)關(guān)鍵點(diǎn)

利用黃金百分比畫圓，也就是「黃金圓（英:GoldenCircles）」不但能夠表現(xiàn)出漂亮視覺(jué)感、統(tǒng)一感，一樣也能應(yīng)用于LOGO設(shè)計(jì)之中。讓我們一起來(lái)看看Pepsi和TwitterLOGO設(shè)計(jì)吧。PepsiLOGO設(shè)計(jì)，利用了黃金百分比，將兩個(gè)獨(dú)特圓圈配置在了一起。不論是兩個(gè)圓圈相結(jié)合，還是LOGO中間白