java 黄金分割率_黄金分割率使您的网页设计更有效

java 黄金分割率

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

什么是黄金分割率？

黄金比例是一种数学比例，通常在自然界中发现，在古典设计理论中用于创建平衡的构图。 它大约等于1.6180，也被称为“黄金均值”，“黄金分割”，并由希腊字母Phi“ ϕ”表示。

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

如果您从该金色矩形中切出一个完美的正方形，则将剩下另一个金色矩形。

您可以对较小的矩形执行相同的操作，然后无限期地再次执行相同操作，从而获得以下熟悉的图像：

斐波那契数列

斐波那契数列与黄金分割率相似，但不完全相同。 它是一系列数字，其中序列中的下一个数字是前两个数字的和。 例如：0、1、1、2、3、5、8

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

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

然后一次又一次：

这可以无限期地进行下去，使我们获得与“金色矩形”相同的效果，但是这次是建立而不是削减。 黄金分割率和斐波那契数列都给我们类似的吸引力。

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

范例1：YStudio

该网站是关于什么的？

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

它如何使用黄金分割

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

为什么有效

想要在人群中脱颖而出？ Yourlocalstudio（YLS）通过在网站设计中利用黄金分割来做到这一点。 该设计具有一定网格系统的渐进外观。 您可能会争辩说， 如今，一切似乎都像引导程序 。.密切注意越来越多的站点希望通过更具结构性的动态布局吸引人们的注意。

例子2：可混搭

网站是关于什么的？

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

它如何使用黄金分割

我已经使用了UX触发器的黄金比率测试来演示Mashable如何在其布局中使用斐波那契数列。 内容布局灵活，标题位于左侧，并链接至右侧的更多新闻（由网格分隔）。

为什么有效

黄金比例在这里很有效，因为它允许内容非常丰富的网站为版式提供喘息的空间 。 使用传统的网格布局，类似的网站可能看起来内容更加密集，但是Mashable证明，即使看不见黄金分割率也可以有效。

范例3：Jackson＆Kent

网站是关于什么的？

Jackson＆Kent是法国的一家网页制作公司。 他们专注于数字服务，例如HTML5，CSS3，Drupal，Wordpress，PHP / MySQL，Flash等。

它如何使用黄金分割

上面的屏幕截图显示了布局如何在很大程度上构成了以前的客户端工作。 它还具有有关代理机构本身的内容块以及屏幕中心的导航栏。 如下所示，“接触”按钮也使用黄金分割作为网格系统，以独特的方式组织布局。

为什么有效

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

结论

黄金分割率自然将用户的视线引向用户界面中的特定点。 作为一个概念，它可以帮助您考虑内容的放置和有效使用层次结构。 布局，版式，颜色和总体原则的结合将帮助您将设计提升到一个新的水平。

翻译自: https://webdesign.tutsplus.com/articles/making-your-web-designs-more-effective-with-the-golden-ratio--cms-23459

java 黄金分割率