黃金分割在界面設(shè)計(jì)中的應(yīng)用說明

一、至高無上的黃金分割比例

這種東西是很神奇的事情，你了解的越多越會(huì)覺的這是一個(gè)不可思議的事情。甚至有人稱之為上帝的密碼。

那黃金分割線到底是個(gè)什么東西呢？它在什么位置？它在畫面中的哪個(gè)地方呢？

「有一條線條，如果我們從中切一段，如果左邊是0.618這么一個(gè)比列，右邊則是1這么一個(gè)比例?！谷绻线@樣的左右比例我們稱之為黃金分割比。那么中間切割的位置就是我們黃金分割線的位置。

我們大體概括一下：

黃金分割線是指將整體一分為二，較大部分與整體部分的比值，等于較小部分與較大部分的比值，其比值約為0.618。這個(gè)比例被公認(rèn)為是最能引起美感的比例，總結(jié)一句話就是：0.618的比值最美。

1. 0.618的比例怎么來的？

有人做了一個(gè)實(shí)驗(yàn)，他們拿著一些長方形去問全世界的人，說哪個(gè)長方形最好看？結(jié)果所有的人都不約而同的選擇了這種長方形。西方的，東方的，土著的都選擇了如下圖的這種長方形。

科學(xué)家們就很奇怪它的奧秘到底在哪？要分析分析它。這個(gè)長方形如果從中間畫一條線，把它分割成兩個(gè)形狀的話，右邊可以是一個(gè)正方形，左邊小的長方形的比例和原來的長方形的比例是一摸一樣的。

小的長方形也可以切割出一個(gè)正方形和一個(gè)等比例的更小的長方形。這種長方形只有黃金分割的長方形才能做到。

2. 運(yùn)用黃金分割線構(gòu)圖

畫面長寬比不同，黃金分割線位置也不同。這里我們列舉常用的長寬比尺寸4:3/3:2/16:9/1:1。

在移動(dòng)端主流尺寸中，iOS尺寸使用750*1334，安卓尺寸使用1080*1920。這兩個(gè)尺寸正好等同于一倍圖375*667的比例。

不同長寬比的畫面我們按照0.618:1的比例，一個(gè)畫面可以切割出4條黃金分割線，上分割線/下分割線/左分割線/右分割線。我們在實(shí)際構(gòu)圖中怎么利用黃金分割線快速排版？

3. 基本的運(yùn)用方法

把主體放線上，當(dāng)然線狀的主體才能放線上

在構(gòu)圖中我們經(jīng)常遇到正方形/長方形等規(guī)則的形狀，前期我們把規(guī)則的形狀中心放在黃金分割線上，等所有內(nèi)容添加完成后再分析畫面的重量，微調(diào)來平衡畫面。

不是所有的物體都是剛剛好放在黃金分割線上。輪廓化的形狀應(yīng)該根據(jù)什么來跟黃金分割線重合呢？應(yīng)該是形狀的重心，而不是中心。

多條黃金風(fēng)格線構(gòu)圖

一個(gè)畫面中，可以切割成上下左右四個(gè)黃金分割線，前期練習(xí)時(shí)可以盡可能把黃金分割線利用好。

具體選擇哪一條？

初期進(jìn)行練習(xí)的時(shí)候，黃金分割線能搭上幾條就搭上幾條。這么多黃金分割線，如果我用1條到2條，到底選擇哪一條？

根據(jù)元素選擇

界面設(shè)計(jì)時(shí)要根據(jù)元素多少進(jìn)行選取更合適的黃金分割線。

根據(jù)哪邊更精彩選擇畫面

把上下或左右兩條黃金分割線對比一下就能確定參考哪一條黃金分割線了。

根據(jù)畫面的豐富程度，我們把圖片放在靠近上黃金分割線的位置，把圖片中主體的放在靠近右黃金分割線附近。然后再添加內(nèi)容豐富畫面，我們?yōu)楫嬅嫣砑?logo/數(shù)據(jù)/導(dǎo)航/分類/按鈕，讓畫面更豐滿。

視線的影響

人和動(dòng)物的視線朝向會(huì)影響到它的擺放位置。

二、簡化的黃金分割線——三分線

我們還有個(gè)困難，那就是0.618:1的黃金分割線的位置確實(shí)不是很好找。所以對于設(shè)計(jì)師來說，我們有一種簡化黃金分割線的做法？就是三分線。

什么意思呢？左邊是黃金分割線，右邊是三分線。三分線就是均勻的把長方形的長和寬切三段，均勻的砍三段，每個(gè)方格都是一樣大小。

三分線的位置跟黃金風(fēng)格線的位置差不了多少，但是黃金分割線比起三分線更靠近中央的位置，是這么一個(gè)概念。

不要說很嚴(yán)謹(jǐn)?shù)陌阉匦臄[在三分線上，一來黃金分割線真實(shí)所在的位置是三分線往里靠一點(diǎn)的位置，二來我們說黃金分割線構(gòu)圖/三分線構(gòu)圖不是說讓你一定要完全重疊，差不多的位置就行，具體情況還是要具體分析。

黃金分割還不止這么多的表現(xiàn)形式。它還有一種更復(fù)雜的表現(xiàn)形式叫黃金螺旋線。而從黃金螺旋線里可以推導(dǎo)出一個(gè)黃金興趣點(diǎn)。

于是我們就把最佳興趣點(diǎn)和黃金螺旋線都統(tǒng)稱為黃金分割的衍生品。在設(shè)計(jì)中應(yīng)該是算比較高級的一種構(gòu)圖技法了。

三、最佳興趣點(diǎn)

來看看黃金螺旋線衍生的最佳興趣點(diǎn)在什么位置？

在設(shè)計(jì)中實(shí)際應(yīng)用的時(shí)候，想找出這個(gè)點(diǎn)來絕對不是很容易的事情。所以怎么辦呢？有簡單找到最佳興趣點(diǎn)的方法嗎？長方形的一條斜線鏈接起來，另一個(gè)頂點(diǎn)畫一條垂直于這條斜線的點(diǎn)基本就是最佳興趣點(diǎn)的位置。

畫面中不止一個(gè)最佳興趣點(diǎn)，一個(gè)畫面中會(huì)有四個(gè)興趣點(diǎn)。會(huì)更方便我們利用。

畫面長寬比不同，最佳興趣點(diǎn)的位置也不同。這里我們列舉常用的長寬比尺寸4:3/3:2/16:9/1:1。

在移動(dòng)端主流尺寸中，iOS尺寸使用750*1334，安卓尺寸使用1080*1920。這兩個(gè)尺寸正好等同于一倍圖375*667的比例。

四、黃金螺旋線

斐波那契螺旋線也稱「黃金螺旋」，是根據(jù)斐波那契數(shù)列畫出來的螺旋曲線，自然界中存在許多斐波那契螺旋線的圖案。是自然界最完美的經(jīng)典黃金比例。

斐波那契螺旋線，以斐波那契數(shù)為邊的正方形拼成的長方形，然后在正方形里面畫一個(gè)90度的扇形，連起來的弧線就是斐波那契螺旋線。

斐波那契數(shù)列（FibonacciSequence）數(shù)列是這樣一個(gè)數(shù)列：1、1、2、3、5、8、13、21、34、55、89……

在數(shù)學(xué)上，斐波那契數(shù)列是以遞歸的方法來定義：

F0=1

F1=1

Fn=F(n-1)+F(n-2)

(n>=2，n∈N*)

斐波那契數(shù)列比在字號大小、界面布局、Logo設(shè)計(jì)上具體有哪些用法？

1. 字號大小

大字體與小字體比例系統(tǒng)

我們在選擇一個(gè)字號大小做為參考時(shí)，我們正常會(huì)選擇大字號或最小字號做為參考。按照黃金比1:1.618可以得到比它大的字體，按照黃金比1:0.618可以得到比它小的字體。

為了方便排版，我們除了可以使用黃金分割比外，還可以使用斐波那契數(shù)列比?？梢杂懈囔`活的排版方式，通過對比可以選擇最適合的。

斐波那契數(shù)列比1:1/1:2/1:3/2:3/1:5/2:5/3:5 …

文字的長度比例

在設(shè)計(jì)字體大小的時(shí)候，可以根據(jù)字體的長度來做為參考，黃金螺旋線整體長度為140px，下面的字體比較長我們就乘以1.618來得到比較大的比例226.52，取整數(shù)為226，我們對應(yīng)長度字號取整數(shù)即可。

2. 界面布局

我們通過斐波那契數(shù)列比8:5:3:2:1繪制了正方形，在后臺復(fù)雜的界面中我們肯定要參考畫面中重要的最小寬度來確定這個(gè)比例大小，紅框就是我們確定的最小寬度，確定寬度后8:5:3:2:1得到大小不一的方格，剩下來就是根據(jù)內(nèi)容自由組合合適的方格。

很神奇的事情發(fā)生了，好的作品大體都符合這個(gè)規(guī)律，幾像素的偏差已經(jīng)不重要，所以前期我們可以參考方法論，當(dāng)你的能力上來之后就可以放棄它慢慢憑自己的感覺來判斷作品的好壞。

3. LOGO設(shè)計(jì)

黃金斐波那契螺旋法是國際上通用的 LOGO設(shè)計(jì)手法，也是最工整最嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)手法。

為什么要用黃金螺旋線去重新定義標(biāo)識？

打個(gè)比方很多時(shí)候我們會(huì)找一張動(dòng)物圖片用圓切法去繪制它，但是我們繪制時(shí)候因?yàn)椴恢涝趺慈プ鰷p法，會(huì)讓這個(gè)形態(tài)變的復(fù)雜，繪制結(jié)果更多像是圖案或者圖形，而不是標(biāo)識。我們使用黃金螺旋比例去切形態(tài)的時(shí)候要抓住動(dòng)物的主體形態(tài)和特征，盡可能的抽象化簡單化。

黃金螺旋線在logo中的應(yīng)用

黃金螺旋比例用圓去切割很多人已經(jīng)會(huì)了，但是最高級的就利用好黃金螺旋線。最近站酷很火的一個(gè)設(shè)計(jì)師 DAINOGO，它的作品中就用到了黃金螺旋線，能用一個(gè)圓解決的絕對不用兩個(gè)圓。我們在設(shè)計(jì)中如果有運(yùn)用到弧線的地方可以考慮使用黃金螺旋線做為參考。

總結(jié)

黃金分割線、三分線、最佳興趣點(diǎn)，每個(gè)還可以分上下左右4個(gè)構(gòu)圖方案，這里我們就已經(jīng)有12種排版方式可以考慮了。構(gòu)圖的時(shí)候是否使用黃金分割線、三分線、最佳興趣點(diǎn)并不是絕對的，它只是方法之一。如果你有排版基礎(chǔ)，以這個(gè)為參考相信一定能排出不錯(cuò)的版式。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

分享標(biāo)題：黃金分割在界面設(shè)計(jì)中的應(yīng)用說明
文章URL：http://www.bm7419.com/news5/324505.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、定制開發(fā)、App開發(fā)、網(wǎng)站維護(hù)、Google、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)