用好黃金比例，用協(xié)調(diào)自然的配比照亮你設(shè)計(jì)的UI

UI界面是否設(shè)計(jì)得足夠清晰，各種元素之間是否協(xié)調(diào)、平衡，用戶能否輕松感知到屏幕上的信息，交互是否順暢舒適，這些因素決定了整個(gè)設(shè)計(jì)是否有效。

為了創(chuàng)造出好設(shè)計(jì)，專(zhuān)業(yè)的設(shè)計(jì)師會(huì)近乎無(wú)所不用其極的使用各種方式來(lái)提升設(shè)計(jì)的有效度，甚至將數(shù)學(xué)理論運(yùn)用到設(shè)計(jì)當(dāng)中。而這當(dāng)中，最著名的莫過(guò)于我們熟知的黃金比例了。在今天的文章當(dāng)中，我們將會(huì)探討黃金比例是如何運(yùn)用到UI設(shè)計(jì)當(dāng)中來(lái)的。
 

黃金比例是什么？

大自然的進(jìn)化大都是向著協(xié)調(diào)與平衡的方向靠攏的。許多自然界當(dāng)中的生物在進(jìn)化都是這樣，而數(shù)學(xué)家在探索和觀察的過(guò)程中，發(fā)現(xiàn)了這么一個(gè)幾乎存在于大部分自然界事物和生命中的這么一個(gè)公式，或者說(shuō)比例，也就是今天所說(shuō)的黃金比例。

黃金比例是大小不同的兩個(gè)事物之間存在的數(shù)學(xué)比例，這種比例讓這種對(duì)比具有了突出的美學(xué)特征，這個(gè)迷人的數(shù)字存在于鸚鵡螺的紋路上，植物的葉柄沿著黃金分割的角度生長(zhǎng)，人的肚臍位于人體的黃金分割點(diǎn)上，等等等等。黃金分割在生活中的存在更是數(shù)不勝數(shù)。

黃金比例是1:1.618，它構(gòu)成了一個(gè)完美的不對(duì)稱(chēng)的比例。

黃金比例被發(fā)現(xiàn)已經(jīng)超過(guò)4000年了，無(wú)數(shù)出土的精美的藝術(shù)品和宏偉的古代建筑當(dāng)中，依然可以找到黃金比例的影子。著名藝術(shù)家達(dá)芬奇和藝術(shù)家 薩爾瓦多·達(dá)利被認(rèn)為是黃金比例的忠實(shí)追隨者，黃金比例也成為了他們藝術(shù)創(chuàng)作中最重要、最關(guān)鍵的工具。

黃金比例在設(shè)計(jì)中的運(yùn)用

只有所有元素都協(xié)調(diào)地搭配才能讓整個(gè)設(shè)計(jì)足夠協(xié)調(diào)。而在設(shè)計(jì)過(guò)程中，合理的運(yùn)用黃金比例來(lái)控制元素和元素之間的大小、數(shù)量和比例。進(jìn)入U(xiǎn)I設(shè)計(jì)流程之后，許多設(shè)計(jì)師會(huì)有意識(shí)地開(kāi)始運(yùn)用黃金比例。

當(dāng)然，相比而言，平面設(shè)計(jì)師對(duì)于黃金比例的青睞更多一些。在美術(shù)課上，老師經(jīng)常會(huì)講解黃金比例理論，通過(guò)各種范例，幫助學(xué)生了解黃金比例的運(yùn)用方法。許多有美術(shù)背景的UI設(shè)計(jì)師在創(chuàng)建圖形的時(shí)候會(huì)因此將黃金比例作為一種工具，本能的運(yùn)用進(jìn)去。在設(shè)計(jì)一些小而有意義的元素諸如LOGO和圖標(biāo)的時(shí)候，尤其是如此。

在針對(duì)LOGO和圖標(biāo)設(shè)計(jì)的時(shí)候，設(shè)計(jì)師對(duì)于細(xì)節(jié)的關(guān)注度是非常高的。使用黃金比例來(lái)構(gòu)建視覺(jué)的時(shí)候，元素和元素之間的比例控制是非常講究的。黃金比例能夠增強(qiáng)LOGO本身的視覺(jué)吸引力，增強(qiáng)品牌的識(shí)別度和認(rèn)知度。作為品牌設(shè)計(jì)的核心，在LOGO設(shè)計(jì)中使用黃金比例是非常有說(shuō)服力的。

黃金比例同樣會(huì)運(yùn)用在UI設(shè)計(jì)當(dāng)中。在UI中，黃金比例最常見(jiàn)的用法是用來(lái)控制布局，將整個(gè)UI的排版布局使用黃金比例來(lái)控制和規(guī)劃，在圖片的裁剪和處理上，同樣可以借助黃金比例來(lái)控制，確保圖片內(nèi)容的平衡以及圖片本身的長(zhǎng)寬比足以令人舒適。

 

黃金比例如何提升UI設(shè)計(jì)？

雖然對(duì)于許多設(shè)計(jì)師而言，數(shù)學(xué)是一件惱人的事情，但是它如果能夠提升設(shè)計(jì)效果的話，那么鉆研一下也無(wú)妨吧？
 

平衡的內(nèi)容

當(dāng)產(chǎn)品中包含大量的各種各樣內(nèi)容的時(shí)候，設(shè)計(jì)師就需要面對(duì)這樣的局面了：對(duì)大量的內(nèi)容進(jìn)行取舍。這個(gè)時(shí)候，設(shè)計(jì)師可以運(yùn)用黃金比例，將至關(guān)重要的、不能被替換的關(guān)鍵內(nèi)容和其他的內(nèi)容按照1:1.618的比例提取出來(lái)，將重要內(nèi)容優(yōu)先展示，確保用戶能夠優(yōu)先感知到重要的內(nèi)容，這樣一來(lái)也更好組織其他的功能性的組件。

更有效的視覺(jué)層次

既然黃金比例能夠控制內(nèi)容，自然也能夠讓整個(gè)視覺(jué)層次顯得更加清晰直觀。在組織其他的視覺(jué)內(nèi)容的時(shí)候，同樣可以借助黃金比例來(lái)控制視覺(jué)信息的比重，從而營(yíng)造出對(duì)比分明，輕重緩急更加富有韻律感的視覺(jué)層次。
 

更為高效的排版

在進(jìn)行排版設(shè)計(jì)的時(shí)候，設(shè)計(jì)師需要將內(nèi)容劃分出清晰的層級(jí)。標(biāo)題、副標(biāo)題、正文、引用等等，它們有著不同的權(quán)重，在視覺(jué)上也通過(guò)大小和間距來(lái)呈現(xiàn)這種差距。而這個(gè)時(shí)候，黃金比例也有了用武之地。比如，你設(shè)定好了標(biāo)題的字號(hào)大小，那么除以1.618就得到了副標(biāo)題的字號(hào)。這樣的比例控制能夠帶來(lái)漂亮協(xié)調(diào)的視覺(jué)體驗(yàn)。

令人滿意的第一印象

當(dāng)用戶第一次試用產(chǎn)品的時(shí)候，會(huì)快速掃視界面，通過(guò)視覺(jué)和體驗(yàn)來(lái)判斷它們是否喜歡。有種名為內(nèi)臟反應(yīng)的心理學(xué)原理指出，人們常常能夠在幾秒鐘之內(nèi)就決定是否會(huì)喜歡某個(gè)事物。這種反應(yīng)通常比思考更快，在我們尚未意識(shí)到的時(shí)候就已經(jīng)作出了好惡的判斷。當(dāng)設(shè)計(jì)師使用黃金比例來(lái)控制UI中的各個(gè)元素的比例、大小和數(shù)量的時(shí)候，很容易讓用戶對(duì)產(chǎn)品產(chǎn)生正向的反應(yīng)，或者通俗的講，讓用戶“一見(jiàn)鐘情”。
 

適當(dāng)?shù)亓舭?/span>

設(shè)計(jì)中的留白同樣是非常重要的組成部分，元素和元素之間的親疏關(guān)系，是否一致，都是通過(guò)留白體現(xiàn)出來(lái)的。設(shè)計(jì)師通過(guò)控制留白來(lái)影響整個(gè)布局，而使用黃金比例來(lái)控制導(dǎo)航的疏密程度往往能夠得到比較不錯(cuò)的效果。比如，讓行間距是行高的1.618倍，能夠營(yíng)造出比較舒適的閱讀體驗(yàn)。

結(jié)語(yǔ)

如何讓黃金比例融入整個(gè)設(shè)計(jì)，是每個(gè)設(shè)計(jì)師都需要好好思考的問(wèn)題。巧妙地控制設(shè)計(jì)元素在整個(gè)UI布局中的大小比例，借助黃金比例讓UI更加自然，讓用戶一見(jiàn)傾心，并不是一件太過(guò)困難的事情。黃金比例所帶來(lái)的美學(xué)加成，不就應(yīng)該這么使用么？