前进网页UI的视觉体系（二）：F模式和Z模式

　F模式

　　这主要在一些以文字为主的网站出现，例如博客。F模式就是指，用户通常会沿着左侧垂直浏览而下，先去寻找文章中每个段落开头的兴趣点，这时，如果用户发现了他喜欢的，他就会从这里开始水平线方向的阅读。较终结果就是用户的视线呈F型或者E型进行浏览。

　　The Nielsen Norman机构曾对232名用户对上千个网站的浏览习惯进行观察，总结出F模式的特点：

　　用户极少逐字阅读文字。

　　每个段落的开始两个字较为重要，这将决定内容是否能留住用户。

　　初始段落，副标题和要点都要保持醒目。

　　下图里的页面可以看到，重要的内容很清晰的展示出来，并且不会让用户花很多时间去浏览，而次要的内容也能快速尽收眼底。F模式对于那些嵌入广告的网站也是极为有用的，即使有了广告，也不会影响到内容。只要记住，内容为王，导航可以让用户更深入地浏览下去。

　　在所有浏览模式中，F模式就是一个引导路线图，而不仅仅是一个页面。因为，F模式的网站除了顶部展示区外，其他的内容会显得更平淡。就像下图所示，顶部1000像素后，网站就在水平方向加入了一些卡片式的内容组件，让网页内容更有趣。

　　Z模式

　　Z模式的浏览模式在于网页内容主要不是文字的页面。不论是否因为这里有个菜单栏，还是就仅仅因为从左到右自上而下的阅读习惯，用户首先关注的页头水平方向上的内容。当视线抵达底部时，又遵循着从左到右的习惯模式，重复再水平扫视页尾的较底部的内容。

　　Z模式几乎可以适用到任何的网页交互，Z模式的优点就是简单。如果你的网站内容很多并且很复杂的话，那么用这个模式，效果就会稍差。当然，这些都不是绝对的。当Z模式简化布局，就可以增加转化率，下面这些是可以去简化的地方:

　　背景——运用独立的背景能将用户的视线范围锁定在你的框架内容里。

　　要点1——你的LOGO放置的首要位置。

　　要点2——增加一个颜色鲜明的辅助操作指令，帮助用户遵循Z路线浏览模式。

　　页面中心——页面的中心独立于页头和页尾的部分，引导用户Z路线浏览视线。

　　要点3——增加可以从正在浏览的位置移动去到底部的图标，也就是可以随时抵达较终目标。

　　要点4——Z模式较底部的水平线上的内容，这将是提供给用户首要操作的较佳位置。

　　预测用户的视线将会占有极大的优势。在布局你的页面元素时前，你就可以知道优先的该摆放在什么位置。一旦你知道你想要用户先看到什么，你就能可以通过视线的规律，将你的重点内容放在用户的“热点”里。

　　你可以在整个页面不断重复Z模式的规律，就像你在下图中看到的那样，一开始这个页面就有一个注册按钮，通过水平位置的浏览，用户已经获悉了这一信息，下拉会出现产品的卖点，这些卖点的展示就是遵循重复着Z模式的较佳例子，直到较下方的支付选项就抵达了Z模式的较尾部那个水平线。

　　后记：

　　在设计中，我们所思考的总是比我们呈现出来的更多。不管怎样，这两种模式只是一个小结，实际创作过程全是花样百出，绝不是两种模式就能轻松完成的。但是，在规律面前，多多益善总不会错。灵活运用规律才是关键。

以上内容由大宛网络（前进网站建设）为您提供