黄金分割在UI设计中的运用

（如上图）音乐专辑封面为正方形，最佳兴趣点就是正方形的中心点，封面人物重心放在正方形的中心，封面放在靠近上黄金分割线的位置；大标题差不多在左上最佳兴趣点的位置，整个画面重心在左黄金分割线的位置，为了达到视觉平衡，右上角加了一个头像形成大小对比，让画面更稳定，不至于左边太重而失去平衡。加上播放按钮/推荐的封面后再调整。（如下图）

04

黄金螺旋线

斐波那契螺旋线也称"黄金螺旋"，是根据斐波那契数列画出来的螺旋曲线，自然界中存在许多斐波那契螺旋线的图案。是自然界最完美的经典黄金比例。

斐波那契螺旋线，以斐波那契数为边的正方形拼成的长方形，然后在正方形里面画一个90度的扇形，连起来的弧线就是斐波那契螺旋线。

斐波那契数列（FibonacciSequence）数列是这样一个数列：

1、1、2、3、5、8、13、21、34、55、89…

在数学上，斐波那契数列是以递归的方法来定义：

F0=1

F1=1

Fn=F(n-1)+F(n-2)

(n>=2，n∈N*)

斐波那契数列比在字号大小、界面布局、Logo设计上具体有哪些用法？

字号大小

4.1.1 大字体与小字体比例系统

我们在选择一个字号大小做为参考时，我们正常会选择最大字号或最小字号做为参考。按照黄金比1:1.618可以得到比它大的字体，按照黄金比1:0.618可以得到比它小的字体。

为了方便排版，我们除了可以使用黄金分割比外，还可以使用斐波那契数列比。可以有更多灵活的排版方式，通过对比可以选择最适合的。

斐波那契数列比1:1/1:2/1:3/2:3/1:5/2:5/3:5 ...

如上图我们可以根据字体的高度比来排版，这里我们大字高度：间距：小字高度比为8:5:5，可以灵活使用斐波那契数列比，多排几个版式找到最适合的一个。

4.1.2 文字的长度比例

在设计字体大小的时候，可以根据字体的长度来做为参考，黄金螺旋线整体长度为140px,下面的字体比较长我们就乘以1.618来得到比较大的比例226.52，取整数为226，我们对应长度字号取整数即可。

界面布局

上图案例由UISTAR提供，整个界面的布局很舒服，字间距也恰到好处。在做后台界面，客户端界面时候很多时候会出现界面分段布局，很多时候认为后台不是特别重要而忽略了它的美观性。看下图我们应该怎么通过斐波那契数列比来切割画面