神譯局是36氪旗下編譯團(tuán)隊(duì),，關(guān)注科技、商業(yè),、職場(chǎng)、生活等領(lǐng)域,，重點(diǎn)介紹國(guó)外的新技術(shù),、新觀點(diǎn),、新風(fēng)向,。

編者按：研究表明,，能欣賞到美是人類與生俱來(lái)的一種品質(zhì),。黃金比例就是最經(jīng)典的一種美學(xué),，在大量藝術(shù)與建筑的案例中都能找到黃金比例的身影,。但其實(shí),，在UI設(shè)計(jì)中運(yùn)用黃金比例也可以做出非常賞心悅目的界面,，本文提供了如何運(yùn)用黃金比例來(lái)進(jìn)行UI設(shè)計(jì)的一些技巧,，文章來(lái)自編譯,。

圖片來(lái)源：pixabay

比例體系以比率為基礎(chǔ),，這套體系在建筑和藝術(shù)當(dāng)中已經(jīng)沿用了好幾個(gè)世紀(jì),。早在公元前 500 年左右,，菲狄亞斯,、柏拉圖以及歐幾里得就首先提到了黃金比例,。我們說(shuō)這個(gè)比例在歷史上曾經(jīng)被多次發(fā)現(xiàn)應(yīng)該是合理的假設(shè)——也因此它有很多個(gè)名字,，包括中庸之道（golden mean）、黃金比例（golden ratio）,、黃金分割（golden section）,、神圣比例（divine proportion,，列奧納多·達(dá)芬奇）以及希臘符號(hào) φ,。

其確切的數(shù)學(xué)定義如下（根據(jù)維基百科）：

黃金比例,，又稱黃金分割,，是一個(gè)數(shù)學(xué)常數(shù)，一般以希臘字母φ表示,?？梢酝高^(guò)以下代數(shù)式定義：

黃金分割的兩個(gè)部分 (a/b = φ)

可以證明黃金比例 φ 具有特殊性質(zhì)：

這個(gè)數(shù)約等于 1.618033…（無(wú)理數(shù)）。（你也可以用 1/0.618=1.618。）

Giacomo Rizzolatti 和與 Cinzia Di Dio 的一項(xiàng)研究表明,，人類大腦對(duì)于比例為黃金比例的人體有著天生的依賴。在這項(xiàng)研究里,，他們給沒(méi)有藝術(shù)背景的受試者呈現(xiàn)雕像的原始圖像與扭曲版,。原始雕像的比例體現(xiàn)了黃金分割,。結(jié)果看到原始圖像后受試者有一組腦細(xì)胞被明顯激活了,，而看扭曲版的圖像那組腦細(xì)胞則沒(méi)有反應(yīng),，這說(shuō)明在一定程度上來(lái)說(shuō)美是一種與生俱來(lái)的品質(zhì),。

黃金比例已被用來(lái)分析自然,、建筑,、繪畫(huà)和音樂(lè)里面發(fā)現(xiàn)的數(shù)目,。在使用黃金比例時(shí),，大家往往認(rèn)定這能夠創(chuàng)造出一種有機(jī),、平衡且美觀的構(gòu)圖,，這樣的構(gòu)思被認(rèn)為是人的眼睛所喜歡看到的。

在建筑物和藝術(shù)品方面,，黃金比例的例子比比皆是,，比如吉薩金字塔,、雅典帕臺(tái)農(nóng)神廟以及達(dá)芬奇的蒙娜麗莎,。

達(dá)芬奇的蒙娜麗莎：頭部的長(zhǎng)寬比（a1 和 b1 段）,，以及軀干的長(zhǎng)寬度比（從眼線開(kāi)始到手——a2 和 b2 段）均符合黃金比例,。

黃金矩形與黃金螺旋

黃金矩形就是一個(gè)邊長(zhǎng)為黃金比例的矩形,。

黃金矩形的邊之比符合黃金比例 (a/b = φ)。

黃金矩形有一個(gè)有趣的特性：如果你把它分成一個(gè)邊長(zhǎng)等于矩形較短那條邊的正方形以及另一個(gè)矩形（如下圖所示）的話,，結(jié)果尺寸較小的這個(gè)矩形也是黃金矩形,。（這一屬性可以直接從上一節(jié)所述的黃金比例屬性派生而來(lái),。）

當(dāng)你像上圖那樣把黃金矩形劃分為正方形和小一點(diǎn)的矩形時(shí),，小一點(diǎn)的那個(gè)矩形也是黃金矩形,。

通過(guò)將每一個(gè)黃金矩形劃分成一個(gè)小正方形和另一個(gè)小黃金矩形來(lái),，你可以無(wú)限地重復(fù)這一過(guò)程,。其結(jié)果將是一個(gè)黃金螺旋——只要把每個(gè)正方形的對(duì)角連接起來(lái)就能得到這個(gè)螺旋,。

要想畫(huà)出黃金螺旋,，首先將黃金矩形 ABCD 劃分為正方形 ABEF 與小黃金矩形 EFDC,。然后對(duì)小的黃金矩形 EFDC 重復(fù)此過(guò)程,。黃金螺旋是通過(guò)連接（畫(huà)圓?。┧谜叫蔚膶?duì)角形成,。

很多自然發(fā)生的元素都有黃金螺旋的存在,，比方說(shuō)植物以及颶風(fēng)這樣的天氣模式,。

UI設(shè)計(jì)中黃金比例的例子

那么界面設(shè)計(jì)又應(yīng)該如何應(yīng)用黃金比例呢,？我們不妨看幾個(gè)常見(jiàn)的例子：

文字大小

不同的字體大小可以用黃金比例來(lái)設(shè)置,。假設(shè)網(wǎng)站body元素的字體大小為 16 像素,。標(biāo)題字體大小可以是body大小的黃金比例倍數(shù)——也就是說(shuō)，可以是 16 φ = 16 x 1.618 = 25.88 或大約 26 像素,。

有時(shí)候也可以利用黃金比例來(lái)確定特定字體大小所需的行高,。（行高是字體高度加上文本行之間的空白高度——這個(gè)基本上決定了文本行在段落里面排列的緊密程度。）比方說(shuō),，如果正文文案的字體大小為 16px,，則行高可以是 16 φ = 16 x 1.618 = 25.88 也即是約為 26px,。

行高是字體的高度加上文本行之間的空白高度,。

上：標(biāo)題與正文的大小之比為黃金比例,。行高與字體大小之比也成黃金比例,。行高的增加可令閱讀變得更容易,。下：此文本塊并未使用黃金比例,。

不過(guò)，結(jié)果證明,，事情稍微有點(diǎn)復(fù)雜，因?yàn)殡S著行變長(zhǎng),，行高也必須增加還能保持可讀性,。比方說(shuō),，雷丁大學(xué) 2004 年的一項(xiàng)研究得出的結(jié)論是，線條越長(zhǎng)需要的行間距就得越高,，這樣才方便眼睛輕松地找到下一行,。如果你真的希望按照黃金比例設(shè)計(jì)排版的話，可以考慮使用黃金比例排版計(jì)算器,，只要提供字體大小和線寬，它就能夠計(jì)算出理想的行高,。

圖像裁剪

要想創(chuàng)作出吸引人的影像,，構(gòu)圖很重要,。裁剪圖像,，做出強(qiáng)有力的構(gòu)圖有一種快速簡(jiǎn)便的方法,，那就是讓圖像的焦點(diǎn)處在金色螺旋之上,。

通過(guò)讓影像的焦點(diǎn)位于黃金螺旋之上,，然后對(duì)圖像進(jìn)行相應(yīng)裁剪，即可創(chuàng)建出強(qiáng)大的構(gòu)圖,，如左側(cè)的例子所示。

如何用黃金螺旋裁剪圖像,。

網(wǎng)頁(yè)布局

當(dāng)你把黃金矩形劃分成一個(gè)正方形和一個(gè)小一點(diǎn)的黃金矩形時(shí),，自然就會(huì)創(chuàng)建出一個(gè) 2 列的布局。所得到的布局非常適合主要由主要內(nèi)容區(qū)和側(cè)欄構(gòu)成的排版,。寬松地遵循這種布局就可以給界面創(chuàng)建結(jié)構(gòu),，并達(dá)到平衡,。不過(guò)，當(dāng)今的響應(yīng)式網(wǎng)站很難完全支持所有視窗尺寸都符合黃金比例,。如果你的關(guān)注重點(diǎn)是根據(jù)比例建立基本網(wǎng)格,，然后讓組件與其對(duì)齊的話，至少某些屏幕尺寸還是可以符合這種比例的,。

在左側(cè)運(yùn)用黃金比例的一個(gè)基本的 Web 網(wǎng)格結(jié)構(gòu),。

如何利用黃金比例創(chuàng)建寬松的頁(yè)面網(wǎng)格 。

結(jié)論

有些設(shè)計(jì)師對(duì)黃金比例十分著迷,，會(huì)利用它來(lái)創(chuàng)建和編輯各種界面設(shè)計(jì)元素,。有的人則認(rèn)為黃金比例其實(shí)也不怎么樣，不見(jiàn)得比用來(lái)得出尺寸和比例的任何其他辦法更有效,。不管怎樣,，對(duì)于新的視覺(jué)設(shè)計(jì)師或想要通過(guò)具體的數(shù)學(xué)方法提高技能的設(shè)計(jì)師來(lái)說(shuō)，黃金比例都是一個(gè)有用的參考,。

譯者：boxi

本文來(lái)自翻譯, 如若轉(zhuǎn)載請(qǐng)注明出處,。