UI設(shè)計(jì)——如何運(yùn)用黃金比例？

時間：2023-09-04 14:12:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-09-04 14:12:01 來源：網(wǎng)站運(yùn)營

UI設(shè)計(jì)——如何運(yùn)用黃金比例？：（公眾號：GM設(shè)計(jì)） 一起成長，不定時分享更多高質(zhì)量UI/UX小技巧~~

歷史上一直使用黃金比例來創(chuàng)造具有理想視覺吸引力的設(shè)計(jì)元素。因?yàn)樾螤钪哺谧匀缓蛿?shù)學(xué)，它是平衡與和諧的完美結(jié)合。作為一名設(shè)計(jì)師，這是一個讓有助于幫助你的工具。

什么是黃金比例

簡單地說，黃金比例（也稱為黃金矩形和黃金分割）是一個比例為 1 比 1.618 的形狀。




更復(fù)雜的是，數(shù)學(xué)可以這樣描述，正如交互設(shè)計(jì)基金會所解釋的：

斐波那契數(shù)列中的每個數(shù)字只是它前面兩個數(shù)字的總和。它以 1, 1 開始（即 1 + 看不見的 0 = 1），序列的前 10 個成員是 1, 1, 2, 3, 5, 8, 13, 21, 34, 55。它無限地繼續(xù)下去.黃金比例？

使用 Phi 的公式數(shù)學(xué)計(jì)算比率：A/B = (A+B)/A = 1.618033987 = Φ

印刷和網(wǎng)頁設(shè)計(jì)項(xiàng)目的應(yīng)用程序通常不如 1 到 1.618 精確。許多設(shè)計(jì)師在為更易于使用的網(wǎng)格創(chuàng)建數(shù)學(xué)黃金比例時會四舍五入。

在應(yīng)用這個概念時，它通常使用螺旋、圓形或三角形來表示。

而且這不僅僅是“設(shè)計(jì)方面的事情”。黃金比例存在于自然（鸚鵡螺殼）、藝術(shù)（蒙娜麗莎）、建筑（埃菲爾鐵塔）以及設(shè)計(jì)中。

如何使用它？

黃金比例

在應(yīng)用黃金比例時，有不同的思想流派：

使用基于比例的網(wǎng)格設(shè)置設(shè)計(jì)以創(chuàng)造和諧

什么都不做，因?yàn)闊o論你有意與否，它都適用

最好的解決方案可能在中間的某個地方。很有可能，您的眼睛可能受過訓(xùn)練，可以創(chuàng)造并傾向于包含該理論的設(shè)計(jì)，但看看您是否真的很好地應(yīng)用了它永遠(yuǎn)不會受到傷害。

當(dāng)談到黃金比例時，畫布會導(dǎo)致各種問題。您不知道某人可能使用什么瀏覽器尺寸，或者比例可能不符合特定的打印尺寸。

目標(biāo)是在設(shè)計(jì)中創(chuàng)建適合這種理想形狀的零件?？紤]將其用于徽標(biāo)或照片裁剪。使用它來創(chuàng)建標(biāo)題或設(shè)計(jì)的某個部分。使用這些概念為排版創(chuàng)建基本網(wǎng)格或分層比例。

網(wǎng)格和模板

如果你和我一樣，用復(fù)雜的數(shù)學(xué)來解決設(shè)計(jì)問題的想法有點(diǎn)令人生畏。有一些很棒的工具可以提供幫助。

這里有一些模板和計(jì)算器，可以讓使用黃金比例更容易一些。

Phiculator : 輸入任意數(shù)字，得到對應(yīng)的黃金比例值

黃金比例排版計(jì)算器：根據(jù)基本字體和大小創(chuàng)建比例

黃金比例模板：免費(fèi)下載矢量模板

Golden Ration 線框圖模板：帶有曲線、圓形或正方形的圖層

黃金比例計(jì)算器：用任何一組數(shù)字計(jì)算比例

黃金矩形計(jì)算器：獲取任意數(shù)字的外部和內(nèi)部黃金矩形的尺寸（這是使用比率的許多網(wǎng)絡(luò)網(wǎng)格的基礎(chǔ)）

使用黃金比例的 3 個技巧

那么您如何將所有這些信息付諸實(shí)踐呢？（我們不希望您過度考慮設(shè)計(jì)項(xiàng)目并被數(shù)學(xué)淹沒。）

以下是在設(shè)計(jì)項(xiàng)目中使用黃金比例的三個技巧。

使用該比率為主要內(nèi)容區(qū)域和側(cè)邊欄創(chuàng)建基本網(wǎng)站網(wǎng)格。據(jù)W3Schools 稱，2018 年初最常見的瀏覽器分辨率是 1366 x 768 像素。對 846 像素寬的內(nèi)容區(qū)域應(yīng)用黃金比例，邊欄為 520 像素寬。為此目的考慮比率時，高度并不重要。

使用該比率為設(shè)計(jì)中的間距創(chuàng)建指南。http://Prototypr.io有這樣的建議：“使用更大的方塊，如單元 8 和 13 來定義布局。使用單位 1、2 或 3 的較小正方形來定義基于黃金矩形的裝訂線和內(nèi)容間距。

使用比率來創(chuàng)建持久的元素，例如圖標(biāo)或徽標(biāo)：具有強(qiáng)烈和諧的持久元素可以為正在進(jìn)行的項(xiàng)目創(chuàng)建結(jié)構(gòu)。上面的示例包含一個模板，您可以下載并試用。

為什么黃金比例在設(shè)計(jì)中很重要？

那么為什么黃金比例對設(shè)計(jì)師來說真的很重要？

它是另一種工具，可幫助您創(chuàng)建與用戶建立正確情感和視覺基調(diào)的東西。無論您是否有意應(yīng)用，這個理論都存在。所以重要的是你理解并承認(rèn)它，以努力創(chuàng)造最好和最有用的設(shè)計(jì)。

黃金比例的作用是提示您進(jìn)入用戶可能會根據(jù)自然聚焦和觀察的焦點(diǎn)區(qū)域。它有助于創(chuàng)造平衡和規(guī)模，即使不是完全故意的。

這里有一些精心設(shè)計(jì)的網(wǎng)站，上面覆蓋了黃金比例模板，以確切了解它與個人設(shè)計(jì)的關(guān)系。

結(jié)論

因此，這是您理解和使用黃金比例的關(guān)鍵：無論您是否考慮，它都在那里。那么為什么不考慮這種經(jīng)過時間考驗(yàn)的設(shè)計(jì)理論如何為您服務(wù)并使項(xiàng)目變得更好呢？

下載我們在此處使用的模板并將其彈出到您的一些設(shè)計(jì)中，以查看您已經(jīng)完成了多少進(jìn)度，甚至無需考慮。




（原地址公眾號：GM設(shè)計(jì)） 一起成長，不定時分享更多高質(zhì)量UI/UX小技巧~~