UI界面(mian)是否設(she)計得足夠清晰，各種元素之間(jian)是否協調、平衡，用戶能否輕松感知到屏幕上的(de)信息(xi)，交(jiao)互是否順暢(chang)舒適，這些因素決定了整個設(she)計是否有(you)效。
為了創造出(chu)好設計(ji)，專(zhuan)業的(de)(de)設計(ji)師會近(jin)乎無所(suo)不用其(qi)極的(de)(de)使用各種方式來(lai)提(ti)升設計(ji)的(de)(de)有效度，甚至將數學理論運用到(dao)(dao)設計(ji)當(dang)中。而這(zhe)當(dang)中，最著名的(de)(de)莫過于我們(men)(men)熟知的(de)(de)黃金(jin)比(bi)例(li)了。在(zai)今(jin)天的(de)(de)文章當(dang)中，我們(men)(men)將會探討黃金(jin)比(bi)例(li)是如何運用到(dao)(dao)UI設計(ji)當(dang)中來(lai)的(de)(de)。
大自然的進化(hua)大都(dou)是向(xiang)著(zhu)協調與平衡的方向(xiang)靠攏的。許多自然界當中的生物(wu)在進化(hua)都(dou)是這(zhe)樣，而數學家(jia)在探索(suo)和(he)觀察(cha)的過程(cheng)中，發現了這(zhe)么一個幾(ji)乎(hu)存在于大部分自然界事物(wu)和(he)生命中的這(zhe)么一個公式，或(huo)者說(shuo)比(bi)例(li)，也(ye)就是今天所(suo)說(shuo)的黃金比(bi)例(li)。
黃(huang)金(jin)(jin)比例是大(da)小不(bu)同的(de)(de)兩個事物之間存(cun)在的(de)(de)數(shu)學(xue)比例，這種比例讓(rang)這種對比具有了突出的(de)(de)美(mei)學(xue)特征(zheng)，這個迷人的(de)(de)數(shu)字存(cun)在于鸚鵡螺的(de)(de)紋路上，植物的(de)(de)葉柄沿著(zhu)黃(huang)金(jin)(jin)分(fen)割(ge)(ge)的(de)(de)角度生長，人的(de)(de)肚臍位于人體的(de)(de)黃(huang)金(jin)(jin)分(fen)割(ge)(ge)點上，等(deng)等(deng)等(deng)等(deng)。黃(huang)金(jin)(jin)分(fen)割(ge)(ge)在生活中的(de)(de)存(cun)在更(geng)是數(shu)不(bu)勝(sheng)數(shu)。
黃金比(bi)例(li)是1:1.618，它構成了一個(ge)完美(mei)的不對稱的比(bi)例(li)。
黃金比例被(bei)發現已(yi)經超過4000年了，無數出土的(de)精美(mei)的(de)藝(yi)術(shu)品(pin)和宏偉的(de)古代建(jian)筑當中，依然可以找到黃金比例的(de)影子。著名藝(yi)術(shu)家達芬奇和藝(yi)術(shu)家 薩爾瓦多·達利被(bei)認為(wei)是黃金比例的(de)忠實追隨者，黃金比例也成為(wei)了他(ta)們藝(yi)術(shu)創作中最重要、最關鍵的(de)工具。
只有(you)(you)所有(you)(you)元(yuan)素(su)(su)都協調地(di)搭配才能讓整個設(she)計(ji)(ji)足夠(gou)協調。而在(zai)設(she)計(ji)(ji)過程中(zhong)，合理的運用(yong)黃(huang)金比例(li)來控制元(yuan)素(su)(su)和元(yuan)素(su)(su)之間的大小、數(shu)量和比例(li)。進入(ru)UI設(she)計(ji)(ji)流程之后(hou)，許多(duo)設(she)計(ji)(ji)師會有(you)(you)意識地(di)開始運用(yong)黃(huang)金比例(li)。
當(dang)然，相比(bi)而言，平面設計師(shi)對于(yu)黃(huang)(huang)金(jin)比(bi)例(li)的(de)(de)青睞(lai)更多一些。在(zai)美(mei)術課上，老師(shi)經常(chang)會講解黃(huang)(huang)金(jin)比(bi)例(li)理論，通過各種范例(li)，幫助學生了解黃(huang)(huang)金(jin)比(bi)例(li)的(de)(de)運用(yong)方法。許多有美(mei)術背景的(de)(de)UI設計師(shi)在(zai)創(chuang)建(jian)圖形的(de)(de)時候(hou)會因此(ci)將(jiang)黃(huang)(huang)金(jin)比(bi)例(li)作為(wei)一種工具，本能(neng)的(de)(de)運用(yong)進去(qu)。在(zai)設計一些小而有意(yi)義的(de)(de)元素諸如LOGO和圖標的(de)(de)時候(hou)，尤其是如此(ci)。
在針(zhen)對(dui)LOGO和(he)圖標設計(ji)的(de)(de)時候，設計(ji)師對(dui)于細節的(de)(de)關(guan)注度(du)是(shi)非(fei)常(chang)高(gao)的(de)(de)。使(shi)(shi)用黃金(jin)(jin)比(bi)例來構建視(shi)覺的(de)(de)時候，元(yuan)素(su)和(he)元(yuan)素(su)之間的(de)(de)比(bi)例控(kong)制是(shi)非(fei)常(chang)講究的(de)(de)。黃金(jin)(jin)比(bi)例能夠增強LOGO本身的(de)(de)視(shi)覺吸引力，增強品牌的(de)(de)識別度(du)和(he)認知度(du)。作(zuo)為品牌設計(ji)的(de)(de)核心，在LOGO設計(ji)中(zhong)使(shi)(shi)用黃金(jin)(jin)比(bi)例是(shi)非(fei)常(chang)有說服力的(de)(de)。
黃(huang)(huang)(huang)金(jin)比(bi)(bi)例(li)同樣會運用在UI設計當中(zhong)。在UI中(zhong)，黃(huang)(huang)(huang)金(jin)比(bi)(bi)例(li)最常見的用法(fa)是用來控(kong)制(zhi)布(bu)局(ju)，將整個UI的排版(ban)布(bu)局(ju)使用黃(huang)(huang)(huang)金(jin)比(bi)(bi)例(li)來控(kong)制(zhi)和(he)規劃(hua)，在圖片(pian)(pian)的裁剪和(he)處理(li)上，同樣可以借助黃(huang)(huang)(huang)金(jin)比(bi)(bi)例(li)來控(kong)制(zhi)，確保(bao)圖片(pian)(pian)內容的平衡以及圖片(pian)(pian)本身(shen)的長寬比(bi)(bi)足以令(ling)人舒(shu)適。
雖然對于(yu)許多(duo)設(she)(she)計師而言，數學是一件惱人的事情，但(dan)是它如果能夠提(ti)升設(she)(she)計效果的話，那么鉆研一下也無妨吧？
當(dang)產品中(zhong)包(bao)含大量的(de)(de)各種(zhong)各樣(yang)(yang)內(nei)容的(de)(de)時(shi)候(hou)(hou)，設計師就需要(yao)面(mian)對(dui)這樣(yang)(yang)的(de)(de)局面(mian)了：對(dui)大量的(de)(de)內(nei)容進行取(qu)舍。這個時(shi)候(hou)(hou)，設計師可(ke)以運(yun)用(yong)黃金比例(li)，將至關重要(yao)的(de)(de)、不(bu)能被替換的(de)(de)關鍵(jian)內(nei)容和其(qi)他的(de)(de)內(nei)容按照1:1.618的(de)(de)比例(li)提取(qu)出來(lai)，將重要(yao)內(nei)容優先展示，確保用(yong)戶(hu)能夠優先感知到(dao)重要(yao)的(de)(de)內(nei)容，這樣(yang)(yang)一來(lai)也(ye)更(geng)好組織其(qi)他的(de)(de)功能性的(de)(de)組件。
既然黃金比(bi)例能夠(gou)控(kong)(kong)制(zhi)內(nei)容，自(zi)然也能夠(gou)讓整個視覺(jue)層(ceng)次顯得更加(jia)清晰直觀(guan)。在(zai)組織其他(ta)的(de)視覺(jue)內(nei)容的(de)時候(hou)，同樣(yang)可以(yi)借助黃金比(bi)例來控(kong)(kong)制(zhi)視覺(jue)信息的(de)比(bi)重，從而營造出對(dui)比(bi)分明(ming)，輕重緩(huan)急更加(jia)富有韻律感的(de)視覺(jue)層(ceng)次。
在進行排版設計的(de)(de)時(shi)候，設計師需(xu)要將內容劃分出清晰的(de)(de)層(ceng)級。標題(ti)(ti)、副標題(ti)(ti)、正(zheng)文、引用(yong)等等，它們有(you)著不(bu)同(tong)的(de)(de)權(quan)重，在視(shi)覺(jue)上(shang)也通過(guo)大小和(he)間距來呈(cheng)現這種差距。而(er)這個時(shi)候，黃金比例也有(you)了(le)用(yong)武之地。比如(ru)，你設定(ding)好了(le)標題(ti)(ti)的(de)(de)字號大小，那么除以1.618就得到了(le)副標題(ti)(ti)的(de)(de)字號。這樣的(de)(de)比例控制能夠帶來漂亮協調的(de)(de)視(shi)覺(jue)體驗。
當用(yong)(yong)戶第一(yi)次試用(yong)(yong)產(chan)(chan)品的(de)時候(hou)，會快(kuai)(kuai)速(su)掃(sao)視界(jie)面，通過視覺和體驗來判斷它(ta)們是否喜歡(huan)。有種名為內(nei)臟反(fan)應的(de)心理學原理指出，人們常常能(neng)夠(gou)在幾秒鐘(zhong)之內(nei)就(jiu)決定(ding)是否會喜歡(huan)某個事物。這種反(fan)應通常比(bi)思考更快(kuai)(kuai)，在我們尚(shang)未意(yi)識到的(de)時候(hou)就(jiu)已(yi)經作出了(le)好惡的(de)判斷。當設計師使(shi)用(yong)(yong)黃金比(bi)例來控制UI中的(de)各(ge)個元(yuan)素的(de)比(bi)例、大小(xiao)和數量(liang)的(de)時候(hou)，很容易讓(rang)用(yong)(yong)戶對產(chan)(chan)品產(chan)(chan)生正向的(de)反(fan)應，或者通俗的(de)講，讓(rang)用(yong)(yong)戶“一(yi)見(jian)鐘(zhong)情”。
設計中的(de)留白同(tong)樣是(shi)非常重要的(de)組成部分，元素和元素之間的(de)親疏關系，是(shi)否一致(zhi)，都是(shi)通過留白體現出(chu)來的(de)。設計師通過控(kong)制(zhi)留白來影響整個布(bu)局，而使(shi)用黃金比例來控(kong)制(zhi)導航(hang)的(de)疏密程度(du)往往能(neng)夠(gou)(gou)得到比較不錯(cuo)的(de)效果。比如，讓行(xing)間距是(shi)行(xing)高的(de)1.618倍(bei)，能(neng)夠(gou)(gou)營造出(chu)比較舒適(shi)的(de)閱讀體驗。
如何讓黃(huang)(huang)金比例(li)融(rong)入整個設計，是(shi)每個設計師都需要好(hao)好(hao)思考(kao)的問題。巧妙地控(kong)制設計元(yuan)素在整個UI布局中的大小比例(li)，借助黃(huang)(huang)金比例(li)讓UI更加自(zi)然，讓用(yong)戶(hu)一(yi)(yi)見傾心，并不(bu)是(shi)一(yi)(yi)件太過困難的事(shi)情。黃(huang)(huang)金比例(li)所帶來的美學(xue)加成，不(bu)就(jiu)應該這么使用(yong)么？
在線客服1號
微信公眾賬號