設(shè)計(jì)師不可錯(cuò)過(guò)的黃金比例指南

好的設(shè)計(jì)一直以來(lái)都是大眾爭(zhēng)論的焦點(diǎn),雖然永遠(yuǎn)不會(huì)有一種放之四海而皆準(zhǔn)的方法，但卻有一種具體的數(shù)學(xué)方法可以幫助我們更接近于好的設(shè)計(jì)經(jīng)驗(yàn)：黃金比例。

黃金比例是你幾乎可以在任何地方找到的數(shù)學(xué)比例，比如自然，建筑，繪畫和音樂(lè)。而當(dāng)專門用于設(shè)計(jì)時(shí)，它便創(chuàng)造了一種有機(jī)的，平衡的，美觀的感官享受。

在本文中，我們將深入探討黃金比率是什么，如何計(jì)算它，以及如何在設(shè)計(jì)中使用它——包括一個(gè)方便的工具列表。

yourlocalstudio.dk

什么是黃金比例？

黃金比例，也稱為黃金分割、黃金平均數(shù)、神圣比例或希臘字母phi，黃金比率是一個(gè)大約等于1.618的特殊數(shù)。比例本身來(lái)自與神秘的斐波那契序列—— 一個(gè)自然出現(xiàn)的數(shù)字序列，它可以在任何地方找到，從樹上的樹葉數(shù)量到貝殼的形狀。

斐波那契序列是它之前的兩個(gè)數(shù)的和。它是：0，1，1，2，3，5，8，13，21等等，到無(wú)窮大。源于這種規(guī)律，希臘人開發(fā)了黃金比例，以更好地表達(dá)序列中任意兩個(gè)數(shù)字之間的差異。

那這和設(shè)計(jì)有什么關(guān)系呢？當(dāng)你把一條線分成兩部分，較長(zhǎng)的部分(a)除以較小的部分(b)，等于(a)+(b)除以(a)，兩者都等于1.618。而這個(gè)公式可以幫助你創(chuàng)建出更賞心悅目的形狀、標(biāo)志和布局等等。

創(chuàng)建一個(gè)黃金矩形

取一個(gè)正方形以及和正方形同樣長(zhǎng)，但寬為1.618比例的長(zhǎng)方形。

將正方形放在矩形上，兩個(gè)形狀之間的比例就為黃金比例。

如果你繼續(xù)將黃金比例公式應(yīng)用到最右邊的新矩形，那么你將得到一個(gè)由越來(lái)越小的正方形組成的圖像。

如果你在每個(gè)方格上畫一個(gè)螺旋線，從一個(gè)角落開始到另一個(gè)角落結(jié)束，將創(chuàng)建出一條斐波那契序列曲線（也稱為黃金螺旋）。

如何在設(shè)計(jì)中使用黃金比例？

既然數(shù)學(xué)課已經(jīng)結(jié)束，我們又如何將這些知識(shí)應(yīng)用到每天的工作中？

以下是在設(shè)計(jì)中使用黃金比例的四種方法：

1.排版和定義層次結(jié)構(gòu)

黃金比例可以幫助你確定在網(wǎng)站，登錄頁(yè)面，博客文章甚至平面廣告中使用的標(biāo)題和正文副本的字體大小。

假設(shè)你的正文部分是12px。那么將12乘以1.618，得出的值為19.416，如果遵循黃金比例并平衡12px正文字體大小的話，那么你的標(biāo)題文本大小就可以是19px或20px.

反過(guò)來(lái)同樣，如果標(biāo)題文本為25px，則可以將其除以1.618以確定正文文本大小（15或16像素）。

2.裁剪和調(diào)整圖像大小

裁剪圖像時(shí)，很容易識(shí)別要剪切的空白區(qū)域。但是，在調(diào)整大小后，如何確保圖像仍然平衡？你可以使用黃金螺旋線作為圖像構(gòu)圖的指南。

例如，如果在圖像上疊加黃金螺旋線，則可以確保焦點(diǎn)位于螺旋的中間。

3.布局

利用黃金比例可以幫助你設(shè)計(jì)一個(gè)視覺(jué)上吸引人的用戶界面，并引導(dǎo)用戶將注意力放在那些更為重要的部分上。

例如，在左側(cè)突出顯示內(nèi)容的大塊，右邊的列更窄的頁(yè)面可以遵循黃金比例的比例，并幫助你決定將最重要的內(nèi)容放在哪里。

4.LOGO創(chuàng)作

如果你正處于Logo創(chuàng)作的瓶頸期，那么不妨參考一下黃金比例原則，它可以幫助你勾勒出大致的比例和形狀。許多流行的logo都遵循黃金比例，如Twitter，Apple和百事可樂(lè)等等。

via：Mostafa Amin和Brandology Studio

設(shè)計(jì)師Kazi Mohammed Erfan甚至挑戰(zhàn)自己完全基于黃金比例創(chuàng)建了25個(gè)新logo。

via.Kazi Mohammed Erfan

幫助你使用黃金比例的工具

有時(shí)候并不需要鉛筆和紙張來(lái)計(jì)算黃金比例 ，有很多工具可以為你工作。以下五種工具可幫助你在設(shè)計(jì)中使用黃金比例：

1.黃金比例計(jì)算器

https://www.omnicalculator.com/math/golden-ratio

計(jì)算兩側(cè)的較短邊，較長(zhǎng)邊和組合長(zhǎng)度以計(jì)算黃金比例。

2.goldenRATIO

https://itunes.apple.com/us/app/goldenratio-tool-for-every/id485258055?mt=8

這款應(yīng)用程序?qū)樵O(shè)計(jì)師和開發(fā)人員而設(shè)計(jì)，可根據(jù)黃金比例為您提供設(shè)計(jì)網(wǎng)站，界面，布局等的簡(jiǎn)便方法。它包括一個(gè)帶有視覺(jué)反饋的內(nèi)置計(jì)算器和用于存儲(chǔ)屏幕位置和設(shè)置的功能，因此您無(wú)需為每項(xiàng)任務(wù)重新安排黃金比例。

3.黃金比例排版計(jì)算器

https://grtcalculator.com/

輸入您的字體大小和寬度，為您的網(wǎng)站發(fā)現(xiàn)完美的排版。您可以根據(jù)字體大小，行高，寬度和每行字符進(jìn)行優(yōu)化。

4.PhiMatrix

https://www.phimatrix.com/

這款Golden Ratio設(shè)計(jì)和分析軟件提供可自定義的網(wǎng)格和模板，您可以在任何圖像上疊加，可用于設(shè)計(jì)和組合，產(chǎn)品設(shè)計(jì)，徽標(biāo)開發(fā)等。

5.黃金比例草圖資源

https://www.sketchappsources.com/free-source/1190-golden-ratio-sketch-freebie-resource.html

下載黃金螺旋的免費(fèi)草圖文件，幫助圖像和布局組成。

開始使用黃金比例

一旦你知道要尋找什么，你就會(huì)開始注意到到處都是黃金比例。（不相信？看看你的手，甚至你的手指也遵循黃金比例。）人類的眼睛習(xí)慣了看到這個(gè)神奇的數(shù)字，我們潛意識(shí)里對(duì)它作出了積極的反應(yīng)。

而作為設(shè)計(jì)師，我們可以利用這個(gè)數(shù)字來(lái)獲得優(yōu)勢(shì)。哪怕是對(duì)裁剪圖像或開發(fā)布局的方式進(jìn)行微調(diào)，仍然可以顯著地改善用戶與設(shè)計(jì)交互的方式。