文章主要針對視覺設(shè)計(jì)中的黃金比例展開分析，希望能夠讓大家更加清晰、易懂的去了解黃金比例。

提到黃金比例相信幾乎所有的設(shè)計(jì)師都知道，但是說到如何運(yùn)用它到我們的設(shè)計(jì)中？大部分的設(shè)計(jì)師還是很難描述的。網(wǎng)上黃金比例的相關(guān)文章也很多，大部分設(shè)計(jì)師看過了也了解了，但是最后還是不會用，主要原因是寫的太復(fù)雜。

今天我就帶大家詳解《UI知識體系》系列的第二篇文章《視覺基礎(chǔ)之黃金比例》。帶大家更加清晰、易懂的去了解黃金比例。

黃金分割概念

01 黃金分割、斐波那契螺旋、三分法

黃金比例的有三個常見的用法，分別為：黃金分割、斐波那契螺旋、三分法。斐波那契螺旋和三分法雖然說不是和黃金比例完全的吻合，但是他們都是比較接近黃金比例的，我們也默認(rèn)將他們歸為黃金比例的隊(duì)列里面。

黃金分割：

0.618這個比例被公認(rèn)為是最能引起美感的比例，因此被稱為黃金分割。但是0.618這個比例是非常難以計(jì)算的，我們可以記下1.618這個數(shù)值，具體的計(jì)算公司如上圖所示

斐波那契螺旋、三分法的概念

斐波那契螺旋、三分法在大自然中的運(yùn)用

斐波那契螺旋：

• 斐波那契螺旋也稱之為“黃金螺旋線”，它可以幫助我們確定內(nèi)容位置，幫助我們更加科學(xué)的規(guī)劃版面。
• 如何畫斐波那契螺旋線呢？網(wǎng)上的畫法都是非常的復(fù)雜難懂的，而現(xiàn)在我們只需要記住8、5、3、2、1、1這幾個比例的數(shù)字，相對應(yīng)的畫正方形就可以得到螺旋線了。（下面我也提供了螺旋線的源文件供大家下載）

斐波那契螺旋線的源文件鏈接：https://pan.baidu.com/s/1pM11E6B? ?? 密碼：ikty

三分法：

三分法是運(yùn)用黃金分割的一個簡單實(shí)用的方法，等份分割的線稱為黃金分割線，交叉的四個點(diǎn)稱之為黃金分割點(diǎn)，一般將我們主要展現(xiàn)的畫面放置在黃金分割點(diǎn)處。

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

02 黃金比例的應(yīng)用

黃金比例在設(shè)計(jì)中的運(yùn)用也是非常廣泛的，比如上面logo設(shè)計(jì)中的運(yùn)用。我們切記不能被黃金比例限制了我們的思考，比如我們要設(shè)計(jì)一個logo，首先應(yīng)該是思考如何設(shè)計(jì)出創(chuàng)意的logo，然后動手設(shè)計(jì)，最后一步的話才是運(yùn)用黃金比例來幫助我們規(guī)整logo。

網(wǎng)頁中黃金比例的運(yùn)用

UI中黃金比例的運(yùn)用

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

黃金比例應(yīng)該是作為設(shè)計(jì)師的輔助工具，而不是一個固定的設(shè)計(jì)模式。如果一開始就去想著我一定要在設(shè)計(jì)中運(yùn)用黃金比例的話，那基本上我們的思維就會圍繞黃金比例去做設(shè)計(jì)了，這樣我們的設(shè)計(jì)就會被它框住。黃金比例最好是用在最后設(shè)計(jì)的修正上，我們可以根據(jù)黃金比例去調(diào)整我們元素的位置，讓它們更加的規(guī)范。

改造前的界面

03 案例操作

上面的案例中是一個常見的登錄界面，存在很多問題：

1. 圖片太壓抑而且背景太雜亂，圖片比例不協(xié)調(diào)
2. 登錄元素太簡陋，間距混亂，按鈕點(diǎn)擊區(qū)域太小
3. 第三方登錄和用戶登錄層級不明顯，圖標(biāo)空間太滿

接下來我根據(jù)所發(fā)現(xiàn)的這些問題進(jìn)行再造，并且運(yùn)用到黃金比例進(jìn)行設(shè)計(jì)的修正。

改在后的界面

將改造前后的界面做對比，可以發(fā)現(xiàn)運(yùn)用了黃金比例的界面顯得更加的規(guī)范和有章法，圖片比例、元素間距、元素位置也是更加的協(xié)調(diào)。

總結(jié)：我們用黃金比例的時候只需要記住這兩個點(diǎn)就可以了

【數(shù)字】黃金比例1.618、斐波那契螺旋線（8、5、3、2、1、1）、三分法

【用法】先設(shè)計(jì)，然后黃金比例修正

文章到此就已經(jīng)結(jié)束了，感謝大家的閱讀，如果對于黃金比例還有什么疑問和建議的話，請?jiān)谙路搅粞浴Ｒ矚g迎大家關(guān)注我，接下來小凡會為大家?guī)砀郩I知識體系系列的文章內(nèi)容。

本文由 @小凡 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自unsplash，基于CC0協(xié)議