什么是黄金比例?
斐波那契数列是它前面两个数的和。它是:0,1,1,2,3,5,8,13,21等等,到无穷大。根据这种模式,希腊人发展了黄金比率,以更好地表达序列中任意两个数字之间的差异。这与设计有什么关系?当你把一条线分成两部分,长部分(a)除以小部分(b)等于(a)+(b)除以(a)之和,两者都等于1.618,你就可以找到黄金分割率。此公式可以帮助我们创建形状、图标、布局等。

我们也可以采用这个想法并创建一个黄金矩形。取一个正方形和多个单面1.618来获得一个新的形状:一个比例和谐的矩形。

如果将正方形放在矩形上,两个形状之间的关系也是黄金比例。

如果继续将黄金比例公式应用到最右边的新矩形,将得到一个由越来越小的方块组成的图像。

如果在每个方格上画一个螺旋线,从一个角开始到另一个角结束,将创建斐波那契序列的第一条曲线(也称为黄金螺旋)。

如何在设计中使用黄金比例
既然已经了解如何计算黄金比例,如何将这些知识应用到每天的工作中呢?
以下是在设计中使用黄金比例的方法:
1.排版和定义层次结构

黄金比例可以帮助我们确定在网站,登录页面,博客文章甚至打印中应使用的标题和正文副本的字体大小。假设文本副本是12px。如果将12乘以1.618,你将获得19.416,这意味着标题文本大小为19px或20px将遵循黄金比例并平衡12px正文字体大小。如果想弄清楚内容文字大小应该有多大,可以反过来计算。如果标题文本为25px,则可以将其除以1.618以确定正文(15或16像素)。
2.裁剪和调整图像大小


裁剪图像时,很容易识别要剪切的空白区域。但是,在调整大小后,如何确保图像仍然平衡?可以使用黄金螺旋作为图像构图的指南。例如,如果在图像上叠加黄金螺旋,则可以确保焦点位于螺旋的中间。
3.布局

利用黄金比例可以帮助我们设计一个视觉上吸引人的用户界面,吸引用户注意最重要的事项。例如,一个突出显示左侧内容较宽的内容以及右侧较窄列的页面可以遵循黄金比例的比例,并帮助我们决定放置最重要内容的位置。