設計工具 ? 黃金比例使用指南 + 黃金比例計算工具

黃金比例使用指南 + 黃金比例計算工具

發表于: 設計工具. 評論
贊助商鏈接

黃金:這個詞代表價值、完美以及成功。其適用的范圍廣泛,從稀有珍貴的蛋,到標志性的電影時代,再及中獎樂透彩券都是。然而,它還是一個很重要的參考…

一、黃金比例

黃金比例的概念已經流傳幾千年了。它塑造了許多經典藝術與建筑作品的基礎,從埃及的吉薩大金字塔到藝術家喬治?秀拉(Georges Seurat)的畫作《馬戲團游行》(Parade decirque)都是,而且還可以經常在百科全書和學術論文中看到它的蹤跡。不過其在歷史上的重要地位并不表示它已經過時了;事實上,黃金比例對企業來說可能是非常有價值的。在設計素材、圖標以及網站時充分利用它將能夠為品牌增添更有吸引力的視覺圖像。

你只是需要知道該如何使用它。

二、定義黃金比例

想要了解黃金比例,你需要從它從哪里發源開始著手。這個探索帶我們回到古希臘時期。黃金比例也可以用希臘字母φ(發音phi)表示,代表數值為1.61803398875。

以數學術語來說,這是個無理數,也就是一個無限不循環小數,且無法以簡單分數表示(就像是著名的π,發音pi)。根據《大英百科全書》記載,黃金比例的數學觀念大約源于西元前500年。據信是由著名希臘學者歐幾里得(Euclid)以及畢達哥拉斯(Pythagoras)完善而成。

不過,想要真正掌握這個概念,你必須這樣看待黃金比例:

(A B)/A = A/B

請將一條線分為兩部分。較長段(A)除以較短段(B)等于全長除以較長段。想要創造黃金比例,原始線條的分段除法結果必須等于1.618。

我們知道這很難用文字說明,所以我們準備了一個可以協助你理解的圖片。

當黃金比例首次被提出時,希臘學者就知道它能用來創造非常具有視覺吸引力的矩形,也就是黃金矩形。他們開始思考這個形狀,以及其在設計中的比例。最后結論證明,只要照片、版面或構圖的比例為1比1.61,圖像看起來就會自然而平衡。

這也難怪人類從那時候開始就持續運用黃金比例。它是許多我們覺得美麗的古代建筑和畫作的基石。有些人認為在藝術家薩爾瓦多?達利的畫作《最后的晚餐》、米開朗基羅的《創造亞當》,甚至是巨石陣里都能發現黃金比例。現今,你則可以在網頁、攝影作品,以及部分全球最受歡迎的品牌圖標中找到它的蹤影。

三、自然界里的黃金比例

這與你和你的事業有什么關聯呢?為了回答這個問題,我們必須運用另一種形式來探索黃金比例。

黃金螺旋與黃金比例有密切關系。它是借著通過黃金矩形的每個部分繪制而成的連續弧形,構成流線形的螺旋。雖然希臘學者想出了為什么黃金螺旋會存在的數學解釋,但是它在那之前已存在許久。你可以在大自然里找到滿滿的證據,像是貝殼、花瓣、松果、種子穗和螺旋星系的形狀。部分動物的身體也有此特色,包括海豚、海星和蜜??蜂。

黃金螺旋也與斐波那契數列(Fibonacci Sequence)有關,這會讓丹布朗《達文西密碼》的書迷覺得耳熟。在那個數學概念里,數列中的每個數字都是由前兩個數字相加而成(例如1、1、2、3、5、8)。

巧合的是,義大利數學家斐波那契的理論也已受大自然印證。當數列轉換成圖樣,你會得到彎曲的螺旋。計算這些螺旋,你最后會獲得斐波那契數。就像《Live

Science》的解釋:「斐波那契螺旋是在一系列斐波那契數為尺寸的正方形里,以一連串四分之一圓連結起來的圖形。由于數列的天性,也就是下個數字為前兩個相加,正方形能夠彼此完美結合。」

作者space_heater

讓我們回到黃金螺旋。《Live Science》繼續說明:「任兩個連續斐波那契數字的比例都非常接近黃金比例,大約是1.618034。斐波那契數數對的數字愈大,近似值就愈接近。」不需要再懷疑物體或形狀能夠這么迷人的原因。

作者Victority

四、數學與美學的匯合處

有鑒于數學與自然間的聯系,人體有黃金比例的證據也就不足為奇了。從手臂的比例(手指與前臂和上臂的相比長度)到蒙娜麗莎的臉型都符合盧卡?帕西奧利(Luca Pacioli)在1509年提出的神圣比例(Divine Proportion),也與達文西的黃金分割(Golden Section)有異曲同工之妙。達文西在《維特魯威人》里使用了黃金比例。林布蘭等藝術家也運用了這個概念。

許多學者和統計學家皆致力于衡量黃金比例對美麗臉龐的影響程度。根據這些理論,計算出人臉的寬度和長度后,如果長度除以寬度得到的數字接近黃金比例,那么臉型就會是漂亮的。眼、鼻、口的位置以及其之間的距離也會是吸引力的影響因素。

如果能夠結合這所有的公式并將他們視覺化,創造獨特的形狀和圖樣,就能更容易在日常生活里看到他們的價值。就如同黃金比例可以用來創造建筑和藝術作品的誘人視覺,它對現代設計來說也很重要。

五、設計的黃金比例

網頁、廣告、雜志封面以及插圖都受益于這個古老的數學原則。黃金比例可以用來導引物體位置、圖標形狀等等。

六、在網站上和其他范圍里的版面與內容

讓我們從黃金比例在版面和內容里所扮演的角色開始說起。在網頁設計中,黃金比例能夠運用在文字欄位該放在哪里以及怎么擺放。舉例來說,由左方寬欄位與右方窄欄位組成的頁面,可以吸引觀眾目光并強調最重要的部分。如果網站總寬度是960像素,左方欄位就應該是593像素,而右手邊的欄位則為367像素。他們配合在一起會是理想的比例。

由于版面不同,欄位尺寸并不一定能如期望般完美相加(即使使用黃金比例計算機能有所幫助)。那也沒問題。終極目標就是盡可能接近1:1.61的比例,也就是主要內容框為側欄的1.6倍。

這個使用者介面(UI)策略還有個額外好處:它能協助讀者瀏覽影片、攝影照片和文字內容。你可以在網路里找到許多這類版面的范例,因為一個簡單的原因,就是它有效。查看一下像是Fast Company或BuzzFeed的網站首頁,你就能看到這種雙欄位的版面。

相同的結果也能在Salon.com網站找到。借著在符合黃金比例的雙欄位里置入引人注目的照片以及熱門影片,Salon讓訪客從目前內容前往瀏覽下個內容的過程達到視覺平衡。版面立刻就能達成美觀又實用的效果,協助訪客決定如何最好地瀏覽頁面,同時推廣Salon最有趣的內容。

截圖作者Salon

七、黃金比例─以及黃金圈─會如何影響間距與形式

黃金比例也可以幫助你決定間距大小:比起其中之一個元素,要在什么地方置入另一個設計元素,最佳的留白空間等等。

回到黃金矩形,思考它能如何協助你決定要把較小、較不重要的內容放在網頁的哪個地方,或什至該怎么在新圖標中留白。你可能會發現它可以讓作品更具焦點,還能減少想出讓你和顧客都滿意圖像的時間。

然而,如果你仍然處于努力了解數學要如何改善品牌視覺素材的階段,采取稍微不同的視角可能會有所幫助。運用黃金矩形,并在每個獨立區域中畫出正圓。就尺寸和比例來說,這些形式─被稱為黃金圈─保持著黃金比例,并且能夠根據需求改變位置。

不論是交叉或是重疊,黃金圈都能套用在所有的設計上,不管你想改善現有圖標或是重新設計都可以。在正在處理的作品里重疊黃金圈,可以讓你調整他們,確保最終結果一致符合黃金比例。

如果謠言屬實,Twitter的圖標設計內含黃金比例與其相關的黃金圈。如果你發現這些圓圈套用在標志性的藍鳥上,這不無道理。此圖標的確非常接近黃金比例公式,這也解釋了為什么成果讓人這么難忘。

Twitter的鳥型并不是唯一采用黃金圈的圖標。據說百事可樂,還有Google的圖標也都遵循黃金比例。這對圖像設計師來說并不是個罕見技巧,以求能夠繪制完美比例的形狀和圖樣,為觀看者帶來清晰整潔的畫面。

有時候,重新安排黃金圈直到他們與更加熟悉的物品相似的這個簡單動作,能夠為下個圖標設計帶來靈感。所有事都一樣,練習造就完美,而多方測試黃金圈能達成的效果就是想出可行設計的關鍵。

作者SAAC

抱著這個想法,創作專家Kazi Mohammed Erfan在去年為自己設下一個挑戰,需要創造25個符合黃金比例的圖標。借著將公式的每個部份轉換為黃金圈組合,并以這些形狀做為指引,他得以設計出一系列擁有留白、展示平衡,最重要的是能夠體現企業本質的活力圖標。

作者Kazi Mohammed Erfan

八、攝影的黃金比例

除了網頁和圖標設計,黃金比例在攝影界也占有一席之地。如果你的任務是創造或選擇有趣圖像的話,比例和大小至關重要,這也是強大攝影構圖的主要組成要素。將拍攝主體以符合黃金螺旋版面的方式安排─把圖像焦點放在螺旋曲線內─能夠讓你創造出因遵循黃金比例原則而更有魅力的構圖。

為了簡化過程,許多攝影師會使用「φ網格」。藉由將黃金矩形以及其重疊的黃金螺旋分為九部份,你會獲得能夠協助構圖的網格。觀察網格線條的交會處。那些地方是人眼自然會被吸引的區域,也就是你該在照片里擺放多重元素的位置,以達成視覺平衡。

九、網格戰爭:評估替代的三分構圖法

不過,攝影中還有另一種構圖方式,也就是三分構圖法。它的原理也牽涉了具備九部份的網格。然而,在三分構圖法里,網格大小全都相同。

在這個情況下,我們同樣建議你將興趣點放在線條交會處,或是在線條本身上。目標是創造具平衡感的照片。想像在取景器里放入一張方格紙。視線中的物體會如何對齊頁面中的矩形呢?那些交會點能夠做為照片里放置首要與次要興趣點的指引。

很多數位相機都能夠在螢幕上顯示三分構圖法網格,讓使用者可以更輕松地拍出好照片,隨著時間累積,用這種方式構圖會變成第二天性。但是請謹記在心,規則總有例外。拍攝大頭照時,最好能將網格線條拋在腦后,把臉放在螢幕中央。

作者Sofia Zhuravetc

你可能會覺得這兩種相似的方法─黃金比例以及三分構圖法─能夠彼此和諧配合。不過,以構圖來說,哪個策略是最好的仍有不確定性。他們兩者都是有用的藍圖技巧,能夠增強創造迷人照片或設計的能力。但他們并不相等。

如同Discovery傳播集團旗下的Dnews所述,φ網格在拍攝景物時特別有用,因為它會「創造更平衡的圖像」并且「讓照片看起來更加自然,減少僵硬感」。如果采用三分構圖法,你最后可能會獲得太過沉穩的照片,以至于讓它看起來有種強迫感。

下次當你要為電子報行銷、廣告郵件或社群媒體貼文瀏覽合適的風景照時,請把黃金比例放在心上。想像把網格放在每張圖像上,然后思考如何到達照片的焦點處。一旦知道該找些什么,你到處都能發現黃金比例,并了解為什么照片能夠撼動你─和你的顧客─的珍貴觀點。

作者Tanmoy Mishra

十、黃金比例計算工具

在畫冊、 WEB 或 UI 設計都會用黃金比例,但設計師們不會一直記著這個計算方式,所以我們可以利用「黃金比例計算工具」。

這個工具有黃金比例、白金比例、鉑金比例以及青銅比例,設計師可以手動修改數值,就能自動換算,相當方便。

黃金比例計算工具地址:?
http://www.wqqsqj.live/examples/tools/golden-ratio/index.html

總結

在表面上,黃金矩形、黃金螺旋、斐波那契數列、φ網格以及所有背后的原理看起來都很復雜。一系列的數字能夠產生自然美麗圖像的想法并不那么直觀。

但就像設計師、圖像藝術家和攝影師們運用這個方式所證明的,黃金比例已經從一個晦澀的數學理論演化成可信的技巧,并在現代社會占有一席之地。這是一個應該收為己用,然后套用在圖像管理、網頁設計,甚至是部落格版面上的強大規則。有了基礎認知,你可以更好地選擇及開發吸引消費者的設計,提升參與度,并且改善品牌的視覺認知。

作者:adgiz adgiz
原文鏈接:https://www.shutterstock.com/zh-Hant/blog/what-is-the-golden-ratio

推薦:查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com
交流:結交更多有才華的設計師?請加入UI設計QQ群,與50000名設計師交流設計。
贊助商鏈接
贊助商鏈接
設計達人微信交流社區:shejidaren888
喜歡這篇文章嗎?歡迎分享到你的微博、QQ群,并關注我們的微博,謝謝支持。
版權:除非注明,本站文章均為原創文章,轉載請聯系我們授權,否則禁止轉載。