實戰案例教你黃金分割

我想談談那些鮮為人知的設計準則。希望它們不僅敦促我研究學習，同時提醒他人——設計絕不只是漸變和投影。今天通過一個小小的界面案例為大家分享一下,筆者在實際工作中如何運營黃金分割以及斐波那契數列來進行設計的過程。

交互方案如下,今天因為只講設計手法，所以對交互層面的東西暫且擱下，我們作為UX設計師，工作遠不止設計界面這一個環節，如下圖的交互方案一樣，過程中有過很深入的討論和思考，今天就不展開討論思考過程了。

話不多説，當交互方案確定開始視覺設計時，沒有思路的時候，你可以這樣開始：

01. 確定黃金分割線

利用黃金分割可以在界面創造四條黃金分割線

iOS一倍圖:375×675為例

如何算出上圖四根線呢？

方法很簡單，因為黃金風格率為1: 1.618，計算如下:

a1=375×0.618=231.75≈232（四捨五入）

a2線就是從右到左找到232px的位置劃線即可

b1=667×0.618=412.206≈412（四捨五入）

b2線就是從下到上找到412px的位置劃線即可

黃金風格線的位置是能引起人自然的重要位置，這一步的目的就是給界面提供一個基礎框架，你可以把重點信息放在這些關鍵位置上，幫助你佈局。

02. 確定基礎樣式

算好最佳長寬比的卡片佈局

考慮這個原型，筆者自然選擇卡片式的佈局樣式，對信息進行聚合。那這裏就產生了一個問題，“為啥別人家的卡片就是比你好看呢?”筆者認為，最重要的原因是你的卡片或者説那個基礎矩形在與整體界面的比例關係存在問題；

如何操作呢？如下圖，筆者是按iOS一倍圖375×667來演示設計，大家要了解這個尺寸的矩形本身就接近黃金分割矩形（375×607），拋去NavBar的64px高度，內容展示區域呈現了一個無限接近黃金矩形的區域（差了4個像素，蘋果嚴謹的可見一斑）。

之所以要講這些，是要讓大家瞭解，接下來你在畫面上呈現的卡片大小都是要依據這個內容展示區的矩形來設定。這就是上面所講的，元素與元素之間可以通過比例關係進行呼應，讓你產生的元素有理有據，更為和諧。所謂道生一，一生二，二生三，三生萬物,彼此都是互為聯繫的。

接下來，我們依據這個內容展示區，利用黃金分割產生一個矩形（是不是很舒服），考慮交互內容，卡片背景我會用老師照片整體填充，至於卡片到底位於黃金分割線什麼位置，我們需要通過輸入文案，整體考慮後再做決定，但是這個階段,基礎骨架就搭建完成了。

03. 信息搭建

斐波那契數列，一個無限接近黃金比例分割率的數列

這一步就是完成一個卡片的設計，注意組合你的信息，這時候我們就不得不考慮字號，間距這些基礎排版知識，如何讓排版更加合理舒服呢？斐波那契數列這個神奇的數列會幫助我們，他無限接近黃金風格。不過在這之前，需要再定義一個隱形的矩形，因為你的所有信息必須呈現在其中，如下圖，這個區域也是通過黃金分割產生一個最佳的矩形。

斐波那契數列遵循這一規律：每個數字都是前兩個的總和。

那麼從零開始的數列是這樣的：

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144…

這個數列沒有止盡。

相關性體現在，這個數列的比例接近黃金分割率。

通過這個數列我們就可以設定段落和標題的字號，以及它們的間距；

使用數列的方法有兩種：

方法1:

可以直接選擇數列的數字作為字號和字間距，如上圖所示，作者選擇了13，21，34這個數列段，來設置字號大小和間距（web，海報，banner等都適用）

標題字號：21 正文選擇：13 標題正文間距：13 段落間距：21 大段與大段間距：34

這樣的設置讓排版更嚴謹和有據可尋，擺脱全憑直覺選擇尺寸和間距的弊端。

方法2:

因為是數列，就存在比例，斐波那契數列可以設置的比例是無窮的：1:1/1:2/1:3/2:3/1:5/2:5/3:5/5:8…下圖是筆者，選擇其中的一段比例關係13:8:5:3:2:1,通過3的倍數設置的排版樣式：

通過數列，可以實現的排版樣式會很多，因為有了相應的比例關係，怎樣排版都很和諧，大家之後可以勤加練習，找到更多更好的比例搭配。

理論講述完畢，回到實例，卡片設置如下：

上圖中紅框是一個黃金矩形，通過數列對矩形進行分割，你會驚奇的發現配合的如此和諧，隱藏在背後的是數字的力量。

04. 綜合調整

讓畫面中重要信息自己發聲

基本上是最後的步驟，通過上述合理的框架結構，將信息都有序排布，接下來我們補充所有元素,完善畫面。

還記得上文提到過的嗎？我們確定了一個卡片，那這個卡片到底在什麼位置可以讓畫面更和諧呢？黃金風格線會再次幫助我們，如下圖：

首先先看下這張背景圖，通過老師的姿勢我們可以判斷出整張照片的重心，重心其實偏右，所以我們把老師讓其往右移動，讓重心更靠豎向右邊的黃金風格線，這樣在界面縱向維度通過老師豐富的面部表情形成視線的第一個點。

接下來我們調整下卡片位置，首先背景圖人物上半身比例較大，視感上是往下沉的，而卡片核心的信息內容比重也比較大，如果我們把卡片放在畫面中心位置（如下圖），你會發現雖然按鈕和日期在黃金分割線位置，但是因為上述提到的問題，界面上部分會顯的相當擁擠，給人很侷促的感覺，畫面的看上去頭重腳輕，缺乏穩定感；

顯然卡片需要下移，所以筆者選擇了橫向第二條黃金分割做基線，上面講到卡片的核心信息的展示關係到用户第一時間的理解，所以我們將主文案信息放到分割線位置（如下圖），同時這個位置剛好將背景圖片老師衣服與褲子明顯的分割進行了遮擋，保證了界面在橫向縱向位置只存在兩項分割，保證畫面更整潔，不會被額外的信息元素做更多的破壞性分割。

顯然卡片需要下移，所以筆者選擇了橫向第二條黃金分割做基線，上面講到卡片的核心信息的展示關係到用户第一時間的理解，所以我們將主文案信息放到分割線位置（如下圖），同時這個位置剛好將背景圖片老師衣服與褲子明顯的分割進行了遮擋，保證了界面在橫向縱向位置只存在兩項分割，保證畫面更整潔，不會被額外的信息元素做更多得破壞性分割，形式應該在內容之下。

最終效果如下：

總結

黃金風格，創造和諧——不管是紙質平面,屏幕還是一個空間，只要存在元素，這個元素就會對相應內容產生分割，形成互為影響。大小，位置，間距，進而形成各種比例關係。如何讓其有序？讓我們更易觀看和欣賞？自然界創造了這個神奇的規律，黃金分割率能創造出具有視覺吸引力的比例。縱觀歷史，它被廣泛用於藝術，建築，設計甚至是人類身體比例中。

通過上述的例子，你也會發現，我們使用黃金分割和斐波那契數列，其實就是通過嚴謹的數學公式，推演設計的過程。這個過程你會發現通過有意選擇形狀、邊距以及字號，即使簡單的排版也顯得平衡，清晰和統一。創造平衡而美觀比例的同時還能產生視覺上的韻律感以及和諧感。

所以，在筆者看來，黃金分割作為一種設計手段，在日常的工作以及學習過程中，都可以幫助我們去理解作品，創作作品。如果你開始的時候過於茫然，不妨通過黃金分割來輔助你的設計。

最後，再強調一下，設計的手法多種多樣，黃金分割只是其中一種重要的手法之一。設計就是推演反覆的過程，很多實際問題也需要我們具體問題具體分析。

篇幅有限，之後會在網格系統的分享文章中，再次結合黃金分割做更多的分析。

UI中國

作者：金山辦公用户體驗中心_北京