干货丨如何在你的设计中运用三分法则？

通过在设计和开发之间引入一位中间节—DesignSystemsOps，建立起设计系统，让设计和开发的...



什么是三分法则？

三分法则是另一种看待设计（如网页，油画或是摄影）布局的方法。这种方法非常的简单易懂：在你的设计上面铺设一层网格（水平和垂直各三等分）。这使得九个格子每一个都是一模一样的。

如果你手头有一张纸或者你想画一个应用，尝试一下这种方法。用你的尺子测量一下宽度和高度（或者长度和宽度，如果你有纸张，请把它转为横向），然后纵横分别三等分，把两组平行线的四个交点标出来。

从审美的角度来看，将一项设计横向和纵向分别三等分，每一份都有一个类似的主题，这种方法会使得你的设计更有意思。1797年雕塑家约翰·托马斯在他的作品《田园风光笔谈》中首次创造了“三分法则”这一术语，他在书中认为运用网格手法将油画分割的技巧能够在参观者眼中产生最优化的视觉效果。

简而言之，在将这种创意运用到其他情形下时，无论是光线、阴影、形状或是颜色，相比于常见的一分为二，我发现三分之二对三分之一（或者反过来）的比率是一种更好更和谐的均衡。

看一看那些著名摄影师的作品，我们就会发现，一张照片的主体很少会出现在正中心的位置，因为摄影师们在构图的时候会考虑三分法则（确实，有很多相机也会在取景器上提供一层网格来帮助摄影师在脑海里构思他们要拍摄的场景）。

网格中最重要的部分就是线相交的位置，这就是焦点（或者业内称作“甜蜜点”）。在摄影学中，你可能会引用一个人的眼睛或者微笑就是在这样一个位置点的事实来讲述摄影的学问。实际上，你有四个甜蜜点可以使用。对着画面所描绘的场景，只要稍微思考一下（例如，背景是不是有一座山？），你就可以展示出最有影响的摄影作品。你的拍摄主体在登山的时候看上去是不是足够自信？记住，一张图片胜过千言万语。

这就是为什么网格是如此重要的原因，它同样适用于我们设计师。在网页和app设计中，我们可以把CTA或者一些关键元素放置在甜蜜点，因为我们知道浏览者的眼睛会自觉不自觉地停留在四个交错点上。需要注意的一点是这四个甜蜜点在浏览者眼中出现的频率是不同的，所以在你的设计中采用对称法并不总是最好的选择。稍后，我们将来详细看看这些甜蜜点究竟有何不同。

如果你旨在达到最佳的视觉效果，那么三分法则将是你重要的盟友。通过训练你的眼睛来确保你设计的关键元素落在最合适的甜蜜点，你将使用到你的另一个重要盟友：用户的眼睛。如果你在一张横向或者纵向的图片或者背景上面铺设一层网格并没有多大关系。只要有九个方格和四个交错点，你就完美武装了。

就像黄金率一样，三分法则一直都存在，而且它的应用在我们周围随处可见。说到黄金率，让我们一起来看看它在创作最佳设计布局的问题上是如何与三分法则相关联的。

黄金率与斐波那契网格线

发现黄金率之后，我们知道了如何制作一个理想的长方形（边长为1，我们乘以一个黄金数值1.618，就得到宽度为1.618）。最终的形状就是我们认为的最满意的长方形，因为他的比例就是黄金率。

这个时候，我们要回到前面提到的网格和三分法则。首先，让我们快速看一下另一种网格，斐波那契网格。通过它，我们将了解黄金率是如何运用到网格设计中的。

在三分法则出现之前，早期的设计师使用的是其他的方法。这期中就涉及到黄金率，画出这样一个网格是，那九个方格中实际上包含四个长方形，每个长方形都是1：1.618比例。所以，如果我们有一个宽度为1.54cm，高度为1.02cm的背景，那么我们可以将水平标记分别定在0.59cm和0.96cm。而垂直标记则定在0.39cm和0.63cm。

不用说，斐波那契网格要比三分法则网格花费更多的功夫去画。然而，人们相信它可以通过数学空间分割来培养用户更好视觉和谐与平衡。同样，使用斐波那契网格能过很好地确保对齐，尤其是在水平横向图片中。由于在斐波那契网格线相交的四个甜蜜点相对集中，用户的视线很自然地就落到了这四个甜蜜点上。请参见下图，注意这些点是如何瞄准主体的。

虽然有它的优势，但斐波那契网格同样也有不足。同样有四个集中在中间的甜蜜点（三分法则也具有这一特征），但是它却容易使设计师分心，一些设计师会对他们的元素视而不见。更糟糕的是，对于复杂一点的工作过程使用这种网格会更费时间和精力。有效使用斐波那契网格优势的繁重工作会使设计师很狼狈，反而得不偿失。

如何在你的设计中运用三分法则？

幸运的是，正如我们所看见的，三分法则使我们能够制作非常简单的网格。正因为它的简易性，三分法则被广泛使用。它吸收了斐波那契网格的优势，这意味着当我们需要从使用计算器的繁重工作中解放出来的的时候，我们也可以运用比例分割的原理。

作为网页设计师，我们同样可以使用三分法则来将最重要的内容放置在任何一张网页最上面的三分之一处。你也许会觉得奇怪，因为很显然那个位置是高于交错甜蜜点的。但是，在网页设计中，我们处理的是滚动的页面。在许多现代设备上，一整张的网页是不适合放在屏幕上的。所以，通过把内容放置在"第一屏"，我们也是在运用三分法则。用户的实现同样会落在正确的位置上。

它同样适用于我们消费信息时的视觉层次（几乎所有的语言，我们都是从上到下阅读的）。研究表明，我们的眼睛倾向于用这样的方式来浏览图片：在这四个甜蜜点中，有超过40％的用户会被左上的甜蜜点吸引。然后，视线会落到左下的甜蜜点，大约有25％的用户关注。接着，视线会移动到右上的甜蜜点，大约20％的用户关注，最后就是位于右下的甜蜜点，只有14％的用户关注。

由此，我们注意到，用户倾向于以F形的方式阅读（首先关注左上方，然后往下，接着往上到达右上方，最终很少有人会关注到右下方到内容）。因此，左上方的甜蜜点就是你用来抓住用户的首选位置了。

结论

三分法则已经帮助艺术家和设计师至少200年。它已经成为一个普遍的概念：艺术家和设计师通过创作一个带有九个方格的网格来将用户的视线吸引到他们设计作品上的具体位置。通过测量，标记和描画两组垂直和水平的平行线来找到四个交错点，这种网格让你从一个不同的视角来考量你的设计。

三分法则与黄金率及其引入的动人均衡比例相关联。早期一点的斐波那契网格虽然是一种更完美的分割比例代表，但并不那么简单易用。将九个中的四个方格塑造为拥有黄金率（1：1.618）的长方形，虽然被认为提供了更令人满意的视觉效果，但是在设计中并没有被广泛使用。

作为用户和设计师，我们一般是以F形的方式浏览图片。最开始，我们的大部分注意力都集中在左上的甜蜜点，然后往下看，到达左下的甜蜜点，接着上去跳到右上，最后才到右下的甜蜜点。

因此，作为一名设计师，你应该充分利用这一优势，通过迎合用户的浏览习惯来使你的设计作品影响最大化。

无论你是手工或者借助软件来设计，你都会发现三分法则对于瞄准你设计的关键点以及与你的用户交流这些关键点都是大有裨益的。需要记住的是，在设计中，你可以横向也可以纵向使用这一法则。

原文地址：https://www.interaction-design.org/，译者／荷籽记忆（简书作者）

▌精彩推荐

• 如何利用三分法进行构图？
• 设计师需具备怎样的特质才不会失业？
• 为什么Dribbble上那些惊艳的UI动效很少被真实应用？
• 跟苹果学情感化设计：为什么Macbook左下角的灯要那样闪？
• 谈谈设计师的灵感，到底从何而来？
• 怎样才能快速提升设计能力？该找个对象！

    关注 茂趣创意