第1章 布局中的力和重力

 第1章 布局中的力和重力

1.1 搞清楚用户是如何使用的

设计一个布局其实需要理解一种“力”,这种力会控制用户的行为。用户的第一个认知周期是从环境中获取信息。然而,对于我们来说,用户得到的大多数的信息是通过眼睛来获取的(也就是他看到了什么)。理解眼睛是如何工作的,尤其是理解眼睛浏览一个页面的方式在设计中是一个很重要的参考量。

1.2 两种主要的“力”

眼睛浏览一个页面的时候,主要是靠两种“力”来驱动,即:从上到下从左到右(后者还要复杂一些,我等一下会讲到)。

这两种力在平面设计中较为常用,如报纸、书籍和广告。同样的,对于一些数字产品,如网站、登录页面和APP。上面提到的“力”也同样适用。

我们来看一下这两种力到底是什么样的。

Picture2.png{}

两种“力”

1.2.1 从上到下的“力”

我们先来看第一种力。这种力是垂直方向的——它可以驱动我们从上到下地浏览信息。这条规律也叫“古腾堡之力”,是以发明印刷机的古腾堡先生之名命名的。每当我们浏览一个图形界面的时候,总会感觉有一股力量让我们不自觉地从上到下浏览页面。

我们应该如何利用这条规律呢?我们应该把最主要的信息放在顶端,以便于用户可以在第一时间看到。这种做法很直接,对吧?

1.2.2 从左到右的“力”

第二种力会影响用户水平方向的浏览顺序。这种力和当前内容所用的语言相关,不同语言的阅读顺序其实是不一样的。如果你的内容和英语的阅读顺序一样,这种力应该是从左向右的。如果内容是用从右向左的阅读顺序来做的,例如希伯来文和阿拉伯文,这种力就应该反过来——也就是从右向左。

但是我要声明一点,这种力其实是和读者有关的。如果读者日常的习惯就是从左向右的阅读顺序,那么这位读者在浏览一个页面的时候,将会把眼睛“自动地”放在页面的左上角。

1.2.3 把这两个“力”合在一起

在物理中,经常使用“矢量合成”的方法来计算多个力的合力。我们都知道,力有方向,也有大小。那么,这两种力哪一种更强一些呢?是从左到右的“力”还是从上到下的“力”?

一般来说,这两个力是等同的,创建一个矢量其实就是从屏幕的左上角到右下角连接一条线。

Picture3.png{}

通常情况下的浏览路径

如图3所示,通常情况下,用户的浏览路径都是从左上角开始。这两种“力”会引导用户从左上角一直浏览到右下角。

1.3 所以,用户的浏览方向是对角线方向吗?

那么是否就像上文所提到的那样,用户一定会按照对角线方向来浏览屏幕呢?

当然不是,一些研究(如视觉追踪)表明,人们只是在浏览的时候眼睛会按照对角线方向移动。所以说这种对角线方向的说法只是用户大体的视觉移动方向。

1.4 所以,用户到底是怎样浏览页面的呢?

我们目前所知道的是用户的视线通常会从左上角移动到右下角。但是在移动的过程中都发生了什么呢?答案是:看情况。当然了,这也取决于设计师。元素在页面上的布局也会影响用户浏览页面的方式。

这既是一个好消息,又是一个坏消息。对于那些认为用户的浏览过程一成不变的设计师来说收到的就是坏消息。如果设计师设计出来的页面不是用户想要的,那么这个设计师就一定要反思了。

好消息就是,我们有很多方法来控制用户的浏览路径。优秀的设计师会有很强烈的控制欲。我们要在达到商业目标的基础上来定义用户如何浏览我们的页面。

在接下来的章节中,我会告诉你怎样使用这两种“力”。

1.5 本章所提到的技巧

设计技巧1

 

这两种“力”会控制用户的浏览路径,并且这两种“力”的强度相差无几。

 

设计技巧2

 

浏览路径从左上角一直到右下角。

 

设计技巧3

浏览和阅读的路径是一条直线。

目录

相关技术