從apple設(shè)計(jì)淺談界面設(shè)計(jì)中的黃金分割

關(guān)于網(wǎng)頁(yè)設(shè)計(jì)的黃金比例，之前我們分析過(guò)黃金比例設(shè)計(jì)的問(wèn)題。今天我們將透過(guò)apple設(shè)計(jì)來(lái)看下黃金分割的應(yīng)用。

你研究或者不研究，美就在那里，不偏不移；你發(fā)現(xiàn)或者不發(fā)現(xiàn)，黃金分割就在那里，不多不少。了解他，發(fā)現(xiàn)美，也給自己增加精彩，好作品不會(huì)沒(méi)有依據(jù)。

掀開(kāi)面紗

0.618或者1.618，這個(gè)數(shù)字是否覺(jué)得似曾相識(shí)。這其實(shí)是一個(gè)數(shù)學(xué)比例關(guān)系（說(shuō)到數(shù)學(xué)，不要先著急暈哦，知道咱們做設(shè)計(jì)得對(duì)計(jì)算都不敏感，呵呵），即把一條線段分為兩部分，此時(shí)短段與長(zhǎng)段之比恰恰等于長(zhǎng)段與整條線之比，其數(shù)值比為1:1.618或0.618:1。

這就是黃金分割律，由公元前六世紀(jì)古希臘數(shù)學(xué)家畢達(dá)哥拉斯所發(fā)現(xiàn)，后來(lái)古希臘美學(xué)家柏拉圖將此稱(chēng)為黃金分割。黃金分割在未發(fā)現(xiàn)之前，在客觀世界中就存在的，只是當(dāng)人們揭示了這一奧秘之后，才對(duì)它有了明確的認(rèn)識(shí)。當(dāng)人們根據(jù)這個(gè)法則再來(lái)觀察自然界時(shí)，就驚奇的發(fā)現(xiàn)原來(lái)在自然界的許多優(yōu)美的事物中的能看到它，如植物的葉片、花朵，雪花，五角星……許多動(dòng)物、昆蟲(chóng)的身體結(jié)構(gòu)中，特別是人體中更是有著豐富的黃金比關(guān)系。

植物葉子中黃金分割

鸚鵡螺曲線的每個(gè)半徑和后一個(gè)的比都是黃金比例，是自然界最美的鬼斧神工。

動(dòng)植物的這些數(shù)學(xué)奇跡并不是偶然的巧合，而是在億萬(wàn)年的長(zhǎng)期進(jìn)化過(guò)程中選擇的適應(yīng)自身生長(zhǎng)的最佳方案。

走的更近

網(wǎng)頁(yè)設(shè)計(jì)黃金分割律作為一種重要形式美法則，成為世代相傳的審美經(jīng)典規(guī)律，至今不衰！這里我要再向你推薦一個(gè)美學(xué)利器——黃金矩形（Golden Rectangle）。它的的長(zhǎng)寬之比為黃金分割率0.618，并且可以不斷以這種比例分割下去。

黃金矩形：

黃金分割率和黃金矩形能夠給畫(huà)面帶來(lái)美感，令人愉悅。在很多藝術(shù)品以及建筑中都能找到它。埃及的金字塔，希臘雅典的巴特農(nóng)神廟，印度的泰姬陵，這些偉大杰作都有黃金分割的影子。

泰姬陵的多出布局都能看出黃金分割

達(dá)•芬奇的《蒙娜麗莎》中蒙娜麗莎的臉也符合黃金矩形（介個(gè)網(wǎng)上很多圖此處不多說(shuō)了，呵呵），《最后的晚餐》同樣也應(yīng)用了該比例布局。

《最后的晚餐》中后墻和窗戶(hù)，還有前景的桌子和弟子的腳都存在著微妙的關(guān)系

為什么人們對(duì)這樣的比例，會(huì)本能地感到美的存在？其實(shí)這與人類(lèi)的演化和人體正常發(fā)育密切相關(guān)。據(jù)研究，從猿到人的進(jìn)化過(guò)程中，骨骼方面以頭骨和腿骨變化最大，軀體外形由于近似黃金而矩形變化最小，人體結(jié)構(gòu)中有許多比例關(guān)系接近0.618，從而使人體美在幾十萬(wàn)年的歷史積淀中固定下來(lái)。人類(lèi)最熟悉自己，勢(shì)必將人體美作為最高的審美標(biāo)準(zhǔn)，由物及人，由人及物，推而廣之，凡是與人體相似的物體就喜歡它，就覺(jué)得美。

古希臘數(shù)學(xué)家畢達(dá)哥拉斯有句名言“凡是美的東西都具有共同的特征，這就是部分與部分以及部分與整體之間的協(xié)調(diào)一致。”

我們結(jié)婚吧，從此蘋(píng)果和黃金分割過(guò)上了幸福的生活

Apple logo

Apple logo蘋(píng)果中小葉子的高度和缺口的高度之比是0.6，而缺口的位置也和黃金分割有著千絲萬(wàn)縷的關(guān)系。也許這里面還有更多黃金分割的密碼，這里就要同學(xué)們自己去發(fā)現(xiàn)咯~

界面中的黃金分割

以iphone4為例，主界面的圖標(biāo)大小是114PX*114PX，它與圖標(biāo)和行距的總和（176PX）之比大約為0.6，而屏幕分辨率的長(zhǎng)寬比640/960也很接近黃金分割數(shù)0.618.

短信頁(yè)面，信息塊寬度所占整個(gè)屏幕的比例也是和黃金比例很接近的。再看撥號(hào)盤(pán)，就是一個(gè)個(gè)小黃金矩形的集合。是不是當(dāng)我們不知道如何分配頁(yè)面中各個(gè)元素比例的時(shí)候，這是一個(gè)很可以考慮的因素呢。

再看下面幾個(gè)例子：

Safari中地址欄和搜索欄的比例也是應(yīng)用了黃金分割，合理的分配了空間，既能充分顯示當(dāng)前地址也方便用戶(hù)選擇“搜索”。

26鍵鍵盤(pán)，這是在手機(jī)中使用率最高的鍵盤(pán)，按鍵高度和按鍵占整個(gè)行高的比值很接近黃金分割，同時(shí)每個(gè)按鍵也是小黃金矩形。這里的比值都是和黃金率近似但并不完全相同的，這點(diǎn)也很重要，因?yàn)樵O(shè)計(jì)并不只是美學(xué)，還要考慮到用戶(hù)觸鍵的準(zhǔn)確率，信息的承載量等諸多因素。

色彩對(duì)比上也可以應(yīng)用黃金比例，如明度的對(duì)比，鍵盤(pán)里同一高度上深色按鍵和淺色按鍵的明度之比在接近黃金風(fēng)格的時(shí)候是很容易辨識(shí)和區(qū)分按鍵功能，同時(shí)還不會(huì)覺(jué)得過(guò)于搶眼。

網(wǎng)頁(yè)中的應(yīng)用

這是apple官網(wǎng)首頁(yè)的截屏，他不像很多網(wǎng)站使用黃金分割處理左右分欄，而是充分的使用了黃金矩形，合理的排布了版面，又彰顯了大氣的風(fēng)格。

Id設(shè)計(jì)中的黃金分割

如今寬屏顯示已經(jīng)是主流趨勢(shì)，16：9，16：10這種比例都是比較接近黃金分割的，他們被充分應(yīng)用的產(chǎn)品的設(shè)計(jì)上。經(jīng)典的Apple Mac book pro也是使用了16:10這種及其接近黃金比的屏幕設(shè)計(jì)。

他們很幸福，我們?cè)趺崔k？

講了這么多，大家會(huì)不會(huì)有點(diǎn)暈啊。哈哈，知道你不是學(xué)數(shù)學(xué)的，不擅長(zhǎng)算數(shù)子。我就替你總結(jié)吧。

Apple的設(shè)計(jì)中到處都有黃金分割的影子（估計(jì)還有好多被辦公室的明亮燈光照的不太容易發(fā)現(xiàn)，你來(lái)發(fā)現(xiàn)吧），是不是由此可以得出在不用考慮其他一些必要因素的時(shí)候，可以用黃金分割比來(lái)排布那些你不知該如何排布的頁(yè)面的元素。比如表格的設(shè)計(jì)，網(wǎng)頁(yè)的分欄，需要有側(cè)重點(diǎn)的界面內(nèi)的兩部分。

使用了黃金分割布局的banner，文字和圖片的比例關(guān)系合理，在最大程度的凸顯文字的基礎(chǔ)上配圖也不會(huì)失去光彩。

額，沒(méi)有好好應(yīng)用黃金比例，杯具了~~~~

同時(shí)，這里還有一點(diǎn)很重要，就是上面的說(shuō)的其他因素，這就要巧妙的應(yīng)用，全局思考，才能做出真正的“黃金”作品出來(lái)，而不能僅僅是一個(gè)應(yīng)用了黃金比率卻不滿(mǎn)意的失敗作品。

在實(shí)際運(yùn)用過(guò)程中切忌一味的照搬，如果使用了黃金分割比，整體效果反而不好，這就要求我們?cè)趯?shí)際的創(chuàng)作過(guò)程中，不斷的積累經(jīng)驗(yàn)，做到應(yīng)用自如，應(yīng)盡量的以多種多樣的形式進(jìn)行創(chuàng)作，不應(yīng)該讓這些本來(lái)對(duì)我們創(chuàng)作有益的規(guī)律成了拘束創(chuàng)作的阻礙。