設計師不可錯過的黃金比例指南
好的設計一直以來都是大眾爭論的焦點,雖然永遠不會有一種放之四海而皆準的方法,但卻有一種具體的數學方法可以幫助我們更接近于好的設計經驗:黃金比例。
黃金比例是你幾乎可以在任何地方找到的數學比例,比如自然,建筑,繪畫和音樂。而當專門用于設計時,它便創造了一種有機的,平衡的,美觀的感官享受。
在本文中,我們將深入探討黃金比率是什么,如何計算它,以及如何在設計中使用它——包括一個方便的工具列表。
yourlocalstudio.dk
什么是黃金比例?
黃金比例,也稱為黃金分割、黃金平均數、神圣比例或希臘字母phi,黃金比率是一個大約等于1.618的特殊數。比例本身來自與神秘的斐波那契序列—— 一個自然出現的數字序列,它可以在任何地方找到,從樹上的樹葉數量到貝殼的形狀。
斐波那契序列是它之前的兩個數的和。它是:0,1,1,2,3,5,8,13,21等等,到無窮大。源于這種規律,希臘人開發了黃金比例,以更好地表達序列中任意兩個數字之間的差異。
那這和設計有什么關系呢?當你把一條線分成兩部分,較長的部分(a)除以較小的部分(b),等于(a)+(b)除以(a),兩者都等于1.618。而這個公式可以幫助你創建出更賞心悅目的形狀、標志和布局等等。
創建一個黃金矩形
取一個正方形以及和正方形同樣長,但寬為1.618比例的長方形。
將正方形放在矩形上,兩個形狀之間的比例就為黃金比例。
如果你繼續將黃金比例公式應用到最右邊的新矩形,那么你將得到一個由越來越小的正方形組成的圖像。
如果你在每個方格上畫一個螺旋線,從一個角落開始到另一個角落結束,將創建出一條斐波那契序列曲線(也稱為黃金螺旋)。
如何在設計中使用黃金比例?
既然數學課已經結束,我們又如何將這些知識應用到每天的工作中?
以下是在設計中使用黃金比例的四種方法:
1.排版和定義層次結構
黃金比例可以幫助你確定在網站,登錄頁面,博客文章甚至平面廣告中使用的標題和正文副本的字體大小。
假設你的正文部分是12px。那么將12乘以1.618,得出的值為19.416,如果遵循黃金比例并平衡12px正文字體大小的話,那么你的標題文本大小就可以是19px或20px.
反過來同樣,如果標題文本為25px,則可以將其除以1.618以確定正文文本大?。?5或16像素)。
2.裁剪和調整圖像大小
裁剪圖像時,很容易識別要剪切的空白區域。但是,在調整大小后,如何確保圖像仍然平衡?你可以使用黃金螺旋線作為圖像構圖的指南。
例如,如果在圖像上疊加黃金螺旋線,則可以確保焦點位于螺旋的中間。
3.布局
利用黃金比例可以幫助你設計一個視覺上吸引人的用戶界面,并引導用戶將注意力放在那些更為重要的部分上。
例如,在左側突出顯示內容的大塊,右邊的列更窄的頁面可以遵循黃金比例的比例,并幫助你決定將最重要的內容放在哪里。
4.LOGO創作
如果你正處于Logo創作的瓶頸期,那么不妨參考一下黃金比例原則,它可以幫助你勾勒出大致的比例和形狀。許多流行的logo都遵循黃金比例,如Twitter,Apple和百事可樂等等。
via:Mostafa Amin和Brandology Studio
設計師Kazi Mohammed Erfan甚至挑戰自己完全基于黃金比例創建了25個新logo。
via.Kazi Mohammed Erfan
幫助你使用黃金比例的工具
有時候并不需要鉛筆和紙張來計算黃金比例 ,有很多工具可以為你工作。以下五種工具可幫助你在設計中使用黃金比例:
1.黃金比例計算器
https://www.omnicalculator.com/math/golden-ratio
計算兩側的較短邊,較長邊和組合長度以計算黃金比例。
2.goldenRATIO
https://itunes.apple.com/us/app/goldenratio-tool-for-every/id485258055?mt=8
這款應用程序專為設計師和開發人員而設計,可根據黃金比例為您提供設計網站,界面,布局等的簡便方法。它包括一個帶有視覺反饋的內置計算器和用于存儲屏幕位置和設置的功能,因此您無需為每項任務重新安排黃金比例。
3.黃金比例排版計算器
https://grtcalculator.com/
輸入您的字體大小和寬度,為您的網站發現完美的排版。您可以根據字體大小,行高,寬度和每行字符進行優化。
4.PhiMatrix
https://www.phimatrix.com/
這款Golden Ratio設計和分析軟件提供可自定義的網格和模板,您可以在任何圖像上疊加,可用于設計和組合,產品設計,徽標開發等。
5.黃金比例草圖資源
https://www.sketchappsources.com/free-source/1190-golden-ratio-sketch-freebie-resource.html
下載黃金螺旋的免費草圖文件,幫助圖像和布局組成。
開始使用黃金比例
一旦你知道要尋找什么,你就會開始注意到到處都是黃金比例。(不相信?看看你的手,甚至你的手指也遵循黃金比例。)人類的眼睛習慣了看到這個神奇的數字,我們潛意識里對它作出了積極的反應。
而作為設計師,我們可以利用這個數字來獲得優勢。哪怕是對裁剪圖像或開發布局的方式進行微調,仍然可以顯著地改善用戶與設計交互的方式。
精選課程
共鳴設計——科學與審美的交匯,以Xiaomi SU7設計為例
李田原
小米汽車 設計總監
設計論文寫作:如何將實踐案例轉換為可發表的文本
2024產品設計專業系統化能力提升課程
2024體驗設計專業系統化能力提升課程
玩轉行為設計 高效提升產品業績(中文字幕)
Joris Groen
Buyerminds 聯合創始人,創意總監