如何使用黄金比例-xxf5a5网站设计来解释如何练习

黄金比例适用于地板布局的所有区域，尤其是文本内容的重量。它可以帮助设计人员创建层次结构，并吸引用户对特定区域的关注。看看下面的网站示例，看看设计师如何使用它！

黄金比例是一种通常在自然界中发现的数学比率，它结合了经典设计理论以创造平衡的构图。它大致等于1.6180，也称为“平均值”，“黄金分裂”，通常用希腊字母Ф表示。

“黄金矩形”表示矩形的宽度是其高度的1.6180倍。例如，一侧分为300 px，另一侧为300 *1.6180≈485px可称为黄金矩形。

1.如果从这个黄金矩形中分割出一个矩形，它将留下另一个黄色矩形：

2，你可以继续用较小的矩形做同样的动作，然后继续剪切，无限循环，你会得到这个熟悉的图像：

3.斐波那契序列

Fibonacci序列与黄金比率相似，但并非完全正确。这是一系列数字，序列中的下一个数字是前两个数字的总和。例如， 0,1,1,2,3,5,8,13,21,34,55,89,144,233,377 .此规则公式为xn=xn-1 + xn-2。

假设我们从一个正方形开始然后添加另一个正方形，我们得到一个我们需要的矩形：

4.保持添加的正方形的长度

然后我们添加另一个长度等于长度的总长度：

5，然后一次又一次:

6，这可以无限期地继续，将获得相同的黄金矩形效果，但这次是新的而不是削减。黄金比例和斐波纳契数列都使我们能够做出有吸引力的比例。

现在让我们分析一些网站，我们可以在这些网站中看到它们的用法。

示例1: YStudio

7，yourlocalstudio.dk

那是什么关于网站？

“Your Local Studio”是丹麦哥本哈根设计和开发的网站工作室。他们擅长使用任何形式的视觉概念和创建优化网页的经验。

这个网站是关于什么的？

这个网站有两到三页对黄金比例有用。主页是关键信息的概念性解释。但是，当您访问工作室页面时，您会发现它将一些传统的Web布局与黄金部分矩形混合在一起，如下页所示：

8.为什么有效？

想从人群中脱颖而出？正如Yourlocalstudio（yl）所做的那样，使用黄金比率使用网站设计。该设计使用了一个渐进的，组织良好，结构良好的网格系统，您可能会说它看起来像一个指南。请注意越来越多的网站通过更结构化的布局吸引用户的注意力

示例＃2: Mashable

9，mashable.com

这个网站是关于什么的？

Mashable是一个新闻网站，信息的来源，知识和资源的“连接世代”。

它如何使用黄金比例？

我使用黄金比率测试UX（用户体验）触发器来演示Mashable如何使用斐波那契序列布局，灵活的内容布局，左侧标题和更多新闻的链接，由网格分隔。

为什么有效？

黄金比例在这里非常有效，因为它允许内容驱动的网站为信息布局提供呼吸空间。类似的网站看起来像传统的网格布局，但Mashable表明黄金比例非常有效，即使它是不可见的。

示例＃3: Jackson＆Kent

10. www.jandk.fr

那是什么关于网站？

Jackson＆Kent是德国网络制作代理商网站。他们专注于数字服务，如

HTML5，CSS3，Drupal，Wordpress，PHP/MySQL，Flash等。

它如何利用黄金比例？

上面的屏幕截图显示了布局主要包括以前客户的工作项。它还有一个关于组织本身的内容和屏幕中央的导航栏，联系按钮，如下所示，也使用黄金分区网格系统以独特的方式组织。

什么是有效的

这里的示例鼓励您翻译网站并探索其水平尺寸，使其在网格视图和不同大小的块大小中更直观和有趣。由于用户可能正在观看屏幕上（以及平板电脑上）的内容，因此在水平轴的导航上还存在页码。这是一种以用户界面为整体来查看每条内容的新方式。