視覺(jué)設(shè)計(jì)基礎(chǔ): 黃金比例
文章主要針對(duì)視覺(jué)設(shè)計(jì)中的黃金比例展開(kāi)分析,希望能夠讓大家更加清晰、易懂的去了解黃金比例。
提到黃金比例相信幾乎所有的設(shè)計(jì)師都知道,但是說(shuō)到如何運(yùn)用它到我們的設(shè)計(jì)中?大部分的設(shè)計(jì)師還是很難描述的。網(wǎng)上黃金比例的相關(guān)文章也很多,大部分設(shè)計(jì)師看過(guò)了也了解了,但是最后還是不會(huì)用,主要原因是寫(xiě)的太復(fù)雜。
今天我就帶大家詳解《UI知識(shí)體系》系列的第二篇文章《視覺(jué)基礎(chǔ)之黃金比例》。帶大家更加清晰、易懂的去了解黃金比例。
黃金分割概念
01 黃金分割、斐波那契螺旋、三分法
黃金比例的有三個(gè)常見(jiàn)的用法,分別為:黃金分割、斐波那契螺旋、三分法。斐波那契螺旋和三分法雖然說(shuō)不是和黃金比例完全的吻合,但是他們都是比較接近黃金比例的,我們也默認(rèn)將他們歸為黃金比例的隊(duì)列里面。
黃金分割:
0.618這個(gè)比例被公認(rèn)為是最能引起美感的比例,因此被稱(chēng)為黃金分割。但是0.618這個(gè)比例是非常難以計(jì)算的,我們可以記下1.618這個(gè)數(shù)值,具體的計(jì)算公司如上圖所示
斐波那契螺旋、三分法的概念
斐波那契螺旋、三分法在大自然中的運(yùn)用
斐波那契螺旋:
- 斐波那契螺旋也稱(chēng)之為“黃金螺旋線”,它可以幫助我們確定內(nèi)容位置,幫助我們更加科學(xué)的規(guī)劃版面。
- 如何畫(huà)斐波那契螺旋線呢?網(wǎng)上的畫(huà)法都是非常的復(fù)雜難懂的,而現(xiàn)在我們只需要記住8、5、3、2、1、1這幾個(gè)比例的數(shù)字,相對(duì)應(yīng)的畫(huà)正方形就可以得到螺旋線了。(下面我也提供了螺旋線的源文件供大家下載)
斐波那契螺旋線的源文件鏈接:https://pan.baidu.com/s/1pM11E6B? ?? 密碼:ikty
三分法:
三分法是運(yùn)用黃金分割的一個(gè)簡(jiǎn)單實(shí)用的方法,等份分割的線稱(chēng)為黃金分割線,交叉的四個(gè)點(diǎn)稱(chēng)之為黃金分割點(diǎn),一般將我們主要展現(xiàn)的畫(huà)面放置在黃金分割點(diǎn)處。
logo設(shè)計(jì)中黃金比例的運(yùn)用
02 黃金比例的應(yīng)用
黃金比例在設(shè)計(jì)中的運(yùn)用也是非常廣泛的,比如上面logo設(shè)計(jì)中的運(yùn)用。我們切記不能被黃金比例限制了我們的思考,比如我們要設(shè)計(jì)一個(gè)logo,首先應(yīng)該是思考如何設(shè)計(jì)出創(chuàng)意的logo,然后動(dòng)手設(shè)計(jì),最后一步的話才是運(yùn)用黃金比例來(lái)幫助我們規(guī)整logo。
網(wǎng)頁(yè)中黃金比例的運(yùn)用
UI中黃金比例的運(yùn)用
平面設(shè)計(jì)中黃金比例的運(yùn)用
黃金比例應(yīng)該是作為設(shè)計(jì)師的輔助工具,而不是一個(gè)固定的設(shè)計(jì)模式。如果一開(kāi)始就去想著我一定要在設(shè)計(jì)中運(yùn)用黃金比例的話,那基本上我們的思維就會(huì)圍繞黃金比例去做設(shè)計(jì)了,這樣我們的設(shè)計(jì)就會(huì)被它框住。黃金比例最好是用在最后設(shè)計(jì)的修正上,我們可以根據(jù)黃金比例去調(diào)整我們?cè)氐奈恢?,讓它們更加的?guī)范。
改造前的界面
03 案例操作
上面的案例中是一個(gè)常見(jiàn)的登錄界面,存在很多問(wèn)題:
- 圖片太壓抑而且背景太雜亂,圖片比例不協(xié)調(diào)
- 登錄元素太簡(jiǎn)陋,間距混亂,按鈕點(diǎn)擊區(qū)域太小
- 第三方登錄和用戶(hù)登錄層級(jí)不明顯,圖標(biāo)空間太滿
接下來(lái)我根據(jù)所發(fā)現(xiàn)的這些問(wèn)題進(jìn)行再造,并且運(yùn)用到黃金比例進(jìn)行設(shè)計(jì)的修正。
改在后的界面
將改造前后的界面做對(duì)比,可以發(fā)現(xiàn)運(yùn)用了黃金比例的界面顯得更加的規(guī)范和有章法,圖片比例、元素間距、元素位置也是更加的協(xié)調(diào)。
總結(jié):我們用黃金比例的時(shí)候只需要記住這兩個(gè)點(diǎn)就可以了
【數(shù)字】黃金比例1.618、斐波那契螺旋線(8、5、3、2、1、1)、三分法
【用法】先設(shè)計(jì),然后黃金比例修正
文章到此就已經(jīng)結(jié)束了,感謝大家的閱讀,如果對(duì)于黃金比例還有什么疑問(wèn)和建議的話,請(qǐng)?jiān)谙路搅粞?。也歡迎大家關(guān)注我,接下來(lái)小凡會(huì)為大家?guī)?lái)更多UI知識(shí)體系系列的文章內(nèi)容。
本文由 @小凡 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來(lái)自u(píng)nsplash,基于CC0協(xié)議
方便留個(gè)微信嗎?交流交流~~