讓設計更有說服力的20條經典原則：同域原則、米勒定律

編者按：文章整理了同域原則和米勒定律兩條原則，利用正反案例說明原則在設計中的運用。

往期回顧：

1. 《讓設計更有說服力的20條經典原則：美即好用效應》
2. 《讓設計更有說服力的20條經典原則：多爾蒂門檻》
3. 《讓設計更有說服力的20條經典原則：菲茨定律》
4. 《讓設計更有說服力的20條經典原則：希克定律》
5. 《讓設計更有說服力的20條經典原則：雅各布定律》
6. 《讓設計更有說服力的20條經典原則：簡潔法則》
7. 《讓設計更有說服力的20條經典原則：鄰近性》
8. 《讓設計更有說服力的20條經典原則：相似性》
9. 《讓設計更有說服力的20條經典原則：連通性》

同域原則 Law of Common Region

? 1. 簡介說明

理論表述

如果元素處在一個具有明確邊界的區域內，那么在用戶的感知中，這些元素傾向于成組。

理論背景

同域原則是從格式塔知覺律和組織律中發展而來的一條亞原則，在少數文章中也屬于連通性原理的某種細分應用場景，但這里將兩者分開解釋。

因為與原先已存在的知覺律（鄰近性、相似性、連續性、閉合性）截然不同，所以在 1992 年 Stephen E Palmer 在論文《Common region：A new principle of perceptual grouping》中單獨提出了同域原則。該論文表明人們在觀察多個元素時，傾向于把在同一封閉區域內的元素視為一組，這種傾向強于鄰近性和相似性。1999 年，Irvin Rock 將此理論進一步完善。

? 2. 設計案例

利用共同區域來強調元素相關性

同域原則在 UI 設計中的應用極其廣泛，從 iOS/Android 系統級的組件，到各種各樣 APP 的設計，都頻繁的應用同域原則，將相關聯的元素放置在同一片區域/卡片，來使它們的聯系更加緊密，不相關元素間的區分更加明顯，同時頁面內容的劃分也更加規整。

案例1：系統級組件

案例2：輕芒雜志、behance、小米有品

所以，當我們遇到鄰近性原則和相似性原則都無法讓組與組之間有效區分的時候，特別是因為對一屏顯示的內容數目有所要求而無法把組件做得更遠的場景下，我們可以考慮使用同域原則來強化邊界。

利用共同區域來區分元素權重

這就不得不提支付寶和微信支付。

案例3：支付寶、微信支付

我們之所以能夠感覺到最上面四個按鈕的權重是最高、最突出的，不是因為它們的 icon 是最復雜最酷炫的，相反它們的 icon 就是最簡單的線性 icon ，因為它們所在的共同區域用「主色」填充起來，不僅更容易將它們看作為一組，而且這一組的權重還相當之高。

? 3. 注意事項

注意點1：隔斷線不要太顯眼

隔斷線屬于同域原則的一種應用形式，因為在更小的 Cell 單元之間，元素的確是相關的，但是屬于弱相關，所以才會使用隔斷線這種視覺上較弱的邊界。「既然較弱了，就不要做得太顯眼。」把隔斷線做得又黑又粗一點意義都沒有，還破壞了頁面的整體視覺，得不償失。

反面案例1：魔改版 iOS 設置頁

一般來說粗細使用 0.5pt，色彩淡至能感知到它作為邊界的存在，但是不顯眼的程度，就是一條合格的隔斷線。

注意點2：強邊界的共同區域不要多層嵌套

我所說的強邊界，大多情況下指的是卡片式的共同區域。自從前些年 dribbble 上刮起了一陣卡片大投影的風潮，不明所以、鸚鵡學舌的一部分國內設計師就開始生硬得去盲目模仿這種偏飛機稿的風格，并且一模仿就一發不可收拾，卡片外面套卡片，就是這么出來的。

反面案例2：dribbble 某作品

兩層乃至更多層的卡片嵌套會使得頁面的縱向 z 軸厚度變得更厚，而使得頁面給人厚重和費勁的感覺，所以我一向不推薦使用這種風格的設計。尤其對于新人而言，更不應盲目追求和模仿 dribbble 的飛機稿。

除去卡片式的共同區域之外，扁平的強邊界區域，也是能不嵌套就不嵌套，因為嵌套會讓層級的分布變得更加復雜，不利于信息的傳遞。

? 4. 小結

• 利用「共同區域」使元素具有更強的相關性或權重；
• 弱隔斷的邊界不能太顯眼；
• 強邊界區域盡量不要多層嵌套，卡片尤其是如此。

米勒定律 Miller’s Law

? 1. 簡介說明

理論表述

在短時記憶中，人平均只能記憶 7（±2）個項目。即人們最多只能夠記住 7（±2）個項目組成的一組。

理論背景

1956 年，哈多大學的認知學教授 George A. Miller 發表了一篇名為《神奇數字 7》的論文，該論文是人們關于短時記憶內容最早期的研究結果。該文章討論了一維絕對判斷（絕對二進一決策）的極限和短期記憶極限之間的巧合：一維絕對判斷的備選數目與短期記憶極限的數目大致相當，數字都在 7 左右徘徊。

后來的研究雖然對 Miller 論文中的某一些概念進行了修正和完善，但是數字 7 卻被保留了下來，成為了 UI/UX 設計中的一條經典普適的定律：米勒定律。

? 2. 設計案例

米勒定律可以應用在每一個需要排列項目組的地方，就比如我們常常能在 UI 設計中遇到這些問題：為什么是這個數字？為什么最多只能這么多？為什么分頁組件的選項從來沒有一次展示超過 7 項的？為什么功能入口一行最多只有 5 個？為什么 iOS 官方建議的 Tabbar 項目最多只有 5 個？等等。

審視每一種需要排列的選項組

我們需要去控制每一個可能涉及選擇的區域，所包含的選項數量不超過 9 個。

案例1：各種案例

無論是 iOS 的應用文件夾一頁最多只能展示 9 個應用（縮略圖也是），還是 behance 分頁組件一次最多出現 7 個分頁，還是微信讀書書架頁每一屏最多 9 本書，設計師在進行設計時都在時刻注意著米勒定律的影響。

那么為什么有些應用的功能入口一組能有 10 個呢？尤其是京東、閑魚、口碑、美團、網易嚴選這種體量大、分類又細又多的應用，功能入口就超過 10 個。

案例2：京東、閑魚、網易嚴選

它們的功能入口的確一次出現了 10 個，這僅僅是為了照顧強迫癥患者嗎？仔細觀察一下第二排最后一個，「分類」、「全部」、「超級會員」，是不是看起來和其他不太一樣？它們沒有其余 9 個那么強的功能性和可選性，簡單來說，它們看起來與其他選項是同級的、功能類似的，實則并不是，所以會與其他選項區分開來，它們就是在照顧強迫癥患者，以及視覺需求，正好方便把一些推廣性的、用戶不常用的，或者全部分類這樣的功能點塞進去。

選項的描述詞也需要注意

選項越復雜，記憶跨度（所能記憶的項目數量極限）就會相應減少，這意味著選項一旦多起來，其描述詞務必做到簡單易懂、清晰可見。那些復雜的、自創的、不常見的、模糊的、自以為用戶能懂的或看都看不清的描述詞會增大用戶記憶和理解難度，所以描述詞的選取也值得每一位設計師去注意。

案例3：口碑，清晰易懂的選項描述詞

利用希克定律和格式塔原理進行縮減和分組

這就又回到了如何控制選項數量與對選項分組的問題上來，參考之前所詳細講解過的希克定律和格式塔原理（鄰近性、相似性、連通性、同域），我們能夠有效地對大量選項進行分類和分組，并對每一組進行更精確的數量控制，從而滿足米勒定律的記憶要求。

案例4：美團、支付寶

信息同樣需要分塊處理

除了選項分組之外，信息也需要分塊呈現。

比如，當我們需要用戶輸入一長串信息的時候，比如 11 位手機號、地址、身份證號等，需要對這些信息進行分塊處理，方便用戶核對信息。

案例5：造作輸入手機號及地址

針對上述說的幾個方面，我舉兩個反面案例來讓大家直觀感受一下。

? 3. 注意事項

注意點1：大量選項不進行分組的后果很嚴重

反面案例1：PS 窗口菜單

幸好這個菜單不是特別常用，否則如果頻繁需要從這 29 個沒有進行任何分組的菜單中選擇自己想要的一兩個，怕是會瘋。

注意點2：描述詞不清晰的后果也很嚴重

反面案例2：香水時代

圖片并不能表達選項本意的情況下，描述詞還看不清楚，本來用戶能夠輕易理解和記憶這八個入口，現在只能記住四到五個，甚至更少。

? 4. 小結

• 每一組選項最多包含 7（±2）項；
• 選項較多時，對選項進行分類和分組，并盡可能使描述詞清晰易懂；
• 長信息也需要分塊處理。

歡迎關注作者的微信公眾號：「超人的電話亭」