UI界面是否(fou)設計得足(zu)夠(gou)清(qing)晰，各(ge)種元素(su)之(zhi)間是否(fou)協調(diao)、平衡，用戶能否(fou)輕松感知(zhi)到屏幕上的信息，交(jiao)互(hu)是否(fou)順暢舒(shu)適(shi)，這(zhe)些(xie)因素(su)決定(ding)了整個設計是否(fou)有效。

為了創(chuang)造出好(hao)設(she)計(ji)，專業(ye)的(de)設(she)計(ji)師會(hui)近乎(hu)無所不用其(qi)極的(de)使(shi)用各種(zhong)方式來提升(sheng)設(she)計(ji)的(de)有效(xiao)度，甚至(zhi)將(jiang)數學(xue)理論運用到設(she)計(ji)當(dang)中(zhong)。而這(zhe)當(dang)中(zhong)，最著名的(de)莫過于我們熟知的(de)黃金比例(li)了。在今(jin)天(tian)的(de)文章當(dang)中(zhong)，我們將(jiang)會(hui)探討黃金比例(li)是(shi)如(ru)何運用到UI設(she)計(ji)當(dang)中(zhong)來的(de)。

黃金(jin)比例是什么？

大(da)(da)自然的(de)進化(hua)大(da)(da)都(dou)是向著協調與平(ping)衡的(de)方向靠(kao)攏的(de)。許多自然界當中(zhong)的(de)生(sheng)物在進化(hua)都(dou)是這(zhe)樣，而數學家在探索(suo)和(he)(he)觀察(cha)的(de)過程中(zhong)，發現了(le)這(zhe)么一(yi)個(ge)幾乎存在于大(da)(da)部分自然界事物和(he)(he)生(sheng)命(ming)中(zhong)的(de)這(zhe)么一(yi)個(ge)公式，或(huo)者說比例(li)(li)，也就是今天(tian)所說的(de)黃(huang)金(jin)比例(li)(li)。

黃(huang)金(jin)比例(li)是大(da)小不同的(de)兩個事物(wu)之間存(cun)在的(de)數學比例(li)，這(zhe)種(zhong)比例(li)讓這(zhe)種(zhong)對(dui)比具有(you)了(le)突出的(de)美學特征(zheng)，這(zhe)個迷人的(de)數字存(cun)在于鸚鵡螺的(de)紋路(lu)上，植物(wu)的(de)葉柄沿著黃(huang)金(jin)分割的(de)角度生長(chang)，人的(de)肚臍位于人體的(de)黃(huang)金(jin)分割點上，等等等等。黃(huang)金(jin)分割在生活中的(de)存(cun)在更是數不勝數。

黃(huang)金比例是1:1.618，它構(gou)成了一個完美的不對稱的比例。

黃金(jin)比例(li)被發(fa)現已經超過4000年了(le)，無數(shu)出(chu)土的(de)(de)(de)精(jing)美的(de)(de)(de)藝術(shu)品和宏偉的(de)(de)(de)古代建筑(zhu)當中，依然(ran)可以找到黃金(jin)比例(li)的(de)(de)(de)影子。著(zhu)名(ming)藝術(shu)家(jia)達芬奇和藝術(shu)家(jia) 薩爾瓦(wa)多·達利被認為是黃金(jin)比例(li)的(de)(de)(de)忠實追隨者，黃金(jin)比例(li)也(ye)成為了(le)他們藝術(shu)創作中最重要、最關鍵的(de)(de)(de)工具。

黃金比例在設計中的運(yun)用

只有所有元素都協調地(di)搭配才能讓整個設(she)計(ji)足(zu)夠協調。而(er)在設(she)計(ji)過程中，合理的運(yun)用黃金比例(li)來控制元素和元素之(zhi)間的大小、數量和比例(li)。進入(ru)UI設(she)計(ji)流程之(zhi)后(hou)，許多設(she)計(ji)師會(hui)有意識地(di)開始運(yun)用黃金比例(li)。

當然，相(xiang)比而(er)言，平面設計(ji)師(shi)對于黃(huang)(huang)金(jin)比例(li)(li)的(de)青睞更多一些(xie)。在(zai)(zai)(zai)美術課上，老(lao)師(shi)經常會(hui)講解黃(huang)(huang)金(jin)比例(li)(li)理論(lun)，通過各種范例(li)(li)，幫助(zhu)學生了解黃(huang)(huang)金(jin)比例(li)(li)的(de)運(yun)用方法。許(xu)多有美術背景的(de)UI設計(ji)師(shi)在(zai)(zai)(zai)創建圖(tu)(tu)形的(de)時(shi)候會(hui)因此(ci)將黃(huang)(huang)金(jin)比例(li)(li)作(zuo)為一種工具，本能(neng)的(de)運(yun)用進去。在(zai)(zai)(zai)設計(ji)一些(xie)小(xiao)而(er)有意義的(de)元素諸如LOGO和(he)圖(tu)(tu)標的(de)時(shi)候，尤其是如此(ci)。

在針對LOGO和圖標設(she)計(ji)的時(shi)候，設(she)計(ji)師(shi)對于細節的關注(zhu)度是非(fei)常(chang)高的。使用黃金(jin)(jin)比(bi)(bi)例來構建視覺的時(shi)候，元素和元素之間的比(bi)(bi)例控制是非(fei)常(chang)講(jiang)究的。黃金(jin)(jin)比(bi)(bi)例能夠增(zeng)強LOGO本身的視覺吸引力，增(zeng)強品牌的識別度和認知度。作為品牌設(she)計(ji)的核心，在LOGO設(she)計(ji)中使用黃金(jin)(jin)比(bi)(bi)例是非(fei)常(chang)有說服(fu)力的。

黃(huang)金比例(li)同(tong)(tong)樣(yang)會(hui)運用(yong)在UI設(she)計當(dang)中(zhong)。在UI中(zhong)，黃(huang)金比例(li)最常見(jian)的用(yong)法是用(yong)來(lai)控制(zhi)布局，將整(zheng)個UI的排版布局使(shi)用(yong)黃(huang)金比例(li)來(lai)控制(zhi)和規劃，在圖(tu)(tu)片(pian)的裁剪和處理上(shang)，同(tong)(tong)樣(yang)可以(yi)(yi)借(jie)助黃(huang)金比例(li)來(lai)控制(zhi)，確保(bao)圖(tu)(tu)片(pian)內(nei)容(rong)的平衡以(yi)(yi)及(ji)圖(tu)(tu)片(pian)本(ben)身的長寬(kuan)比足以(yi)(yi)令人(ren)舒(shu)適。

黃金比例如(ru)何提升UI設計(ji)？

雖然對于許多設(she)計師而(er)言，數學是一件(jian)惱人(ren)的事(shi)情，但(dan)是它如果能夠提升設(she)計效果的話，那么鉆研一下也無妨吧？

平衡的內容(rong)

當(dang)產品中包(bao)含大量的(de)各種各樣(yang)內容(rong)(rong)的(de)時候，設計師(shi)就需要面(mian)對(dui)這樣(yang)的(de)局面(mian)了：對(dui)大量的(de)內容(rong)(rong)進行取(qu)舍(she)。這個(ge)時候，設計師(shi)可(ke)以運用(yong)黃金比例，將(jiang)(jiang)至(zhi)關重(zhong)要的(de)、不(bu)能被替換(huan)的(de)關鍵內容(rong)(rong)和(he)其他(ta)(ta)的(de)內容(rong)(rong)按照1:1.618的(de)比例提取(qu)出來(lai)，將(jiang)(jiang)重(zhong)要內容(rong)(rong)優先展示，確(que)保用(yong)戶能夠優先感知(zhi)到重(zhong)要的(de)內容(rong)(rong)，這樣(yang)一來(lai)也更(geng)好組(zu)織其他(ta)(ta)的(de)功(gong)能性的(de)組(zu)件。

更(geng)有效的視覺層次

既然黃金比(bi)例(li)能(neng)夠控制(zhi)內(nei)容(rong)，自(zi)然也(ye)能(neng)夠讓(rang)整個(ge)視(shi)覺(jue)層次顯(xian)得更加清晰(xi)直(zhi)觀。在組織(zhi)其(qi)他的視(shi)覺(jue)內(nei)容(rong)的時候，同樣可以借(jie)助黃金比(bi)例(li)來控制(zhi)視(shi)覺(jue)信息(xi)的比(bi)重，從而營造出(chu)對比(bi)分明，輕重緩急更加富有韻律感的視(shi)覺(jue)層次。

更為高(gao)效的排版

在進行排版設(she)計的時候，設(she)計師需要(yao)將內(nei)容劃分出清晰的層級。標(biao)題、副標(biao)題、正文、引用(yong)等等，它們(men)有(you)著不同的權(quan)重，在視覺(jue)上也(ye)通過大小和間(jian)距來呈(cheng)現這種(zhong)差(cha)距。而這個時候，黃金比(bi)例也(ye)有(you)了(le)用(yong)武之地。比(bi)如，你設(she)定好(hao)了(le)標(biao)題的字號(hao)(hao)大小，那么(me)除以1.618就得到了(le)副標(biao)題的字號(hao)(hao)。這樣的比(bi)例控制能夠帶來漂亮協調的視覺(jue)體驗。

令(ling)人滿意的第一印象

當用戶第一(yi)次試用產品(pin)的(de)時(shi)候，會(hui)快(kuai)速掃(sao)視(shi)(shi)界(jie)面(mian)，通(tong)(tong)過視(shi)(shi)覺和(he)體(ti)驗來判斷它們是否(fou)喜(xi)歡(huan)。有種(zhong)名為內臟反(fan)應(ying)的(de)心理學原理指出(chu)，人們常(chang)常(chang)能夠(gou)在幾秒(miao)鐘之內就(jiu)決定(ding)是否(fou)會(hui)喜(xi)歡(huan)某個事物。這種(zhong)反(fan)應(ying)通(tong)(tong)常(chang)比(bi)思考(kao)更快(kuai)，在我(wo)們尚未(wei)意識到(dao)的(de)時(shi)候就(jiu)已經作出(chu)了好惡的(de)判斷。當設計師使用黃金比(bi)例(li)來控制UI中(zhong)的(de)各個元素的(de)比(bi)例(li)、大小和(he)數量的(de)時(shi)候，很容易讓(rang)用戶對產品(pin)產生正向的(de)反(fan)應(ying)，或者通(tong)(tong)俗(su)的(de)講，讓(rang)用戶“一(yi)見鐘情”。

適當(dang)地留(liu)白

設計中的(de)(de)留白(bai)同樣是(shi)非常(chang)重要的(de)(de)組(zu)成部分(fen)，元(yuan)素和元(yuan)素之間的(de)(de)親疏關系，是(shi)否一致，都(dou)是(shi)通過留白(bai)體現(xian)出(chu)來的(de)(de)。設計師通過控制留白(bai)來影(ying)響整個布局(ju)，而使(shi)用黃金比例來控制導航(hang)的(de)(de)疏密程度往往能夠得到比較(jiao)(jiao)不錯(cuo)的(de)(de)效果。比如，讓行(xing)間距是(shi)行(xing)高的(de)(de)1.618倍，能夠營造出(chu)比較(jiao)(jiao)舒適的(de)(de)閱讀體驗。

結語

如何(he)讓(rang)黃金比(bi)例(li)融入整(zheng)個(ge)(ge)(ge)設(she)計，是每個(ge)(ge)(ge)設(she)計師都需(xu)要好好思(si)考(kao)的問題。巧妙地(di)控制設(she)計元素在整(zheng)個(ge)(ge)(ge)UI布局(ju)中的大小比(bi)例(li)，借助黃金比(bi)例(li)讓(rang)UI更加(jia)自然，讓(rang)用戶(hu)一見傾心，并(bing)不是一件(jian)太過困(kun)難的事情(qing)。黃金比(bi)例(li)所帶(dai)來的美學加(jia)成，不就應該這么(me)(me)使(shi)用么(me)(me)？