關于前端設計學習，其中最有效的調高方法是就是學習啟發式方法，通過總結各種情況下出現的簡短經驗法則。

本文我們參考業界流行的一種啟發式方法，最常用和最有用的方法之一位置法則。這三個想法可以解釋在UI中應該放置某些控件的位置。為什么"應該"你把某個控件放在某個地方？簡單的答案是最簡單的：這是用戶期望的。位置法則告訴我們用戶期望某些控件的位置，這樣的示例數不勝舉。本文我們就使用比較經典的UI范例來說明這些規則，以谷歌Gmail的UI為例。

將控件放在影響變化的位置

如果你想知道應該把控件（比如：一個按鈕，下拉菜單，圖標，搜索欄等等）放在哪里，答案都是一樣的？影響變化的地方。

例如，如果在一個電子郵件收件箱設計中，用戶才能要執行操作有：

刪除

標記為已讀

標記為重要

所有這些操作都會影響到具體某封電子郵件的。所以應該把這些動作放在它們影響的郵件列表處。如下圖，Gmail做法就是這樣的。

為了保持界面的清潔，必須將鼠標懸停在具體郵件列表上才可以查看操作。

同樣，請考慮到可以在收件箱中對完全不同的操作對象文件夾要采取哪些操作：。

重命名

刪除它

更改將郵件轉移到該文件夾

將鼠標懸停在文件夾上會出現一個小圖標，點擊該圖標就會打開一個選項菜單：

谷歌考慮到了這些操作。但是注意菜單中并沒有出現將郵件轉移到該文件夾的操作。實際上，該操作被埋在一些不可思議的設置菜單中。

現在這些例子是關于在UI界面具有清晰，直接表達的布局，但是位置法則也適用于更具概念性的事物。

例如，考慮用戶帳戶的。Gmail實際上是更大的應用套件的一部分，用戶可以通過一個帳戶訪問該應用。在帳戶級別應用的各種操作：在應用程序之間切換，更改用戶名，注銷，都可以通過小網格圖標（代表套件的東西）和頭像圖片訪問帳戶。

總之局部性的第一定律適用于界面中更具體的"對象"（例如，我確定google在某些數據庫中有一個配置表）以及功能的概念分組。"注銷"，"切換用戶"和"修改配置文件"雖然不是配置數據庫中的記錄，但它們在概念上是相關的，因此操作放置在將它們全部統一的對象表示附近。

如果控件影響整個區域的變化，請將其置于該區域上方

某些操作會對一組消息起作用。想一想"將所有內容標記為已讀"，"選擇所有郵件"，甚至刷新收件箱以查看新郵件是否已到達。顯然，將這??些操作放在單個郵件上沒有任何意義。

第二個局部定律表明，如果控件作用于更大的元素區域（如電子郵件列表），則將其置于該區域之上。而這正是Gmail中這些控件的位置，在郵件列表之上：

第二種局部定律最重要的一個方面是它是遞歸的：區域可以相互嵌套。

我們再來看看搜索欄：

為什么搜索欄更高？因為它適用于更大的概念區域（包括了收件箱，而不僅僅是當前顯示列表）。為了證明這一點，請考慮當在同一個屏幕上有一個應用程序范圍的搜索欄和一個頁面范圍的搜索時，應用程序范圍的搜索將始終更高。

在較高級別，通常會對第二個位置法則有例外的情況。如果要故意違反第二法則，一個好方法是：將控制從左邊分離放到右邊。Gmail設計就是這樣的:

說到例外，位置第三法則涉及我們不能遵循前兩個法則的情況。

控件距離影響變化的距離越遠，就越應該淡出

根據位置的第一法則，"添加"按鈕的最佳位置是"新項目會出現的地方"。比如IOS設置頁面：

只要列表不會太長，這就很好。Apple認為我不想或能夠存儲數百個指紋。添加一個新指紋或修改密碼，將需要首先滾動幾百個像素

然而，有一個"新電子郵件"按鈕，其中出現該在郵件列表時（至少當有人回復時）不是很合適。

Gmail實際上通過浮動操作按鈕（FAB）模式非常出色地解決了這個問題。

為了給予應有的信用，Apple Mail還找到了一個類似的解決方案，其中"Compose"浮動在電子郵件列表中，但可以通過電子郵件輕松訪問。

有關位置的第三法則說，無論何時將動作從影響變化的地方移開，你都需要將動作彈出。一個浮動的動作按鈕，就像下面的Compose按鈕讓其失去熱點淡出到看不到。

總結：

但總體而言，最好的位置布局解決方案是控件放在用戶期望的位置：列表行（或者列）以及用戶需要在此表單中執行的其他操作的位置。