让设计更有说服力的20条经典原则：同域原则、米勒定律

编者按：文章整理了同域原则和米勒定律两条原则，利用正反案例说明原则在设计中的运用。

往期回顾：

《让设计更有说服力的20条经典原则：美即好用效应》 《让设计更有说服力的20条经典原则：多尔蒂门槛》 《让设计更有说服力的20条经典原则：菲茨定律》 《让设计更有说服力的20条经典原则：希克定律》 《让设计更有说服力的20条经典原则：雅各布定律》 《让设计更有说服力的20条经典原则：简洁法则》 《让设计更有说服力的20条经典原则：邻近性》 《让设计更有说服力的20条经典原则：相似性》 《让设计更有说服力的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）项； 选项较多时，对选项进行分类和分组，并尽可能使描述词清晰易懂； 长信息也需要分块处理。

欢迎关注作者的微信公众号：「超人的电话亭」