发布时间：2023-10-25 分类： 电商动态
埃及金字塔，蒙娜丽莎，推特，百事可乐，这些东西有什么共同之处？答案很简单。它们似乎彼此不相容。它们旨在遵循黄金比例原则。这也是我们今天要探讨的主题：黄金比例。由于黄金比例具有独特的美学价值，因此被广泛应用于许多领域：数学，物理，建筑，艺术乃至音乐。此外，金栗子的比例在日常生活和自然中无处不在：舞台记者不是站在舞台中间，而是站在一边;从树枝的顶部往下看，它的叶子按照黄金比例排列。然而，很少有人将黄金比例与网站建设结合起来。事实上，在网页设计中使用黄金比例可以带来无与伦比的比例，协调和艺术性，给网站带来独特的审美。今天，小飞将带您了解什么是黄金比例，如何在网站上应用黄金比例和一些优秀的例子，我希望能给你一些灵感和灵感。
什么是黄金比例?
通常我们将使用线段来解释这个概念：将线段分成两部分，较短部分与较长部分长度的比率等于较长部分与总长度的比率，比率为无理数，取前三位数的近似值为0.618。由于这样的比例通常会给设计带来和谐和美感，因此被称为“黄金”比例（或黄金分割，中国与外国比例等）。下图中的公式可以为您提供参考：
黄金比例的使用已经存在了数千年，从埃及金字塔到雅典的帕台农神庙，从米开朗基罗的西斯廷教堂到芬奇的蒙娜丽莎，从推特的标志设计到百事可乐的标志设计，甚至是面对这个数字比例。事实上，似乎我们更有可能被黄金比例的物体和图片所吸引。这种反应几乎是潜意识的。我们的大脑甚至可以微调眼睛所看到的接近黄金比例，加深其记忆和对事物的印象。
黄金比例也可以应用于图形。只需取出一个正方形并将其一侧放大1.618倍，就会出现黄金比例矩形。当您将原始正方形与新矩形重叠时，您可以更清晰直观地看到黄金比例。
如果您继续以这种方式填充图像右侧的方块，则填充的方块将变得越来越小。当你沿着每个正方形的对角线从大到小绘制拱形时，你将绘制一条螺旋曲线（如下图所示），通常称为金螺旋，或斐波那契即螺旋。有趣的是，自然界中有许多斐波那契螺旋形图案：蕨类植物，花朵，贝壳，甚至飓风。这就是为什么我们经常觉得这些东西在视觉上无法形容。
我们可以更进一步，在每个方块中切出一个圆圈，其中黄金比例为0.618，是最好的圆形。
在网页设计中如何使用黄金比例?
在上面的段落中，我们对黄金比例和黄金螺旋有了一定的了解，我们得到了一个跟随黄金比例的矩形和圆形。然后我们将看看如何在网站中使用设计美学。由于黄金比例以各种形式呈现，我们可以在多个元素中使用它，例如布局，间距，内容，图像和图形。
1、布局：将网页尺寸设置为黄金比例
在布局中使用黄金比例是非常有效的，关键是控制比例和大小，并掌握0.618的黄金比例。例如，如果使用960px宽度布局，则将其乘以0.618以获得594px，这是页面布局的高度。在此基础上，您可以将整个布局划分为一列正方形，一列矩形，以及更直观的黄金部分表示，使网站更具吸引力。
这种双列布局在网页设计中非常实用，许多网站选择这种设计方法。即使是着名的国家地理杂志也是这样的。整个页面看起来整洁可读，元素组织和层次化，用户浏览时会更流畅。
2、间距：使用黄金螺旋布局
间距与白色空间相同，是设计中非常重要的元素。合理的间距有助于突出网站的核心内容，使网站的布局更加协调。不适当的间距会影响用户体验并影响网站的品牌形象。同时，在网站上制作合理的间距通常需要花费很多时间。那么我们如何快速有效地安排网页间距呢？使用Golden Spiral是一个不错的选择。使用图形合理地放置每个元素，并根据精心计算的比例格式化网站间距，而不仅仅是直觉。此外，如果您同时处理多个元素，还可以对金色螺旋进行分层，以使页面的比例设计更加协调。
Moodley Design Studio是一款栗子，为布雷根茨音乐节设计了海报，节目和标识。程序表的整体设计采用摄影拼贴的方法，具有大量的空白空间，各种元素的设计比例，位置和空白由金色螺旋排列。
新加坡柠檬平面设计公司在Terkaya Wealth Management的平面设计方面也依赖于Golden Spiral的布局。卡上的三个元素：鹰，文本和大鹰的位置都是合理的。
3、内容：沿着黄金螺旋的轨迹
除了使用金色螺旋来排列网站的间距外，我们还可以使用它来确定网页内容的位置。根据金色螺旋的定理，人眼总是在不知不觉中注意螺旋的中心，所以我们应该注意螺旋的中心，把用户可能感兴趣或最重要的内容，以及让访客得到它。信息更容易。另外，更重要的信息应放在螺旋内，这更加显着。以下是涉及的三种栗子：
以国家地理杂志网站为例。如果仔细查看其主页，您会发现其内容是根据金色螺旋的轨迹排列的。由于人们可能下意识地关注这条轨迹的中心，国家地理杂志将其标志放在这里，再次突出了品牌形象。该网站的其他重要元素也包括在螺旋中。
以下Tim Roussilhe设计师的网站也是如此。虽然网站的内容非常庞大，信息量很大，但网站的整体布局非常紧密，信息组织非常有条理，元素众多而且不混乱。左上角的内容旨在遵循金色螺旋的轨迹。访客将在登录时首先看到“Bonjour My Name is Tim”的文字，然后是左上角的详细文本，菜单按钮和徽标。在用户注意到完整的空白之前，他们已经浏览了所有必要的信息，这就是设计的目的。
Helms Studio在为Fullsteam Brewery设计品牌时，它还使用金色螺旋来安排网站的内容。各种不同的元素放置在不同的块中，访问者可以浏览中心字符，密封，ABV字符以及制造商位置的位置。这种浏览体验自然而方便。
4、图片：黄金比例和三分法
无论图片是用于信息传递还是美学呈现，图片的构图也很重要。使用图片中的黄金比例和三点法，使用线条和交叉点创建视觉中心，使它们更引人注目，更重要。在图片中使用黄金比率是指将图片分成三个不相等的块。三个块的比例应为1: 0.618: 1，即第一列和第三列的宽度为1，第一列的宽度为0.618，水平面积也相同。通过这种方式，我们可以通过这些线或交叉点排列图片的位置和大小，看看如何吸引更多的关注，增添乐趣和活力。除了黄金比例，我们还可以使用三点法来切割图片。从某种意义上说，三分法是黄金部分的一种变体，使用起来更简单。它是将图像分成三个相等的部分，比例为1: 1: 1，这样的图像是完全平衡和均匀的。这样我们就可以围绕中心矩形排列重要元素。
“复杂”杂志的封面是女演员索朗格·诺尔斯的特写镜头。它使用黄金比例合理地排列图片中的正负空间。角色的鼻子和眼睛落在线的交叉处，这是吸引游客注意的理想场所。
当Jason Mildren为Pilot杂志设计封面时，他使用三点法构建了视觉重心。模型的眼睛，拇指和手臂轴位于视觉重心上。字符位置位于布局的右下角，左侧。它不仅突出了关键点，而且实现了和谐统一。
5、图形：黄金比例圆形
正如黄金比例可用于创建比例协调矩形（在前面的点中提到），它也可以用在圆上，完美的圆应该遵循0.618的比例。让我们仔细看看百事可乐和Twitter徽标在网页设计中黄金比例圈的应用！
百事可乐的标志由两个黄金比例的圆形交叉点组成。尽管较小的圆圈在重叠中不那么显眼，但它确实为徽标中间的白色块奠定了基础。
Twitter的徽标设计由许多金色圆圈构成，但在使用黄金圆圈时不会使用相邻的刻度圆圈，乍一看可能不准确，但它同样和谐。
事实上，黄金比例的最大吸引力在于它可以使网站的元素独立并以协调一致的方式连接它们。这种位置调整可能很微妙，但它是良好设计和良好设计的分水岭。此外，黄金比例可以在网站上使用的地方可能远远超过这个。更多的使用方法要求我们在持续的实践过程中进行探索和总结。使用您网站上的黄金比例和黄金螺旋！来到起飞页面自助平台（http://www.qifeiye.com/?t_wd=a5）成为一个快速响应的网站！
