第2章 页面元素摆放指南

 第2章 页面元素摆放指南

从印刷时代开始,页面上各个元素的摆放位置一直困扰着设计师们。因此,合理地规划元素在页面中的位置是尤为重要的。

本章所提及的元素摆放指南最早诞生于印刷时代,并引导设计师们合理地对元素进行布局。

2.1 四分布局

首先,我们需要将屏幕等分为四块,如图所示。

Picture4.png

四分布局

2.1.1 主视觉区(Primary Optical Area)

左上角的区域叫做“主视觉区”。当用户的眼睛扫视页面的时候,目光一般会停留在这个区域。主要视觉区将会在第一时间吸引用户的注意力。因此,本区域可以用来放置网站的logo,告知用户当前页面的位置,显示欢迎信息等。

2.1.2 强视觉区(Strong Follow)

第二个区域叫做“强视觉区”,该区域对用户的吸引力仅次于第一个区域。我们的视觉一般是在水平方向移动的,因此,我们的大脑会很容易引导视线从第一个区域转移到该区域。设计师可以通过在首页放置一个大图片等方式来引导用户视线的水平移动。在这里,我们运用了“古腾堡之力”的水平力。

2.1.3 终止区(Terminal Area)

当目光划过第二个区域并准备向屏幕末端移动的时候,“垂直力”将会引导用户的目光来到第四个区域。这个区域正是“终止区”,即视线终止的地方。该区域可以放置按钮,也可以用来告诉用户接下来该做什么,如可以放一个链接来引导用户浏览下一个页面。

在这个过程中,我们跳过了“弱视觉区”。

2.1.4 弱视觉区(Weak Follow)

为了确定用户视觉的浏览路径,我们需要跳过第三个区域。所以,该区域我们不能放太多重要的内容。

如果第三个区域的内容和第二个区域的内容一样多,有可能会产生“冲突”。刚浏览完第一个区域的用户将会得到两个焦点,此时,用户的心里就会想,下一步应该看哪里呢?我们知道“水平力”和“垂直力”其实是相等的,这就意味着用户的视线将会停滞在这里不知所措,不知道应该选择哪一个区域继续浏览。我们一点也不想让这种情况发生。

我们希望页面中定义的浏览路线对于每一个人都是一致的,所以在设计中,我们要避免冲突。

2.2 使用这个准则需要分情况

本章提到的准则只作为设计师的一个参考,有时候我们的客户是不会让我们将页面的1/4留为空白的。因此,我们可以把这个准则应用在网站的首页或者各种CMS上,但是该准则并不适用于专业性强的网站,在此类网站中,我们希望充分利用屏幕上的每一寸空间。

2.3 本章所提到的技巧

设计技巧4

 

将第三个区域留为空白可以避免页面中的视觉冲突。

目录

相关技术