埃及金字塔、蒙娜丽莎、Twitter、百事可乐，这些东西有什么共同点？ 答案很简单。 看起来像风马牛的它们在设计时遵循了黄金比例的原则。 这就是今天我们要探索的主题：黄金比例。 黄金比例因其具有独特的美学价值，广泛应用于数学、物理、建筑、美术乃至音乐等诸多领域。 除此之外，黄金比例的栗子在日常生活和自然中也有很多。 舞台的幕布不是站在舞台中央，而是站在一边。 从嫩枝顶端俯视，那片叶子按黄金比排列。 但是，很少有人把黄金比例和网站建设联系起来。 其实，在网页设计中使用黄金比例，可以带来无与伦比的比例性、协调性、艺术性，赋予网站独特的美感。 今天小飞就给大家介绍一下黄金比例是什么，如何在网站上应用黄金比例，以及一些优秀的例子。 我想给大家启发和灵感。
黄金比例是什么？
通常用线段分割来说明这个概念。 将一条线段分成两部分，短部分与长部分的长度之比等于长部分与总长度之比，其比为无理数，其前三位数字的近似值为0.618。 这种比例往往带来设计的和谐与美感，因此人们将其称为“黄金”比例(或黄金分割、中外比例等)。 下图中的公式可供参考。
活用黄金比已经有几千年的历史了，从埃及金字塔到雅典的帕特农神庙，从米开朗琪罗的西斯廷教堂到达芬奇的蒙娜丽莎，从Twitter的标志设计到百事可乐的标志设计，人脸都遵循着这个数字比例。 事实上，我们似乎天生就容易被具有黄金比例的物体和照片所吸引。 这个反应几乎是无意识的，我们的大脑会对眼睛看到的东西进行微调，使其接近黄金比例，加深自己对事物的记忆和印象。
黄金比例也适用于图形。 适当取出正方形，将其一边放大到1.618倍，就会出现黄金比例的矩形。 如果将原来的正方形和新的矩形重叠，可以更直观地看到黄金比的存在。
像这样在图像右侧的矩形上继续填充正方形的话，填充的正方形会越来越小。 沿着各正方形的对角线，从大到小依次绘制拱形，将绘制下图所示的螺旋状曲线。 这条曲线通常称为黄金螺旋或斐波那契螺旋。 有趣的是，自然界中有很多斐波那契螺旋线的图案，比如蕨类植物的茎、花、贝壶和飓风。 所以我们经常感觉到这些东西在视觉上有着无法言喻的魅力。
此外，还可以将圆内接在每个正方形中。 这些日元遵循0.618的黄金比例，是比率最高的日元。
在网页设计中如何使用黄金比例？
上一段对黄金比和黄金比的螺旋有了一定的认识，获得了遵循黄金比的矩形、圆形。 下面，我们来看看在网站上如何使用来提高设计的美感。 黄金比例的表现形式多种多样，可用于布局、间隔、内容、图像、图形等许多要素。
1、布局：将页面大小设置为黄金比例
在布局上使用黄金比例很有效，重点是控制比例和尺寸，掌握0.618的黄金比例。 例如，如果使用宽度为960px的布局，则将其乘以0.618可以获得594px。 这就是网页布局的高度。 在此基础上，可以将整个布局分为一排正方形、一排矩形，更直观地表达黄金分割，使网站更具吸引力。
这种两栏布局便于网页设计，很多网站都选择了这种设计方法。 甚至连家喻户晓的国家地理频道，整页看起来都很干净，易读，各元素组织有序，层次清晰，让用户在观影时也更加流畅。
2、间隔：使用黄金螺旋布局
和页边距一样，是设计的重要要素。 适当的间隔有助于突出网站的核心内容，使网站布局更加协调，不适当的间隔会影响用户体验，影响网站品牌形象。 同时，在网站上建立适当的间隔需要很多时间。 那么，如何才能快速有效地设置网页间隔呢？ 使用黄金螺旋不仅适用于直观，还适用于以图形方式合理排列各个元素，并按仔细计算的比例排版网站间距。 如果同时处理多个元素，还可以对黄金螺旋进行分层，使网页的比例设计更加协调。
Moodley设计工作室是栗子，他设计了布雷根茨艺术节的海报、程序、标志等品牌标志。 程序的整体设计采用照片拼贴方式。 有很多空白。 其中各要素的设计比例、位置和页边距由黄金螺旋配置。
新加坡的Lemon Graphic设计公司在对terkayafortunemanagement公司进行视觉形象设计时，也采用了黄金螺旋的布局方式。 卡片上的三个要素：鹰、文本、鹰的位置配置有合理依据。
3、内容：沿黄金螺旋轨迹
除了使用黄金螺旋设置站点间距外，还可以使用它来确定web内容的位置。 根据黄金螺旋定理，人眼总是无意识地关注螺旋中心，因此应该重视螺旋中心地带，将用户感兴趣的可能性或最重要的内容放在这里，方便访问者获取信息。 另外，重要的信息放在螺旋的内侧会变得明显。 接下来是三个相关的栗子：
以国家地理网页为例。 如果你仔细看首页，你会发现它的内容是沿着黄金螺旋的轨迹配置的。 由于人们可能会有意识地关注这条轨迹的中心，《国家地理》杂志在这里放置了标志，再次强调品牌形象。 网站内的其他重要要素也是螺旋覆盖的。
下面的Tim Roussilhe设计师的网站也一样。 虽然网站内容多、信息量大，但整个网站布局非常紧密，信息组织严密，要素多而不乱。 左上角的内容是沿着黄金螺旋线的轨迹设计的。 访问者在登录的瞬间进入&； #039； Bonjour My Name is Tim&； #039； 的文字，然后去详细的文本，菜单按钮，左上角的标志。 设计的目的是在用户注意到足够的空白之前，浏览所有需要的信息。
Helms工作室在进行Fullsteam Brewery的品牌设计时，也同样利用黄金螺旋来配置网站的内容。 各种要素被排列在不同的区块中，访问者可以沿着中心人物、印章、ABV文字、厂商所在地的轨迹进行浏览。 这样的参观体验自然而方便。
4、图：黄金比例与三分法
图像的构成也很重要。 图像是否是传达信息或表达美感的目的无关紧要。 在照片中使用黄金比和三分法，可以使用线和交点来构建视觉中心，吸引眼球，强调重要的信息。 如果在图像中使用黄金比例，则将图像分割为三个不同的块。 三个方块的比率必须是1:0.618:1。 也就是说，第一列和第三列的宽度为1，第二列的宽度为0.618。 水平区域也是如此。 这样，我们可以通过这些线条和交点合理安排照片的位置和大小，看看如何能引起用户的注意，提高兴趣和活力。 除了黄金比以外，还可以使用三分法剪切图像。 三分法在某种意义上是黄金分割的变体，在使用上更为简单。 这是将图像三等分，比例为1:1:1，这样的图像完全平衡均匀。 这样，可以排列围绕关键要素中心的矩形。
Complex杂志封面是女演员Solange Knowles的绝佳写照，它运用黄金比例合理安排照片中的正空间和负空间，人物的鼻子和眼睛正好落在线条的交点上，是吸引观众注意的理想位置。
Jason Mildren在设计Pilot杂志封面时，运用三分法构建视觉重心。 图模型的眼睛、拇指、手臂轴心均位于视觉重心上，人物位置靠右下方，空白靠左上方，重点关注布局，实现和谐统一。
5、图形：黄金比圆形
正如前面几个点所述，也可以用于圆形，以便用黄金比例制作成比例的矩形。 完美的圆形必须遵循0.618的比率。 用百事和Twitter的logo详细分析一下黄金比例在圆形网页设计中的应用吧。
百事可乐的标志由两个黄金比的圆形交叉构成。 小小的圆形在重叠中并不显眼，但确实为标志中间的白色块奠定了基础。
Twitter的标志设计是用几个黄金比的圆构建的。 只是，使用黄金比的圆时，没有使用邻接比率的圆构筑。 乍一看可能不准确，但一样和谐。
实际上，黄金比例最大的魅力是，使网站内的各要素独立存在，同时用和谐一致的方法连接起来。 这个位置的调整可能很微妙，但是是好设计和好设计的分水岭。 另外，网站中可以使用黄金比例的地方可能不止这些。 要想更多地使用，就需要在实践过程中摸索总结。 在你的网站上使用黄金比例和黄金螺旋吧！ 快点在起飞页面自助建设平台上建立响应式网站吧。
详情请访问云服务器、域名注册、虚拟主机的问题，请访问西部数码代理商官方网站： zhuji.chenqinet.cn