了解Web设计中的拆分布局_极简慕枫

作为网页设计师，我们遵循许多设计范例和布局原则：网格，垂直一致性，F布局，Z布局，三分法，黄金比例等。注意这些原则将产生视觉上吸引人的功能设计 - 让我们现在看一下页面的简单划分为两个相等的一半。

武汉网页设计虽然这在开始时听起来有点愚蠢和明显，但这种基本布局可能非常有效。我们的眼睛倾向于在浏览页面时遵循锯齿形运动。如果眼睛沿着水平直线 - 如在Z-布局中，他/她正在集中注意力（或正在尝试）。由于90％的网站流量来自您的网站并未对您的网页进行详细关注，因此让您的设计“浏览友好”肯定会得到回报。

眼睛运动和Zig-Zag

来自雅虎的眼动追踪研究：

• 人们扫描页面的主要部分以确定它的内容以及是否希望保持更长时间。

• 他们在短短三秒内就页面做出决定。

• 如果他们决定留下来，他们会最关注屏幕顶部的内容。

网络用户总是匆忙。他们还有其他事情要做，留下来欣赏你网站的美感和美感是你可以期待他们做的最后一件事。即使良好的设计非常重要，但它并不能完全激发访客采取行动 - 点击“立即购买”或“了解更多”按钮。

我们不能责怪他们。永远记得什么时候你想要什么？您急于在Google中搜索第一个搜索结果，然后您可以快速“通过”，或者浏览整个页面。大多数情况下，您甚至可以一直滚动到底部而不需要太多关注。在此阶段之后，如果您确定页面值得花时间，则滚动回到顶部，然后花点时间阅读并注意。

初步略读的目的是什么？要初步一目了然，您可以获取有关该页面的最大信息。如果我们以某种方式“编纂”这种撇去模式，我们应该能够吸引更多访客的注意力。从各个地点的热图观察，我发现了一个共同的趋势。

你会注意到你可以毫不费力地看到红点。奇怪的是，根据我们的经验，我们可以说我们的眼睛应该很容易遵循直线而不是有角度的直线 - 因为我们直线阅读。请注意，我所说的是初始浏览阶段，而不是您关注网站每个细节的部分。

每当你不太注意时，这就是你眼睛的自然倾向 - 曲折。除非有更强烈的对比度和重量的元素向你大喊大叫，否则你可能会遵循上述模式。您还会注意到此模式看起来与F布局类似，并且红色端点是用户暂时停顿的位置。

这些瞬间暂停点是你的大脑拍摄快照的地方。在Zig-zag布局中，元素在“Pause斑点”处包含重要信息，Brain自然地吸收更多细节，因为它将每个Z字形终点关联为单独的实体。

设计不仅仅是它的外观和感觉。设计是如何运作的。-Steve Jobs

您可以（例如）利用Half Split布局的这一功能有效地定位您的工作组合预览，或产品或服务的重要功能，以便访问者快速注意。这最终会鼓励他们在您的网站上停留更长时间，从而说服他们采取行动。结果？为您提供更好的转换率和更好的用户体验。

将拆分布局应用于设计

使您的设计和布局“zig-zag兼容”非常简单。实际上，将页面划分为两个相同的一半就很容易了！由于Zig-Zag端点或多或少朝向这些半部的中心对齐，所以相等的一半运行良好。用于叠加，它们很好地结合在一起。将重要元素放置在页面的Zig-Zag的红色终点位置。这是Half Split或1/2布局背后的基本概念。

最近，我正在制作一个“即将推出”的登陆页面。我尝试了各种布局，但没有任何效果。我尝试了一切 - 网格，黄金比例，F布局。当我简单地将页面划分为两个相等的一半时，尤里卡时刻到来了。解决方案就这么简单！它看起来优雅而整洁，让我想起了简单并不一定是坏事的重要事实。你见过新的微软徽标吗？

简约是最终的成熟。-Leonardo Da Vinci

你可以看到这两半如何给出一个很好的Visual Hierarchy。首先，注意到顶部的“即将推出”红丝带。接下来，看到徽标。现在，按照前面提到的Zig-Zag，访问者最终看到右半边的图像滑块，最后是电子邮件提交表单。

现在让我们看看分割布局如何适用于Web Designer的Portfolio页面。投资组合中的Gallery页面旨在快速向潜在客户展示一系列工作。他们有很多选择，因为这个行业现在已经非常饱和了。他们为什么要付钱给你？给人留下良好的第一印象可能会使你的方向发展。让我们看看我们能做些什么。

上面的布局分为两半，但它不遵循我前面提到的'之字形'原则。

虽然它确实看起来像一个好的布局并且容易在眼睛上看，但在前两个元素之后它会变得相当沉闷。打破流动以增加视觉兴趣将有所帮助。不仅; 但是当你试图浏览上面的布局时，你的眼睛应该看到第一个图像，然后跳转到第二个项目的文本。由于您的访问者在此阶段无意阅读，因此他们会跳到其他位置，或完全离开您的网站！

如果你做了这样一个简单的改变怎么办？

更有趣，对吧？简单地交换文本的位置和每个项目的图像会增加视觉兴趣，因此一致性不会使您的访客感到无聊。您还可以按照Zig-Zag模式放置号召性用语按钮。

“联系我”按钮现在更有可能被注意到，并且被更多访问者点击（为什么不进行A / B测试以仔细检查？）

设计是一种以最佳方式安排元素以实现特定目的的计划。-Charles Eames

操作中的拆分布局示例

分裂布局已经成为Facebook新的时间轴设计的焦点。注意你的眼睛如何轻易地从一个帖子“流”到另一个帖子。

Apple也遵循拆分布局。这是iPad mini页面，看看将每个图像作为iPad mini的独立功能关联是多么容易？感觉很对。

微软已经为他们最近的品牌重塑铺平了许多新方法，这是在他们的Surface信息页面上进行拆分布局之后。

Stacey是1/2布局的极简主义写照。

我喜欢Quora的主页。可以更简单地演示拆分布局吗？

Consumerbarometer.com通过动画和Zig-Zag的三角形变化将其提升到了一个新的水平。

总结

所以我们学了什么？

• 人们只需三秒钟就您的网页做出决定。

• 为了吸引访问者的注意力并降低跳出率，我们应该尝试使我们的布局“浏览友好”。

• 将布局直接划分为中心，并将重要元素与“之字形”的终点对齐，以确保访问者在浏览后记住更多细节。

武汉网页设计本文只是一个温和的提醒，永远不要忘记使用基本布局和基本设计方法。事实上，如果使用得当，它可以提高转换率。