• Hello!欢迎来到网页设计学!
当前位置: 首页 > 设计理论 > 网页设计理论 > 如何把黄金分割法应用到网页设计中

如何把黄金分割法应用到网页设计中

.................................................................................................................................................................

“黄金比例”在自然界和我们周围的很多事物中是很常见的。你可以在花朵、蜂箱、贝壳,甚至我们的身体中发现黄金比例的存在。

理解设计的黄金比例

黄金比例(黄金分割)可以适用于各种艺术和规则。科学家声称越是接近黄金比例的物体,越能使人感觉兴奋和愉快。

自从黄金比例被发现以来,许多艺术家和建筑师们把它应用到自己的作品中。你可以在一些文艺复兴时期的杰作如建筑、绘画等作品中找到黄金比例。

没有人真正知道为什么黄金比例在视觉上能使我们感觉愉快。大多数人认为,似乎是因为它无处不在,就像是一个万能的东西用在哪里都合适,换句话说,它正好使我们的大脑产生舒服的感觉。

那么,什么是黄金比例?

golden-ratio-in-designs-01

黄金比例在希腊被称为“Phi”,是一种数学常数。它可以通过公式A / B = A + B / A = 1.618033987,其中A大于B。

黄金螺旋是使用黄金矩形创建的。如上图所示的图像中,通过构建多个嵌套黄金矩形。

例如向日葵,其他种子围绕一个种子从中心延伸并向外生长,这些通常是形成螺旋状类似于黄金螺旋的图案。

golden-ratio-in-designs-02

在艺术与建筑应用:

希腊的帕特农神庙利用黄金比例建成。其高度、宽度、柱子的距离、以及门廊的大小尺寸关系都被认为是相对于黄金比例的。这可能就是为什么自古以来它被成为最完美和谐的建筑的原因。

莱昂纳多·达芬奇也是黄金比例的粉丝。他的作品蒙娜丽莎所产生的奇妙美感可能就是因为她的脸和身体遵循黄金比例,在本质上与真正的人的面孔比例相同。此外,莱昂纳多·达芬奇在最后的晚餐中安排人物的位置也是在使用黄金比例的方式。

golden-ratio-in-designs-03

黄金比例应用在标志设计:

现在,让我们把重点放在如何能够把黄金比例应用在标志设计中。首先,我们分析一些世界上著名的品牌LOGO已经使用黄金比例的案例,以完善自己的LOGO设计。

golden-ratio-in-designs-04

很显然,苹果已经用黄金比例切出了苹果标志的形状。结果显然是一个完美的更具视觉美感的标志设计。

golden-ratio-in-designs-05

丰田的标识遵循a和b比率以形成勾画出三个环的网格。请注意这个标志使用的是矩形,而不是用圆圈打造黄金比例。

golden-ratio-in-designs-06

百事标志由两个相交的圆组成,其直径大小也是遵循黄金比例的。

除了丰田和苹果,还有其他几家公司的标识如BP、iCloud、Twitter和了Grupo Boticario等都被认为已经采取了黄金比例在LOGO设计中。

那么我们如何把它应用在网页设计中呢

如果你是一个有经验的网页设计师,你可能已经猜到了哪里可以应用以及如何应用。是的,我们能有效利用黄金比例到我们的网页用户界面的布局中。

1、黄金矩形(Golden Rectangle)

golden-ratio-in-designs-08

在网页设计布局时,根据功能的不同将网页分成几个矩形,这些矩形的大小参照黄金分割比例,这样就形成了很多黄金矩形。这些矩形可以解决你在网页设计布局中碰到的大部分困惑,比如你可以通过这些黄金矩形来决定flash或者图像该放在首页的什么地方,也可以决定侧边栏、网站底部内容的位置。一些电子商务网站在设计产品的展示时尤其可以参考一下黄金矩形。

2、更简单的方法“三分法”:

golden-ratio-in-designs-09

就像前面说过的一样,在设计网页时,不应该完全拘泥于某个设计理论,网页设计不需要完全遵循1.618这个数值。三分法是运用黄金分割的一个简单实用的方法。

三分法是用两条水平线和垂直线将构图在水平和垂直方向上三等分。这四条线交叉会形成四个点,这四个点称之为关键点,重要的设计元素最好放置在这四个地方。很多网页设计已经在不知不觉中运用了三分法,如网站重要的信息(logo、导航栏)会放置在左上角,右上角可能会放置重要性稍微低一点的的内容。当你在考虑放置标题、按钮和链接的位置时,就可以考虑用三分法来做参考了。当然,同样要灵活运用,不要“严格遵循”。

本文链接:如何把黄金分割法应用到网页设计中

转载声明:本站文章若无特别说明,皆为原创,转载请注明来源:网页设计学,不可只有文字没有链接,请尊重他人的劳动成果!否则我们将追究其责任。

特别说明:本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!


...........................................................................................................................................................

相关文章

One Response to 如何把黄金分割法应用到网页设计中

  1. 爱奇趣分享网说道:

    网站不错,欢迎回访!

发表评论

友情链接:

  • 网页设计

专业网页设计师交流平台 设计交流QQ群: 网页设计交流