打开你就会觉得，这不是我们印象中那些文字密集的站点了，完全摈弃了传统门户的做法。
首页
整体上左栏多图片新闻，中栏文字新闻，右栏多为广告。信息层级划分清晰，相信用户不知不觉就呈F型阅读了，干扰很小，汲取新闻很舒适。
文章详情页
关键是字很大了，首页和详情页的主要文字都是18px，不知道大家是否喜欢这次网易大胆的改版呢？说到改版就不得不说说网站设计布局：
Z式布局
Z模式的浏览模式在于网页内容主要不是文字的页面。不论是否因为这里有个菜单栏，还是就仅仅因为从左到右自上而下的阅读习惯，用户首先关注的页头水平方向上的内容。当视线抵达底部时，又遵循着从左到右的习惯模式，重复再水平扫视页尾的最底部的内容。
Z式布局几乎可以适用到任何的网页交互，Z式布局的优点就是简单。如果你的网站内容很多并且很复杂的话，那么用这个模式，效果就会稍差。当然，这些都不是绝对的。当使用Z式布局简化布局，就可以增加转化率，下面这些是可以去简化的地方:
背景——运用独立的背景能将用户的视线范围锁定在你的框架内容里。
要点1——你的LOGO放置的首要位置。
要点2——增加一个颜色鲜明的辅助操作指令，帮助用户遵循Z路线浏览模式。
页面中心——页面的中心独立于页头和页尾的部分，引导用户Z路线浏览视线。
要点3——增加可以从正在浏览的位置移动去到底部的图标，也就是可以随时抵达最终目标。
要点4——Z模式最底部的水平线上的内容，这将是提供给用户首要操作的最佳位置。
预测用户的视线将会占有极大的优势。在布局你的页面元素时前，你就可以知道优先的该摆放在什么位置。一旦你知道你想要用户先看到什么，你就能可以通过视线的规律，将你的重点内容放在用户的“热点”里。
你可以在整个页面不断重复Z模式的规律，就像你在下图中看到的那样，一开始这个页面就有一个注册按钮，通过水平位置的浏览，用户已经获悉了这一信 息，下拉会出现产品的卖点，这些卖点的展示就是遵循重复着Z模式的最佳例子，直到最下方的支付选项就抵达了Z模式的最尾部那个水平线。
网页设计中的F式布局
传统的布局方式，依赖布置视觉线索，“控制”用户的视觉路径，相较之下，F式布局更加自然，更加友好。
F式布局简介
F式布局是一种很科学的布局方法，基本原理依据了大量的眼动研究。一般来说，用户浏览网页的视觉轨迹是这样的——先看看顶部，然后看看左上角，然后沿着左边缘顺势直下….而用户往往不太注意右边的信息，这是不是有点像字母F?据此，我们习惯性的把重要元素（诸如品牌Logo，导航，行为召唤控件）放在左边，而右边一般放置一些对用户无关紧要的广告信息。
我们来看一下Webdesigntuts+的眼动热点图：
这张眼动热点图展示了用户浏览此网站的视觉轨迹，呈一个F型。热区（途中红色、黄色、橙色部分）代表用户注意力最集中的地方。
总结一下用户浏览网页的一般模式：
先看看页面的左上角，了解一下这是什么网站（因此此处适合放置Logo)——“知道是什么”
然后扫描一下页面的顶部（导航栏，搜索栏）——“了解用法”
下一步，用户的视线下移，开始阅读下一行的内容。
用户进入“扫描模式”，一旦找到感兴趣的内容便会打开。
将此种浏览模式以线框图的形式呈现，形状如下图。
有个规律不容忽视：阅读一般是从上到下，从左到右的。用户往往忽视右侧边的内容，大致的扫一眼而已，因此不要在右侧边下太大功夫。应该把内容栏放在用户注意力高度集中的左边。
综上所述，按照逻辑，我们得出以下结论：
品牌标志和导航应该放在页面的顶部，这是用户对网站的第一印象。
在内容结构中，图片更容易获得关注
用户浏览完图片后，下一个关注点便是标题。
用户会大致的浏览文本，但是往往不会通读。
将F式布局应用到设计中
这里我做了一个小练习，使用线框图方法，对主要元素进行了布局。
下图中可以看到，我把网站的主题/宗旨（Mission Statement）放在了导航栏的下面，这样用户浏览完Logo和导航，就能迅速的了解网站的宗旨.两栏布局的好处是信息层级清晰，可方便用户快速扫描内容…主要内容栏和辅助侧边栏。
挺粗糙的，但是关键点都在，浏览此网页时只需几秒钟，便能获取该网站的宗旨/主题…
导航栏的作用是引导用户，让用户知道如何转至不同的页面。
顶部下方的内容栏中，将标题设置的非常醒目，用户浏览完图片后，便能迅速察觉到标题的存在…至于文本内容吧不做强求。
你们浏览这个页面的视觉路径应该是这样的吧？
效果还可以是把？完成F式布局后，我们便可以此为基础，加入一些细节性元素。
还有一点值得注意的是F式布局中对行与行之间距离的控制。（图中红线部分）
根据不同的设计需求，设计师可以适度调整。如果想要打造一种悠闲的阅读氛围，间距可以大一点；如果信息量大，可以缩小一点，打造出紧凑的阅读感。至于阅读的节奏感和一致性的保持，请翻阅优设网之前的文章，这里就不做赘述了。
如果页面无限长，老这么浏览下去，用户一定会很烦，感到枯燥，对不对？这里可以稍微做一下调整，加入一点与F式布局规则“不协调”的元素，给阅读节奏带来一些变数。
你看，上图中那个图片栏就是“不协调”元素，它的出现有些出人意料、打破了用户的预期，这种设计适合于那种超长垂直滚动的网页，这样用户就不会感到枯燥了。
F式布局原理
F式布局能够奏效的原因，在于F式布局符合用户的浏览习惯，更自然。符合“从上到下，从左到右”的阅读模式。
但是这种阅读模式有利也有弊：
这样一来，最有价值的内容只能放置在页面顶部了。有些俗套。
文本内容无法有效的引起用户注意，用户甚至连摘要都懒得读，看看标题就“过”了。
网页过分注重对“标题”和“图像”的包装，无疑不符合内容至上的原则。
在采用F式布局进行设计师，很多设计师感觉自己不像是设计师，而想是制造噱头的“广告商”。网页设计太具备功利性，只追求一时的浏览量，不遵循“内容为王”的原则，很多用户第一次可能感觉不错，但是看了内容后大呼上当，可能下一次他们就不会再次访问该网页了。
因此，设计师要协调好内容与布局之间的关系。这就有点像武侠小说了，内容好比内力，布局好比招式。花拳绣腿再漂亮，内力深厚的人一招便能“以力破巧”
那么右面的侧边栏该要怎么设计呢？这里给出两点建议：
1.呈递相关内容。比如和网站主题相关的链接、广告，相关阅读推荐，社交媒体微件等等。不要为了牟利而放置些低俗的、和内容不相干的广告。
2.可以防止一些内容检索工具，比如过标签、文章检索、最热文章等等。
F式布局案例
那么实际操作起来应该怎样呢？小伙伴们在日常浏览网站是，有没有发现一些标准F式布局的网站？在留言区告诉我吧。
总结
不管设计趋势怎么变，F式布局暗藏的原理不会过时，因为这是用户长期的习惯。
或者说，F式布局只是一个幌子，本文的目的是为了强化大家对用户长期阅读习惯的理解——“从上到下，从左到右”，尽管这有点老生长谈，但是经过本文形象化的剖析，你是否也有所感悟了呢？对于节奏的切分，你又产生了什么新的看法？
不管怎样，这两种模式只是一个小结，实际创作过程全是花样百出，绝不是两种模式就能轻松完成的。但是，在规律面前，多多益善总不会错。灵活运用规律才是关键。让布局不仅仅是一种方法，我们可以看的更远，融入一些用户体验设计元素。尝试一下，让你的设计不断“升级”。
原文地址：webdesign.tutsplus
优设网翻译：@MartinRGB
了解课程更多信息请点击阅读原文
