学交互必须知道的 13 个用户体验定律

▲点击 "TCC翻译情报局" 关注，回复 "社群" 加入我们

本文共 4583 字，预计阅读 12 分钟

TCC 情报局的第 157 篇干货分享

2022 年的第 55 篇

TCC 推荐语：大家好，这里是 TCC 翻译情报局，我是张聿彤。大家在浏览网页的时候有注意到网页的排版和布局吗，有些页面的设计清晰明了，即便同时陈列多项复杂的内容和元素，用户也能在浏览时毫不费力地找出到自己需要的信息，有效的完成任务。本篇内容为大家呈现的，是研究者们总结出的能够让网页交互使用起来更加友好的定律，希望能够对 UX 设计师在进行页面设计时有所启发。

一直以来，设计师们都在努力简化围绕人类展开的交互体验，但是在这个简化过程中，我们也许无意识地使我们的生活变得复杂了，当然这就牵扯到另一个话题，我们可以在未来继续探讨，接下来还是回到本期主题：简化体验！

简化每一个具体的体验 / 流程 / 交互之后，我们还要进一步对其进行优化，提升用户体验，使其更有效率，能够让用户感到愉悦，但这些都是围绕着 “使每一次互动 / 体验变得有意义” 而展开的。几个世纪以来，世界各地的心理学家都在研究人类的这种“简化并使每一次互动变得有意义”的行为习惯。心理学家们基于这些研究和观察，将这些现象定义为成 “人类心理定律” ，而这些定律则成为了后来 “用户体验设计”的基石 。

有趣的是，生活中我们在数字交互界面上都已体验过大多数的定律，也知道我们是如何

感知、理解不同的体验 / 界面，并试图理解一些抽象的案例。而用户体验定律只是提出了人类心理感知的形式，接下来让我们看看具体内容。

1.美观实用性法则

1.Aesthetic-Usability Effect

用户通常将美观的设计视为实用的设计。

我分析了豪华汽车公司：路虎（印度）的网站首页横幅（Hero Page）。极简、干净、严肃的设计和排版呈现了品牌和产品所承载的内容，并让这些看起来更加真实、可靠、强大、高端，而向用户传达这些情绪的，仅仅是一个简单、美观并兼具功能性的首页横幅。

根据美观实用性法则，视觉审美优秀的设计会让用户的大脑对此产生积极的反馈，并让用户认为这样的设计在应用时体验更好。

2.多尔蒂阈值

2. Doherty Threshold

当计算机和用户在双方不必等待对方的速度进行交互时，此时生产效率达到顶峰。

深入了解路虎的产品之后，我还发现了一个应用 “Doherty 阈值” 的交互：探索标签，SUV 的渲染加载需要几毫秒的时间，虽然此处的等待可以忽略不计，但是此处出现的加载进度条给了我一种安心提示，渲染马上就可加载完成，让用户可以进行下一步的探索。

根据 Doherty 阈值，一个交互需要在400毫秒内对系统提供反馈，以此稳定用户的注意力，增强生产力，当后台在加载或处理数据时，动效可以视为其中的一种处理方式，通过视觉交互提升用户的参与感。

3.费茨法则

3. Fitt‘s Law

获取目标的时间是到目标的距离和大小的函数。

路虎在“我们的汽车”产品展示部分很好的阐释了他们的设计是如何应用 菲兹定律 的。我们在这一部分看到很多点击 / 触控点，例如：菜单栏、咨询框、溢出菜单，以及汽车展示卡片（最显眼的部分），这些应用元素分布均匀，排版均匀，留白恰到好处，并完美的运用了负空间。这样的排布能让用户轻松的最大化识别，使用这些触控点。这里最突出的是汽车展示卡片中的图像部分，这些图像放在最显眼的位置，同时也是用户最容易访问的部分，完全符合菲兹定律的描述！

菲兹定律主要强调三个部分：首先，触控 / 点击的目标应该足够大，用户可以轻松准确的进行点击 / 触控动作；其次，目标与目标之间应该留有足够间距；最后，触控 / 点击目标应该放在界面中易于访问的位置。

4.目标渐进定律

4.Goal-Gradient Effect

离目标越近，接近目标的动力就越强。

Infosys 是一家印度的科技公司，他们的网站很好的应用了目标渐进定律。看到那个躺在标题下方的蓝色细横条了吗？这其实是一个进度条，用来提示用户还需要滑动多少内容才能到达他们想要查看的区域，当滑动到页尾时这个进度条会显示加满，以此告知用户无需再滚动页面。

目标渐进定律表明，当用户快越接近一个任务的尾声时，他们工作速度会越快，以求尽快完成目标，而人为的为项目加上进度条，能够帮助确保用户更有动力地完成任务。

5.米勒定律

5.Miller’s Law

一般人的短期记忆中能容纳的物体数量是7（ ±2 ）。

我们来看一下 Infosys 网站首页上显示的选项卡：点击就能让用户返回首页的公司 logo，导航下拉菜单，搜索 / 分享图标，“Let’s Talk” 联系我们，以及溢出菜单。在所有的按钮中，logo、联系我们和溢出菜单是三个最显眼的部分，这些部分和客户服务以及返回主页在排版上有很巧妙的连接，他们能够清晰的引导用户进行下一步探索。这样的排布诠释了米勒定律所强调的：将内容简化成更小的元素，帮助用户更轻松的理解、记忆，执行任务。

6.临近法则

6.Law of Proximity

人们会将相近或相邻的内容视为一组。

Infosys 展示应用 AI 技术的成功案例界面中，阐释了他们是如何应用 临近法则 的。在成功案例这个界面中，我们可以看见四个内容不同但设计风格和排版相似的卡片紧凑的排列在一起。当用户打开这个界面且看到相近排列的四个卡片时就能得知，这一板块陈列的是四个成功案例的故事。

根据临近法则，相近排版能够帮助用户快速理清每个信息之间的关联，在浏览时效率更高。

7.雅各布法则

7.Jakob’s Law

用户在其他软件里花费了更多的时间，这意味着他们更习惯你的网页的操作方式，并且希望其他网站也能对其效仿。

这是印度电商 Flipkart 的网页，他们的竞争对手分别是亚马逊印度子公司以及本土网站 Snapdeal。Flipkart 的首页很好地展示了 雅各布法则 的含义：他们并没有使用和竞争对手一样的设计，而是在布局、排版以及服务上采用了相似的设计，并融入了自己的品牌个性以及设计语言，但是在功能上和竞争者保留了相似之处。

根据雅各布法则，用户期望在新的软件上找到自己熟悉应用的体验或者使用流程，利用这一法则，我们可以创造更好的用户体验，这样用户就能将注意力放在如何完成他们的任务身上，而不是花费更多精力和时间来适应新的应用。

8.同域原则

8.Law of Common Region

当不同元素同时出现在划分清晰的同一区域内时，用户会把这些元素视作同一分组。

Flipkart 的另一个界面显示应用了 同域原则理论，并且他们在这同一页面应用了三次同域原则。标题部分主色调为蓝色出现在屏幕的最上方，用户会默认这一部分含有特殊的信息，例如 Flipkart 的 logo、搜索栏、登陆按钮以及购物车。在 TV / 电器和特色品牌这两个部分也同样应用了同域原则，他们的背景都应用了不同的颜色 / 阴影，这两栏内容都有一样的页边距，陈列不同内容的卡片、整体设计和风格以及排版方式都是相似的。

同域原则是指，可以通过定义元素或元素组的背景，让用户意识到此时在浏览的是同一栏目的不同内容，最简单的方式之一就是在群组的背景添加方框来整合元素。

9.席克定律

9.Schick’s Law

当选项增加时，人们做选择花费的时间就越长。

当我进入 Flipkart 网站，在不登陆账号的情况下购买机器人吸尘器时，在确认订单这一环节，页面会跳出一个菜单，用户根据划分的四个步骤就能轻松进行付款，并且在这一过程中不会被其他无用信息干扰。这就是 席克定律 的应用了。

席克定律强调，交互过程中用户的反映时长与应用户决策时长成正相关时，应将复杂的任务转化成多个小步骤，以此来减少认知负荷，同时筛选并减少页面中会出现的选项。

10.相似性原则

10.Law of similiarity

当我们看到的信息有相同元素的设计（形状、大小等）时，大脑默认讲这些信息归为同一组。

这是一家叫做 Mobikwik 的数字支付公司产品的主界面，如果我们观察在线预付费移动充值部分，用户会注意到它由一组文本框和一个按钮构建的表单组成。当用户刚打开这个界面时，用户会把这些元素看成是一组内容，而不是把这些信息单独看成是 4 栏独立的内容。

根据相似性原则，视觉上颜色、形状、大小、朝向以及动效相似的内容会向用户传递“我们是同一组分类”的信号，在并且这些内容在功能上往往有一致性。

11.连通性原则

11.Law of Uniform Connectedness

视觉上有关联的元素更容易被视作是互相之间有联系的。

同样，还是在 Mobikwik 同一个支付界面上，左边的菜单栏里排列了不同的选项，能够间接引导用户点击到他们需要的页面上。这就是 连通性原则 的体现了：菜单里所有的选项都是深蓝背景，在视觉上与页面的其他内容分隔开来，用户看到左侧的菜单栏时会自然而然的把这些内容视为有相似功能的选项。

根据连通性原则，视觉上具有相似的形状、线条、颜色、外框的元素会被认为是具有相同功能的内容。

12.雷斯多夫效应

12.Von Restorff Effect

雷斯多夫效应又称隔离效应，指当许多相似内容在同一时间出现时，与众不同的最容易被人记住。

这是 Mobikwik 的打折特惠产品页面，在众多分类标签中你一眼就能看见 “cashback”，这个背景被改为蓝色的标签在一众灰色标签中脱颖而出，让用户第一眼就记住了它。这就是我们所说的 雷斯多夫效应（隔离效应）。

13.布拉格南兹法则

13.Law of Prägnanz

人们会将复杂的图形简单化以此减少认知负荷。

这是 Mobikwik 投资基金界面，右侧的线状图显示用户在 Mobikwik 得到的投资回报，而曲线的走势会随着左侧数据的变化而变化，用户在解读现状图时会将数值变化的曲线看作一个整体，而不是分散的数据读数。这就是 布拉格南兹法（则简洁法则）的应用。

根据布拉格南兹法则（也称简洁法则），人类的双眼更喜欢阅读风格简洁的图表，因为复杂的图形会增加认知负荷。

以上就是用户体验设计的 13 条法则，你一定也注意到多个法则是如何在同一设计中的应用，以及相互之间是如何配合的。其实你很难找到应用了所有以上法则的设计，为了读者方便理解，我们对以上所有的法则分别进行了介绍。当然，用户体验设计中的应用法则肯定是不止我们介绍的这几种，您可以浏览 lawsofux.com 查阅更多相关信息。

以上，感谢此次阅读，希望本篇文章对你未来的设计有所帮助。

原文：13 Laws of UX. and their use in digital interfaces | by Hitesh Jashnani | Muzli - Design Inspiration

作者：Hitesh Jashnani

译者：高畅

审核：李泽慧、张聿彤

编辑：李莉好

本文翻译已获得作者的正式授权（授权截图如下）

往期精选文章：

添加小助手微信，备注「社群」，即可加入读者群。

本文来自微信公众号“TCC翻译情报局”（ID：TCC-design）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。

TAGS: 体验内容应用用户设计

一	二	三	四	五	六	日
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31