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

（如上图）根据画面的丰富程度，我们把图片放在靠近上黄金分割线的位置，把图片中主体的放在靠近右黄金分割线附近。然后再添加内容丰富画面，我们为画面添加logo/数据/导航/分类/按钮，让画面更丰满。（如下图）

2.2.3、视线的影响

人和动物的视线朝向会影响到它的摆放位置。

（如上图）小狗狗的视觉朝向是左边，所以我们肯定得把小狗狗放右边。因为它是一个不规则造型，当遇到不规则造型时我们应该尝试找到它的重心，正好它整个形态成一条直线，它的重心应该是沿鼻子的往右的一条隐形的线。主体确认好后，我们在加上logo/标题/正文/导航进行排版，保证画面平衡进行微调。（如下图）

简化的黄金分割线

三分线

我们还有个困难，那就是0.618:1的黄金分割线的位置确实不是很好找。所以对于设计师来说，我们有一种简化黄金分割线的做法？就是三分线。

什么意思呢？左边是黄金分割线，右边是三分线。三分线就是均匀的把长方形的长和宽切三段，均匀的砍三段，每个方格都是一样大小。

三分线的位置跟黄金风格线的位置差不了多少，但是黄金分割线比起三分线更靠近中央的位置，是这么一个概念。

(如上图)绿色的虚线是右黄金分割线的位置，黄色的虚线是右三分线的位置，我们没有直接把主体的重心直接放在黄金分割线上，在这个画面中，因为左右的信息量很大，给人很重的压迫感，所以主体如果太靠近左边就会让画面失去平衡，这时候我们就把主体放在了三分线上。

不要说很严谨的把它重心摆在三分线上，一来黄金分割线真实所在的位置是三分线往里靠一点的位置，二来我们说黄金分割线构图／三分线构图不是说让你一定要完全重叠，大差不差就行，具体情况还是要具体分析。

黄金分割还不止这么多的表现形式。它还有一种更复杂的表现形式叫黄金螺旋线。而从黄金螺旋线里可以推倒出一个黄金兴趣点。

于是我们就把最佳兴趣点和黄金螺旋线都统称为黄金分割的衍生品。在设计中应该是算比较高级的一种构图技法了。

 03

最佳兴趣点

来看看黄金螺旋线衍生的最佳兴趣点在什么位置？（如下图）

在设计中实际应用的时候，想找出这个点来绝对不是很容易的事情。所以怎么办呢？有简单找到最佳兴趣点的方法吗？长方形的一条斜线链接起来，另一个顶点画一条垂直于这条斜线的点基本就是最佳兴趣点的位置。（如下图）

画面中不止一个最佳兴趣点，一个画面中会有四个兴趣点。会更好的方便我们利用。（如下图）

画面长宽比不同，最佳兴趣点的位置也不同。这里我们列举常用的长宽比尺寸4:3/3:2/16:9/1:1。（如下图）

在移动端主流尺寸中，iOS尺寸使用750*1334，安卓尺寸使用1080*1920。这俩个尺寸正好等同于一倍图375*667的比例。