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

同域原則 Law of Common Region

?1. 簡(jiǎn)介說(shuō)明

理論表述

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

理論背景

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

因?yàn)榕c原先已存在的知覺(jué)律（鄰近性、相似性、連續(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ū)域來(lái)強(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ū)域/卡片，來(lái)使它們的聯(lián)系更加緊密，不相關(guān)元素間的區(qū)分更加明顯，同時(shí)頁(yè)面內(nèi)容的劃分也更加規(guī)整。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

反面案例2：dribbble 某作品

兩層乃至更多層的卡片嵌套會(huì)使得頁(yè)面的縱向 z 軸厚度變得更厚，而使得頁(yè)面給人厚重和費(fèi)勁的感覺(jué)，所以我一向不推薦使用這種風(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. 簡(jiǎn)介說(shuō)明

理論表述

在短時(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 左右徘徊。

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

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

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

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

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

案例1：各種案例

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

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

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

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

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

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

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

利用?？硕珊透袷剿磉M(jìn)行縮減和分組

這就又回到了如何控制選項(xiàng)數(shù)量與對(duì)選項(xiàng)分組的問(wèn)題上來(lái)，參考之前所詳細(xì)講解過(guò)的?？硕珊透袷剿恚ㄠ徑浴⑾嗨菩?、連通性、同域），我們能夠有效地對(duì)大量選項(xiàng)進(jìn)行分類(lèi)和分組，并對(duì)每一組進(jìn)行更精確的數(shù)量控制，從而滿(mǎn)足米勒定律的記憶要求。

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

信息同樣需要分塊處理

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

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

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

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

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

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

反面案例1：PS 窗口菜單

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

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

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

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

? 4. 小結(jié)

每一組選項(xiàng)最多包含 7（±2）項(xiàng)；

選項(xiàng)較多時(shí)，對(duì)選項(xiàng)進(jìn)行分類(lèi)和分組，并盡可能使描述詞清晰易懂；

長(zhǎng)信息也需要分塊處理。

原創(chuàng) : 超人的電話(huà)亭