使用黄金比例让您的网页设计更有效

黄金比例用于各种图形布局，尤其是用于平衡文本繁重的内容。它可以帮助设计师创建层次结构并将用户的眼睛吸引到特定区域。查看以下网站示例，了解设计师如何使用它！

什么是黄金比例？ 

黄金比例是一种数学比例，在自然界中很常见，在经典设计理论中用于创建平衡的构图。它大致等于 1.6180，也被称为“黄金分割”、“黄金分割”，用希腊字母 Phi“φ”表示。

“黄金矩形”是长度是其宽度的 1.6180 倍的矩形。例如，  div 一个边长为 300px，边长为 300 * 1.6180 ≈ 485px 的 a 可以说是一个黄金矩形。

如果你从这个黄金矩形上切下一个完美的正方形，你会得到另一个黄金矩形。 

你可以对较小的矩形做同样的事情，然后无限期地再次做同样的事情，给你这个熟悉的图像：

斐波那契数列

斐波那契数列类似于黄金分割率，但并不完全如此。这是一系列数字，序列中的下一个数字是前两个数字的总和。例如：0、1、1、2、3、5、8

如果我们从一个完美的正方形开始，然后再加上另一个，我们得到一个矩形：

继续沿最长长度添加正方形

然后我们添加另一个正方形，等于总形状的最长长度：

然后一次又一次：

这可以无限期地持续下去，给我们带来与黄金矩形相同的效果，但这次是建立而不是削减。黄金比例和斐波那契数列都给了我们同样吸引人的比例。 

现在让我们分析一些我们可以看到它们在运行中的网站。

示例 #1：YStudio

这个网站是关于什么的？

“Your Local Studio”是一家位于丹麦哥本哈根的设计和开发工作室。他们专注于以任何形式使用视觉概念来创造改善环境的体验。

它如何使用中庸之道

此处的网站在其三个页面中的两个页面上使用了中庸之道。主页是对关键工作的概念性概述。但是，当您访问工作室页面时，当您向下滚动页面时，它会将一些传统的 Web 布局与黄金分割的矩形形状混合在一起。

为什么有效

想在人群中脱颖而出？Yourlocalstudio (YLS) 通过在他们的网站设计中利用黄金比例来做到这一点。该设计具有渐进式外观和明确的网格系统。您可能会争辩说，这些天，everything 看起来像 bootstrap .. 留意越来越多的网站，他们希望通过结构上更动态的布局来吸引注意力。

示例 #2：可混搭

网站是关于什么的？

Mashable 是一个新闻网站；“互联一代”的信息、知识和资源来源。 

它如何使用中庸之道

我使用 UX Triggers的黄金比例测试来演示 Mashable 如何在其布局中使用斐波那契数列。内容布局灵活，左边是标题，右边是更多新闻的链接，由网格分隔。 

为什么有效

黄金比例在这里很有效，因为它允许内容驱动的网站为排版提供喘息空间。使用传统的网格布局，类似的网站可能看起来内容更密集，但 Mashable 证明黄金比例即使在不可见的情况下也能发挥作用。

示例#3：杰克逊和肯特

网站是关于什么的？

Jackson & Kent 是一家来自法国的网络制作机构。他们专注于数字服务，如 html5、css3、drupal、wordpress、php/mysql、Flash 等。

它如何使用中庸之道

上面的屏幕截图显示了布局如何在很大程度上包括以前的客户工作。它还具有关于机构本身的内容块和屏幕中央的导航栏。如下图所示的联系按钮也使用中庸之道作为网格系统，以独特的方式组织布局。 

为什么有效

此处的示例鼓励您浏览网站并横向探索其内容。网格视图和不同大小的块形状使内容在视觉上更有趣。由于用户很可能在桌面（以及平板电脑）上查看内容，因此水平轴导航上有分页编号。这是一种查看每条内容以及整个 UI 的创新方式。

结论

黄金比例自然地将用户的注意力引导到用户界面中的特定点。作为一个概念，它可以帮助您考虑内容的放置和有效地使用层次结构。布局、排版、颜色和总体原则的结合将有助于将您的设计提升到一个新的水平。