UI设计——如何运用黄金比例？
时间：2023-09-04 14:12:01 | 来源：网站运营
时间：2023-09-04 14:12:01 来源：网站运营
UI设计——如何运用黄金比例？：（公众号：GM设计） 一起成长，不定时分享更多高质量UI/UX小技巧~~
历史上一直使用黄金比例来创造具有理想视觉吸引力的设计元素。因为形状植根于自然和数学，它是平衡与和谐的完美结合。作为一名设计师，这是一个让有助于帮助你的工具。
什么是黄金比例
（图片来源：公众号GM设计）简单地说，黄金比例（也称为黄金矩形和黄金分割）是一个比例为 1 比 1.618 的形状。
更复杂的是，数学可以这样描述，正如交互设计基金会所解释的：斐波那契数列中的每个数字只是它前面两个数字的总和。它以 1, 1 开始（即 1 + 看不见的 0 = 1），序列的前 10 个成员是 1, 1, 2, 3, 5, 8, 13, 21, 34, 55。它无限地继续下去.黄金比例？
（图片来源：公众号GM设计）使用 Phi 的公式数学计算比率：A/B = (A+B)/A = 1.618033987 = Φ印刷和网页设计项目的应用程序通常不如 1 到 1.618 精确。许多设计师在为更易于使用的网格创建数学黄金比例时会四舍五入。
在应用这个概念时，它通常使用螺旋、圆形或三角形来表示。
而且这不仅仅是“设计方面的事情”。黄金比例存在于自然（鹦鹉螺壳）、艺术（蒙娜丽莎）、建筑（埃菲尔铁塔）以及设计中。
如何使用它？
（图片来源：公众号GM设计）黄金比例
在应用黄金比例时，有不同的思想流派：
使用基于比例的网格设置设计以创造和谐什么都不做，因为无论你有意与否，它都适用最好的解决方案可能在中间的某个地方。很有可能，您的眼睛可能受过训练，可以创造并倾向于包含该理论的设计，但看看您是否真的很好地应用了它永远不会受到伤害。
当谈到黄金比例时，画布会导致各种问题。您不知道某人可能使用什么浏览器尺寸，或者比例可能不符合特定的打印尺寸。
目标是在设计中创建适合这种理想形状的零件。考虑将其用于徽标或照片裁剪。使用它来创建标题或设计的某个部分。使用这些概念为排版创建基本网格或分层比例。
网格和模板
如果你和我一样，用复杂的数学来解决设计问题的想法有点令人生畏。有一些很棒的工具可以提供帮助。
这里有一些模板和计算器，可以让使用黄金比例更容易一些。
Phiculator : 输入任意数字，得到对应的黄金比例值黄金比例排版计算器：根据基本字体和大小创建比例黄金比例模板：免费下载矢量模板Golden Ration 线框图模板：带有曲线、圆形或正方形的图层黄金比例计算器：用任何一组数字计算比例黄金矩形计算器：获取任意数字的外部和内部黄金矩形的尺寸（这是使用比率的许多网络网格的基础）使用黄金比例的 3 个技巧
（图片来源：公众号GM设计）那么您如何将所有这些信息付诸实践呢？（我们不希望您过度考虑设计项目并被数学淹没。）
以下是在设计项目中使用黄金比例的三个技巧。
使用该比率为主要内容区域和侧边栏创建基本网站网格。据W3Schools 称，2018 年初最常见的浏览器分辨率是 1366 x 768 像素。对 846 像素宽的内容区域应用黄金比例，边栏为 520 像素宽。为此目的考虑比率时，高度并不重要。使用该比率为设计中的间距创建指南。http://Prototypr.io有这样的建议：“使用更大的方块，如单元 8 和 13 来定义布局。使用单位 1、2 或 3 的较小正方形来定义基于黄金矩形的装订线和内容间距。使用比率来创建持久的元素，例如图标或徽标：具有强烈和谐的持久元素可以为正在进行的项目创建结构。上面的示例包含一个模板，您可以下载并试用。为什么黄金比例在设计中很重要？
那么为什么黄金比例对设计师来说真的很重要？
它是另一种工具，可帮助您创建与用户建立正确情感和视觉基调的东西。无论您是否有意应用，这个理论都存在。所以重要的是你理解并承认它，以努力创造最好和最有用的设计。
黄金比例的作用是提示您进入用户可能会根据自然聚焦和观察的焦点区域。它有助于创造平衡和规模，即使不是完全故意的。
这里有一些精心设计的网站，上面覆盖了黄金比例模板，以确切了解它与个人设计的关系。
结论
因此，这是您理解和使用黄金比例的关键：无论您是否考虑，它都在那里。那么为什么不考虑这种经过时间考验的设计理论如何为您服务并使项目变得更好呢？
下载我们在此处使用的模板并将其弹出到您的一些设计中，以查看您已经完成了多少进度，甚至无需考虑。
（原地址公众号：GM设计） 一起成长，不定时分享更多高质量UI/UX小技巧~~
在线咨询
