关于UI位置布局的三条法则，以Gmail为例

关于前端设计学习，其中最有效的调高方法是就是学习启发式方法，通过总结各种情况下出现的简短经验法则。

本文我们参考业界流行的一种启发式方法，最常用和最有用的方法之一位置法则。这三个想法可以解释在UI中应该放置某些控件的位置。为什么"应该"你把某个控件放在某个地方？简单的答案是最简单的：这是用户期望的。位置法则告诉我们用户期望某些控件的位置，这样的示例数不胜举。本文我们就使用比较经典的UI范例来说明这些规则，以谷歌Gmail的UI为例。

将控件放在影响变化的位置

如果你想知道应该把控件（比如：一个按钮，下拉菜单，图标，搜索栏等等）放在哪里，答案都是一样的？影响变化的地方。

例如，如果在一个电子邮件收件箱设计中，用户才能要执行操作有：

删除

标记为已读

标记为重要

所有这些操作都会影响到具体某封电子邮件的。所以应该把这些动作放在它们影响的邮件列表处。如下图，Gmail做法就是这样的。

为了保持界面的清洁，必须将鼠标悬停在具体邮件列表上才可以查看操作。

同样，请考虑到可以在收件箱中对完全不同的操作对象文件夹要采取哪些操作：。

重命名

删除它

更改将邮件转移到该文件夹

将鼠标悬停在文件夹上会出现一个小图标，点击该图标就会打开一个选项菜单：

谷歌考虑到了这些操作。但是注意菜单中并没有出现将邮件转移到该文件夹的操作。实际上，该操作被埋在一些不可思议的设置菜单中。

现在这些例子是关于在UI界面具有清晰，直接表达的布局，但是位置法则也适用于更具概念性的事物。

例如，考虑用户帐户的。Gmail实际上是更大的应用套件的一部分，用户可以通过一个帐户访问该应用。在帐户级别应用的各种操作：在应用程序之间切换，更改用户名，注销，都可以通过小网格图标（代表套件的东西）和头像图片访问帐户。

总之局部性的第一定律适用于界面中更具体的"对象"（例如，我确定Google在某些数据库中有一个配置表）以及功能的概念分组。"注销"，"切换用户"和"修改配置文件"虽然不是配置数据库中的记录，但它们在概念上是相关的，因此操作放置在将它们全部统一的对象表示附近。

如果控件影响整个区域的变化，请将其置于该区域上方

某些操作会对一组消息起作用。想一想"将所有内容标记为已读"，"选择所有邮件"，甚至刷新收件箱以查看新邮件是否已到达。显然，将这些操作放在单个邮件上没有任何意义。

第二个局部定律表明，如果控件作用于更大的元素区域（如电子邮件列表），则将其置于该区域之上。而这正是Gmail中这些控件的位置，在邮件列表之上：

第二种局部定律最重要的一个方面是它是递归的：区域可以相互嵌套。

我们再来看看搜索栏：

为什么搜索栏更高？因为它适用于更大的概念区域（包括了收件箱，而不仅仅是当前显示列表）。为了证明这一点，请考虑当在同一个屏幕上有一个应用程序范围的搜索栏和一个页面范围的搜索时，应用程序范围的搜索将始终更高。

在较高级别，通常会对第二个位置法则有例外的情况。如果要故意违反第二法则，一个好主意是：将控制从左边分离放到右边。Gmail设计就是这样的:

说到例外，位置第三法则涉及我们不能遵循前两个法则的情况。

控件距离影响变化的距离越远，就越应该淡出

根据位置的第一法则，"添加"按钮的最佳位置是"新项目会出现的地方"。比如iOS设置页面：

只要列表不会太长，这就很好。Apple认为我们不想或能够存储数百个指纹。添加一个新指纹或修改密码，将需要首先滚动几百个像素

然而，有一个"新电子邮件"按钮，其中出现该在邮件列表时（至少当有人回复时）不是很合适。

Gmail实际上通过浮动操作按钮（FAB）模式非常出色地解决了这个问题。

为了给予应有的信用，Apple Mail还找到了一个类似的解决方案，其中"Compose"浮动在电子邮件列表中，但可以通过电子邮件轻松访问。

有关位置的第三法则说，无论何时将动作从影响变化的地方移开，你都需要将动作弹出。一个浮动的动作按钮，就像下面的Compose按钮让其失去热点淡出到看不到。

总结：

但总体而言，最好的位置布局解决方案是将控件放在用户期望的位置：列表行（或者列）以及用户需要在此表单中执行的其他操作的位置。