几乎没有UI设计师会自称数学家，甚至，在我看来，大多数设计师会对数学话题嗤之以鼻。这也无可厚非，毕竟设计师的工作充满热情、艺术和创造力，这跟理性、客观、冷冰冰的数字格格不入。

然而，现实是，不仅仅是UI设计师，所有的设计师每一次拿起画笔或者触摸板开始工作的时候，都会运用数学原理。事实上，一些基本的设计原理就是根植于数学概念的。数学，潜移默化地影响着我们的设计。

那还何必要学呢？

加深对艺术和设计中数学概念的理解，意味着我们可以有意识地将其应用于工作当中。现在，数学不再是那个在高中苦苦折磨我们的噩梦，它化身为重要的工具，为艺术家和UI设计师提供帮助。

以下列出常用的三个数学原理，并简要介绍它们是如何在设计中发挥作用以及如何应用在网页设计和界面设计当中。这三个古老的数学原理，历久弥新，在现代社会依旧有着重要的作用。

我们生活在一个万物互联的时代，但是我们没有注意到，其实很多事物之间早就有相互关联的关系了。

1.黄金比例

蒙娜丽莎和谷歌的logo有什么共同点？人类历史上最具代表性的画作和成立于1998年的科技巨头之间会有什么关联呢？

答案就是，它们都应用了黄金比例，公认的经典比例。从数学角度来说，黄金比例约等于1.618。

根据维基百科，两数之和与较大数之比等于较大数与较小数之比时，这两数之比为黄金比例。

众所周知，黄金比例是人眼觉得最舒服的比例，这对于艺术家、建筑师和设计师来说十分有用。最直观的展示形式就是黄金矩形，如下图。

诚然，黄金矩形直接出现的情况并不多见，但是黄金比例的应用十分普及。它无处不在，并时刻吸引人们的目光。它是许多logo、字体和界面布局背后的基本原则。

如上图所示，谷歌logo的两个圆周长之比为黄金比例。不只是谷歌，很多公司也使用黄金比例来优化产品界面。

黄金比例是在设计实践中应用最广泛的数学概念，也是数学影响设计的有力证明。

2.斐波那契数列

斐波那契数列由0和1开始，之后的数字是由前两数相加而得。数列如下：

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144…

这个数列是斐波那契式设计的基础，尤其适用于内容复杂的网站布局（如博客或其他线上出版物）。

上图的博客页面虽然简单，但是细节很好。页面内容结构明确，字体大小比例清晰、可读性强，排版布局干脆整洁。这就是斐波那契式设计的一个很好的例子

举例来说，页面中三列的宽度比例根据斐波那契序数（2，3和8）确定。前两列宽度比例为3：2，后两列为8：3。

还可以使用斐波那契序数来规范字号大小。在这个示例中，页面大标题字号为55px，文章标题字号为34px，内容字号为21px。最终呈现出信息层级清晰、比例和谐美观的效果。

另一种斐波那契数列在设计中的应用是划分页面模块。如下图的矩形，由边长为斐波那契序数的正方形组合而成。

下图是一个非常常见的网页形式，大家应该经常见到，甚至使用过。可以参考FastCompany的网页。

这个页面中最主要的内容标记为“块1”，是页面中面积最大的模块，搜索功能和其他导航内容的模块组成了“块2”。

关于斐波那契数列还有一个特点：在数列后添加数字，随着数列加长，数列前后两项之比会趋近1.618，也就是黄金比例。

3.三分法则

三分法则被很多人所熟知。就算不是设计界的人，也会对三分法则有所耳闻。这一点不像黄金比例和斐波那契数列。说到数学法则在网页设计中的应用，就不能不提“三分法则”。即时所有的ui设计师都对它熟记于胸，我还是要在此提一下。

三分法则指的是，使用两条竖线和两条横线将画面均分为9个部分，形成一个基本的网格，从而辅助界面布局。

举例来说，四条线的交叉点位置是放置关键信息的好位置，可以将需要着重显示的元素布局在这些位置。在网页设计中，左上的交点是最醒目的位置，是用户在浏览网页时，目光最容易注意到的位置。

我们来看一下EQRec的首页。网站的主标题——来自世界上最好录音棚的邀请——位于首页左上的交点处，其他页面元素按照三分法则分布在页面中，特别是页面上下的导航栏。

三分法则的特点可能不够鲜明，也不像斐波那契数列和黄金比例那样微妙，但它是数学原则应用在UI设计中的优秀例证。

透过数字做设计

是不是做设计的时候一定要用上这些数学原则呢？当然不是啦！我们可以将这些数学原理当做工具箱中的一个工具，或者指南，来指导设计实践，而不是墨守成规。虽然数学在设计实践中的意义非凡，但是，也不能依靠数学来解决全部问题。用户体验终究是要靠创新的思维来提升的。

不过，主流的UX设计公司已经意识到数学对于设计本质的重要性。数学在用户体验中的重要性也在逐渐显现。

上文举例的这些原理只是数学原理在用户体验中的一小部分应用。

其实数学对于用户体验的帮助远不止体现在页面布局上，更加体现在数据分析和统计方面。我们将在下一篇文章中从这方面深入探讨数学与用户体验的根本联系。