? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?黃金分割概念

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

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

黃金分割：

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

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

? ? ? ? 我們什么時(shí)候才能拍出這么看的照片？接下我們還是回到正題剔宪，怎么拍照拂铡？答案很簡單，攝影師采用了黃金比例規(guī)范葱绒。大家肯定會說作者又開始胡說八道了感帅，如果大家了解黃金比例的概念，就會發(fā)現(xiàn)很有道理的地淀。接下來我就把黃金比例的概念畫到照片上失球。

? ? ? ?哦？大家是不是發(fā)現(xiàn)什么有趣的現(xiàn)象帮毁？攝影師采用了九宮格拍照的方法实苞，將事物定格在就九宮格的每個(gè)點(diǎn)上。每個(gè)點(diǎn)恰恰是黃金分割點(diǎn)烈疚。九宮格也是黃金比例的一種實(shí)踐黔牵。這就是攝影，將攝影和數(shù)學(xué)融合爷肝，當(dāng)然每個(gè)人都有不一樣的想法猾浦，所以每一張作品都應(yīng)有拍攝者自己的想法。

? ? ? ? 跑偏了跑偏了阶剑，接下來才是正題跃巡。設(shè)計(jì)日益更新，出現(xiàn)了各種設(shè)計(jì)規(guī)范牧愁。但是有一種規(guī)范恒久不變素邪，那就是黃金比例規(guī)范。吉薩金字塔猪半、蒙娜麗莎兔朦、Twitter和百事可樂有什么共同點(diǎn)？答案很簡單磨确，它們的設(shè)計(jì)都遵循了黃金比例沽甥。作為一個(gè)常見的數(shù)學(xué)比例，黃金比例實(shí)際上是從自然界中總結(jié)并發(fā)現(xiàn)的乏奥，用于設(shè)計(jì)中的時(shí)候能賦予作品更多的設(shè)計(jì)美感摆舟，賞心悅目。那么，黃金比例到底是怎么樣的比例恨诱，它又是如何運(yùn)用到設(shè)計(jì)中并提升設(shè)計(jì)作品的呢媳瞪？

? ? ? ? 事實(shí)上，我們的大腦似乎先天就比較青睞使用黃金比例的對象和圖片照宝。這幾乎是下意識的吸引力蛇受，大腦甚至?xí)ρ劬吹降氖挛镞M(jìn)行小幅度的微調(diào)以靠近黃金比例，提高我們自身對于外物的記憶和印象厕鹃。

黃金比例無疑可以應(yīng)用于各種圖形兢仰。如果你將一個(gè)正方形拉伸為一個(gè)矩形，讓長是寬的1.618倍剂碴，就可以獲得一個(gè)“完美”的矩形把将。

將兩個(gè)圖形疊加，你就可以獲得一個(gè)清晰直觀的黃金比例汗茄，被分割出來的小矩形同樣遵循著黃金比例秸弛。

? 如果你繼續(xù)以這樣的方式向新的矩形中填充正方形铭若，那么你填充的正方形會越來越泻樘肌：

像上圖所示，你最終繪制出來的將會是一個(gè)黃金螺旋（而其中的矩形也就遵循著傳說中的斐波那契數(shù)列）曲線叼屠，它所包含的數(shù)列遵循的規(guī)律是瞳腌，每個(gè)數(shù)字都是前兩個(gè)的和：0、1镜雨、1嫂侍、2、3荚坞、5挑宠、8、13颓影、21各淀、34 、55诡挂、89碎浇、144……

這就是黃金螺旋：

在設(shè)計(jì)中使用黃金比例的5種方法

既然你已經(jīng)了解了黃金比例的基礎(chǔ)知識，那么接下來看看如何借助它來提升你的設(shè)計(jì)璃俗。由于黃金比例的呈現(xiàn)形式很多奴璃，所以你可以將它用到布局、間隔城豁、內(nèi)容苟穆、圖像和圖形當(dāng)中。

1、布局：將尺寸設(shè)置成黃金比例

在布局中使用黃金比例的方法并不難雳旅，關(guān)鍵是控制比例和尺寸剖膳。重點(diǎn)很簡單，把握好1:1.618的黃金比例岭辣。

舉個(gè)例子吱晒，使用960px的寬度布局的時(shí)候，除以1.618可以得到594px沦童，這個(gè)可以用作你的布局的高度仑濒，然后將整個(gè)布局劃分為兩欄，一欄方形偷遗，一欄矩形墩瞳，一個(gè)協(xié)調(diào)的布局就出來了。

這種兩欄式布局在網(wǎng)頁上非常實(shí)用氏豌，我們所熟知的美國國家地理的網(wǎng)頁就是使用的這樣的布局方式喉酌，看起來可讀性非常不錯(cuò)，比例平衡泵喘，符合網(wǎng)站內(nèi)容自然的特性泪电。

2、間距：使用黃金螺旋布局

間距的控制和留白一樣纪铺，是設(shè)計(jì)中非常關(guān)鍵的元素相速。協(xié)調(diào)的布局能夠營造出優(yōu)秀的作品，那么如何借助黃金比例來協(xié)調(diào)頁面中的多種元素呢鲜锚？合理的計(jì)算有的時(shí)候比直覺合適突诬，如果能結(jié)合起來就更好了。

在基本的布局上芜繁，借助黃金螺旋來調(diào)整旺隙，是個(gè)不錯(cuò)的思路。多種不同的元素在同一頁面上的時(shí)候骏令，黃金螺旋可以幫你篩選出合理的空間布局和間隙蔬捷。

Moodley 設(shè)計(jì)工作室為Bregenzer Festspiele 藝術(shù)節(jié)設(shè)計(jì)了海報(bào)、應(yīng)用伏社、節(jié)目單和大量的品牌標(biāo)識抠刺。節(jié)目單的整體設(shè)計(jì)采用了拼貼的方式，有大量的留白摘昌，而其中各種元素的設(shè)計(jì)比例速妖、位置和留白就是借助黃金螺旋來布置的。

總部位于新加坡的Lemon Graphic 為Terkaya財(cái)富管理進(jìn)行視覺形象設(shè)計(jì)聪黎，名片的設(shè)計(jì)元素也同樣借助黃金螺旋來設(shè)計(jì)罕容。

3备恤、內(nèi)容：沿著黃金螺旋的軌跡

對于網(wǎng)頁內(nèi)容而言，黃金螺旋的軌跡同樣可以起到重要的作用锦秒。我們的視覺可以很自然地沿著黃金螺旋的軌跡運(yùn)動露泊，這也就是說這樣設(shè)計(jì)網(wǎng)頁布局會讓訪客更加自然地瀏覽內(nèi)容。

如果你仔細(xì)查看美國國家地理的網(wǎng)頁旅择，會看到它們的網(wǎng)頁布局就是如此惭笑，用戶會下意識地隨著這個(gè)布局來瀏覽，這是一種潛意識行為生真。

這個(gè)網(wǎng)站是平面設(shè)計(jì)師Tim Roussilhe 的作品沉噩，信息量很大，布局也緊密柱蟀，關(guān)鍵是信息組織的相當(dāng)有條理川蒙，多而不亂。左上角的內(nèi)容就是借助黃金螺旋的軌跡來設(shè)計(jì)的长已，關(guān)鍵的點(diǎn)和位置都落在黃金螺旋的軌跡上畜眨。功能性的組件在這個(gè)布局中都位于矚目的位置，留白也分布到了合理的間隙中术瓮，所有的細(xì)節(jié)都精致到位康聂。

Saastamoisen s??ti? 的這個(gè)視覺設(shè)計(jì)稿就更典型了。圖中的字母分布看起來亂中有序斤斧，它們就是沿著黃金螺旋來分布的早抠，并且隨著螺旋半徑的縮小而逐漸縮減字體尺寸霎烙，并且提升字母的密度撬讽。這樣的設(shè)計(jì)保證了視覺的平衡，富有設(shè)計(jì)感而不混亂悬垃。

Helms 工作室 為Fullsteam 啤酒進(jìn)行品牌設(shè)計(jì)的時(shí)候游昼，也同樣借助黃金螺旋來布局內(nèi)容。

4尝蠕、圖片：黃金比例和三分法

對于圖片而言烘豌，布局自然是很重要的，無論是用來傳遞信息還是呈現(xiàn)圖像布局的美感看彼。黃金比例可以讓圖片變得更加吸引眼球廊佩，讓重要的信息脫穎而出。平時(shí)我們所說的三分法布局靖榕，如何結(jié)合黃金比例标锄，可以讓布局更漂亮。

參考下方的圖片茁计，借助將頁面進(jìn)行黃金比例分割的四條線料皇，線條兩兩交匯的地方是最吸引用戶的地方。當(dāng)然，我們常見的三分法是讓同一個(gè)方向上的兩條線將布局按照1：1: 1的比例分割開來践剂。

這個(gè)案例是Complex雜志的封面鬼譬，整體布局符合黃金比例，而黃金比例三分法下的兩個(gè)交點(diǎn)上則正好和女性的鼻子與眼睛上逊脯。

Jason Mildren 為Pilot 雜志設(shè)計(jì)封面优质，其中的布局采用的是均勻三分法來構(gòu)建視覺重心，圖中模特的眼军洼、拇指和手臂軸心都處在視覺重心上盆赤，人物位置靠右下，留白靠左上歉眷，又是一個(gè)平衡的布局牺六。

Feld雜志的設(shè)計(jì)，也參考了黃金比例三分法汗捡，左上方的標(biāo)題和內(nèi)容區(qū)塊明顯是參考分割線來設(shè)計(jì)的淑际，而右下方的背景中的人物的鼻子——也就是人物的中心點(diǎn)正好壓在右下方的交點(diǎn)上。

5扇住、圖形：黃金比例圓形

黃金比例可以用來創(chuàng)建矩形也能用來創(chuàng)建比例協(xié)調(diào)的圓形春缕。使用黃金比例不僅可以產(chǎn)生和諧的比例，而且能夠讓圖形保持較高的一致性艘蹋。從百事和Twitter的LOGO來說說這個(gè)事情吧锄贼。

百事的LOGO是使用兩個(gè)遵循黃金比例的圓圈來構(gòu)建的，較小圓形并不是顯而易見的那種女阀，而是隱藏在內(nèi)部的曲線中宅荤。

Twitter的LOGO設(shè)計(jì)則是借助若干完美的圓形來進(jìn)行構(gòu)建的，只不過它在使用黃金比例的圓形的時(shí)候浸策，并沒有使用相鄰比例的圓形來構(gòu)建冯键，乍一看不夠精確，但卻同樣營造出和諧的標(biāo)識庸汗。

web與App實(shí)戰(zhàn)應(yīng)用

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

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

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

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

改造前的界面

03 案例操作

上面的案例中是一個(gè)常見的登錄界面凶掰，存在很多問題：

圖片太壓抑而且背景太雜亂燥爷，圖片比例不協(xié)調(diào)

登錄元素太簡陋蜈亩，間距混亂，按鈕點(diǎn)擊區(qū)域太小

第三方登錄和用戶登錄層級不明顯前翎，圖標(biāo)空間太滿

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

改后的界面

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

————————————————

版權(quán)聲明：本文為CSDN博主「請尊重下我的職業(yè)」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議橙数，轉(zhuǎn)載請附上原文出處鏈接及本聲明尊流。

原文鏈接：https://blog.csdn.net/duilan3356/article/details/86525066