视觉层次与布局艺术：打造用户友好型网站
“为了创建合适的视觉层次，你需要了解我们的眼睛是如何搜集信息的。”
—— Chris Bank
在数字化时代，一个网站的设计不仅仅是美学的展现，更是用户体验和商业成功的基石。易赛诺网站建设团队深入研究用户的视觉浏览习惯，提出了一系列创新的网站布局策略，旨在打造既符合用户直觉又极具吸引力的在线环境。
在这篇文章中，将首先介绍什么是视觉层次和如何实现它，然后我们将会看到它是如何遵照人眼自然移动的规律来运作的。
视觉组织
在这篇论文 Communicating with Visual Hierarchy （与视觉层次的对话）中，Luke Wroblewshi，本书的作者同时也是雅虎的产品设计总监，解释了对于网页的视觉呈现，有哪些元素是必要的：
- 提醒用户: 做一只看不见的手 ，网页的布局应当能指导浏览者进行浏览同时，避免让读者感觉难以忍受。比如，在线支付网站 Square 通过引导你滚动鼠标来完成支付过程，同时使用恰当的元件提醒你当前所处的步骤。
- 交互性的内容联系: 网页的内容应当依据浏览者的信息优先顺序进行呈现。比如，在人气火爆的设计网站 Abduzeedo 中，顶部是大致的分类，中间是详细的个案展示，最底部则是详细的分类目录。
- 创造情绪化的印象: 人们到餐厅里吃饭不仅仅是为了填饱自己的肚子而已，他们同样对食物的味道，口感，卖相都有要求，甚至还包括良好的用餐氛围。网站设计也是如此，特别是人们很可能会原谅你网页上的一些缺点——如果你能够传达一种积极的情绪。来看看 Wufoo 的界面。
事实上，UI设计的目标归结起来就是为了解决以下这三个问题：
- 这是什么（有用性）
- 我应该如何使用（可用性）
- 我为什么要关心这个（使用愿望）
目光的移动是可预见的
Alex Bigman强调，目光的移动是可预见的。在浏览网页时，用户的注意力转移遵循一定趋势。通过视觉热点图，我们可以明显看出用户注意力的转移路径
F型布局（树形模式）
对于典型的文字占主体地位的网页（比如博客），设计的时候都会采用F型的布局模式。浏览者们首先会扫描一下页面左边，竖直方向上的文字信息，来寻找令他们感兴趣的话题或者段落的起始句子。
当浏览者找到了他喜欢的东西的时候，他们就开始阅读了，他们的视线向水平方向上转移。最终的结果就是他们的视线热点图会呈现字母F或E的形状。CNN和NYTimes两个新闻网站用的就是F型布局。
Nielson Norman集团的Jakob Nielson完成了一项基于232名浏览者者和数千个页面访问的检验试验，并且列出了以下几条关于F型布局的实践要点：
- 浏览者很少会逐字逐句地阅读。
- 头两段是最重要的，应该足够博人眼球。
- 起始段落，小标题得足够有噱头。
这些要点如何帮助你完成界面设计？请看下图：
你可以在这幅图中看到，最主要的信息都能一眼看见，而更加细节的东西通过引导都能马上定位。
F型布局结构对于那些包含广告，或者呼告和内容没太大关系的页面很适用。记住，内容为王。F型布局是一种引导方式，而不是一种万用药——浏览者很快就会在看过几个这样的F型页面布局之后开始感到无趣，用内容——而不是布局方式——抓住他们。
Z型布局（对角模式）
Z型布局主要会用于非文本主导的页面阅读。浏览者首先浏览横贯页面顶部的水平标题栏目（不管是因为它是菜单栏，还是因为你从左到右的阅读习惯）。当视线到达这一行的末尾的时候，它就会转而向左下方（同样是基于你的阅读习惯），然后横向地阅读底部的部分。
这种Z型布局格式可以应用于几乎所有的网页界面，因为它强调了现在网页设计的核心需求，如：层次感，品牌感和交互。Z型布局对于那些要求界面简洁明快，网页间跳转由交互性设计负责实现的网页，是非常适合的。
想要在Z型布局界面中塞入复杂的信息，就不如改用F型布局来得好一些。但是Z型布局带来的好处就是结构的简洁和有秩序。这里有几条实操经验，你最好牢牢记住它们：
背景：将背景和要呈现的内容作对比，以便于浏览者能够关注你的内容框架。
- 点1：为你的Logo找到一个显眼的位置，比如说这里。
- 点2：在这些位置添加一些链接或交互性元件来帮助浏览者更好的浏览网页。
- 网页的正中间：一个带着几行文字的精美图片可以将网页的上部和下部区分开来，并且确保浏览者的注意力能按照我们设想的Z字线路转移。
- 点3：增加要点（内容），并沿着水平轴向扩展，将浏览者的目光引导到你在点4放置的的主要呼告上。
- 点4：这里是重点，一个为你的主要呼告（捐款，加盟，注册等）预留的理想的位置。
通过精心设计的视觉层次和布局，网站可以更好地引导用户，提升用户体验，增强吸引力。易赛诺网站建设团队致力于帮助企业实现这一目标，通过专业的设计和策略，让每个网站都能成为用户友好、商业成功的典范