这是 Jon Yablonski 整理的 Laws of UX(UX 定律) 2.0 全集——把认知心理学几十年的实验结论(很多源自 1950s–80s 的经典研究),翻译成做界面时能直接套用的设计原则。它们大多不是 Yablonski 原创,而是从心理学/人因工程"借"来的成熟规律(菲茨、希克、米勒、卡尼曼……),Yablonski 的贡献是把它们对准了数字产品设计。
读法:别把 28 条当 28 个孤立知识点背。它们其实在反复敲打同一组底层事实——人脑算力有限、注意力稀缺、靠捷径做判断、靠习惯认路、感知比事实更重要。按这 6 个底层意图归簇:
- 认知负荷(大脑算力有限):做减法,把复杂度从用户身上挪到系统身上。
- 决策摩擦(选择是有成本的):选项越多越慢越焦虑,措辞会带偏判断,用户不看说明书。
- 格式塔分组(人脑自动归组):用间距/边框/颜色/相似度控制"什么和什么看起来是一伙的"。
- 时间感知与动机(感知 > 事实):速度、进度、结尾的体感,比真实耗时更决定满意度。
- 熟悉与韧性(用户带着旧习惯来):像别家一样工作,宽容地接收各种输入。
- 注意力与美学(眼睛会自动筛选):突出关键、避开广告样式、好看会让人误以为好用。
这套定律和 NNGroup UX 原则 / 金句 19 条(You Are Not the User / Keep It Simple / Less Is More / Why Beats What / It Depends … 按 5 大主题成簇 + 心法/反例) 的 UX 口号高度互文:口号是"提醒团队心态别跑偏"的口诀,定律是"有心理学实验撑腰、能预测用户行为"的规律。术语首次出现都行内解释。
一、认知负荷:大脑算力有限,逼你做减法
底层事实:工作记忆(Working Memory,大脑临时存放当前要用信息的"缓冲区")一次只装得下 4–7 个信息块,且约半分钟就清空。界面塞得越满,用户扫描、记忆、决策就越费劲——错误率上升、效率下降、人变烦躁。这一簇的所有定律,本质都在回答一个问题:怎么让用户少动脑。
| 定律(EN / 中) | 定义 | 一句话心法 |
|---|---|---|
| Cognitive Load 认知负荷 | 理解并操作一个界面所需的脑力总量 | 分两种:内在负荷(任务本身固有的难)+ 外在负荷(没用的装饰/干扰额外加的难);你能砍的是外在那部分 |
| Working Memory 工作记忆 | 大脑临时存放并加工当前任务信息的系统 | 容量小(4–7 块)、保留短(秒级);别让用户"记着上一页的东西去填下一页" |
| Miller's Law 记忆法则 | 人工作记忆平均容纳 7±2 个项目 | 重点是"分块(chunking)"不是数字 7;别拿"七项法则"当砍导航的借口 |
| Chunking 组块 | 把零散信息拆开再按意义重组成小单元 | 相关的放一起、不相关的用间距隔开、按重要性排序——三招让信息合脑子的处理习惯 |
| Tesler's Law 特斯勒定律(复杂度守恒) | 每个系统都有一份无法消除的核心复杂度,只能在用户和系统之间转移 | 让系统多扛,用户少扛(自动填、智能建议);别把工程师一周能修的麻烦,转嫁给百万用户每天浪费一分钟 |
| Occam's Razor 奥卡姆剃刀 | 几个方案都能解决同一问题时,选假设最少/最简单那个 | 从最朴素的版本起步,删到"再删就坏"为止;警惕"复杂偏好"(把复杂误当聪明) |
| Law of Prägnanz 简单优先原则 | 人会把复杂/模糊的图像,自动解读成最简单的形态(因为最省脑力) | 简单形状更易懂易记;复杂数据/图形要主动化繁为简 |
Why 大脑会"过载":工作记忆像一块只有几个格子的便签板。格子被占满时,人做事变慢、漏细节、容易出错,还会主观感到"累/烦"。1956 年心理学家乔治·米勒发现年轻人短期最多记约 7 样东西(不论每样信息量大小)——但他真正关心的不是"7",而是分块:把 19195552743 写成 1-919-555-2743,信息量没变,记忆负担骤降。记住:米勒定律不是"导航不能超过 7 项"——导航是"浏览"不是"记忆",可以有几十项,只要分了组、留了白、用线隔开就清楚(耐克官网导航项很多但分组清晰,反而好用)。
Why "复杂度守恒"是这簇的总闸(Tesler's Law):发邮件必须有发件人 + 收件人,这份复杂度删不掉——但现代邮箱自动填发件人、按联系人猜收件人、Smart Compose 帮你补句子,把复杂度从用户挪到了系统后台。Amazon Go 无人店把"结账"这件本质复杂的事,用计算机视觉 + AI 全吞进系统,用户拿了就走。Tesler 当年用一句话说服苹果接受"软件可以更复杂只要用户更轻松":"如果百万用户每天浪费一分钟,去解决一个工程师一周就能修的问题,就是让用户为工程师的方便买单。"
反例(过度简化也是坑):Tesler 定律的另一半是"不能为了简洁砍掉必要复杂度"。Reddit 改版反复"删多于加",删到界面清爽但功能空洞,用户找不到要的东西就跑去更专业的替代品。Hick 定律里也提醒:选项太少反而不好找——简单 ≠ 把东西藏起来。
减负六招(把外在认知负荷往下压):① 删无用装饰(每个元素都吃脑力);② 多用熟悉的设计模式(用户不用学新东西);③ 减少用户要做的事(默认选项、自动填历史输入);④ 减少选择(尤其导航/表单/下拉);⑤ 选项集中显示别藏(藏起来用户以为"就这些了");⑥ 内容易读(字体/字号/留白)。
决策导向(PM 版):每次要往界面加东西,先问"这是在帮用户完成核心任务,还是在加外在认知负荷?";每次觉得某流程麻烦,先问"这份复杂度能不能让系统扛掉,而不是甩给用户?"。表单字段、确认弹窗、二次输入——能自动的就别让用户手动。
二、决策摩擦:选择是有成本的
底层事实:每多一个选项,决策时间和心理负担都上升;而且人做判断时严重依赖"思维捷径",会被呈现方式带偏,还懒得读任何说明书。这一簇讲的是:别把"做决定"这件累活全推给用户。
| 定律(EN / 中) | 定义 | 一句话心法 |
|---|---|---|
| Hick's Law 希克定律 | 做决策的时间随选项数量和复杂度按对数增长 | 选项越多越慢;拆步骤、推荐默认项、渐进引导都能降摩擦 |
| Choice Overload 选择过载 | 选项太多反而让人困惑、焦虑、放弃(又称"选择悖论") | 不是一味减选项,而是把选项排列/推荐得更好(引导 > 限制) |
| Cognitive Bias 认知偏差 | 判断时系统性的思维偏差,影响我们看世界和做决定 | 同一份数据换个说法就能改变结论;做重要决策前刻意换框架、补背景、慢一拍 |
| Paradox of the Active User 主动用户悖论 | 用户从不读说明书,上来就用(哪怕因此碰壁) | 别指望用户看教程;把帮助塞进使用过程里(tooltip / 渐进引导) |
Why 选项越多越慢(Hick's Law):1952 年希克和海曼发现,反应时间随选项数按对数增长——公式 RT = a + b·log₂(n+1)(n 是选项数)。直觉验证:Netflix 发现用户平均要花 18 分钟挑片,因为选太多会纠结,所以它用"热播/热门"帮你快速收敛。Apple TV 遥控器只留极少按键,把复杂度推给电视端的菜单逐级展开,所以拿起来毫无压力。落地三招:拆步骤(复杂任务切成简单步)、高亮推荐项(Notion 新手清单一步步教、Calendly 三档套餐表格对比)、渐进引导(Slack 用机器人,先只放"发消息",学会了再放高级功能)。
Why 选择过载是把双刃剑(Choice Overload):2000 年那个著名的果酱实验——超市摆 24 种果酱时,看的人多买的人少;摆 6 种时,反而更多人掏钱。但别走极端:研究也显示人不喜欢只有一个选项(没法比较),三个选项比两个更好决定("诱饵效应"),星巴克几百种组合照样受欢迎。结论是 Barry Schwartz 的那句:"自由若完全没有限制,人反而会迷失。" 关键不是砍到最少,而是选择架构(Choice Architecture):像超市把健康食品放显眼处一样,把选项排列/推荐得让人更好选(Netflix 按你口味推荐,而不是甩一堆电影让你迷失)。
Why 措辞能带偏专家(Cognitive Bias):NNGroup 对 1000+ UX 从业者做过实验——同一个测试结果,"20 人中 4 人找不到搜索功能"(负面框架)对比"20 人中 16 人找到了"(正面框架),看负面框架的人多 31% 认为该重做。这就是框架效应(Framing Effect),源自卡尼曼的"系统 1(快直觉)/ 系统 2(慢思考)":系统 1 飞快但带偏见,我们躲不掉,只能在关键时刻警惕。对抗三招:克制秒下结论(测 20 人花了 40 小时,多花几分钟把结果说清值)、做决定前补背景(数据不够就敢说"我还不确定")、故意换框架看(成功率 vs 失败率、百分比 vs 绝对人数,都看一遍)。顺带提醒:16/20=80% 这种小样本结论别当真,统计上真实成功率可能在 58%–93% 之间。
Why 用户不看说明书(Paradox of the Active User):1987 年 Rosson 和 Carroll 发现,新用户根本不读手册,上来就用,哪怕一路碰壁。讽刺的是,先花点时间学反而长远更省时——但人的即时动机永远压过长远理性。所以那种"用之前先点完一串介绍弹窗"的产品导览(product tour),会被大多数人跳过。正解是把帮助塞进使用流程:tooltip(鼠标悬停时的轻量小贴士)、渐进引导(Slack 的 Slackbot)、入门模板/清单(Notion——边用边学,随时回来查),不打断"立刻上手"的天性。
决策导向(PM 版):面对"要不要加这个选项/这一步",先想 Hick——它会不会拖慢主路径?面对运营/老板"用户应该都会看公告/教程",用主动用户悖论挡回去——他们不会,把引导做进流程里。面对评审会上的数据争论,警惕框架效应——要求把同一组数据正反两面、相对绝对都摆出来再下结论。
三、格式塔分组:人脑自动把东西"归伙"
底层事实:格式塔心理学(Gestalt,德语"整体/完形")发现,人脑天生会把零散的视觉元素自动组织成有意义的整体——不需要你教,它自己就会判断"这几个是一组、那几个是另一组"。设计师的活,就是利用这套自动归组的本能,让界面的视觉分组 = 你想表达的逻辑分组。格式塔有一套经典法则(邻近、相似、共同区域、连接、闭合、对称、连续),下面这几条是 UX 最常用的。
| 定律(EN / 中) | 定义 | 一句话心法 |
|---|---|---|
| Law of Proximity 邻近原理 | 靠得近的元素会被当成一组 | 间距就是分组信号:相关的靠近、无关的拉开 |
| Law of Similarity 相似性法则 | 长得像(颜色/形状/大小)的元素会被当成一类 | 同功能用同样式、不同功能别撞样式;可点的要和纯文字明显不同 |
| Law of Common Region 共同区域法则 | 共享一个有明确边界区域的元素会被归为一组 | 画个框/给块背景色,就能强行把一堆东西圈成一组(卡片、帖子) |
| Law of Uniform Connectedness 统一连接原则 | 有视觉连接(线/边框/同色)的元素,关系感比没连接的更强 | 最强的分组手段;用线/箭头/统一配色把相关内容显式连起来 |
Why 间距是最省的分组工具(Proximity):左边一排间距均匀的列表项 = "它们重要性相同、属于一组";右边两组之间留更大间距 = 大脑自动读成"两个独立的组"。谷歌搜索结果就靠间距,既提升可读性又让每条结果自成信息组。反例:CA.gov 表单的"添加"按钮被放到一堆不相关按钮旁、离表单主体太远,用户根本找不到。响应式陷阱:邻近关系在不同屏幕会变——伦敦交通局桌面端把两块低排放区信息放一起,到手机上被自动排版拆得老远,分组感就没了。所以响应式设计要专门检查"换了屏幕后,该在一起的还在一起吗"。
Why 相似 = 同类、不同 = 异类(Similarity):颜色/形状/大小/图标一致的元素会被当成一伙。用好了:Asos 子分类用圆角框、筛选用直角框,一眼分清两组功能;每个可点处都带个箭头,即使文字样式不同也告诉你"这些都能点"。用砸了:Tribute.co 把装饰图标和可点按钮用同款红色,用户误以为图标也能点;玛莎·斯图尔特页面上一个视频和旁边广告大小形状太像,用户直接当广告忽略了(这又踩中第六簇的"横幅盲视")。最高频的一条 takeaway:网页里可点的链接/按钮必须和普通文字明显不一样,否则用户找不到。
Why 一个框就能强行分组(Common Region & Uniform Connectedness):共同区域比邻近更"强"——哪怕元素之间没那么近,只要圈进同一个有边界的区域(画框 / 给背景色),就被当成一组。Facebook 每条帖子的点赞评论都在帖子边界内,所以和别的帖子分得清;打印对话框用边框把选项分成"打印机/页面范围/份数"三组,你才不会把左下角的"1"(页码)和右下角的"1"(份数)搞混。统一连接是分组手段里最强的:交通信号灯三个灯物理上分开,但被同一个外壳边界连着 + 配色一致,你就把它当一个整体。反例(过犹不及):Backcountry 手机版给每组筛选器都画了框,其实多余——合适的间距(邻近)就够了,边框反而让界面变乱。所以优先级是:能用留白(邻近)解决就别画框,画框是"间距不够时"的加强手段。
Why 大脑会"脑补"(闭合 / 对称 / 良好图形):格式塔还有几条解释 logo 设计的法则——闭合性(Closure):角落开着口你也能脑补成完整正方形(WWF 的熊猫、IBM 的横线 logo 都靠这个);对称性(Symmetry):大脑偏好对称,谷歌主页两个按钮几乎镜像;良好图形/简约(Good Figure):一堆红点会被看成一个整体菱形(这其实就是 Law of Prägnanz)。鲁宾之杯(Rubin's Vase)——背景白时看到杯子、背景黑时看到两张脸——是"图形/背景"多稳态的经典演示。
决策导向(PM 版):看一个界面"分组对不对",别问设计师"好不好看",问"用户会不会把这两个不相关的东西当成一组、或漏掉某个该看见的元素"。响应式稿子一定要在手机尺寸下复检邻近关系。边框/背景色能省则省,先试留白。
四、时间感知与动机:感知比事实更重要
底层事实:用户对"快不快、还差多远、整段体验好不好"的判断,几乎都是主观感知,而非真实数据。一个 399ms 响应的系统和 401ms 的体感天差地别;一段体验的好坏,记住的只是峰值和结尾。这一簇讲怎么操纵感知(褒义),让产品体感更快、更有动力、更值得回味。
| 定律(EN / 中) | 定义 | 一句话心法 |
|---|---|---|
| Doherty Threshold 多尔蒂阈值 | 系统在 <400ms 内响应时,人机互不等待,生产力飙升 | 真做不到 400ms,就用"感知性能"骗过去(骨架屏/进度条/即时反馈) |
| Flow 心流状态 | 完全沉浸、专注、享受的精神状态(可让生产力 ×5) | 难度=能力时进入;下一步明确 + 即时反馈 + 无干扰 是三要件 |
| Goal-Gradient Effect 目标梯度效应 | 越接近目标,冲向目标的动力越强 | 给个"虚拟起点"造进度感(预盖 2 章的洗车卡),人就更想跑完 |
| Zeigarnik Effect 蔡格尼克效应 | 没做完的事比做完的事记得更牢 | 进度条、未读红点、自动播下一集,都在用"未完成的张力"拉你回来 |
| Parkinson's Law 帕金森定律 | 任务会膨胀到把可用时间填满 | 给的空间/时间越多越容易臃肿;主动设限(自动填、限步骤、超时) |
| Peak-End Rule 峰终法则 | 一段体验的记忆 ≈ 峰值时刻 + 结尾时刻,而非全程平均 | 重点打磨"最爽的那一刻"和"收尾那一刻";负面峰值杀伤力更大 |
| Serial Position Effect 序列位置效应 | 一串信息里,人最记得开头和结尾 | 关键项放首尾,次要项放中间;导航关键操作放最左/最右 |
Why 400ms 是条线(Doherty Threshold):1982 年 IBM 的 Doherty 发现,当系统响应快到人机不用互相等待时,生产力和满意度都显著上升,临界点是 400 毫秒。超过它,用户开始感到延迟、走神、节奏被打断。但真做不到怎么办?——靠感知性能(Perceived Performance,让人"觉得快"而非真的快):骨架屏(Skeleton Screen,先显示灰色框架占位,数据来了再填,Instagram 在用)、图片模糊渐显(先上低清模糊版再换高清)、进度条(哪怕不精确也缓解焦虑)、即时反馈(Instagram 发评论秒显"已发布",后台才慢慢处理)。反向操作:有时故意加延迟反而提升信任——谷歌隐私检查特意慢一点 + 配解释文案,让你觉得"系统在认真干活",更愿意慎重设置。
Why 心流能 ×5 效率(Flow):心流(米哈里 1975 提出)是"难度刚好等于你能力"时的完全沉浸态——太难会焦虑,太易会无聊。三个设计要件:①下一步显而易见(Superhuman 归档邮件后直接跳下一封,不用想"接下来干嘛";Gmail 归档后退回收件箱,每次都要重新决策,打断心流)、②即时反馈无干扰(响应 <100ms,界面极简别让别的东西分心)、③挑战与技能平衡(给用户合适难度的目标)。心流和多尔蒂阈值是绑在一起的——慢响应会直接把人踢出心流。
Why "虚拟起点"管用(Goal-Gradient + Zeigarnik):这两条是动机设计的黄金搭档,实证来自 2006 年那个洗车卡实验——
- A 组:10 格卡,预先盖好 2 章(20% 进度),需洗 8 次
- B 组:8 格卡,0 盖章,同样需洗 8 次
- 结果:A 组 34% 完成兑换,B 组只有 19%
明明都是洗 8 次,A 组因为有"进度感"动力更强。这就是目标梯度(越近终点跑越快,源自 1934 年赫尔的老鼠迷宫实验——接近奶酪时跑得更快)+ 蔡格尼克效应(没完成的事在脑子里反复出现,形成心理张力催你完成)。落地无处不在:LinkedIn"资料完整度进度条"、未读消息红点、Netflix 自动播下一集(强化"没看完"的张力让你刷剧)、咖啡店集点卡(第 9 次前购买频率明显上升)。Uber 还叠加了厌倦回避(等车时给动画让你不无聊)+ 运营透明度(告诉你 ETA 怎么算的,让你觉得它在努力)。
Why 时间会膨胀(Parkinson's Law):"任务会膨胀到填满所有可用时间"——给设计师一块大屏,他就忍不住往里塞东西(界面臃肿);给用户无限时间填表,流程就拖沓。对策是主动设限:进度指示器催用户快走、自动保存/会话超时、砍掉无必要步骤、引导流程限制步数(Trello 让你立刻上手核心功能,不搞冗长 onboarding)。
Why 只有峰值和结尾被记住(Peak-End Rule):卡尼曼 1993 年的冷水实验——A 组手泡 14°C 水 60 秒;B 组泡 14°C 水 60 秒再多泡 30 秒 15°C(更长更难受),但 B 组更愿意重复,因为结尾那点回暖让记忆变好了。所以打磨体验要集中火力在两处:最爽的峰值(Spotify Wrapped 年度回顾、Duolingo 完成动画 + 吉祥物、TurboTax 报完税的庆祝插画)和优雅的结尾(别在收尾时弹窗推销、404 页用幽默化解)。关键警告:负面峰值的杀伤力远大于正面——Maytag 家电网站导航复杂易误触,用户几次失败后的强烈挫败感,会主导他对整个品牌的印象,哪怕后面顺利也救不回来。所以先消灭负面峰值,再去造正面峰值。配套工具是用户旅程图(Journey Map):画出用户全程的情绪曲线,找出峰值和低谷在哪。
Why 中间最容易被忘(Serial Position Effect):艾宾浩斯发现记一串信息时,开头(初始效应 Primacy)和结尾(新近效应 Recency)记得最牢,中间最容易丢。所以关键项放首尾、次要项塞中间;导航把最重要操作放最左/最右;Apple 落地页把核心卖点放开头、细节放中间、购买按钮放结尾。这条和峰终法则的"end"、认知偏差里的"近因效应"其实同源——都是大脑对"最近/最先"的偏爱。
决策导向(PM 版):评估体验别只看"平均加载多少秒、平均几步完成",要找峰值和结尾——最爽的瞬间够不够爽、收尾够不够利落、有没有藏着负面峰值(报错/死链/复杂表单)。做增长/留存功能,优先用"进度感"(目标梯度 + 蔡格尼克)而不是单纯发优惠。真优化不了速度时,先上感知性能(骨架屏/进度条)再说。
五、熟悉与韧性:用户带着旧习惯来
底层事实:用户绝大部分时间花在别人的产品上,会把那里养成的习惯(心智模型)直接套到你的产品上。顺着这套习惯做 = 用户零学习成本;逆着做 = 高认知负荷、流失。同时,真实用户的输入永远比你想的乱(各种姓名格式、超长文本、奇怪图片),系统得能宽容地接住。
| 定律(EN / 中) | 定义 | 一句话心法 |
|---|---|---|
| Jakob's Law 雅各布定律 | 用户大部分时间在别的网站上,所以期望你的网站和别家一样工作 | 顺应通用惯例(搜索框在上、购物车在角);创新前先想清代价 |
| Mental Model 心智模型 | 人对"某系统怎么运作"的简化内在模型 | 设计要匹配用户已有的认路习惯;不匹配就困惑、出错 |
| Postel's Law 波斯特法则(稳健性原则) | 接收要宽容,发送要保守 | 宽容接住各种乱输入(名字格式/超长文本/各种屏幕),自己输出要规范可靠 |
Why 熟悉感是金子(Jakob's Law):雅各布·尼尔森(NNGroup 创始人之一)2000 年提出——用户脑子里早有一套"网站该怎么用"的现成套路,不想每到一个新站重新学。所以电商都长得差不多(搜索框在上、菜单位置固定、标准结账流程),不是没创意,而是这套模式被验证更好用;Etsy 贴着大家熟悉的"找货→加购→结账"流程走,所以一上手就顺。反例(改太狠的代价):Snapchat 2018 大改版,一次性把"看故事"和"聊天"揉到一起、不做渐进过渡也不充分测试,结果用户暴怒、大量跑去 Instagram,广告曝光/营收/用户数全跌。正例(给用户选择权):谷歌/YouTube 改版允许用户自愿切新界面、先试用、不爽能切回旧版——这种渐进过渡有效缓解了心智模型错位。
学习幂律(Power Law of Learning)——支撑 Jakob 的硬数据:让人重复做同一任务,完成时间会按幂律下降(对数坐标里呈直线),练得越多越快、但提升递减。意思是:你的界面和别家越一致,用户就能复用在别处练出来的熟练度,等于站在已有学习曲线的高点上;你一改,他就被打回曲线起点重新爬。所以创新前先自问三题:① 用户学会后,新设计能带来明显好处吗?不能就别改。② 用户会坚持学到底吗?可能半途放弃就别改。③ 能不能让学习更快(增加使用机会/简化)?创新可接受的场景:有忠实用户(如苹果)、品牌值得用户花时间学、产品每天高频用、或该创新已被广泛采用(如手机左滑删除)。
Why 要匹配心智模型(Mental Model):心智模型 = 用户以为某东西怎么运作的简化模型(克雷克 1943 提出)。设计师因为太懂自己的产品,觉得"什么都很好懂",但普通用户的模型有限、容易困惑出错——这就是设计师和用户的"模型鸿沟"。反例:购物车默认勾上运费险还得你手动取消(不符合网购习惯)、想用浏览器返回键关弹窗结果跳回上上页、密歇根大学图书馆放俩搜索框(一个查馆务一个查学术)让人不知道用哪个。所以做新功能前要多和用户聊,搞清他们"以为该怎么用",而不是拍脑袋。(心智模型和 Jakob 定律是一体两面:Jakob 是"用户的心智模型来自别的网站"。)
Why 接收要宽容(Postel's Law):Jon Postel 写 TCP 协议时提出稳健性原则(Robustness Principle):"对自己严格,对他人宽容"——发数据严守规则,收数据要能容忍不完美但意思清楚的输入。这后来扩散到 UX:人用产品时不总是专注/守规矩,设计得预想各种行为而非假设用户照剧本走。落地:表单接受不同文化的姓名顺序(西方名在前、亚洲姓在前)、别用过严格式限制;Face ID 免输密码(输入端宽容);响应式设计和渐进增强(Progressive Enhancement,先保证基础功能人人可用,有条件再加语音/动画等增强)都是"宽容接收各种设备/网速"的体现。设计韧性(Design Resiliency)还要防一堆占位数据的坑:测试文案太短(实际"设置"会变成"应用程序偏好设置"撑爆按钮)、用户头像尺寸乱、标签数量从 3 个到 25 个、国际化后英文翻成意大利语可能长 300%、字体被用户放大后布局崩——一开始就用最长文案 + 极端数据量测试,早暴露早改。
决策导向(PM 版):提"我们要做个跟别人不一样的交互"时,先掏出 Jakob 三问算清创新代价——除非有忠实用户/高频使用/明显收益,否则顺应惯例。设计评审时专盯"这符合用户从别处带来的习惯吗";测试稿别用干净的短假数据,要灌超长文本、超多标签、奇怪图片去压它。
六、注意力与美学:眼睛会自动筛选,好看会让人误判好用
底层事实:用户的注意力是稀缺资源,大脑自动过滤掉"看起来不相关"的东西(包括长得像广告的真内容);同时,人会在 50 毫秒内凭外观给产品打分,好看的会被默认为更好用。这一簇讲怎么抢到注意力、避开盲区、用美学加分(但别被它骗)。
| 定律(EN / 中) | 定义 | 一句话心法 |
|---|---|---|
| Selective Attention 选择性注意力 | 只关注与目标相关的一小部分刺激,自动忽略其余 | 当心"横幅盲视"和"变化盲视";别把重要内容做成广告样、别让关键变化悄无声息 |
| Von Restorff Effect 冯·雷斯托夫效应(隔离效应) | 一堆相似元素里,那个与众不同的最被记住 | 想让用户记住/点击的,就让它在视觉上突围(但别滥用对比) |
| Aesthetic-Usability Effect 美学可用性效应 | 好看的设计会被觉得更好用 | 美学是真竞争力;但好看会掩盖问题、污染可用性测试,要警惕 |
| Pareto Principle 帕累托法则(80/20) | 约 80% 的结果来自 20% 的原因 | 把资源砸在那关键 20%(高频功能/高发问题);但别只做 20% |
Why 用户对广告"视而不见"(Selective Attention):横幅盲视(Banner Blindness)——用户会自动忽略任何长得像广告的内容,哪怕里面有用。眼动研究里 26 个人找"怎么去除瓶子标签"时,几乎完全没看顶部和右侧广告区(即便那里有有用信息);某页面内容区占了 25% 版面却只得到 0.8% 的注视。两个杀手:① 横幅盲视——导航/按钮若长得像广告,会被直接无视(所以别把功能元素做成广告样、别放在广告区附近);② 变化盲视(Change Blindness)——界面变化若没明显提示,用户察觉不到(Aldiko 安卓应用点汉堡菜单时,右上角图标从"溢出菜单"变成"搜索"用户根本没注意到)。心理学根:鸡尾酒会效应(吵闹派对里能专注听一个人)——大脑像个能量有限的过滤器,只把算力分给当前目标(卡尼曼 1973)。
Why 要让关键元素"突围"(Von Restorff Effect):又叫隔离效应(Isolation Effect)——一组相似元素里,那个最不一样的最被记住(冯·雷斯托夫 1933)。所以想让用户记住/点击的就让它视觉突围:删账户确认框里红色"Delete"按钮 + 警告图标(既帮想删的人找到,又防不想删的人误点)、Material Design 的悬浮按钮 FAB(固定右下角的高对比色锚点)、Notion 价格表给"Plus"标"Most popular"+ 加深加大、Dropbox 淡色页面里高对比的"注册"按钮。四条 takeaway/边界:① 强调要克制(多个元素抢注意 = 都不突出 + 视觉疲劳);② 别突出到像广告(否则反被横幅盲视忽略);③ 别只靠颜色(色盲/低视力用户分不清,WCAG 要求正文对比度 ≥4.5:1,要叠加边框/图案/形状等非颜色提示);④ 动效慎用(前庭障碍/癫痫/偏头痛用户敏感)。
Why 好看 = 觉得好用(Aesthetic-Usability Effect):1995 年日立 ATM 实验——252 人评 26 种界面布局,结果"觉得好不好用"和"觉得好不好看"高度相关,反而和真实易用度关系不大。即"即使设计在功能上没更易用,只要外观漂亮,人就觉得它更好用"。机理是卡尼曼的系统 1:网站第一印象只需 50 毫秒形成,视觉吸引力是主要决定因素;好看让人心情好、更宽容、更信任。Braun(迪特·拉姆斯"少而精")→ Apple 一脉相承,把美学做成了竞争优势。但这是双刃剑——它会污染可用性测试:测 FitBit 网站时用户一路碰壁却给高分,只顾夸"配色舒服照片好看",让研究者发现不了真问题。漂亮只能让人容忍小问题,掩盖不了大问题(Arcadis 网站大背景图初看惊艳,用着用着就嫌烦)。绕过它的办法:① 测试前讲清"你不是设计者/想听真话";② 别问"喜不喜欢",问行为性问题——"找东西容易吗?""内容清楚吗?""哪里可以更好?";③ 盯行为和评价是否一致(嘴上夸但一直卡壳 = 美学在掩盖问题)。
Why 抓关键 20%(Pareto Principle):80% 的结果来自 20% 的原因(帕累托发现意大利 80% 财富归 20% 人口)。UX 里到处是这分布:222 人从 94 个任务选最重要的,前 15 个任务(16%)拿了 41% 选票;某租车网站 33 个可用性问题中,9 个(27%)造成了 72% 差评;微软修 20% 高频 bug 消除了 80% 崩溃。所以资源砸在关键 20%(高频功能、高发问题、高流量页面)。但真正的目标是"减少努力"不是"减少点击"——核心公式:总努力量 = 单次操作努力 × 操作频率。高频功能要快(主操作显眼、一键可见、给高阶用户快捷键如 Superhuman/Figma);低频功能可以藏深(溢出菜单、设置页、特定场景才出现)。反例/边界:① 别极端"减点击"——Reddit 删多于加删到功能空洞、ClickUp 顶栏 7 层占屏 40%、功能过载让人找不到东西;② 别只做那 20%——长期只优化关键部分会让产品停滞、忽略那些不关键但有累积价值的环节。帕累托是"优先级工具",不是"排他工具"。
决策导向(PM 版):想让用户看见/点击某个东西,问"它在一堆相似元素里够不够突围"(Von Restorff)+ "它会不会被当成广告忽略"(横幅盲视)。看到可用性测试里全是"界面真好看"的好评,别高兴——大概率是美学在掩盖问题,追问行为细节。排优先级用 80/20 找关键 20%,但留点资源照看长尾,别把产品做空。
一句话串起 28 条:大脑算力有限(簇一)→ 所以做决定要省力、别堆选项别逼人读说明书(簇二);眼睛会自动归组(簇三)→ 用间距/边框/相似度让视觉分组对上逻辑分组;而用户真正记住和满意的是感知——速度、进度、峰值、结尾(簇四);他们带着别处养的习惯来(簇五)→ 顺应惯例、宽容接收;注意力稀缺且会被外观带偏(簇六)→ 突出关键、避开广告样、善用但别迷信美学。所有 28 条最终指向同一句:别让用户多动脑、多费力、多迷路。
源自 Jon Yablonski《Laws of UX》2.0(Will 的设计笔记,中英混排 + 翻译批注),含约 28 条定律/心理学效应,每条原文带定义、起源、案例、应用与反例。本 wiki 按 6 大底层意图重组为簇,删去图片(原档图片路径含空格/中文且已 gitignore,关键图示已转文字描述)。与 NNGroup UX 口号高度互文,见 NNGroup UX 原则 / 金句 19 条(You Are Not the User / Keep It Simple / Less Is More / Why Beats What / It Depends … 按 5 大主题成簇 + 心法/反例);图片/原档保留在 sources。