我想说说那些鲜为人知的设计原则。希望他们不仅督促我学习学习，也提醒别人——设计不止是渐变和投影。今天通过一个小小的界面案例，和大家分享作者在实际工作中是如何操作黄金分割和斐波那契数列来进行设计过程的。
交互方案如下。今天因为只讲设计技术，所以暂时把交互层面的东西放在一边。作为UX的设计师，我们的工作不仅仅是设计界面。像下图所示的交互方案，我们在过程中已经有了深入的讨论和思考，今天就不展开讨论和思考过程了。
话不多说，当交互方案确定开始视觉设计，没有想法的时候，可以这样开始：
01.确定黄金分割线
利用黄金分割可以在界面创造四条黄金分割线
IOS双图：375675为例。
如何解出上图中的四条线？
方法很简单，因为黄金风格率为1:1.618，的计算如下：
a1=3750.618=231.75232（四舍五入）
a2线就是从右到左找到232px的位置划线即可
b1=6670.618=412.206412（四舍五入）
b2线就是从下到上找到412px的位置划线即可
黄金风格线的位置，是能调动人的天性的重要位置。这一步的目的是为界面提供一个基本框架。你可以把关键信息放在这些关键位置，帮助你布局。
02.确定基础样式
算好最佳长宽比的卡片布局
考虑到这个原型，作者自然选择了卡片布局风格来聚合信息。那么这里就产生了一个问题“为什么别人的牌比你的好看？”在我看来，最重要的原因是你的卡片或者说那个基本矩形和整体界面的比例关系有问题；
如何操作？如下图所示，作者按照375667的iOS比例演示了设计。大家应该明白，这个尺寸的矩形接近黄金分割矩形(375607)，内容显示区域呈现出无限接近黄金矩形的区域，没有NavBar的64px的高度(差四个像素，苹果的严谨可见一斑)。
之所以要讲这个，是想让大家知道，你在屏幕上呈现的卡片的大小，会根据这个内容显示区域的矩形来设置。这就是我上面说的。元素可以通过比例关系相互呼应，让你产生的元素有理有据，更加和谐。所谓道生一、二、三、三事，都是相互联系的。
接下来，根据这个内容展示区，我们用黄金分割创建一个长方形(舒服吗？).考虑到互动内容，我会整体用老师的照片填充卡片的背景。至于卡位于黄金分割线上的什么位置，需要输入文案，统筹考虑后再做决定，但在这个阶段，基本骨架完成了。
03.信息搭建
斐波那契数列，一个无限接近黄金比例分割率的数列
这一步就是完成一张卡片的设计，注意结合你的信息。这时候我们就不得不考虑字体大小、间距等基本的排版知识了。如何让排版更加合理舒适？斐波那契数列，一个神奇的数列，会帮助我们。它无限接近黄金风格。但在此之前，你需要定义一个不可见的矩形，因为你所有的信息都必须呈现在里面。如下图所示，这个区域也通过黄金分割产生一个最佳矩形。
斐波那契数列遵循这个规律：每个数字都是前两个的总和。
那么零基础系列是这样的：
0,1,1,2,3,5,8,13,21,34,55,89,144…
这个系列没完没了。
相关性在于这个数列的比值是接近黄金分割率。
通过这个系列，我们可以设置段落和标题的字体大小及其间距；
使用系列有两种方式：
方法1:
您可以直接选择系列的数字作为字体大小和间距。如上图所示，作者选择了13、21、34的系列段来设置字体大小和间距(web、海报、banner等。都适用)。
标题字体大小：21文字选择：13标题文字间距：13段落间距：21大段间距：34这样的设置让排版更加严谨有据，摆脱了凭直觉选择大小和间距的弊端。
方法2:
因为是数列，所以是有比例的，斐波纳契数列可以无限比例设定：1: 1/1: 2/1: 3/2: 3/1: 5/2: 5/3: 5/8.下图为作者，选择其中一个比例关系13:8:5:3:2:1。
通过顺序，会有很多排版风格可以实现，因为有了对应的比例关系，怎么排版都很和谐，大家可以在后面努力练习，找到更多更好的比例搭配。
理论完了，回到例子，卡片设置如下：
上图中的红框是一个金色的长方形。如果你用数列来划分矩形，你会惊讶地发现，协调是如此和谐，背后隐藏的是数字的力量。
04.综合调整
让画面中重要信息自己发声
基本上就是最后一步了。通过上述合理的帧结构，信息排列有序。接下来我们补充所有元素，完善画面。
还记得上面说的吗？我们已经确定了一张牌，那么这张牌在哪里可以让画面更和谐呢？黄金风格线将再次帮助我们，如下所示：
首先看这张背景图。我们可以通过老师的姿势来判断整张照片的重心。重心其实是向右的，所以我们把老师向右移动，让重心更靠近垂直右边的黄金风格线，这样在界面的垂直维度上通过老师丰富的面部表情形成第一视线点。
接下来，我们调整卡片的位置。第一，背景图上部比较大，视觉感下沉，而卡芯的信息量比较大。如果我们把卡片放在图片的中央(如下图)，你会发现虽然按钮和日期都在黄金分割，但是界面的上部会因为上述问题而显得相当拥挤，给人一种非常局促的感觉，图片看起来头重脚轻，缺乏稳定感。
显然，卡片需要下移，所以作者选择了第二个水平黄金分割作为基线。如前所述，卡片核心信息的显示关系到用户第一时间的理解，所以我们把主副本信息放在分割线的位置(如下图)，同时这个位置正好挡住了背景图片中老师的衣服裤子之间的明显分割，保证了界面的水平和垂直位置只有两个分割，保证了图片更干净，不会被附加的信息元素更破坏性的分割。
显然，卡片需要下移，所以作者选择了第二个水平黄金分割作为基线。如上所述，卡片核心信息的显示关系到用户第一时间的理解，所以我们把主文信息放在分割线的位置(如下图)，同时这个位置正好挡住了背景图片中老师的衣服裤子之间的明显分割，保证了界面的横向和纵向位置只有两个分割，保证了图片更干净，形式要在内容下面。
最终效果如下：
总结
黄金风格，创造和谐3354无论是纸平面，还是屏幕，还是空间，只要有一个元素，这个元素就会分割出相应的内容，形成互动。大小、位置、间距，然后形成各种比例关系。如何使之有序？让我们更容易观看和欣赏？大自然创造了这个神奇的定律，黄金比例可以创造出视觉上吸引人的比例。纵观历史，它被广泛应用于艺术、建筑、设计甚至人体比例。
通过上面的例子，你也会发现，我们用的是黄金分割和斐波那契数列，这其实是一个通过严谨的数学公式推导设计的过程。在这个过程中，你会发现，即使是简单的排版，通过刻意选择形状、边距、字体大小，也是平衡、清晰、统一的。创造出均衡美观的比例，也能产生视觉上的节奏感和和谐感。
所以在我看来，黄金分割作为一种设计方法，可以帮助我们在日常工作和学习过程中理解和创作作品。如果你一开始太迷茫，不妨通过黄金分割来辅助你的设计。
最后，再次强调，设计手法多种多样，黄金分割只是其中一种。设计是一个反复演绎的过程，很多实际问题也需要我们具体分析。
篇幅有限，接下来我会结合网格系统分享文章中的黄金分割做更多的分析。
UI中国
作者：金山办公用户体验中心_北京
