网页排版——Z型模式

Z型模式的是一种比较经典的排版方式。因为它解决了任何网站的核心要求：品牌，层次结构，结构和号召性操作。

一、什么是Z型模式

Z型模式阅读布局遵循字母Z的形状，跟从人眼扫描页面时从左到右，从上到下的行进路线：

首先，我们从左上角到右上角进行阅读，形成一条水平线；

接着，在页面左下方。会创建一条对角线；

最后，再往右转，形成第二条水平线。

当用户的眼睛以这种模式移动时，它形成了一个虚构的”Z”形

Z型模式 Z型模式的应用

简单吧，其实排版没什么复杂的。Z型模式能够以逻辑顺序快速有效地将点1从点1转移到第4点。当然作为设计师，我们肯定不能仅仅作到以上几点，我们还需要再润色一下界面，使得界面更加丰满。

二、用在哪里?

前面提到的，Z型模式肯定不一定是所有网站的最终具体解决方案，但正如我前面提到的，任何设计项目往往它都是一个很好的跳跃点，因为它解决了有效设计的四大原则：品牌、层次机构、结构、号召性操作。这就像看一本书一样，从上到下，从左往右。基于这个基础，可以解决很多问题，我们可以添加多个号召性操作按钮，缩小Z的高度，扩展它，做任何你想要的，这对于网站的目标是有意义的。比如Facebook的登录页

Facebook登录页

Z模式的浏览模式在于网页内容主要不是文字的页面。它几乎可以适用到任何的网页交互，Z模式的优点就是简单。如果你的网站内容很多并且很复杂的话，那么用这个模式，效果就会稍差。当然，这些都不是绝对的。那么接下来说说，怎么使用这种模式。

三、如何使用

在开始排版前，首先思考以下三点：

1.当用户登录这个页面时，你希望他们注意什么？

2.你希望他们以什么顺序来查看信息？

3.你想要他们做什么？

考虑好了以上3点，然后你可以是否可以套用Z型布局啦，其实设计方式很简单：在页面上加字母”Z”就好了。在理想情况下，你希望用户首先看到你最重要的信息，以及你下一个重要的信息。因为。沿着视觉扫描路径位置放置重要元素，并在正确的时间向用户提供正确的信息就好了。

Z型模式

创建Z型模式视觉流的时候要注意以下几个方法：

点1——用户视觉流的起点，也是放logo的黄金位置

点2——Z的顶部，放你希望用户首先看到的东西。眼睛比较自然地遵循Z型路线，所以比较重要的东西就要放在这里了。在设计时要注意视觉重量，要让用户注意并引导用户沿着Z型走。

中心区域——这个区域的诀窍是补充用户感兴趣的内容，同时仍然将视线向下延伸至下一行。比如放一些轮播图等，来分离顶部和底部。

点3——点3的目的就是去点4进行最后的行动。比如，想要销售某些产品，希望潜在客户在看到“立即购买”按钮之前说服他们去购买的一些引导。因此，可以在点3为他们提供利息或其他引导的信息。这个在排版时需要注意不要和点4位置太远。因为我们要它随时抵达最终目标。

点4——终点。它和点3之间应该包含将用户视线推向角落的内容。这里主要是用户行动按钮的位置。

Basecamp和Evernote的首页也是采用了Z型模式进行排版的。

Basecamp Evernote

四、Z型模式拓展

关于Z型排版，我们不一定是一个大“Z”来运动的，我们还可以看作一系列的Z连续运动。比如dropbox，引导用户通过几个关键产品功能完成他们重复的Z型模式布局。在这里，“learn more”按钮起到辅助行动按钮的作用，可以帮助用户进入下一个相关页面。

dropbox

五、总结

Z型模式是众多网站采用的原因是可以利用Z，是能够将重要信息自然而然的突出。我们在使用时，记住要确定信息的层级关系。