黄金比例分割使用指南

  • 经验类型规范/资料原作者:未知

  • 经验属性好文转载
  • 经验版权不使用原创授权
79835 23 470 2014-11-27

在设计中,黄金比例属于基本理论,通过运用黄金比例原则,能够打造悦人的设计,而本文的重点不在于鉴赏,而是教你如何使用黄金比例。

还记得丹布朗的那本《达芬奇密码》吗?里面有个关键线索便是斐波那契数列,而黄金比例,便是基于此。

斐波那契数列在自然界的造化物中得以完美体验,比例基本为1:1.618,我们生长在自然世界中,按相似的比例进行设计,能够愉悦我们的视觉感官。


Image title


黄金比例描述了斐波那契数列相邻两数字间的关系。

Image title


如果我们按此比例绘图,那么会唤起观赏者的一种熟识感,一种与自然之间的微妙联系。

在人类漫长的艺术与设计史中,黄金比例已经被应用了4000多年,但是我们的先祖可能更早就开始应用它了。有些人认为古埃及人便采用此法来建造金字塔。黄金比例可以在音乐、艺术、设计中得以体现。

应用案例

在历史记载中,黄金比例经常被使用到艺术和设计中,一些宏伟的建筑经常采用黄金比例为衡量准则。看看下面这些例子,你在工作中也能用得上:

巴特农神庙

Image title


这座古希腊建筑使用了黄金比例作为了尺寸比例关系。而后来的新古典主义建筑风格同样遵循了黄金比例。

最后的晚餐

Image title


达芬奇对黄金比例采取了进一步的应用,在最后的晚餐这幅画中,所有人物排列在整体的2/3处,而耶稣这一角色在构图上采用了完美的矩形

界面设计中的一些案例2010年Twitter的重设计

Image title


Apple iCloud

Image title


iCloud的图标可不是随随便便画出来的

Takamasa Matsumoto 在博客中展示了下图的设计思路

Image title


严格遵循黄金比例自然界中的案例

Image title


从贝壳到鲜花,黄金比例无处不在

仔细观察周围的大千世界,你会发展黄金比例无处不在!花朵,贝壳,菠萝,蜂巢,都遵循了黄金比例的规则。

如何构建一个符合黄金比例的矩形

步骤 01

Image title


画一个正方形。

Image title


将正方形一分为二

步骤 03

Image title


在一侧矩形中,画一条对角线。

Image title


将对角线旋转为水平线。

Image title


构建矩形,利用水平线和原始矩形为参考。

在设计中充分利用黄金比例

听起来很复杂?其实远比想象的容易!有很多快捷的办法可以帮你实现 黄金比例布局。

快捷方法

如果你熟悉“三分法构图”,那么就方便多了,这个构图法的理念是在水平和竖直方向上各自均分3等分。而连线所构成的4个交点会成为视觉焦点。

摄影师往往在拍摄时,将关键物体定格在这4个焦点上。对于界面设计、印刷海报设计来说,同理。

跟三分法差不多,如果能够采用1:1.6的比例,那么整体构图就十分接近黄金比例了。

具体方法

如果想要在设计中采用黄金比例构图,简单打个比方,比方说内容区域和工具栏吧(网页设计中),那么比例就要为为1.6:1。而在工具栏中,可以进一步按这一比例分割。

Image title


在页面布局中,黄金比例可以帮大忙,让阅读体验更加自然。

黄金比例工具01. goldenRATIO

GoldenRATIO能够保存你的比例分割设置,避免了重复工作

GoldenRATIO,Mac App Store中售价¥2.99,能够很好的兼容PS

02. Golden Ratio Typography Calculator

能够根据黄金比例原则,帮助你确定字体大小、内容宽度。

03. Phicalculator

Phicalculator 只做计算,非常专一

是一款非常棒的免费应用,适用于Mac和PC。输入数字,便能根据黄金比例给出对应的数字。

04. Atrise Golden Section

Atrise工具能让的视觉设计更符合黄金比例

无需计算,视觉上调节黄金比例分割

全部评论:23

  • 视觉客教育

    2017-12-23 11:38

    图片看不见了,楼主补图。那个啦!一般我都是用井字三分法来风格画面构图的,黄金分割率就是0.618。

  • 黛安

    2017-11-15 11:11

    @Kiriya: 博主来补图啊~

  • 你的笑容如繁花。

    2017-11-01 09:20

    前面的图片看不到啊,着急

  • WsjjMrgg

    2017-07-21 17:53

    前面几张图炸了,我本以为我电脑有问题

  • lampure

    2017-04-24 18:39

    看到推荐工具就知道一定是翻译的了~感谢分享

  • 竹溪Ven

    2017-03-06 11:48

    前面的图看不到额!!

  • Kiriya

    2017-01-24 10:40

    才看见评论之-半年之后补图了

  • shannon711

    2016-08-18 10:45

    前面的图都没有了~求补~

  • nendo

    2016-03-10 11:29

    @佑希2020: 对啊,我也知道,但是在实际运用中不知道该如何运用

  • 佑希2020

    2016-02-19 16:56

    知道比例,运用上好多还是看不懂。。

  • 跳水先生

    2015-12-29 22:09

    辛苦啦!感谢分享

  • cxy

    2015-12-17 12:06

    前面的图片都看不到了T.T

  • 涓byCarol

    2015-11-25 17:59

    没看懂,我要去多查阅一些和黄金分割比有关的设计

  • Kiriya

    2015-11-23 14:41

    @雪霁初晴: 点开Phiculator.html就好,是个小网页,PS里也有类似插件

  • Kiriya

    2015-11-23 14:37

    @killo: 黄金比例,不是大小..1:1.6,并不是大小

  • 雪霁初晴

    2015-11-23 11:10

    请问可以教教如何安装Phicalculator吗?下载后不会安装~

  • killo

    2015-11-20 16:06

    图文无关吗? icloud那设计 2个1圈的大小完全不一样啊

  • 宋小牛

    2015-11-03 16:00

    懂了

  • D_Day

    2015-10-23 14:34

    涨姿势了

  • 袁先生

    2015-08-27 15:50

    还是可以的

  • tomlijia

    2015-06-23 11:30

    茅塞顿开 !!!

  • huafan

    2015-05-15 09:45

    前面讲的还是蛮有用滴,3、2、1、5、8

  • tahr

    2015-03-03 11:42

    按前两张图的画法,画出的是Fibonacci spiral而不是golden spiral。主要是起始方块的差异。

    golden spiral:
    http://upload.wikimedia.org/wikipedia/commons/a/a5/FakeRealLogSpiral.svg

    Fibonacci spiral:
    http://upload.wikimedia.org/wikipedia/commons/9/93/Fibonacci_spiral_34.svg

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票