关于UI位置布局的三条法则 _UI

关于前端设计学习，其中最有效的调高方法是就是学习启发式方法，通过总结各种情况下出现的简短经验法则。
本文我们参考业界流行的一种启发式方法，最常用和最有用的方法之一位置法则。这三个想法可以解释在UI中应该放置某些控件的位置。为什么"应该"你把某个控件放在某个地方？简单的答案是最简单的：这是用户期望的。位置法则告诉我们用户期望某些控件的位置，这样的示例数不胜举。本文我们就使用比较经典的UI范例来说明这些规则，以谷歌Gmail的UI为例。
将控件放在影响变化的位置如果你想知道应该把控件（比如：一个按钮，下拉菜单，图标，搜索栏等等）放在哪里，答案都是一样的？影响变化的地方。
例如，如果在一个电子邮件收件箱设计中，用户才能要执行操作有：
删除
标记为已读
标记为重要
所有这些操作都会影响到具体某封电子邮件的。所以应该把这些动作放在它们影响的邮件列表处。如下图，Gmail做法就是这样的。

文章插图

为了保持界面的清洁，必须将鼠标悬停在具体邮件列表上才可以查看操作。
同样，请考虑到可以在收件箱中对完全不同的操作对象文件夹要采取哪些操作：。
重命名
删除它
更改将邮件转移到该文件夹
将鼠标悬停在文件夹上会出现一个小图标，点击该图标就会打开一个选项菜单：

文章插图

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

文章插图

现在这些例子是关于在UI界面具有清晰，直接表达的布局，但是位置法则也适用于更具概念性的事物。
例如，考虑用户帐户的。Gmail实际上是更大的应用套件的一部分，用户可以通过一个帐户访问该应用。在帐户级别应用的各种操作：在应用程序之间切换，更改用户名，注销，都可以通过小网格图标（代表套件的东西）和头像图片访问帐户。

文章插图

总之局部性的第一定律适用于界面中更具体的"对象"（例如，我确定google在某些数据库中有一个配置表）以及功能的概念分组。"注销"，"切换用户"和"修改配置文件"虽然不是配置数据库中的记录，但它们在概念上是相关的，因此操作放置在将它们全部统一的对象表示附近。
如果控件影响整个区域的变化，请将其置于该区域上方某些操作会对一组消息起作用。想一想"将所有内容标记为已读"，"选择所有邮件"，甚至刷新收件箱以查看新邮件是否已到达。显然，将这??些操作放在单个邮件上没有任何意义。
第二个局部定律表明，如果控件作用于更大的元素区域（如电子邮件列表），则将其置于该区域之上。而这正是Gmail中这些控件的位置，在邮件列表之上：

文章插图

第二种局部定律最重要的一个方面是它是递归的：区域可以相互嵌套。
我们再来看看搜索栏：

文章插图

为什么搜索栏更高？因为它适用于更大的概念区域（包括了收件箱，而不仅仅是当前显示列表）。为了证明这一点，请考虑当在同一个屏幕上有一个应用程序范围的搜索栏和一个页面范围的搜索时，应用程序范围的搜索将始终更高。
【关于UI位置布局的三条法则】在较高级别，通常会对第二个位置法则有例外的情况。如果要故意违反第二法则，一个好方法是：将控制从左边分离放到右边。Gmail设计就是这样的: