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

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

黃(huáng)金(jīn)比例是什麽？

大自(zì)然的進化大都(dōu)是向着協調與平衡的方向靠攏的。許多自(zì)然界當中的生物(wù)在進化都(dōu)是這(zhè)樣，而數(shù)學家在探索和(hé)觀察的過程中，發現了(le)這(zhè)麽一(yī)個幾乎存在于大部分自(zì)然界事物(wù)和(hé)生命中的這(zhè)麽一(yī)個公式，或者說比例，也就是今天所說的黃(huáng)金(jīn)比例。

黃(huáng)金(jīn)比例是大小不同的兩個事物(wù)之間(jiān)存在的數(shù)學比例，這(zhè)種比例讓這(zhè)種對比具有了(le)突出的美學特征，這(zhè)個迷人(rén)的數(shù)字存在于鹦鹉螺的紋路上(shàng)，植物(wù)的葉柄沿着黃(huáng)金(jīn)分割的角度生長(cháng)，人(rén)的肚臍位于人(rén)體的黃(huáng)金(jīn)分割點上(shàng)，等等等等。黃(huáng)金(jīn)分割在生活中的存在更是數(shù)不勝數(shù)。

黃(huáng)金(jīn)比例是1:1.618，它構成了(le)一(yī)個完美的不對稱的比例。

黃(huáng)金(jīn)比例被發現已經超過4000年(nián)了(le)，無數(shù)出土(tǔ)的精美的藝術(shù)品和(hé)宏偉的古代建築當中，依然可(kě)以找到黃(huáng)金(jīn)比例的影子。著名藝術(shù)家達芬奇和(hé)藝術(shù)家 薩爾瓦多·達利被認為(wèi)是黃(huáng)金(jīn)比例的忠實追随者，黃(huáng)金(jīn)比例也成為(wèi)了(le)他(tā)們藝術(shù)創作(zuò)中最重要(yào)、最關鍵的工(gōng)具。

黃(huáng)金(jīn)比例在設計中的運用

隻有所有元素都(dōu)協調地(dì)搭配才能(néng)讓整個設計足夠協調。而在設計過程中，合理的運用黃(huáng)金(jīn)比例來控制元素和(hé)元素之間(jiān)的大小、數(shù)量和(hé)比例。進入UI設計流程之後，許多設計師(shī)會有意識地(dì)開(kāi)始運用黃(huáng)金(jīn)比例。

當然，相比而言，平面設計師(shī)對于黃(huáng)金(jīn)比例的青睐更多一(yī)些。在美術(shù)課上(shàng)，老(lǎo)師(shī)經常會講解黃(huáng)金(jīn)比例理論，通(tōng)過各種範例，幫助學生了(le)解黃(huáng)金(jīn)比例的運用方法。許多有美術(shù)背景的UI設計師(shī)在創建圖形的時(shí)候會因此将黃(huáng)金(jīn)比例作(zuò)為(wèi)一(yī)種工(gōng)具，本能(néng)的運用進去。在設計一(yī)些小而有意義的元素諸如(rú)LOGO和(hé)圖标的時(shí)候，尤其是如(rú)此。

在針對LOGO和(hé)圖标設計的時(shí)候，設計師(shī)對于細節的關注度是非常高的。使用黃(huáng)金(jīn)比例來構建視(shì)覺的時(shí)候，元素和(hé)元素之間(jiān)的比例控制是非常講究的。黃(huáng)金(jīn)比例能(néng)夠增強LOGO本身的視(shì)覺吸引力，增強品牌的識别度和(hé)認知度。作(zuò)為(wèi)品牌設計的核心，在LOGO設計中使用黃(huáng)金(jīn)比例是非常有說服力的。

黃(huáng)金(jīn)比例同樣會運用在UI設計當中。在UI中，黃(huáng)金(jīn)比例最常見(jiàn)的用法是用來控制布局，将整個UI的排版布局使用黃(huáng)金(jīn)比例來控制和(hé)規劃，在圖片的裁剪和(hé)處理上(shàng)，同樣可(kě)以借助黃(huáng)金(jīn)比例來控制，确保圖片內(nèi)容的平衡以及圖片本身的長(cháng)寬比足以令人(rén)舒适。

黃(huáng)金(jīn)比例如(rú)何提升UI設計？

雖然對于許多設計師(shī)而言，數(shù)學是一(yī)件惱人(rén)的事情，但(dàn)是它如(rú)果能(néng)夠提升設計效果的話，那(nà)麽鑽研一(yī)下(xià)也無妨吧？

平衡的內(nèi)容

當産品中包含大量的各種各樣內(nèi)容的時(shí)候，設計師(shī)就需要(yào)面對這(zhè)樣的局面了(le)：對大量的內(nèi)容進行(xíng)取舍。這(zhè)個時(shí)候，設計師(shī)可(kě)以運用黃(huáng)金(jīn)比例，将至關重要(yào)的、不能(néng)被替換的關鍵內(nèi)容和(hé)其他(tā)的內(nèi)容按照1:1.618的比例提取出來，将重要(yào)內(nèi)容優先展示，确保用戶能(néng)夠優先感知到重要(yào)的內(nèi)容，這(zhè)樣一(yī)來也更好組織其他(tā)的功能(néng)性的組件。

更有效的視(shì)覺層次

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

更為(wèi)高效的排版

在進行(xíng)排版設計的時(shí)候，設計師(shī)需要(yào)将內(nèi)容劃分出清晰的層級。标題、副标題、正文、引用等等，它們有着不同的權重，在視(shì)覺上(shàng)也通(tōng)過大小和(hé)間(jiān)距來呈現這(zhè)種差距。而這(zhè)個時(shí)候，黃(huáng)金(jīn)比例也有了(le)用武之地(dì)。比如(rú)，你設定好了(le)标題的字号大小，那(nà)麽除以1.618就得到了(le)副标題的字号。這(zhè)樣的比例控制能(néng)夠帶來漂亮協調的視(shì)覺體驗。

令人(rén)滿意的第一(yī)印象

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

适當地(dì)留白

設計中的留白同樣是非常重要(yào)的組成部分，元素和(hé)元素之間(jiān)的親疏關系，是否一(yī)緻，都(dōu)是通(tōng)過留白體現出來的。設計師(shī)通(tōng)過控制留白來影響整個布局，而使用黃(huáng)金(jīn)比例來控制導航的疏密程度往往能(néng)夠得到比較不錯的效果。比如(rú)，讓行(xíng)間(jiān)距是行(xíng)高的1.618倍，能(néng)夠營造出比較舒适的閱讀體驗。

結語

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