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

往期回顧：

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

同域原則 Law of Common Region

? 1. 簡介說明

理論表述

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

理論背景

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

因?yàn)榕c原先已存在的知覺律（鄰近性、相似性、連續(xù)性、閉合性）截然不同，所以在 1992 年 Stephen E Palmer 在論文《Common region：A new principle of perceptual grouping》中單獨(dú)提出了同域原則。該論文表明人們?cè)谟^察多個(gè)元素時(shí)，傾向于把在同一封閉區(qū)域內(nèi)的元素視為一組，這種傾向強(qiáng)于鄰近性和相似性。1999 年，Irvin Rock 將此理論進(jìn)一步完善。

? 2. 設(shè)計(jì)案例

利用共同區(qū)域來強(qiáng)調(diào)元素相關(guān)性

同域原則在 UI 設(shè)計(jì)中的應(yīng)用極其廣泛，從 iOS/Android 系統(tǒng)級(jí)的組件，到各種各樣 APP 的設(shè)計(jì)，都頻繁的應(yīng)用同域原則，將相關(guān)聯(lián)的元素放置在同一片區(qū)域/卡片，來使它們的聯(lián)系更加緊密，不相關(guān)元素間的區(qū)分更加明顯，同時(shí)頁面內(nèi)容的劃分也更加規(guī)整。

案例1：系統(tǒng)級(jí)組件

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

所以，當(dāng)我們遇到鄰近性原則和相似性原則都無法讓組與組之間有效區(qū)分的時(shí)候，特別是因?yàn)閷?duì)一屏顯示的內(nèi)容數(shù)目有所要求而無法把組件做得更遠(yuǎn)的場景下，我們可以考慮使用同域原則來強(qiáng)化邊界。

利用共同區(qū)域來區(qū)分元素權(quán)重

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

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

我們之所以能夠感覺到最上面四個(gè)按鈕的權(quán)重是最高、最突出的，不是因?yàn)樗鼈兊?icon 是最復(fù)雜最酷炫的，相反它們的 icon 就是最簡單的線性 icon ，因?yàn)樗鼈兯诘墓餐瑓^(qū)域用「主色」填充起來，不僅更容易將它們看作為一組，而且這一組的權(quán)重還相當(dāng)之高。

? 3. 注意事項(xiàng)

注意點(diǎn)1：隔斷線不要太顯眼

隔斷線屬于同域原則的一種應(yīng)用形式，因?yàn)樵诟〉?Cell 單元之間，元素的確是相關(guān)的，但是屬于弱相關(guān)，所以才會(huì)使用隔斷線這種視覺上較弱的邊界。「既然較弱了，就不要做得太顯眼。」把隔斷線做得又黑又粗一點(diǎn)意義都沒有，還破壞了頁面的整體視覺，得不償失。

反面案例1：魔改版 iOS 設(shè)置頁

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

注意點(diǎn)2：強(qiáng)邊界的共同區(qū)域不要多層嵌套

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

反面案例2：dribbble 某作品

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

除去卡片式的共同區(qū)域之外，扁平的強(qiáng)邊界區(qū)域，也是能不嵌套就不嵌套，因?yàn)榍短讜?huì)讓層級(jí)的分布變得更加復(fù)雜，不利于信息的傳遞。

? 4. 小結(jié)

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

米勒定律 Miller’s Law

? 1. 簡介說明

理論表述

在短時(shí)記憶中，人平均只能記憶 7（±2）個(gè)項(xiàng)目。即人們最多只能夠記住 7（±2）個(gè)項(xiàng)目組成的一組。

理論背景

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

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

? 2. 設(shè)計(jì)案例

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

審視每一種需要排列的選項(xiàng)組

我們需要去控制每一個(gè)可能涉及選擇的區(qū)域，所包含的選項(xiàng)數(shù)量不超過 9 個(gè)。

案例1：各種案例

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

那么為什么有些應(yīng)用的功能入口一組能有 10 個(gè)呢？尤其是京東、閑魚、口碑、美團(tuán)、網(wǎng)易嚴(yán)選這種體量大、分類又細(xì)又多的應(yīng)用，功能入口就超過 10 個(gè)。

案例2：京東、閑魚、網(wǎng)易嚴(yán)選

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

選項(xiàng)的描述詞也需要注意

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

案例3：口碑，清晰易懂的選項(xiàng)描述詞

利用希克定律和格式塔原理進(jìn)行縮減和分組

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

案例4：美團(tuán)、支付寶

信息同樣需要分塊處理

除了選項(xiàng)分組之外，信息也需要分塊呈現(xiàn)。

比如，當(dāng)我們需要用戶輸入一長串信息的時(shí)候，比如 11 位手機(jī)號(hào)、地址、身份證號(hào)等，需要對(duì)這些信息進(jìn)行分塊處理，方便用戶核對(duì)信息。

案例5：造作輸入手機(jī)號(hào)及地址

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

? 3. 注意事項(xiàng)

注意點(diǎn)1：大量選項(xiàng)不進(jìn)行分組的后果很嚴(yán)重

反面案例1：PS 窗口菜單

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

注意點(diǎn)2：描述詞不清晰的后果也很嚴(yán)重

反面案例2：香水時(shí)代

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

? 4. 小結(jié)

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

歡迎關(guān)注作者的微信公眾號(hào)：「超人的電話亭」