2019年12月30日 星期一

黃金比例設計訣竅 |「黃金」這個詞代表價值、完美以及成功。其適用的範圍廣泛,從稀有珍貴的蛋,到標誌性的電影時代,再及中獎樂透彩券都是。然而,對行銷人來說,它還是一個很重要的參考…



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

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


定義黃金比例
想要了解黃金比例,你需要從它怎麼─以及從哪裡發源─開始著手。這個探索帶我們回到古希臘時期。黃金比例也可以希臘字母φ(發音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

著手應用黃金比例
如果你已經擁有希望用做行銷和廣告用途的圖像,但他們卻沒遵循黃金比例或三分構圖法,振作一些。只需要編輯圖像,你就可以轉移觀眾焦點,並獲得精湛構圖的好處。

更緊湊的剪裁能夠凸顯照片最重要的部份。在Shutterstock Editor裡,你可以快速地將照片裁剪為任何尺寸,或是從預設的社群媒體尺寸中選擇,讓你輕鬆跨渠道分享。運用網格工具顯示黃金比例的導引線,然後觀察圖像要如何處理。


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

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


文章出處 / shutterstock