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

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

圖片來源：pixabay

比例體系以比率為基礎(chǔ)，這套體系在建筑和藝術(shù)當(dāng)中已經(jīng)沿用了好幾個(gè)世紀(jì)。早在公元前 500 年左右，菲狄亞斯、柏拉圖以及歐幾里得就首先提到了黃金比例。我們說這個(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ù)，一般以希臘字母φ表示?？梢酝高^以下代數(shù)式定義：

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

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

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

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

黃金比例已被用來分析自然、建筑、繪畫和音樂里面發(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)寬度比（從眼線開始到手——a2 和 b2 段）均符合黃金比例。

黃金矩形與黃金螺旋

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

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

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

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

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

要想畫出黃金螺旋，首先將黃金矩形 ABCD 劃分為正方形 ABEF 與小黃金矩形 EFDC。然后對(duì)小的黃金矩形 EFDC 重復(fù)此過程。黃金螺旋是通過連接（畫圓弧）所得正方形的對(duì)角形成。

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

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

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

文字大小

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

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

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

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

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

圖像裁剪

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

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

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

網(wǎng)頁布局

當(dāng)你把黃金矩形劃分成一個(gè)正方形和一個(gè)小一點(diǎn)的黃金矩形時(shí)，自然就會(huì)創(chuàng)建出一個(gè) 2 列的布局。所得到的布局非常適合主要由主要內(nèi)容區(qū)和側(cè)欄構(gòu)成的排版。寬松地遵循這種布局就可以給界面創(chuàng)建結(jié)構(gòu)，并達(dá)到平衡。不過，當(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)建寬松的頁面網(wǎng)格 。

結(jié)論

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

譯者：boxi

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