设计工具 ? 黄金比例使用指南 + 黄金比例计算工具

黄金比例使用指南 + 黄金比例计算工具

发表于: 设计工具. 评论
赞助商链接

黄金:这个词代表价值、完美以及成功。其适用的范围广泛,从稀有珍贵的蛋,到标志性的电影时代,再及中奖乐透彩券都是。然而,它还是一个很重要的参考…

一、黄金比例

黄金比例的概念已经流传几千年了。它塑造了许多经典艺术与建筑作品的基础,从埃及的吉萨大金字塔到艺术家乔治?秀拉(Georges Seurat)的画作《马戏团游行》(Parade decirque)都是,而且还可以经常在百科全书和学术论文中看到它的踪迹。?#36824;?#20854;在历史上的重要地位并不表示它已经过时了;事实上,黄金比例对企业来说可能是非常有价值的。在设计素材、图标以及网站时充分利用它将能够为品牌增添更有吸引力的视觉图像。

你只是需要知道该如何使用它。

二、定义黄金比例

想要了解黄金比例,你需要从它从哪里发源开始着手。这个探索带我们回到古希腊时期。黄金比例也可以用希腊字母φ(发音phi)表示,代表数值为1.61803398875。

以数学术语来说,这是个无理数,也就是一个无限不循环小数,且无法以简单分数表示(就像是著名的π,发音pi)。根据《大英百科全书》记载,黄金比例的数学观念大约?#20174;?#35199;元前500年。据信是由著名希腊学者欧几里得(Euclid)以及毕达哥拉斯(Pythagoras)完善而成。

?#36824;?#24819;要真正掌握这个概念,你必须这样看待黄金比例:

(A B)/A = A/B

请将一条线分为两部分。较长段(A)除以较短段(B)等于全长除以较长段。想要创造黄金比例,原始线条的分段除法结果必须等于1.618。

我们知道这很难用文字说明,所以我们准备了一个可以协助你理解的?#35745;?/p>

当黄金比例首次被提出时,希腊学者就知道它能?#32654;创?#36896;非常具有视觉吸引力的矩形,也就是黄金矩形。他们开始思考这个形状,以及其在设计中的比例。最后结论证明,只要?#25484;?#29256;面或构图的比例为1比1.61,图像看起来就会自然而平衡。

这?#26448;?#24618;人类从那时候开始就?#20013;?#36816;用黄金比例。它是许多我们觉得美丽的古代建筑和画作的基石。有些人认为在艺术家萨尔瓦多?达利的画作《最后的晚餐》、米开朗基罗的《创造亚当》,甚至是巨石阵里都能发现黄金比例。现今,你则可以在网页、摄影作品,以及部分全球最受欢迎的品牌图标中找到它的踪影。

三、自然界里的黄金比例

这与你和你的事业有什么关联呢?为了回答这个问题,我们必须运用另一?#20013;问?#26469;探索黄金比例。

黄金螺旋与黄金比例有密切关系。它是借着通过黄金矩形的每个部分绘制而成的连续弧形,构成流线形的螺旋。虽然希腊学者想出了为什么黄金螺旋会存在的数学解释,但是它在那之前已存在许久。你可以在大自然里找到满满的证据,像是贝壳、花瓣、松果、种子穗和螺旋星系的形?#30784;?#37096;分动物的身体也有此特色,包括海豚、海星和蜜??蜂。

黄金螺旋也与斐波那契数列(Fibonacci Sequence)有关,这会让丹布朗《达文西密码》的书迷觉得耳熟。在那个数学概念里,数列中的每个数字都是由前两个数字相加而成(例如1、1、2、3、5、8)。

巧合的是,义大利数学家斐波那契的理论也已受大自然印证。当数列转换成图样,你会得到弯曲的螺旋。计算这些螺旋,你最后会获得斐波那契数。就像《Live

Science》的解释:「斐波那契螺旋是在一系列斐波那契数为尺寸的正方形里,以一连串四分之一圆连结起来的图形。由于数列的天性,也就是下个数字为前两个相加,正方?#25991;?#22815;彼此完美结?#31232;!?/p>

作者space_heater

让我们回到黄金螺旋。《Live Science》继续说明:「任两个连续斐波那契数?#20540;?#27604;例都非常接近黄金比例,大约是1.618034。斐波那契数数对的数字愈大,近似值就愈接近。」不需要再怀疑物体或形状能够这么迷人的原因。

作者Victority

四、数学与美学的汇合处

有鉴于数学与自然间的联系,人体有黄金比例的证据也就不足为奇了。从手臂的比例(手指与前臂和上臂的相比长度)到蒙娜丽莎的脸型都符合卢卡?帕西奥利(Luca Pacioli)在1509年提出的神圣比例(Divine Proportion),也与达文西的黄金?#25351;睿℅olden Section)有异曲同工之妙。达文西在?#27573;?#29305;鲁威人》里使用了黄金比例。林布兰等艺术家也运用了这个概念。

许多学者和统计学家皆致力于衡量黄金比例对美丽脸庞的影?#26000;?#24230;。根据这些理论,计算出人脸的宽度和长度后,如果长度除以宽度得到的数字接近黄金比例,那么脸型就会是漂亮的。眼、鼻、口的位置以及其之间的距离?#19981;?#26159;吸引力的影响因素。

如果能够结合这所有的公式并将他们视觉化,创造独特的形状和图样,就能更容易在日常生活里看到他们的价值。就如同黄金比例可以?#32654;创?#36896;建筑和艺术作品的诱人视觉,它对现代设计来说也很重要。

五、设计的黄金比例

网页、广告、杂志封面以及插图都受益于这个古老的数学原则。黄金比例可以?#32654;吹家?#29289;体位置、图标形状等等。

六、在网站上和其他范围里的版面与内容

让我们从黄金比例在版面和内容里所扮演的角色开始说起。在网?#25104;?#35745;中,黄金比例能够运用在文字栏位该放在哪里以及怎么摆放。举例来说,由左方宽栏位与右方窄栏位组成的页面,可以吸引观众目光并强调最重要的部分。如果网站总宽度是960像素,左方栏位就应该是593像素,而右手边的栏位则为367像素。他们配合在?#40644;?#20250;是理想的比例。

由于版面不同,栏位尺寸并不一定能如期望般完美相加(?#35789;?#20351;用黄金比例计算机能有所帮助)。?#19988;?#27809;问题。终极目标就是尽可能接近1:1.61的比例,也就是主要内容框为侧栏的1.6倍。

这个使用者介面(UI)策略还有个额外?#20040;Γ?#23427;能协助读者浏览影片、摄影?#25484;?#21644;文字内容。你可以在网路里找到许多这类版面的范例,因为一个简单的原因,就是它有效。查看一下像是Fast Company或BuzzFeed的网站首?#24120;?#20320;就能看到这种双栏位的版面。

相同的结果也能在Salon.com网站找到。借着在符合黄金比例的双栏位里置入引人注目的?#25484;?#20197;及?#35753;?#24433;片,Salon让?#27599;?#20174;目前内容前往浏览下个内容的过程达到视觉平衡。版面立刻就能达成美观又实用的效果,协助?#27599;?#20915;定如何最好地浏览页面,同时推广Salon最有趣的内容。

截图作者Salon

七、黄金比例─以及黄金圈─会如何影响间距与形式

黄金比例也可以帮助你决定间距大小:比起其中之一个元素,要在什么地方置入另一个设计元素,最佳的留白空间等等。

回到黄金矩形,思考它能如何协助你决定要把较小、较不重要的内容放在网页的哪个地方,或什至该怎么在新图标中留白。你可能会发现它可以让作品更具焦点,还能减少想出让你和顾客都满意图像的时间。

然而,如果你仍然处于努力了解数学要如何改善品牌视觉素材的阶段,采取稍微不同的视角可能会有所帮助。运用黄金矩形,并在每个独立区域中画出正圆。就尺寸和比例来说,这些形式─被称为黄金圈─保持着黄金比例,并且能够根据需求改变位置。

不论是交叉或是重叠,黄金圈都能套用在所有的设计上,?#36824;?#20320;想改善现有图标或是重新设计都可以。在正在处理的作品里重叠黄金圈,可以让你调整他们,确保最终结果一致符合黄金比例。

如果谣言属实,Twitter的图标设计内含黄金比例与其相关的黄金圈。如果你发现这些圆圈套用在标志性的蓝鸟上,这不无道理。此图标的确非常接近黄金比例公式,这也解释了为什么成果让人这么难忘。

Twitter的鸟型并不是唯一采用黄金圈的图标。据?#34507;?#20107;可乐,还有Google的图标也都遵循黄金比例。这对图像设计师来说并不是个罕见?#35760;桑?#20197;求能够绘制完美比例的形状和图样,为观看者带来清晰整洁的画面。

有时候,重新安排黄金圈直到他们与更加熟悉的物品相似的这个简单动作,能够为下个图标设计带来灵?#23567;?#25152;有事都一样,练习造就完美,而多方测试黄金圈能达成的效果就是想出可行设计的关键。

作者SAAC

抱着这个想法,创作专家Kazi Mohammed Erfan在去年为?#32422;?#35774;下一个挑战,需要创造25个符合黄金比例的图标。借着将公式的每个部份转换为黄金圈组?#24076;?#24182;以这些形状做为指引,他得以设计出一系列拥有留白、展示平衡,最重要的是能够体现企业本质的活力图标。

作者Kazi Mohammed Erfan

八、摄影的黄金比例

除了网页和图标设计,黄金比例在摄影界也占有一席之地。如果你的任务是创造或选择有趣图像的?#22467;?#27604;例和大小至关重要,这?#24425;乔?#22823;摄影构图的主要组成要素。将拍摄主体以符合黄金螺旋版面的方式安排─把图像焦点放在螺旋曲线内─能够让你创造出因遵循黄金比例原则而更有魅力的构图。

为了简化过程,许多摄影师会使用「φ网格」。藉由将黄金矩形以及其重叠的黄金螺旋分为九部份,你会获得能够协助构图的网格。观察网格线条的交会处。那些地方是人眼自然会被吸引的区域,也就是你该在?#25484;?#37324;摆放多重元素的位置,以达成视觉平衡。

九、网格战争:评估替代的三分构图法

?#36824;?#25668;影中还有另一种构图方式,也就是三分构图法。它的原理也牵涉了具备九部份的网格。然而,在三分构图法里,网格大小全都相同。

在这个情况下,我们同样建议你将兴趣点放在线条交会处,或是在线条本身?#31232;?#30446;标是创造具平衡感的?#25484;?#24819;像在取景器里放入一?#27431;?#26684;纸。视线中的物体会如何对齐页面中的矩?#25991;兀?#37027;些交会点能够做为?#25484;?#37324;放置首要与次要兴趣点的指引。

很多数位相机都能够在萤幕上显示三分构图法网格,让使用者可以更轻松地拍出好?#25484;?#38543;着时间累积,用这种方式构图会变成第二天性。但是请谨记在心,规则总有例外。拍摄大头照时,最好能将网格线条抛在脑后,把脸放在萤幕中央。

作者Sofia Zhuravetc

你可能会觉得这两种相似的方法─黄金比例以及三分构图法─能够彼此和谐配?#31232;2还?#20197;构图来说,哪个策略是最好的仍有不?#33539;?#24615;。他们两者都是有用的蓝图?#35760;桑?#33021;够增?#30475;?#36896;迷人?#25484;?#25110;设计的能力。但他们并不相等。

如同Discovery传播集团旗下的Dnews所述,φ网格在拍摄景物时特别有用,因为它会「创造更平衡的图像」并且「让?#25484;?#30475;起来更加自然,减少僵硬?#23567;埂?#22914;果采用三分构图法,你最后可能会获得太过沉稳的?#25484;?#20197;至于让它看起?#20174;?#31181;?#31185;雀小?/p>

下次当你要为电子报行销、广告?#22987;?#25110;社?#22909;?#20307;贴文浏览合适的风景照时,请把黄金比例放在心?#31232;?#24819;像把网格放在每张图像上,然后思考如何到达?#25484;?#30340;焦点处。一旦知道该找些什么,你到处都能发现黄金比例,并了解为什么?#25484;?#33021;够撼动你─和你的顾客─的珍贵观点。

作者Tanmoy Mishra

十、黄金比例计算工具

在画册、 WEB 或 UI 设计都会用黄金比例,但设计师们不会一直记着这个计算方式,所以我们可以利用「黄金比例计算工具」。

这个工具有黄金比例、白金比例、铂金比例以及青铜比例,设计师可以手动修改数值,就能自动换算,相当?#22870;恪?/p>

黄金比例计算工具地址:?
http://www.3558247.com/examples/tools/golden-ratio/index.html

总结

在表面上,黄金矩形、黄金螺旋、斐波那契数?#23567;ⅵ?#32593;格以及所有背后的原理看起来都很复?#21360;?#19968;系列的数字能够产生自然美丽图像的想法并不那么直观。

但就像设计师、图像艺术家和摄影师们运用这个方式所证明的,黄金比例已经从一个晦涩的数学理论演化成可信的?#35760;桑?#24182;在现代社会占有一席之地。这是一个应该收为己用,然后套用在图像管理、网?#25104;?#35745;,甚至是部落格版面上的强大规则。有了基础认知,你可以更好地选择及开发吸引消费者的设计,提升参与度,并且改善品牌的视觉认知。

作者:adgiz adgiz
原文链接:https://www.shutterstock.com/zh-Hant/blog/what-is-the-golden-ratio

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:结交更多有才华的设计师?请加入UI设计QQ群,与50000名设计师交流设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
?#19981;?#36825;篇文章吗?欢迎分享到你的微博、QQ?#28023;?#24182;关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。