1. 爱猫说设计狮网首页
  2. 学设计

黄金比例设计诀窍 | 向和谐致敬,黄金比例的终极指南

想要让消费者看到漂亮的图片?继续阅读了解黄金比例以及它要如何赋予图像更多魅力。

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

黄金比例

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

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

定义黄金比例

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

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

不过,想要真正掌握这个概念,你必须这样看待黄金比例:

(A+B)/A = A/B

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

我们知道─这很难用文字说明,所以我们准备了一个可以协助你的便利形象。

<span class='yzk_title_5602'>黄金比例设计诀窍 | 向和谐致敬,黄金比例的终极指南</span>-爱猫说设计狮网

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

<span class='yzk_title_5602'>黄金比例设计诀窍 | 向和谐致敬,黄金比例的终极指南</span>-爱猫说设计狮网

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

自然界里的黄金比例

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

<span class='yzk_title_5602'>黄金比例设计诀窍 | 向和谐致敬,黄金比例的终极指南</span>-爱猫说设计狮网

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

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

巧合的是,意大利数学家斐波那契的理论也已受大自然印证。当数列转换成图样,你会得到弯曲的螺旋。计算这些螺旋,你最后会获得斐波那契数。就像《Live Science》的解释:“斐波那契螺旋是在一系列斐波那契数为尺寸的正方形里,以一连串四分之一圆连结起来的图形。由于数列的天性,也就是下个数字为前两个相加,正方形能够彼此完美结合。”

<span class='yzk_title_5602'>黄金比例设计诀窍 | 向和谐致敬,黄金比例的终极指南</span>-爱猫说设计狮网
作者 space_heater

让我们回到黄金螺旋。《Live Science》继续说明:“任两个连续斐波那契数字的比例都非常接近黄金比例,大约是 1.618034。斐波那契数数对的数字愈大,近似值就愈接近。” 不需要再怀疑物体或形状能够这么迷人的原因。概率就是数学需要为其持久美感感谢的元素。

<span class='yzk_title_5602'>黄金比例设计诀窍 | 向和谐致敬,黄金比例的终极指南</span>-爱猫说设计狮网
作者 Victority

数学与美学的汇合处

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

<span class='yzk_title_5602'>黄金比例设计诀窍 | 向和谐致敬,黄金比例的终极指南</span>-爱猫说设计狮网

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

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

设计的黄金比例

网页、广告、杂志封面以及插图都受益于这个古老的数学原则。黄金比例可以用来导引物体位置、图标形状等等。

<span class='yzk_title_5602'>黄金比例设计诀窍 | 向和谐致敬,黄金比例的终极指南</span>-爱猫说设计狮网

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

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

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

<span class='yzk_title_5602'>黄金比例设计诀窍 | 向和谐致敬,黄金比例的终极指南</span>-爱猫说设计狮网

这个使用者界面(UI)策略还有个额外好处:它能协助读者浏览影片、摄影照片和文字内容。你可以在网络里找到许多这类版面的范例,因为一个简单的原因,就是它有效。查看一下像是 Fast Company 或 BuzzFeed 的网站首页,你就能看到这种双字段的版面。

相同的结果也能在 Salon.com 网站找到。借着在符合黄金比例的双字段里置入引人注目的照片以及热门影片,Salon 让访客从目前内容前往浏览下个内容的过程达到视觉平衡。版面立刻就能达成美观又实用的效果,协助访客决定如何最好地浏览页面,同时推广 Salon 最有趣的内容。

<span class='yzk_title_5602'>黄金比例设计诀窍 | 向和谐致敬,黄金比例的终极指南</span>-爱猫说设计狮网
截图作者 Salon

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

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

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

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

<span class='yzk_title_5602'>黄金比例设计诀窍 | 向和谐致敬,黄金比例的终极指南</span>-爱猫说设计狮网

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

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

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

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

<span class='yzk_title_5602'>黄金比例设计诀窍 | 向和谐致敬,黄金比例的终极指南</span>-爱猫说设计狮网
作者 SAAC

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

<span class='yzk_title_5602'>黄金比例设计诀窍 | 向和谐致敬,黄金比例的终极指南</span>-爱猫说设计狮网
作者 Kazi Mohammed Erfan

摄影的黄金比例

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

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

<span class='yzk_title_5602'>黄金比例设计诀窍 | 向和谐致敬,黄金比例的终极指南</span>-爱猫说设计狮网

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

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

在这个情况下,我们同样建议你将兴趣点放在线条交会处,或是在线条本身上。目标是创造具平衡感的照片。想像在取景器里放入一张方格纸。视线中的物体会如何对齐页面中的矩形呢?那些交会点能够做为照片里放置首要与次要兴趣点的指引。

<span class='yzk_title_5602'>黄金比例设计诀窍 | 向和谐致敬,黄金比例的终极指南</span>-爱猫说设计狮网

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

<span class='yzk_title_5602'>黄金比例设计诀窍 | 向和谐致敬,黄金比例的终极指南</span>-爱猫说设计狮网
作者 Sofia Zhuravetc

你可能会觉得这两种相似的方法─黄金比例以及三分构图法─能够彼此和谐配合。不过,以构图来说,哪个策略是最好的仍有不确定性。他们两者都是有用的蓝图技巧,能够增强创造迷人照片或设计的能力。但他们并不相等。

如同 Discovery 传播集团旗下的 Dnews 所述,φ网格在拍摄景物时特别有用,因为它会 “创造更平衡的图像” 并且 “让照片看起来更加自然,减少僵硬感”。如果采用三分构图法,你最后可能会获得太过沉稳的照片,以至于让它看起来有种强迫感。

下次当你要为电子报行销、广告邮件或社群媒体贴文浏览合适的风景照时,请把黄金比例放在心上。想像把φ网格放在每张图像上,然后思考如何到达照片的焦点处。一旦知道该找些什么,你到处都能发现黄金比例,并了解为什么照片能够撼动你─和你的顾客─的珍贵观点。

<span class='yzk_title_5602'>黄金比例设计诀窍 | 向和谐致敬,黄金比例的终极指南</span>-爱猫说设计狮网
作者 Tanmoy Mishra

着手应用黄金比例

如果你已经拥有希望用做行销和广告用途的图像,但他们却没遵循黄金比例或三分构图法,振作一些。只需要编辑图像,你就可以转移观众焦点,并获得精湛构图的好处。

更紧凑的剪裁能够凸显照片最重要的部分。在 Shutterstock Editor 里,你可以快速地将照片裁剪为任何尺寸,或是从预设的社群媒体尺寸中选择,让你轻松跨渠道分享。运用网格工具显示黄金比例的导引线,然后观察图像要如何处理。

<span class='yzk_title_5602'>黄金比例设计诀窍 | 向和谐致敬,黄金比例的终极指南</span>-爱猫说设计狮网

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

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

爱猫说是一个完全独立的媒体,运营只靠网络广告支撑,如果您支持爱猫说设计狮网的话,请对此网站关闭广告拦截功能(如:Adblock)爱猫说设计狮网衷心的感谢您。

本文来自作者:请叫我网站管理员,资源整理不易,且下且珍惜。如果您觉得不错,欢迎评论。本文观点不代表爱猫说设计狮网立场,转载请联系原作者。

若本文章的资源已经失效,您可以在评论区告诉我们,我们将及时更新。如果您想要获取更多资源,并与我们进行互动,请加入我们的官方QQ群:284300445。爱猫说设计狮联盟

发表评论

登录后才能评论

联系我们

15298802030

在线咨询:点击这里给我发消息  爱猫说设计狮联盟

邮件:admin@imaoshuo.cn

工作时间:周一至周五,9:30-18:30,节假日休息

QR code
error: 注意:本站内容受到保护!