网站设计中的黄金比例：示例和提示

这听起来像是一堂数学课，但却挂在那儿。黄金分割率结合了一些数学知识，一些自然知识以及许多设计师的实际应用程序。让我们看一下黄金分割对设计的意义，以及在设计项目中使用黄金分割的一些技巧。

黄金比例在整个历史中一直被用来创建具有理想视觉吸引力的设计元素。因为形状植根于自然和数学，所以它是平衡与和谐的完美结合。成为设计师的绝妙工具。

什么是黄金分割率？

网站建设

简单来说，黄金比例（也称为黄金矩形和黄金均值）是一种形状，其比例为1到1.618。

更为复杂的是，数学可以像Interaction Design Foundation所解释的那样描述：

斐波那契数列中的每个数字就是前面两个数字的和。它以1、1（即1 +看不见的0 = 1）开始，并且序列的前10个成员为1、1、2、3、5、8、13、21、34、55。它无限地继续。

使用Phi的公式数学计算比率：A / B =（A + B）/ A = 1.618033987 =Φ

印刷和网页设计项目的应用程序通常不如1到1.618那样精确。在为易于使用的网格创建数学黄金分割率时，许多设计师都会对数字进行四舍五入。

在应用该概念时，通常使用螺旋，圆形或三角形来表示。

而且这不是“仅仅是设计的事情”。黄金比例存在于自然（鹦鹉螺壳），艺术（蒙娜丽莎），建筑（埃菲尔铁塔）以及设计中。

你如何使用它？

网站建设

在应用黄金分割率时，有不同的思想流派：

• 使用基于比例的网格设置设计以创建和谐
• 不执行任何操作，因为无论您是否故意进行操作，它都适用

最好的解决方案可能在中间。很有可能，您的眼睛可能已经受过训练，可以创建并倾向于包含该理论的设计，但是，看看您是否实际应用得当，它永远不会受到伤害。

当谈到黄金分割率时，画布可能会引起各种问题。您不知道某人可能使用哪种浏览器大小，或者该比率可能不符合特定的打印大小。

目标是在设计中创建适合此理想形状的零件。考虑将其用于徽标或照片裁剪。用它来创建标题或设计的特定部分。使用这些概念来创建用于排版的基本网格或分层刻度。

网格和模板

如果您和我一样，那么使用复杂数学来解决设计问题的想法有点令人生畏。有一些很棒的工具可以为您提供帮助。

这里有一些模板和计算器，可以使黄金比例的使用更加容易。

• Phiculator：输入任意数字并获得相应的黄金比例值
• 黄金比例印刷计算器：根据基本字体和大小创建比例
• 黄金分割率模板：免费下载矢量模板
• 黄金定量线框模板：带有曲线，圆形或正方形的图层
• 黄金比率计算器：使用任意一组数字计算比率
• 黄金矩形计算器：获取任意数量的外部和内部黄金矩形的尺寸（这是使用比率的许多Web网格的基础）

使用黄金分割率的3个提示

那么如何将所有这些信息投入实际使用呢？（我们不希望您过多考虑设计项目，而对数学不知所措。）

这是在设计项目中使用黄金分割率的三个技巧。

• 使用比率为主要内容区域和侧边栏创建基础网站网格。根据W3Schools的数据，2018年初最常见的浏览器分辨率为1366 x 768像素。将黄金比例应用于846像素宽的内容区域和520像素宽的边栏。为此目的考虑比例时，高度并不重要。
• 使用比率创建设计间距指南。Prototypr.io有以下建议：“使用较大的正方形（如第8单元和第13单元）来定义布局。根据金色矩形，使用单位1、2或3的较小正方形来定义装订线和内容间距。
• 使用比率来创建图标或徽标等持久元素：具有持久和谐感的持久元素可以为正在进行的项目创建结构。上面的示例包括一个模板，您可以下载并尝试。

为什么黄金比例在设计中很重要？

那么为什么黄金比例对设计师真的很重要？

它是另一个工具，可帮助您创建与用户建立正确的情感和视觉基调的内容。无论您是否有意应用此理论，都存在。因此，重要的是您理解并认可它，以努力创造最佳和最有用的设计。

黄金分割的作用是将您引导到用户可能会根据自然而集中和看的焦点区域。即使并非完全出于故意，它也有助于建立平衡和规模。

以下是一些精心设计的网站，上面覆盖了黄金比例模板，以查看其与各个设计的确切关系。

网站建设

结论

因此，这是您理解和使用黄金分割率的关键：无论您是否考虑到这一点，都在那儿。那么，为什么不考虑这种久经考验的设计理论如何为您服务并改善项目呢？

下载我们在这里使用的模板，然后将其弹出到您的某些设计中，以查看您距离模板有多近，甚至无需考虑它。