我们常看到一些WEB或UI设计中运用黄金比例、斐波那契数列、三分法等等，优秀的设计师通常会灵活运用这些比例来做设计，只要学会了设计作品一般都不差，同时使用这些比例向甲方解释设计稿时是不是更有底气？

比例关系是设计时必须要考虑的元素之一，无论在尺寸、空间还是颜色上，比例和谐与否会影响设计元素之间的关系。比例可以创建视觉层次，也可以产生一种张力或一种和谐感。

黄金比例

黄金比又称黄金律，是指事物各部分间一定的数学比例关系，即将整体一分为二，较大部分与较小部分之比等于整体与较大部分之比，其比值约为1:0.618，即长段为全段的0.618。0.618是被公认为最具有审美意义的比例数字。

那黄金分割线到底是个什么东西呢。它在什么位置？它在画面中的什么地方？

有一条线条，如果我们从中切一段，如果左边是0.618这么一个比列，右边是1这么一个比例。

如果符合这样的左右比例我们称之为黄金分割比。那么中间切割的位置就是我们黄金分割线的位置。

三分线（黄金比例的衍生）

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

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

白银比例

根号矩形具有特殊性质，由√2矩形开始可以无限地衍生出√3、√4、√5、√6等矩形，同时在这些矩形内部又可以分割出无限的等比矩形。

白银比例 √2 ≈ 1.414

青铜比例

因为根号矩形的等比性和可无限分割型，所以在分割构图中和黄金矩形一样，能产生大量和谐的组合。

青铜比例√3 ≈ 1.732

斐波那契数列（黄金比例的衍生）

斐波那契数列是由意大利数学家奥纳多·斐波那契在1202年出版《算盘全书》中提出。这组数列的数字为1、1、2、3、5、8、13、21、34…从第三位开始，每一个数都是由前两位相加得出。而这个数列的比例形式非常接近黄金比例，所以又称“黄金分割数列”。

斐波那契数列（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*)

等差数列

等差数列是最常见数列的一种，如果一个数列从第二项起，每一项与它前一项的差等于同一个常数，这个数列就叫作等差数列。比如1、3、5、7、9、11、13…

等比数列

如果一个数列从第二项起，每一项与它前一项的比值等于同一个常数，这个数列就叫作等比数列。比如1、2、4、8、16、32、64…

卢卡斯数列

卢卡斯数列：1、 3、 4、 7、 11、18、 29、 47、 76、 123…

斐波那契数列和卢卡斯数列具有相同的性质：从第三项开始，每一项都等于前两项之和，我们称之为斐波那契—卢卡斯递推。

卡特兰数

卡特兰数是一种经典的组合数，经常出现在各种计算中，其前几项为 : 1、2、5、14、42、132、 429、1430、4862…

帕多瓦数列

帕多瓦数列是：1，1，1，2，2，3，4，5，7，9，12，16，21，28，37，49，65，86，114，151……

它从第四项开始，每一项都是前面2项与前面3项的和。即x=（x-2） （x-3），x为项的序数（x>4）。

它和斐波拉契数列非常相似，稍有不同的是：每个数都是跳过它前面的那个数，并把前面的两个数相加而得出的。

雷诺数列

雷诺数列是把10分成5份，或10份、20份、40份的一个方法，就是应用在分割比例上，二是应用在字号比例大小选择上。从数学上讲就是把10分别开5次方、10次方、20次方和40次方。我们以5次方为例分别是：10%、16%、25%、40%、63%、100%。

勒·柯布西耶 — 模度（黄金比例的衍生）

1948年，经过7年的理论研究与试验，柯布出版了《模度-合乎人体比例的、通用与建筑和机械的和谐尺度》一书，详细阐述了模度理论的开端、发展、完善到实际应用。此书的出版标志着模度理论的正式建立。

比较成熟的模度系统的数字推导起始于以身高为6英尺（约183厘米）人作为标准，结合斐波那契数列分析。对人体的分析得出的结论包括以下几个关键数字：举手高（226厘米），身高（183厘米），脐高（113厘米）和垂手高（86厘米）。这一系列数字都可以利用黄金分割比和斐波那契数列结合在一起:43=70×0.618，70=113×0.618，113=183×0.618；43 70=113，70 113=183，43 70 113=226。

利用113的尺寸产生黄金比70，由此得到红尺：4-6-10-16-27-43-70-113-183-296等。

利用226=2X113=86 140，由此得到第二组数字-蓝尺：13-20.6-33-53-86-140-226-366-592等。

柯布还借助“模度”的比例优势对文艺复兴的几何不变性研究展开了批判。他认为对正多面体、星形体及正多边形的研究，背离了基于视觉判断的建筑学的本质，因为人眼对不同距离的事物的认知并不是均匀、等分的而是渐变的。

三角函数特殊角

特殊三角函数值一般指在0，30°，45°，60°，90°，180°角下的正余弦值。

我们在设计中会把360°角度会进行细分，以15°角为一个单位进行递增归纳我们常用的角度值：0°、15°、30°、45°、60°、90°、120°、135°、150°、180°、270°

我们在设计中在颜色的色相就是用360°来衡量的，设计中经常使用不透明度配色法就是把颜色不透明度10等分，在产品设计中我们确定主色的颜色后，可以根据主色的色相的角度值比如每次增加15°来找到合适的辅助色和点缀色。

最近两年流行的2.5d插画风格就是会基于30°倾斜角去统一轴的方向。

图：MUTI

品牌设计中也是一样，很多都需要线条辅助。线的角度有0°、15°、30°、45°、60°、90°帮助设计的更加合理规范。

图：George Bokhua

8点网格

建立8点为一个单位的网格，所有的元素尺寸都是8的倍数。使用 8 的增量来确定页面上元素的大小和空间。界面设计中的边距或填充都是 8 的增量（倍数）

如果你用8作为设计的最小单位，你可以很方便的缩小的你的设计尺寸，8/2=4,4/2=2,2/2=1。

图片常用尺寸

在UI界面设计中我们经常需要使用不同尺寸的图片，由于移动端界面大小有限，在大量界面设计中总结了图片尺寸的比例有1:1、2:3、4:3、16:9、16:10。

Airbnb移动端的界面中使用了大量1:1、3:2、13:21等尺寸大小的图片，有了基于黄金比例的图片尺寸让界面排版看上去更加合理舒服。

费希纳矩形

19世纪中叶，德国心理学家费希纳曾经做过一次别出心裁的试验，他召开一次“矩形展览会”，会上展出了他精心制作的各种矩形，并要求参观者投票选择各种自认为最美的矩形，结果以下四种矩形入选(宽×长)：(1)5×8；(2)8×13；(3)13×21；(4)21×34。

因为5∶8＝0.625，8∶13≈0.615，13∶21≈0.619，21∶34≈0.618。由此可见，它们的宽与长的比都接近于0.618，因此这些矩形可近似地看作黄金矩形，给人以美的感受。

印刷常用尺寸

打印/印刷常用纸A系列尺寸，办公室常用A4打印纸尺寸210mm×297mm

A0纸尺寸841mm×1189mm

A1纸尺寸594mm×841mm

A2纸尺寸420mm×594mm

A3纸尺寸297mm×420mm

A4纸尺寸210mm×297mm

A5纸尺寸148mm×210mm

A6纸尺寸105mm×148mm

A7纸尺寸74mm×105mm

A8纸尺寸52mm×74mm

A9纸尺寸37mm×52mm

参考文献

《和谐之美-探索设计中的黄金比例》 人民邮电出版社

《勒.柯布西耶——模度》