好設計中那條看不見的線
宇宙萬物都存在著高低、大小、長短的比例關係，正是這些奇妙比例關係構成了美麗的世界。有一個「神奇的比例」存在於自然界和我們周圍的很多事物中，你可能看不到它，但它可以影響並歸納萬物美的根源。你可以在自然界、藝術作品，甚至我們的身體中找到它，它就是「黃金分割」線。
黃金分割是在2400年前由古希臘數學家畢達哥拉斯發明的，它是由Pythagorean theory(不時定理)所演進出來的，而這項發明對文藝復興時代的建築到現代的產品設計都有著深遠的影響。如今黃金分割已經在各個方面影響著我們，今天我們就來研究一下在UI界面設計中的黃金比例的小秘密，為什麼同樣功能的頁面，有些頁面會讓用戶感覺到平衡，協調，並能快速的從中提取界面信息，而這都是可以用黃金比例來證明的。那麼讓UI設計師一起學好數理化，讓我們的頁面的「美」來的更有理論依據吧！
/黃金分割是怎麼來的/
黃金比例（又叫黃金分割）是指將整體一分為二，較大部分與整體的比值等於較小部分與較大部分的比值，其比值約為0.618，這個比例被公認為是最能引起美感的比例，因此被稱為黃金比例。
利用黃金比例，我們可以得出一個完美的圖形，例如，我們可以用此演算法得到一個「黃金矩形」，它的寬度就是高度的1.6180倍。一側劃分為300 px， 則另一側為300 * 1.6180≈485 px可以稱之為黃金矩形。
如果你從這個黃金矩形切分一個完美的矩形，留給你的會是另一個黃金矩形：
你可以更小的矩形繼續做同樣的動作，然後再繼續切分下去，無限循環，你會得到這個熟悉的圖像：
/黃金螺旋的含義/
像下圖所示，你最終繪製出來的將會是一個黃金螺旋（而其中的矩形也就遵循著傳說中的斐波那契數列）曲線，它所包含的數列遵循的規律是，每個數字都是前兩個的和：0、1、1、2、3、5、8、13、21、34 、55、89、144……
這就是黃金螺旋：
最有意思的是，你會發現這個漂亮的樣式在自然界中幾乎無處不在：蕨類植物的莖、鮮花、貝殼，甚至颶風。這也就是為什麼我們會覺得它們在視覺上有著無與倫比的吸引力，因為它們在自然界中給我們神秘的完美「螺旋」。
/如何繪製黃金分割/
繪製黃金矩形非常簡單，下面我們就用一張圖告訴大家，繪製出黃金矩形的方法。
/黃金分割的應用/
黃金比例理論存在已經超過4000年。大部分的古代建築和藝術品都服從黃金分割原理。在近代，黃金分割原理可以從建築，藝術，設計等各種領域中發現，下面我們就來看一些黃金分割在經典藝術作品中的應用。
建築作品-帕特農神廟
古希臘在建築設計中大量採用黃金分割原理，從建築的寬度，高度，甚至支撐建築的柱子之間的間距都採用了這種原理，因此他們的建築看起來美感十足，比例協調。
繪畫作品-最後的晚餐
達芬奇的《最後的晚餐》同樣也應用了該比例布局。人物被安排在畫面下面三分之二的部分，後牆和窗戶，還有前景的桌子以及弟子的腳都存在著微妙的關係。
世界上最貴的商標
BP是世界上領先的石油和天然氣企業之一，2008年他們花費2.11億美元設計標識，在logo設計費用排行里排名第一，成為世界上最貴的logo。該標識也是利用尺規作圖+黃金比例設計出來的，所以說掌握黃金分割原理，我們都有機會做出價值上億的logo。
通過以上的例子，不難看出，黃金分割帶給觀看者的其實是一種平衡美，無關乎使用者的年紀性別和行業，黃金分割可以提供更好的更舒適的感觀。簡而言之，黃金分割讓整個空間看起來更具協調性。那麼接下來看看如何藉助它來提升你的設計，去解決我們頁面中的困擾。將黃金分割用到布局、間隔、內容、圖像和圖形當中，讓我們的頁面看起來更具協調性和統一感。
/黃金分割在UI設計中的運用/
1.尺寸上合理的布局
很多朋友可能說，App中需要突出的產品重點，需求入口都太零散了，我不可能做到按照黃金比例那樣去布局頁面。其實在App的界面布局中使用黃金比例其實並不難，其實可以理解為我們利用黃金分割比的分割點來區分展示我們的重要信息或我們想主推用戶的功能點。
a.整體界面的分割
圖1 圖2
圖1：頁面我們可以簡單劃分成A、B、C、D，因為這四個部分都沒有按照黃金分割來排布，所以在視覺上我們可能看到會覺得「咦？設計思路沒錯啊，功能也都在，但是為什麼感覺畫面怪怪的，不太舒服呢？」其實我們可以從排版方法和比例上面來斟酌一下。頁面的上下區塊的分布，每個區塊內的左右分布是否符合黃金比例。（在界面場景使用中，黃金比例不是按照固定的參數值1.618來設計，我們可以理解成：相對比例）
圖2：我們可以看到整體的頁面分為上下兩個部分，區域劃分也是按照黃金分割（相對比例）來做的，頁面的下方也做了相應的視覺引導，首次打開的用戶可以清楚的看到自己受益，接著就會引導用戶進行操作。在此，我們不能生搬硬套一成不變的使用黃金比例。簡直的歸納為：黃金分割作為參考，而這種參考是按照一定的比例來劃分的。
b.區域界面的分割比
圖3 圖4
圖3：版式的布局上下的比例幾乎是按照1:1來劃分，視覺毫無中心。「最高額度」的誘惑和「立即領取」的按鈕的層次也沒有拉開，區域的間隔沒有做開，導致用戶看到頁面時，會感覺找不到重點，頁面混成一團。
圖4：布局採用上下排版布局，布局方式按照黃金比例為基礎。用戶進入頁面首先看到的就是最關心的信用報告等級信息，其次就是特權等級和可貸額度等具體信息。整體頁面看起來，有邏輯，有層次，引導用戶完成視覺瀏覽。
2.利用三分法則構圖
說了單一的黃金比例的例子，接下來我們來看看疊加的黃金比例之後，我們可以得到什麼。是的，就是三分法。我們常見的三分法是讓同一個方向上的兩條線將布局按照1：1：1的比例分割開來。將關鍵要素放置在任意一條直線或直線的交點上，這樣比較符合人類的視覺習慣，讓人的眼球從一個焦點到另一個，引導視覺流，關注圖片並且可以保持停留在畫面中，無形中增加了一些動感和活力，能使構圖更有趣，更引人注目。
大家回想一下，我們現在使用的手機拍照功能，其中有一項打開後就是三分法的結構，而巧妙的利用三分法構圖可以輕易的幫助我們獲得好的照片，同樣也可以幫助設計師們得到好的頁面，更好的引導用戶的視覺中心去到我們想導流的位置。
圖5 圖6
如圖5、6所示，三分法則可以幫助創建不對稱構圖，如果圖片中的元素是居中的，太死板，它就變得很單調，如果圖像使用了三分法則就能抵消這種情況，不對稱和平衡元素則創建一個更動態的畫面。
圖7 圖8
如上圖7、8所示，三分法可以有效的幫助設計者找到視覺聚焦點，引導視覺流向。設計者可將重要信息或指向型明確的按鈕，放置在三分法中的4個點中的任意一點或更多上。用戶會根據視覺導向自然的關注到這一位置上去。
3.平衡內容 突出視覺層級
我們在日常的設計工作中，時常會面臨的一個局面就是：接到一個產品需求，而這個需求原型充斥著大量的內容，可能因為各方產品的訴求不通，而讓設計同學一下子猛然無措，不知如何分布。其實這時候，需要做的就是有效的梳理需求，分清主次邏輯，然後再對其做視覺上的方向引導。讓看似繁複的頁面，也可以一步一步地引導用戶閱讀下去。
圖9 圖10
圖9.我們可以清楚的看出它的空間區隔按照相對的黃金比例做了區分，同樣在字體和色彩的運用上也採取了黃金分割。讓用戶看到整個頁面時，能夠有呼吸有節奏的瀏覽，並得到設計者想傳達的理念。
圖10.整體的頁面我們可以看到，可以分成4個區域，但是因為在區域分割時並沒有按照黃金分割的模式來分割，其次在色彩的應用上也幾乎是在一個色階中完成，從而導致整個頁面毫無閱讀順序可言，用戶也無法有效快速的得到有價值的信息。
其實在界面的設計中，我們利用黃金分割來平衡內容突出視覺層次的手段有很多，這不單單是區域上的1：1.618的直白，色彩的應用，字體的大小，也都是牽扯其中。例如：顏色的色階高低，字型大小大小其實都影響著它在用戶大腦中呈現的視覺大小，有效的在色彩等方面去劃分黃金比例，也是可以提升整個頁面的平衡，從而建立更具層級性、易讀化的頁面。
4.文字的黃金分割劃分
界面中的字體應用也很多，黃金分割比的分割點位置應當展示重要信息或我們想傳達給用戶的信息，增加文字的易讀性。下面來看例子：
上圖界面中，內容區域與整體區域劃分是黃金分割比，每個區域內的標題文字大小和內容大小形成了視覺黃金分割比。文字顏色和其他內容顏色之間形成相對的黃金分割比。
如何讓段落中的信息內容更易讀呢？根據用戶體驗研究表明，用戶在閱讀時，一般都是掃描文字，不是閱讀頁面，一目只能掃描7-8個文字。如果字間距過小，就會影響用戶掃描，那麼利用黃金分割來控制字間距，會讓用戶更清晰的看到每字每句，閱讀時不會感覺到視覺疲勞，也更易讀。
文字和數字組合出現時，如果將字型大小都調整的一致，視覺畫面會看著有差異不統一。如果在設計時，利用黃金分割相對比，把數字和文字字型大小之間有2-4PX的差距（當然，也根據自己情況調整），這樣做出的設計會讓畫面更加統一。
5.用黃金螺旋引導視覺流線
黃金螺旋可以被看作是閱讀內容的「位置指南」。我們的視覺流線會自然而然的落在黃金螺旋的中心點上，這個位置有很多細節元素。所以在設計時我們要利用螺旋的中心位置和螺旋走過的視覺空白區域。
如圖所示，在界面中沿著黃金螺旋的軌跡自上而下的瀏覽頁面，從圖到標題到內容到操作區域，所有的設計元素都分布在黃金螺旋的周圍，有效的利用了黃金分割原理來引導用戶。
/總結/
其實說了這麼多，很多人會說「設計嘛！要的是一種感覺，如果都像今天講的這樣套圈做公式題一樣就太無趣啦！」是的！其實黃金比例不過是我們完善自我設計的一種手段而已，亦或者可以說是我們在設計過程中，一種意識流的引導。大家且不可一板一眼的按照公式去套設計。畢竟一個優秀的設計產出是「用心」做出來的，而不是冷冰冰的數學公式。
最後呢，祝大家可以開心做設計，靈活應用黃金比例，至少在下次產品懟你頁面不好看的時候，把公式拿出來，告訴他我是有科學根據在進行設計的！
相信科學！
撰文｜耀耀切克鬧
圖片來源｜融360、網路
TAG:融360RUX |