每一个用户都会认真的阅读你每一个文字是一件令人兴奋的事情。然而，别瞎想了。用户才不会认真阅读，他们只是浏览。
Users don’t read web pages, they scan.
用户不是阅读网页而是浏览而已。
浏览就是说用户只会在吸引他们眼球的内容下他们才会停下来。
作为设计师，你可以把控浏览你设计的网页的用户的视线。为了创建一个正确的用户浏览视觉路径，你需要清楚我们眼睛处理信息的方式。本文，我会讲解相关理论，并讲解如何使用Z型路径创建视觉系统。
什么是Z型布局？怎么用？里面的机制是怎样的呢？
就如字面含义，z型布局就是按照字母z的形状。z型追踪人们浏览页面人眼动的路径：从左到右，从上到下。
首先，人的视线从上面的左面到上面的右面，形成一条水平线；
其次，底部到页面右上角，构成一条斜线；
最后，从底部左侧出发形成一条水平线。
这时浏览者的视线在这个形状中移动，形成了个虚拟的“Z
z型视线的运作机制是由于大部分西方人的阅读习惯都是：从左到右，从上到下的。
应用场景？
z型浏览通常出现在非文本为中心的页面（针对大量文字的页面比如文章或者搜索结果，最好采用F型。）z型对于大量复制和只有少数关键元素的界面是比较完美的解决方案。只有一两个主要元素的极简页面或者引导页可以采用z型布局引导用户体验自然的浏览方式。
如何使用？
再设计页面布局之前，找到下列问题的答案是非常有必要的：
当用户登录页面后，什么信息是你想要他们注意的？
你希望他们用怎样的顺序浏览信息？
你希望他们做什么？
z型布局的前提实际上会很简单：将Z印在页面上。理论上，你期望用户一开始就看到最重要的信息，然后看到第二重要的信息。所以，重要的元素应该沿着浏览路径放置，应该在正确的时间给用户展现正确的信息。
It’s essential to create a flow. 创建视觉流是非常重要的。
流可以将视线按你期望它移动的方向，从一部分引导到另一部分。你可以将视觉重量和视觉方向结合创建流。创建流时，要记住这些最好的方式：
Point1，用户视线的起始点，最好放logo；
Point2，放置你期望读者首先看到的，沿着z的上半部分。眼睛自然而然的遵守z型，所以目标是放置第二重要的“call to action”在结束的位置。加强Point2位置上的元素，这地方的按钮或其他关键元素使用亮色来吸引用户注意，引导用户遵循z型浏览顺序。
页面的中心位置：技巧是用用户干ing去的内容填满这个区域，并且向下引导他们的视线。比如你可以这个地方放置一个hero image在页面中心，从而分割顶部和底部的区域，并且引导用户视线继续沿着z型。
Point3，第三点的目的是将用户引导到放置CTA的第四点。比如，你的页面是推销搞活动的东西，你希望潜在的顾客看到第三点能加强他们的购买欲望，并且为他们点击“立即购买”的按钮提供便利。
Point4，是结束线。在3通往4的线条上的箭头的位置，应该包含能够推动用户视线的内容到那个角落。Point4是一个最佳放置Call to Action的地方。
下面是一些使用z型布局的例子：
Zig-Zag Pattern 曲线布局
最有趣和有用的事情我们可以将z型结构扩展成一系列的z而不是一个大的z。
如下图所示，这正是dropbox所做的，重复的z型放置一系列的产品功能介绍，将用户引导到“免费注册”的CTA按钮。在这个布局中的“learn more”按钮是第二重要的CTA按钮将用户指向相关的页面而不用阅读全部内容。
结论：
z型布局非常好用，这也是为什么那么多网页采用它的原因。你可以充分利用z型布局，将重要的信息放在视线自然落到的地方，并且增强视觉强点。
网友评论