關(guān)于前端設(shè)計(jì)學(xué)習(xí)，其中最有效的調(diào)高方法是就是學(xué)習(xí)啟發(fā)式方法，通過總結(jié)各種情況下出現(xiàn)的簡(jiǎn)短經(jīng)驗(yàn)法則。

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

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

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

例如，如果在一個(gè)電子郵件收件箱設(shè)計(jì)中，用戶才能要執(zhí)行操作有：

刪除

標(biāo)記為已讀

標(biāo)記為重要

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

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

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

重命名

刪除它

更改將郵件轉(zhuǎn)移到該文件夾

將鼠標(biāo)懸停在文件夾上會(huì)出現(xiàn)一個(gè)小圖標(biāo)，點(diǎn)擊該圖標(biāo)就會(huì)打開一個(gè)選項(xiàng)菜單：

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

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

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

總之局部性的第一定律適用于界面中更具體的"對(duì)象"（例如，我確定google在某些數(shù)據(jù)庫中有一個(gè)配置表）以及功能的概念分組。"注銷"，"切換用戶"和"修改配置文件"雖然不是配置數(shù)據(jù)庫中的記錄，但它們?cè)诟拍钌鲜窍嚓P(guān)的，因此操作放置在將它們?nèi)拷y(tǒng)一的對(duì)象表示附近。

如果控件影響整個(gè)區(qū)域的變化，請(qǐng)將其置于該區(qū)域上方

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

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

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

我們?cè)賮砜纯此阉鳈冢?/p> 關(guān)于UI位置布局的三條法則，以Gmail為例

為什么搜索欄更高？因?yàn)樗m用于更大的概念區(qū)域（包括了收件箱，而不僅僅是當(dāng)前顯示列表）。為了證明這一點(diǎn)，請(qǐng)考慮當(dāng)在同一個(gè)屏幕上有一個(gè)應(yīng)用程序范圍的搜索欄和一個(gè)頁面范圍的搜索時(shí)，應(yīng)用程序范圍的搜索將始終更高。

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