如何在Web设计中使用第三个规则[快速提示]

要了解与网络设计相关的“三分之二”，让我们从一个例子开始。

考虑一个公牛在一个领域的图像：

不太有趣，对吧？作为图像的中心，公牛的图像感觉有点平淡和可预测。我愿意打赌，如果你在网站上看到这个图像，你就不会太久它。

现在，考虑当我们使用第三个规则将公牛远离中心时，请考虑什么变化：

更有趣一点，对吧?

三分法可以让你的设计更不容易预测，更有趣。最终，它能够更长久地吸引观众的注意力——当你试图吸引新观众并将这些观众转化为你的品牌的导向时，这一点至关重要。

当然，每个规则都有例外。也许你会觉得对称的设计更吸引人。不过，只有在探索了各种选择之后，你才能为自己的网站做出有意的决定。

在这里，我们将学习如何在设计和UI设计中使用三分之一规则，把你的图像带到下一个层次。

如何在设计中运用三分法

简单地说，当您将设计的主要对象放置在第三个网格规则的四个交叉点之一，或者在第三个部分之一时，简单地说，设计更具有趣和视觉上吸引力。

众所周知，艺术不仅仅是一种猜测。追溯到古罗马时代，几何总是在重要的艺术品中占有一席之地。

为了理解三分法，让我们看一个例子。

三分法绘制两条垂直于一页的线和两条水平于一页的线，形成一个九盒网格。

这将页面划分为三个三分之一部分，无论您是水平还是垂直切割图像：

接下来，在设计中使用三分法，你只需要把你的对象放在偏离中心的位置，把它们放在三分之一的部分中:

......或者在一个交叉点上：

在上面的例子中，在照片的前三分之一处，主要的焦点——山顶——位于图像中心的左侧。

幸运的是，使用像Photoshop这样的设计工具使用自己的图像中的三分之二的规则很容易，它提供了一个网格功能，以便您可以准确使用第三个规则来创建更加和谐，有趣的设计。

接下来，让我们来看看如何在Photoshop中创建三分之一网格规则。

如何在Photoshop中创建三分之一的规则

1.使用Photoshop的三分之一规则工具，只需在Photoshop中打开一个空白页面，点击“查看”→“显示”→“网格”:

2.接下来，转到“首选项”→“指南，网格和切片”：

3.接下来，选择网格线的颜色以及实线。然后，将“每一个网格线”变为“100％”，具有“3”的细分。完成后，单击“确定”。

4.现在你明白了!现在你有了三分法网格。要添加图像，只需将图像拖放到现有的分层网格上，将其展开填充网格，然后移动焦点物体，直到它位于三分之一的部分或四个相交点中的一个。

UI设计中的三分之二的例子

要考虑用户界面设计中三分之二的规则权力，让我们来看看一些网站示例，特别侧重于哪个网站使用第三个规则。

1.深情的氛围有限公司

在这里，设计师将主要焦点 - 在水晶岩上，以及大象的串珠手链 - 在左侧和右三分之二的部分，确保访客的焦点是中心文本本身：“这不仅仅是一个运动，这是一个生活方式。”

设计师使用三分法创造了一种和平、和谐、休闲的美学，看起来比如果两个物体都在页面的正中间更开放、更受欢迎，那样可能会让人感觉更拥挤、更兴奋。

2。HUBSPOT.

Hubspot使用三分之一的规则来立即注意其口号，并在主页上“获取Hubspot免费”CTA，因为大多数访问者的注意力将从您网站的左侧开始。然后，卡通图像放在右侧第​​三部分，以平衡页面。这有助于创建用户流 - 从左到右 - 通过对称设计实现更难以实现的。

3.弗朗斯·哈尔斯博物馆

这家荷兰博物馆网站使用三分之一法则来吸引人们对位于左半部分的女性照片的注意。这个页面是独特的，吸引人的，有凝聚力的，并且使用反图像来平衡页面的不对称结构——例如，当女性的大图在屏幕的左边，在右边有文本和额外的图像来平衡它。

何时打破规则（三分之一）

重要的是要注意 - 在设计和艺术中，您需要遵循的严格规则，每个设计规则或趋势都有异常。

一旦你理解了三分法及其对用户体验的影响，你就可以在合适的时候打破这一规则。

例如，你可能会发现把图像放在屏幕中央更有吸引力，就像在屏幕上显示的那样语气皮肤病的主页：

在这里，中心对女性的关注是引人注目的和大胆的，特别是因为她看向屏幕的左边，所以这仍然是一个不对称的图像(你只看到她的眼睛和鼻子在左边，你只看到她的头发在右边)。

这种设计布局很好地吸引了访问者的注意力——如果设计师使用三分法将女性放置在屏幕的左边或右边，它可能就不会那么强大了。

最终，您将想要选择最适合您自己的品牌需求的设计元素。在疑问时，试验两个对称的设计和然后考虑A/B测试，找出最适合你的用户的方法。