黄金比例在设计中的运用

  • A+
所属分类:经验思维

本文来源: 丢丢(公众号:我们的设计日记), 共 2233 字

今天分享一个科学的设计方法黄金比例,它能让你的设计更科学严谨,黄金比例是一个≈0.618的数值,被广泛运用在数学、物理、建筑、美术甚至是音乐。在移动设计中,运用黄金分割的严密计算,打造出来的界面具有一种平衡感和生命力。

 什么是黄金比例 

黄金比例在设计中的运用

黄金比例的独特性质首先被应用在分割一条线段上。如果有一条线段的总长度为黄金比例的分母加分子的单位长,若把它分割为两半,长的为分母单位长度,短的为分子单位长度,则短线长度与长线长度的比值即为黄金比例。

 斐波那契螺旋线 

黄金比例在设计中的运用

先来认识一组数列,它们依次是1、2、3、5、8、13、 21、34、55.... 这组数列叫做“斐波那契数列”,它的特点每个数都是它的前面两个数字之和。经研究发现,相邻两个斐波那契数的比值是随序号的增加而逐渐趋于黄金比例的,即f(n-1)/f(n)≈0.618。而根据斐波那契数列画出来的螺旋曲线,被称为“黄金螺线”。

黄金比例在设计中的运用

其实在配色方面,如果你掌握不好颜色的比例,也可以使用黄金螺旋线来分配比例。

 黄金比例运用场景 

1.图标中运用

iOS系统中的图标,它有一套相应的栅格系统,而它的尺寸也不是随便制定的,而是都有着严格的比例关系。它遵循黄金螺旋线(即斐波那契螺旋线)的规则。

黄金比例在设计中的运用

▲  如上图1,小圆半径与它到图标边缘的距离a与图标边长的一半b之比为0.618 (a/b≈0.618)。

如上图2,大圆半径减去中圆半径的距离c与中圆半径d与大方形边长的一半e之比也为0.618 (c/d/e≈0.618)。

黄金比例在设计中的运用

iOS系统自带的图标也严格参照图标栅格系统进行绘制,同时,本身也利用了黄金分割原理

▲ 如上图1,健康图标的心形呈水平对称,由3个大小不一的圆构成轮廓的一半,而小圆与中圆直径之比、中圆直径与大圆的半径之比都为0.618。

如上图2,天气的云图形中的三个圆,两个大圆的半径与小圆的直径之比也约为0.618。

2.图片中运用

这里说的“图片”指的是在界面的中的图片比例。在一些需要展示图片的地方可以考虑使用接近黄金比例的尺寸。如:在sketch中以宽为375px的尺寸为设计稿时,375x0.618得到231px,将它左右范围内的数值作为图片的高度,这就是最简单的黄金比例的运用。                             黄金比例在设计中的运用

▲ 如上图1,Instagram最上方的通栏高度为143px,并不是0.618的比例,而是0.382的比例关系,这其实是黄金分割点的互补比例(注: Instagram早期在改版前使用的就是0.618的黄金比例)。

如上图2,Flipboard新闻app的登录界面,顶部的背景照片部分,也是0.382的黄金互补比例。

如上图3,Flipboard新闻app的文章展示页面,顶部的照片部分,与下半部分构成了黄金分割比。

3.间距中的运用

间距和留白一样,是设计中非常关键的因素,能营造更为和谐和舒适的空间氛围。但是我们该怎样来确定元素之间的距离呢?我想黄金分割原理就是-种非常好的办法。利用黄金分割原理来计算每个元素的位置,不仅可以提高视觉层次,大大提高工作效率,还能让你的设计有据可依,更加有说服力。

黄金比例在设计中的运用

▲ 如上图1,开眼app的闪屏和登录页都严格利用了黄金分割的原理进行排布。其中闪频以logo顶部为黄金分割点,上半部分x与下半部分y之比正好是0.618,广告语的高度k与广告语到logo组合的距离q与logo的组合高度之比也都为0.618 (k/q≈k/h≈0.618) 。

如上图2,登录页整体的布局也以“新用户注册”为黄金分割点,同时在“新用户注册”与“底部服务协议”之间也以“第三方登录按钮”为黄金分割点遵循着黄金分割原理,再来看顶部的logo组合高度m与登录表单高度n之比也为0.618。

如上图3,面包旅行的登录页面,以其第三方登录按钮的文字底部为黄金分割点,将上半部分与下半部分构成黄金比例。

通常在界面中,将屏幕宽分割成左右两部分,使它成为黄金比例。

黄金比例在设计中的运用

▲ 如上图1, App Store早期的版本中,首页推荐列表就采用了黄金比例,第2个图标与第3个图标之间的中轴线正好为黄金分割点。

如上图2,百度外卖的推荐指南,左图右文的列表,图片宽度作为黄金比例中较短的尺寸,文本区域作为较长的尺寸,以构成协调比例。

如上图3,豆瓣app的首页,左文右图的列表,图片宽度作为黄金比例中较短的尺寸,文本区域作为较长的尺寸,以构成协调比例。

4.布局中的运用

利用黄金比例对全局界面进行构图,将元素按照主次之分排布在正方形里,可以营造一个有主次有重点并且和谐的画面。

黄金比例在设计中的运用

▲ 如上图1,Soundcloud的登录页, 就是利用黄金螺旋线布局很好的范例,从背景照片的人眼(头部)位置到底部的随便看看小字正好构成了最大的正方形,而logo位于左上螺线的位置,左上角是视觉的第一落点区,右上角是视觉盲点区,非常合理的安排了主次信息。

如上图2、3,登录页,我们首先将视线落在了插画上,沿着螺旋线向左下方延伸至第三方登录按钮上,包括第三方登录按钮也落在了下半部分的黄金分割点上,每个位置都是经过精心考量的,而且很好的进行了引导。

 其它常用比例 

黄金比例在设计中的运用

黄金比例在设计中的运用

▲ 除了黄金比例之外,一般还有其他常用比例,例如1:1、1:2、3:2、3:5、4:3、16:9,设计中可以根据需求与布局来选择相应的比例。

 最后 

黄金比例只是设计决策的一种方式,是一种参考的标准,它的目的是让我们的设计更具备科学性,当然具体的设计还是需要根据实际场景和页面去定义,切勿忙碌的推崇黄金比例!希望今天这篇小分享能够帮助到大家。



发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: