【新概念科技按】：“为了创建合适的视觉层次，你必须要清楚咋们的眼睛是如何搜集信息的。”

今天新概念科技给大伙提供的这篇文章中，来自新概念科技的网站制作师从理论和实践两个角度介绍了网页UI设计中的视觉层次问题。一个好的艺术家不仅必须要拥有创造力，一样也必须要考虑诸如主题、颜色、大小、信息等诸多细节信息，或许还有一件更重要的事——如何留白。这不是件简单的事情，同时也是为何咋们如此崇拜达芬奇和梵高的原因。网页UI设计师一样必须要考虑这些问题。就像在我给你推荐的那本电子书中说得那样，网页作为一种新的视觉形式，有它的独特性，但它同时也必须遵守传统艺术形式的法则，它是美学原则和商务需求的统一。一个杰出的网页界面必须显得轻松又吸引人。

在这片文章中，新概念科技将*先介绍什么是视觉层次和如何实现它，然后咋们将会看到它是如何遵照人眼当然移动的规律来运作的。

视觉组织

在这篇文章中（与视觉层次的对话）中，本书的作者同时也是上海网站开发的产品设计，解释了相对网页的视觉呈现，有什么元素是必要的：

• 提醒顾客——做一只看不见的手，网页的布局应当能指导浏览者开展浏览同时，防止让读者感觉很难忍受。比如，在线支付网站通过引导你滚动鼠标来完成支付过程，同时使用恰当的元件提醒你当前所处的流程。
• 交互性的信息联系——网页的信息应当依据浏览者的信息优先顺序开展呈现。比如，在人气火爆的设计网站中，顶部是大致的分类，中间是详细的个案呈现，较底部则是详细的分类目录。
• 创造情绪化的印象——人们到餐厅里吃饭不仅仅是为了填饱自个的肚子罢了，他们一样对食物的味道，口感，卖相都有需求，乃至还包含良好的用餐氛围。网站制作也是如此，特别是人们很可能会原谅你网页上的一部分缺点——假如你可以表达一种积极的情绪。

事实上，UI设计的目标归结起来便是为清楚决以下这三个问题：

• 这是什么（有用性）
• 我应该如何使用（可用性）
• 我为什么要关心这样的（使用愿望）

目光的移动是可预见的

不论是墙角处一闪而过的东西还是大街上从你面前款款走过的美女，你的眼睛很当然地就会聚焦在它（或许是你）感兴趣的地方，不是吗？虽然有一些情况下因人而异，但大部分人的专注力转移都会有明确的趋势，在浏览网页时也一样。（在下边的视觉热点图中你能很明显地看出人的专注力是如何发生转移的）

在一篇有关视觉原理的文章中，上海网站制作师讨论了两种占主导性的阅读方法，不过这里讨论的两种方法仅仅是相对书写习惯是从左至右的民族而言的（阿语系人民表示抗议），让咋们来逐一瞧下。

F型布局（树形模式）

相对典型的文字占主体地位的网页（比如博客），设计的时候都会采用F型的布局模式。浏览者们*先会扫描一下页面左边，竖直方向上的文字信息，来寻找令他们感兴趣的话题或者段落的起始句子。

当浏览者找到了他喜欢的东西的时候，他们就开始阅读了，他们的视线向水平方向上转移。较终的结果便是他们的视线热点图会呈现字母F或E的形状。CNN和NYTimes两个新闻网站用的便是F型布局。新概念科技完成了一项基于232名浏览者者和数千个页面浏览的检验试验，并且列出了以下几条关于F型布局的实践关键之处：

• 浏览者很少会逐字逐句地阅读。
• 头两段是较重要的，应该足够博人眼球。
• 起始段落，小标题得足够有噱头。

这些关键之处如何赞助你完成界面设计？请看下图：

你可以在这幅图中看到，较主要的信息都能一眼看见，而更加细节的东西通过引导都能马上定位。

F型布局结构相对那些包含广告，或者呼告和信息没太大关系的页面很适用。记住，信息为王。F型布局是一种引导方法，而不是一种万用药——浏览者很快就会在看过几个这样子的F型页面布局之后开始感到无趣，用信息——而不是布局方法——抓住他们。

Z型布局（对角模式）

Z型布局主要会用于非文本主导的页面阅读。浏览者*先浏览横贯页面顶部的水平标题栏目（不论是由于它是菜单栏，还是由于你从左到右的阅读习惯）。当视线到达这一行的末尾的时候，它就会转而向左下方（一样是基于你的阅读习惯），然后横向地阅读底部的部分。

这种Z型布局格式可以应用于差不多所有的网页界面，由于它强调了现在网页设计的关键需求，如：层次感，品牌感和交互。Z型布局相对那些需求界面简洁明快，网页间跳转由交互性设计负责实现的网页，是特别适合的。

想要在Z型布局界面中塞入复杂的信息，就不如改用F型布局来得好一部分。不过Z型布局提供的好处便是结构的简洁和有秩序。这里有几条实操经验，你较好牢牢记住它们：

• 背景：将背景和要呈现的信息作对比，以便于浏览者可以关注你的信息框架。
• 点1：为你的Logo找到一个显眼的位置，比如说这里。
• 点2：在这些位置增加一部分链接或交互性元件来赞助浏览者更好的浏览网页。
• 网页的正中间：一个带着几行文字的精美图片可以将网页的上部和下部区离开来，并且浏览者的专注力能依照咋们设想的Z字线路转移。
• 点3：增加关键之处（信息），并沿着水平轴向扩展，将浏览者的目光引导到你在点4放置的的主要呼告上。
• 点4：这里是重点，一个为你的主要呼告（捐款，加盟，注册等）预留的理想的位置。

新概念科技（上海网站制作）总结：

可以预测浏览者目光所至，可以为你提供巨大的好处。在组织你页面上的元素以前，对它们排列优先顺序。一旦你明确了你想呈现给浏览者的东西，剩下的工作便是简单的将它们放置在这两种模式的热点上。假如你感觉必须要在提出你的主要呼告以前提供给顾客越来越多的信息，你乃至可以将Z模式拓展到整个页面上，将我列举的流程重复若干次，事实上，好多网页现在都在这么干。

【干货超多的精品好文合集】：

深度介绍网站交互式设计！
《涨姿势！值得清楚的交互设计五大支柱》

超酷炫的网站制作！
《给跪了！绝对值得体验的较佳炫酷网站》

网站导航设计成效！
《脑洞大开！舒服的圆形导航网站制作》