来源:
Nielson Norman Group
www.nngroup.com/articles/f-shaped-pattern-reading-web-content/
在一篇 有关视觉原理的文章 中,Alex Bigman,99Design的设计作者,讨论了两种占主导性的阅读方式,不过这里讨论的两种方式仅仅是对于书写习惯是从左至右的民族而言的(阿语系人民表示抗议),让我们来逐一看下。
F型布局(树形模式)
对于典型的文字占主体地位的网页(比如博客),设计的时候都会采用F型的布局模式。浏览者们首先会扫描一下页面左边,竖直方向上的文字信息,来寻找令他们感兴趣的话题或者段落的起始句子。
当浏览者找到了他喜欢的东西的时候,他们就开始阅读了,他们的视线向水平方向上转移。最终的结果就是他们的视线热点图会呈现字母F或E的形状。CNN和NYTimes两个新闻网站用的就是F型布局。
Nielson Norman集团的Jakob Nielson完成了一项基于232名浏览者者和数千个页面访问的检验试验,并且列出了以下几条关于F型布局的实践要点:
浏览者很少会逐字逐句地阅读。
头两段是最重要的,应该足够博人眼球。
起始段落,小标题得足够有噱头。
这些要点如何帮助你完成界面设计?请看下图:
来源:了解F布局
www.webdesign.tutsplus.com/articles/understanding-the-f-layout-in-web-de
你可以在这幅图中看到,最主要的信息都能一眼看见,而更加细节的东西通过引导都能马上定位。
F型布局结构对于那些包含广告,或者呼告和内容没太大关系的页面很适用。记住,内容为王。F型布局是一种引导方式,而不是一种万用药——浏览者很快就会在看过几个这样的F型页面布局之后开始感到无趣,用内容——而不是布局方式——抓住他们。
Z型布局(对角模式)
Z型布局主要会用于非文本主导的页面阅读。浏览者首先浏览横贯页面顶部的水平标题栏目(不管是因为它是菜单栏,还是因为你从左到右的阅读习惯)。当视线到达这一行的末尾的时候,它就会转而向左下方(同样是基于你的阅读习惯),然后横向地阅读底部的部分。
来源:了解Z型布局
http://webdesign.tutsplus.com/articles/understanding-the-z-layout-in-web
这种Z型布局格式可以应用于几乎所有的网页界面,因为它强调了现在网页设计的核心需求,如:层次感,品牌感和交互。Z型布局对于那些要求界面简洁明快,网页间跳转由交互性设计负责实现的网页,是非常适合的。
想要在Z型布局界面中塞入复杂的信息,就不如改用F型布局来得好一些。但是Z型布局带来的好处就是结构的简洁和有秩序。这里有几条实操经验,你最好牢牢记住它们:
背景:将背景和要呈现的内容作对比,以便于浏览者能够关注你的内容框架。
点1:为你的Logo找到一个显眼的位置,比如说这里。
点2:在这些位置添加一些链接或交互性元件来帮助浏览者更好的浏览网页。
网页的正中间:一个带着几行文字的精美图片可以将网页的上部和下部区分开来,并且确保浏览者的注意力能按照我们设想的Z字线路转移。
点3:增加要点(内容),并沿着水平轴向扩展,将浏览者的目光引导到你在点4放置的的主要呼告上。
点4:这里是重点,一个为你的主要呼告(捐款,加盟,注册等)预留的理想的位置。
能够预测浏览者目光所至,能够为你带来巨大的好处。在组织你页面上的元素之前,对它们排列优先顺序。一旦你明确了你想呈现给浏览者的东西,剩下的工作就是简单的将它们放置在这两种模式的热点上。
如果你感觉需要在提出你的主要呼告之前提供给用户更多的信息,你甚至可以将Z模式拓展到整个页面上,将我列举的步骤重复若干次,事实上,很多网页现在都在这么干。
武汉网站建设领导品牌!武汉网站建设首选珞珈学子网络科技,精英技术团队,技术咨询电话:027-68772750 13618602336