掌握设计中的黄金比率

您的设计看起来几乎是正确的，但是有些感觉崩溃了。间距似乎很尴尬。比例不起作用。您可以调整边缘和填充物，但仍然存在这种不平衡感。缺失的物品可能是黄金比率。

这个数学原则已经引导了数百年的出色设计。而且，我们的眼睛自然更喜欢这些特定比率。大多数设计师都跳过了黄金比率或误用它们，因为破裂有多困难。但是，使用Divi 5这样的页面构建器，您可以在没有复杂计算的情况下应用完美的比例。

让我们了解更多。

什么是黄金比率？

黄金比率大约等于

1.618。

它来自哪里？当您将一条线分为两个部分时，您会得到这个数字，其中较长的部分除以较短的零件等于整个行除以较长的部分。

您可以使用斐波那契序列计算黄金比率。从0和1开始。将它们添加到获得1。然后将1和1添加到获得2。请继续添加最后两个数字：1、2、3、5、8、13、34、34、55、89、144。当您将任何较大数字除以上一个数字时，您将接近1.618。

这个比例在自然界中无处不在。葵花籽螺旋遵循它。使用这些比例，甲基壳会生长。即使您的脸也可能遵循您的功能之间的黄金比率测量。当某事遵循这个比例时，您的大脑就会意识到它自然令人愉悦。

图像提供：卢卡斯和动态王在Unsplash和Milena Carolina dos Santos Mangueira

符号φ（PHI）代表了古希腊人在公元前300年左右发现的独特数学比率。他们将其称为“神圣比例”，认为它揭示了特殊的视觉平衡和美丽。

为什么重要：从旧建筑物到网页设计

希腊人将这种比率用于帕台农神庙，埃及金字塔遵循这些测量值。像Leonardo da Vinci这样的艺术家多年来研究了这些比例。达芬奇（Da Vinci）绘制了著名的“维特鲁维亚人”（Vitruvian Man），显示了人体中的黄金比例。

代表性图像

成熟的设计师仍然使用此功能。苹果的徽标使用黄金比例。以前的Twitter鸟徽标遵循这些测量值。杂志将重要的内容放在黄金比率的位置，而不是在中心。

图像提供：宽壁和设计棚屋

科学家研究了为什么人们喜欢黄金比例的形状。当人们查看黄金比率矩形时，脑部扫描在愉悦区域显示更多活动。这是人类固有的，因为这在所有文化和年龄中都发生。

您的大脑处理这些比例的速度比其他比率更快，这意味着更好的用户体验。当网站比例距离1.618的比例太远时，访问者会感到不舒服，然后离开。

该比率创造了平衡，而没有完全完美。完美的对称性在网站上看起来很无聊。黄金比率提供了足够的不对称性，可以在保持用户期望的干净，专业外观的同时创造视觉兴趣。

为什么您的设计感觉“偏离”（以及比率如何解决此问题）

您只是花了几个小时来完善布局。颜色恰到好处。字体一起工作。但是有些事情仍然感到沮丧。侧边栏似乎太宽了。标头看起来有些局促。内容区域不会随剩余而流动。

这是一个普遍的经历。许多设计师根据此刻的感觉调整大小。也许您将主要内容设置为70％，将侧边栏设置为30％。这些数字听起来很合理，但是它们并不总是自然的。

我们的眼睛寻找平衡和熟悉的模式。当比例不太正确时，即使您无法解释原因，整个设计也会感到尴尬。这可能不是一个大错误，只是一个使您感到不安的小细节。

真正的问题通常是比例。当布局忽略感觉平衡时，您的大脑会注意到。即使您无法将手指放在上面，也会感到有些不适。

比率有多么错误的破坏用户体验

不良比例使事情看起来很奇怪。您的大脑期望某些形状和大小会很好地融合在一起。想象一个英雄部分，占用您屏幕的一半。它看起来僵硬而尴尬。

现在，考虑一种使用43％或67％的空间。看起来不平衡和混乱。

这可能会伤害您的网站。人们是否相信自己所看到的，很快就会决定。如果页面看不见，他们可能会认为您的业务是不可信的。凌乱的设计使人们相信您的工作不好。

黄金比率可以帮助解决此问题。不用使您的英雄第70％，而是尝试61.8％，而下一节可见38.2％。

这些数字不是随机的。他们遵循一种特殊的图案，称为1.618，您在自然界中看到，如花和贝壳中。您的眼睛知道这种模式，当他们看到它时会感到镇定。

诀窍是零件之间的关系。如果您的标头尺寸使用黄金比率与您的内容区域匹配，一切都会感觉正确。您的页脚，菜单和内容开始融合在一起，而不是看起来像为太空而战。

如何计算黄金比例

您不需要花哨的数学。只需记住62和38即可。这些数字总计100，因此它们作为百分比工作。

通过将62％的空间分为较大的零件，将任何空间拆分到较小的部分。您的网站宽1000像素。使您的主要内容620像素。将侧边栏放置在380像素。完美的黄金比率。

有一个500像素高的部分。您的主要区域有310像素。其余的收到190像素。

网站零件的快速规则

英雄部分应首先占用大约60％的人。其余的将转到您的主要内容预览。使卡及其宽的60％高60％。一张300像素范围的卡变为180像素。

按钮以相同的方式工作。 100像素的宽度表示高度为60像素。您的文本列为600像素宽。停止向下添加约370像素的内容。然后添加您的下一部分。

看起来对吗？

从屏幕退后一步。零件现在应该保持平衡。您的眼睛从各个部分顺利流动。如果您一直盯着一个地方，那么比例可能会偏离。

流行的网站在各处使用这些相同的62/38分裂。一旦知道要寻找什么，您就会开始看到图案。数学保持隐藏，但是视觉和谐立即脱颖而出。

普通的黄金比率错误设计师制造

大多数设计师都知道存在黄金比率并希望使用它。他们通常在这里挣扎。

最大的错误是在没有系统的情况下随机应用比率。您为标题使用黄金比率，用于内容网格的三分之二，并且页脚随机百分比。选择一种方法，并在设计中始终如一地使用它。

许多设计师将1.618轮回到1.5或1.7等简易数字。您的大脑注意到62％至60％之间的差异，而较小的差距会影响您努力创建的视觉和谐。

另一个常见的问题是比率元素不匹配。例如，您可能会创建一个比例完美的英雄部分，但添加了使用完全不同的间距比的图像库。视觉断开连接破坏了您建立的流程。

一些设计师将黄金比率应用于文本，而无需考虑阅读舒适度。遵循完美数学比例的线长度可能会超过舒适的阅读宽度。可读性比数学精度优先。

网页设计人员也经常忽略响应能力。看起来平衡的桌面比例会在较小的屏幕上感到局促或伸展。黄金比率需要跨设备尺寸的不同应用。

许多页面构建者默认为忽略比例和谐的任意布局。标准的三列网格使用33/33/33分裂而不是更自然的比率。

最有限的错误是在初次尝试后放弃该方法。当您在布局结构中系统地应用时，黄金比率效果最好，而不是孤立的调整。

为什么许多页面建筑商忽略了黄金比率？

页面构建者围绕程序员思考而成长。开发人员喜欢干净分裂的数字。十二列，四个部分，五十张分裂。

许多建筑商公司真正相信用户应该控制自己的设计选择。他们不想将特定的审美理论推向可能喜欢不同方法的人。一些设计师讨厌黄金比率，更喜欢其他比例系统。当创造力在选项上蓬勃发展时，为什么要强迫一个数学原则？

真正的技术问题比设计理念更混乱。黄金比例会产生奇怪的小数，从而破坏了较旧的设备。尝试构建一个响应式网格，其中一列宽度为61.8％。清洁百分比在每个设备上都可以预见的是25％或33％。

大多数页面构建器公司都是作为技术解决方案而不是设计工具开始的。它们围绕着可靠的系统，逻辑的布局建立。

用户很少抱怨比例。他们抱怨移动布局破裂和加载时间缓慢。公司优先级遵循实际用户反馈，而不是设计理论。

一些建筑商担心压倒性的初学者。新用户已经面临数十个布局选择，并且增加数学考虑可能会吓到那些只想要清洁和专业的人。

用Divi 5建立完美的比例

在我们深入研究Divi 5如何将黄金比率设计从数学头痛转变为单点点击简单性之前，让我们简短地绕行，了解是什么使Divi成为想要专业成绩的WordPress Designers首选而没有编码噩梦。

什么是Divi？

Divi是WordPress页面构建器，专为关心视觉设计的人们而不损害功能而设计。

您可以将超过200个模块拖放，更改文本并选择新的颜色。一切都发生在您的页面上，因此您可以准确地看到访问者会看到的。

该主题带有2000多个预制布局。这些不是基本模板，而是针对餐馆，摄影师，顾问和其他数十家业务的完整设计。选择适合您的风格并从那里进行自定义的一种。

如果您在线销售产品，Divi包括20多个专门为商店制作的模块。您的产品页面看起来很专业，实际上可以帮助将浏览器转换为买家。

建立没有头痛的网站

主题构建器使您可以设计网站的每个部分。您可以创建与您的品牌相匹配的自定义标题，建立独特的博客布局，甚至使您的404页看起来很棒。

Divi AI将AI的便利性带入您的设计画布中。您可以生成文本，

图像，

代码，

和整个页面段使用Divi AI。

您甚至可以通过描述所需的内容来编辑现有照片。

Divi快速站点解决了最大的问题网站构建者面对的：盯着空白页面而不知道从哪里开始。您可以从我们的设计团队创建的专业网站模板中选择专业的入门网站，并具有您在其他任何地方找不到的独特图像和艺术品。

或者让Divi AI根据您的业务描述构建自定义布局。

这个AI生成的网站不仅仅是线框。根据您的描述，它将包含相关标题，副本和图像。您可以要求Divi AI生成所有图像，使用Unsplash或使用占位符，以便您自己替换它们。

您甚至可以预选字体和颜色，并让AI与它们一起运行。当然，这些网站仍然像普通网站一样可以编辑，因此您可以根据自己的口味来调整所需的内容。

得到Divi

Divi 5：下一步

构建网站应该感觉自然，就像在纸上绘制想法一样。您有一个远见，您的工具应该有助于使它栩栩如生，而不会阻碍。这正是促使我们完全从头开始重建Divi的原因。

Divi 5今天可作为Alpha提供，并准备在新网站上使用，代表了多年聆听创建网站时需要的内容。它不是钟声和哨子或没有人真正使用的功能，而是真正的改进，可以使您的工作更快，更有趣。我们将您喜欢的一切都保留在Divi上，并将其提升到一个新的水平。

我们使用新的Web工具从头开始重建所有内容。现在页面加载速度更快，并且控件效果更好。您可以在整个网站上保持相同的设计，而无需额外的工作。

有什么改善？什么是新的？

• 完整的框架重建摆脱了旧的短码。一切都以新的基于块的代码运行，该代码加载速度更快，效果更好。
• 一单击的编辑使您可以单击页面的任何部分以立即进行编辑。不再需要寻找小图标或挖掘菜单。
• 可自定义的断点可为您提供七个屏幕尺寸，而不是三个屏幕尺寸。您可以更改每个人以满足您的确切需求。
• 高级单元支持使您可以使用calc（），clamp（），min（），max（）和构建器中的所有新CSS单元。
• 设计变量可让您在一个地方节省颜色，字体，尺寸，图像，文本和链接。更改一次，它们将在您的网站上到处更新。
• 选项组预设可让您保存和重用样式的边界，字体，阴影和间距。这些在您网站的不同部分之间起作用。
• 嵌套行让您将行放入其他行中。您可以在没有特殊部分的情况下构建复杂的布局。
• 模块组将几个模块组合成一个单元。这使得复杂的布局更容易管理。您还可以制作自定义模块。
• 多面板工作区可让您将面板放置在想要的位置。您可以同时使用几个设置。
• 当您复制，粘贴和重置样式，内容和不同部分之间的预设时，属性管理为您提供精确的控制。
• 轻/暗模式可让您在工作时选择更容易在眼睛上的主题。
• 帆布缩放使您可以调整工作区域大小，以查看您的网站在不同屏幕上的外观。无需切换预览模式。
• 绩效改进会使您在建造时更快地加载页面，更快地显示并感觉更顺畅。

今天尝试Divi 5

Divi 5现在可用于新的网站项目。我们从头开始重建它，以使您的工作流程更快，更容易。下载公共alpha并在下一个新网站上尝试以查看改进。对于所有新旧成员来说都是免费的。

我们建议仅在改善现有Divi 4个站点的迁移系统时仅用于新站点。如果您开始新鲜，现在是尝试更新的界面和更好性能的好时机。

如何使用Divi 5使用黄金比率

足够说。让我们深入研究，看看如何使用Divi 5在您的网站中实现黄金比例，更好的是，它们如何被标准化，因此每次创建新的部分或页面时，您都不必在数学上争夺数学。

设计变量可让您在网站上保存和重复使用值。它们构成了您网站的视觉标识DNA。 Divi 5有六种类型：颜色，字体，图像，文本字符串，链接和数字。每个人都有特定的角色：

• 颜色变量具有品牌颜色，背景，文本颜色和其他范围内使用的色调。
• 字体变量使字体在标题，文本和特殊元素方面保持一致。
• 图像变量存储常见图形，例如徽标或背景模式，以便于使用。
• 文本字符串变量保存可重复使用的内容，例如口号，联系人和法律说明。
• 链接变量可让您经常使用的URL，例如社交媒体或关键页面。
• 数字变量在像素，百分比，EMS，REMS和视口单元中处理测量值，并使用CCSS函数（例如Calc（），以将比例保持在任何屏幕上。

设置黄金比率变量

打开Divi 5仪表板，并在左侧栏中找到变量管理器图标。

单击它打开变量面板。添加您的颜色，字体，图像，文本和链接变量。

然后，转到“数字”选项卡以创建黄金比率变量。首先添加这些数字变量：

版式变量

• H1尺寸：夹具（47px，4.7VW，76px）
  • 最低47px：即使在最小的手机（320px宽）上，您的H1也足够大以建立层次结构。任何较小的东西都会失去影响作为主要标题。
  • 4.7VW中间值：此视口宽度单元使文本比例平滑。在1000px屏幕宽度，4.7VW = 47px。在1600px时，它增长到75px
  • 最大76px：我们通过将18px×1.618乘以三次（18×1.618×1.618×1.618 = 76.244px）来获得此功能
• H2尺寸：夹具（29px，3.5VW，47px）
  • 最低29px：在保持可读性的同时，在移动设备上保持H2小于H1
  • 3.5VW缩放：比H1比例缩放比例小，以维持层次结构
  • 最大47px：正好76px÷1.618 = 47.122px
• H3尺寸：夹具（18px，2.9VW，29px）
  • 最低18px：匹配手机上的身体文本大小以节省垂直空间
  • 2.9VW缩放：比大标题更轻轻地生长
  • 最大29px：精确47px÷1.618 = 29.124px
• H4尺寸：夹具（14px，2.2VW，22.4px）：继续除以〜29px÷1.618 = 17.994px，但我们将最低设置为22.4px，以确保可读性
• H5尺寸：夹具（13px，1.8VW，18px）：我们的基本字体尺寸18px非常适合此处的规模
• 身体文本大小：夹具（16px，1.6VW，18px）：所有计算均源自

夹具（）函数使文本在屏幕之间平稳调整。它需要三个值：手机的最小尺寸，缩放缩放的中间值，最大的桌面值。我们在中间使用视口宽度（VW），因为它会随着屏幕变大，文本会逐渐生长。尺寸之间没有突然的跳跃。

在桌面上，我们坚持完美的黄金比率。移动屏幕需要少量调整以保持文本可读。纯计算可能建议一些标题为11px，但这会使您的访客眼睛震惊。设置诸如14px之类的实用最低限度可以保留黄金比率的视觉和谐，同时确保每个人都可以舒适地阅读您的内容。比例关系保持完整；他们只是略微移动以获得可读性。

间距变量

每个值将上一个乘以1.618：

• 太空XS：夹具（8PX，1VW，10PX）
  • 为什么10px基础：这是移动设备上最小的舒适触摸目标填充。行业智慧建议四方面的最低触摸目标和10px填充，并将内容带到您那里。小于10px使元素感到局促。
  • 为什么最小8px：在360px以下的手机上，即使是10px也会感觉太宽敞。我们下降到8px，以最大程度地提高内容空间，同时保持元素可区分。
  • 为什么1VW：按比例地增长间距，并在1000px屏幕宽度时给您10px
• 空间小：夹具（13px，1.6VW，16.18px）：非常适合按钮填充和表单场间距。
• 空间介质：夹具（21px，2.6VW，26.18px）：非常适合在相关内容块之间间距。
• 大空间：夹具（34px，4.2VW，42.36px）：在主要部分之间在屏幕尺寸缩放时在主要部分之间创建呼吸空间。
• Space XL：夹具（55px，6.8VW，68.54px）：非常适合英雄部分和主要特征块上的顶部/底部填充。英雄部分即使在移动设备上也需要大量填充。低于50px，英雄内容在边缘局限于局限。
• Space XXL：夹具（89px，11VW，110.89px）：很少使用。也许对于需要戏剧性呼吸室的特殊部分。

布局变量

• 主柱宽度：61.803％
  • 我们如何获得它：将1除以1.618 = 0.61803（或61.803％）
  • 在任何两列布局中，将其用于您的主要内容区域
• 次级列宽度：38.197％
  • 在同一行中用于侧边栏列
  • 来自100％ - 61.803％= 38.197％
• 容器最大宽度：1165px
  • 当线路超过72个字符时，文本很难阅读，
    • 并假设10px是最小文本大小，最佳读取宽度（720px）×黄金比率（1.618）= 1165px
  • 申请您​​的主体或持有您内容的行
• 黄金高度比率：计算（100％ / 1.618）
  • 这可以用作模块/模块组高度的值，例如图像，呼吁行动框，英雄部分，团队成员卡等。
  • 这将创建矩形而不是正方形或随机形状。您的大脑发现这些比例自然具有吸引力，就像一张完美的照片一样。
  • 我们如何得到这个？黄金比例说，如果宽度= 1.618，则高度= 1。因此，如果宽度= 100％，则高度= 100％÷1.618 = 61.8％。此公式会自动执行数学。

将这些变量保存在Divi 5的变量管理器中。然后，通过单击宽度，高度或最大宽度字段旁边的变量图标来使用它们。初始设置后，不需要数学。同样，这些变量标签都没有固定。您可以将标签换成有意义的东西。

创建具有黄金比率的英雄部分

让我们使用我们刚刚创建的黄金比率变量来启发一本书的登陆页面，为书的着陆页构建一个英雄部分。那是有趣的部分。您可以采用那些经过精心计算的变量，并观察它们如何影响真正的英雄部分。

首先在Divi 5的Visual Builder中创建一个新部分。使用黄金高度比变量设置高度。这使您的大脑很自然地识别出令人愉悦的。

将您的空间XL变量添加到顶部和底部填充。这为移动设备提供了足够的呼吸空间，同时在桌面上适当扩展。

对于本节背景，您使用设计变量有两个主要选项：

选项1：纯色背景

• 单击背景颜色字段，然后从下拉列表中选择主颜色变量。这使您的英雄部分符合您的品牌标识。如果您的主要颜色太轻而无法进行文本对比，请改用辅助颜色变量。确保您选择的任何颜色都提供足够的对比度，以使您的文本保持可读性。跟上我们的灵感，我们将以72％的停止和90°的速度添加背景和原色的梯度。

选项2：图像背景

• 通过背景图像字段应用您的英雄图像变量（如果创建一个）。单击背景图像设置旁边的变量图标，然后选择保存的图像变量。使用背景图像时，为文本可读性添加覆盖层。将覆盖颜色设置为主颜色变量，并将不透明度调整为40-60％。这使图像变得足够变暗，使白色文本清晰易读。
• 如果辅助变量更好地对比您选择的背景图像，则也可以将辅助颜色变量用于覆盖层。

创建两列布局

添加一个带有两个列的行。

将左列宽度设置为主列宽度变量，将右列设置为辅助列宽度变量。我们还将打开“均衡列高度”选项。然后，将应用容器最大宽度变量，以使内容可在较大的屏幕上读取。这样可以防止文本线伸展太宽，尤其是在较宽的屏幕上。

我们还将启用“使用自定义的排水沟宽度”并将其设置为1。这将帮助我们使用模块之间的黄金比率间距。

将您的空间介质变量应用于第一列的右侧和第二列的左填充，以在列之间添加呼吸空间。这会在列之间产生足够的分离，而不会使它们感到断开。

较大的列将包含您的主要消息和通话行动。较小的列可以包含一个简单的英雄图像或保持空的，以进行干净，以文字为中心的设计。

设置流动的排版

在主列中，添加两个标题模块。

将第一个设置为H5并应用H5尺寸变量。在此示例中，该文本模块带有“最畅销的作者”内容。我们还将为此文本使用辅助颜色，并应用大写字体样式。我们还将将身体字体应用到文本上，以使其具有独特性并将其重量增加到粗体。

将第二个设置为H1并应用您的H1大小变量。这成为您的主要标题。在此示例中，我们将使用作者的名称，该名称已添加为设计变量。如果您缺乏想法，则可以使用Divi AI来帮助您使用出色的文本。

在此下方，为您的支持段落添加文本模块。应用您的身体文本大小变量和颜色变量。将其保留为2-3个句子，以解释您的核心价值主张。在此示例中，我们将为作者添加简短的介绍。您也可以使用Divi AI来帮助您在此处使用该副本。

这些元素使用您的空间介质作为标题和段落之间的边距。

然后，在文本下方添加一个按钮模块。应用您的颜色。我们使用的是主要颜色设计变量和按钮文本。

将您的空间介质变量添加到左右填充物，并将空间添加到顶部和底部以进行按钮尺寸。这会创建一个与您的文本成正比的按钮，而不会超大。使用您的空间大变量作为顶部边距，将其与段落分开。

按钮文本应使用您的身体文本大小变量，以保持与段落文本的一致性。我们还将应用我们之前添加的按钮链接设计变量。

造型正确的专栏

右列可以容纳从图像到入门形式的任何东西。如果在较小的列中使用图像，请保持简单。您的团队，办公室或干净插图的照片效果很好。不要过度思考图像放置：中心通常在列内。对于此示例，我们将包括最近一本书的图像设计变量。并添加一个盒子阴影以使其脱颖而出。

我们还将调整图像的宽度约为90％，因此看起来更加对齐。

对于咨询网站，有时将正确的专栏空排出会产生更清洁，更专业的外观，从而完全专注于您的消息。

结果

以下结果是：

使用Divi 5的帆布缩放来测试您在不同屏幕尺寸的英雄外观。变量中的夹具（）函数应自动处理响应能力。

尽管黄金比例变量可提供出色的比例和谐，但您可能需要根据特定内容进行少量调整。长标题可能需要稍小的文字。简短，有力的标语可以处理更大的尺寸。一些品牌风格要求更紧密或更松散的间距。

设计变量的优点在于，这些更改仅需两次点击。打开变量管理器，调整您的H1大小或空间大变量，然后观察偏移立即在整个网站上应用。

您的H1应该保持突出，但在移动设备上可读（最低47px）。在任何屏幕尺寸上，您的间距应感到宽敞，但不会过分。两列拆分为您提供了经典的专业布局，它对服务业务的效果很好，在那里，信任和清晰度比华丽的设计元素重要。

保持范围内的黄金比率，并具有期权组预设

设计变量处理数字，但是选项组预设确保它们在整个站点中持续使用。

使用我们创建的变量构建第一部分。获取版式，间距和布局完全正确。然后单击每个样式组旁边的预设图标（排版，间距，边框等），然后将它们保存为选项组预设。

这会创建可重复使用的设计块，这些设计块已经包含了您的黄金比例。每次添加新的部分或模块时，都不会从头开始，而是将这些预设应用。

当您需要调整范围内的比例时，请更改一次变量。使用它的每个预设都会立即在整个网站上进行更新。没有狩猎单个页面进行更改。

没有手动工作，您的黄金比率保持一致。

数学到美丽的设计，Divi 5使它变得容易

当布局看起来“几乎正确”时，这种na的感觉终于有意义。您并不是很挑剔：您的大脑正在恢复感觉的比例关系。

黄金比率为您提供了一个可靠的起点，但是大多数建筑商都可以使您每次进行数学。 Divi 5的设计变量系统完全更改。一次计算您的1.618比例，将它们保存为变量，然后单击网站上的任何地方应用它们。

需要调整五十页的间距吗？更改一个变量，而不是单独编辑每个页面。是否需要遵循黄金比率的一致版式？将夹具（）值设置一次，并观察它们在所有设备中完美扩展。

数学到处都可以使用，但是Divi 5实际上使使用始终如一地使用是实际的。