黄金比例与用户界面设计( 二 ) _信息快讯

文章插图

当你像上图那样把黄金矩形划分为正方形和小一点的矩形时，小一点的那个矩形也是黄金矩形。
通过将每一个黄金矩形划分成一个小正方形和另一个小黄金矩形来，你可以无限地重复这一过程。其结果将是一个黄金螺旋——只要把每个正方形的对角连接起来就能得到这个螺旋。

文章插图

要想画出黄金螺旋，首先将黄金矩形 ABCD 划分为正方形 ABEF 与小黄金矩形 EFDC 。然后对小的黄金矩形 EFDC 重复此过程。黄金螺旋是通过连接（画圆弧）所得正方形的对角形成。
很多自然发生的元素都有黄金螺旋的存在，比方说植物以及飓风这样的天气模式。
UI设计中黄金比例的例子那么界面设计又应该如何应用黄金比例呢？我们不妨看几个常见的例子：
文字大小不同的字体大小可以用黄金比例来设置。假设网站body元素的字体大小为 16 像素。标题字体大小可以是body大小的黄金比例倍数——也就是说，可以是 16 φ = 16 x 1.618 = 25.88 或大约 26 像素。
有时候也可以利用黄金比例来确定特定字体大小所需的行高。（行高是字体高度加上文本行之间的空白高度——这个基本上决定了文本行在段落里面排列的紧密程度。）比方说，如果正文文案的字体大小为 16px ，则行高可以是 16 φ = 16 x 1.618 = 25.88 也即是约为 26px 。

文章插图

行高是字体的高度加上文本行之间的空白高度。

文章插图

上：标题与正文的大小之比为黄金比例。行高与字体大小之比也成黄金比例。行高的增加可令阅读变得更容易。下：此文本块并未使用黄金比例。
不过，结果证明，事情稍微有点复杂，因为随着行变长，行高也必须增加还能保持可读性。比方说，雷丁大学 2004 年的一项研究得出的结论是，线条越长需要的行间距就得越高，这样才方便眼睛轻松地找到下一行。如果你真的希望按照黄金比例设计排版的话，可以考虑使用黄金比例排版计算器，只要提供字体大小和线宽，它就能够计算出理想的行高。
图像裁剪要想创作出吸引人的影像，构图很重要。裁剪图像，做出强有力的构图有一种快速简便的方法，那就是让图像的焦点处在金色螺旋之上。

文章插图

通过让影像的焦点位于黄金螺旋之上，然后对图像进行相应裁剪，即可创建出强大的构图，如左侧的例子所示。

文章插图

如何用黄金螺旋裁剪图像。
网页布局当你把黄金矩形划分成一个正方形和一个小一点的黄金矩形时，自然就会创建出一个 2 列的布局。所得到的布局非常适合主要由主要内容区和侧栏构成的排版。宽松地遵循这种布局就可以给界面创建结构，并达到平衡。不过，当今的响应式网站很难完全支持所有视窗尺寸都符合黄金比例。如果你的关注重点是根据比例建立基本网格，然后让组件与其对齐的话，至少某些屏幕尺寸还是可以符合这种比例的。

文章插图

在左侧运用黄金比例的一个基本的 Web 网格结构。

特别声明：本站内容均来自网友提供或互联网，仅供参考，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。