UX 设计法则
来源：lawsofux.com 作者：Jon Yablonski
这是一个收集了用户体验设计最佳实践的网站，帮助设计师构建更易用的用户界面。
UX-01 · 认知心理学认知负荷界面消耗的脑力越少，理解越快UX-02 · 认知心理学心流完全沉浸的心理状态，设计应保护它UX-03 · 认知心理学心智模型界面应匹配用户的既有认知UX-04 · 认知心理学米勒定律工作记忆约 7±2 个组块UX-05 · 认知心理学选择性注意人只注意少数信息，重点须脱颖而出UX-06 · 感知与视觉审美-可用性效应用户认为美观的设计更易用UX-07 · 感知与视觉选择过载选项越多，决策越慢越易放弃UX-08 · 感知与视觉分块拆成组块提升记忆与扫读UX-09 · 感知与视觉共同区域定律边框圈定的元素被视为一组UX-10 · 感知与视觉接近定律靠近的元素被感知为一组UX-11 · 感知与视觉简洁定律人把模糊图形理解为最简形式UX-12 · 感知与视觉相似定律相似的元素被感知为一组UX-13 · 感知与视觉均匀连接定律显式连线比接近性更能分组UX-14 · 交互与性能多赫蒂阈值响应 <400ms 才有人机对话感UX-15 · 交互与性能菲茨定律目标越大越近，指向越快UX-16 · 交互与性能波斯特尔定律对输入宽容，对输出保守UX-17 · 交互与性能特斯拉定律系统承担复杂性，简单留给用户UX-18 · 决策与选择希克定律选项越多越复杂，决策越慢UX-19 · 决策与选择帕累托原则约 80% 效果来自 20% 原因UX-20 · 决策与选择峰终定律体验由峰值与结尾决定UX-21 · 决策与选择序列位置效应首尾信息最易被记住UX-22 · 用户行为雅各布定律用户期望你的产品像别家一样用UX-23 · 用户行为目标梯度效应越接近目标，动机越强UX-24 · 用户行为活跃用户悖论用户不读说明，直接开始用UX-25 · 时间管理帕金森定律工作膨胀到占满所有可用时间UX-26 · 时间管理奥卡姆剃刀最简单的方案通常最优
概述
UX 设计法则源自心理学、人机交互和认知科学等领域，是设计师在构建用户界面时可以考虑的最佳实践总结。
心理学法则
认知负荷
用户理解和操作界面时需要消耗的脑力资源的数量。
实际例子
❌ 高认知负荷：一个设置页面包含 20+ 个选项，没有分组
✅ 低认知负荷：设置按功能分组（账户、安全、通知），每个分组 3-5 个选项设计应用
- 减少用户的认知负担
- 将信息分块呈现
- 使用用户熟悉的 UI 模式降低学习成本
心流
一种心理状态，人们在进行某种活动时完全沉浸其中，感到专注、投入和愉悦。
实际例子
| 让人进入心流的设计 | 破坏心流的设计 |
|---|---|
| 游戏中的进度条显示还差多少升级 | 突然弹出客服对话框 |
| 视频编辑软件的实时预览 | 保存文件时卡住 30 秒 |
| 打字时无延迟的字符显示 | 输入文字后等 2 秒才出现 |
设计应用
- 提供即时反馈
- 保持界面简洁，减少干扰
- 设置适当的挑战和明确的目标
心智模型
用户基于自己对系统及其工作方式的认知而形成的内在理解。
实际例子
用户看到这些图标时的理解：
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ 📁 │ │ 🗑️ │ │ 🛒 │
│ 文件夹 │ │ 垃圾桶 │ │ 购物车 │
├─────────────┤ ├─────────────┤ ├─────────────┤
│ 存储文件的地方 │ │ 删除文件的地方 │ │ 结算前暂存区 │
│ 即使在云端 │ │ 手机上是移到 │ │ 不是真正的 │
│ │ │ "最近删除" │ │ 购物车 │
└─────────────┘ └─────────────┘ └─────────────┘设计应用
- 使用用户熟悉的概念和隐喻
- 保持界面与用户心智模型一致
- 通过可视化帮助用户理解系统
米勒定律
普通人只能在工作记忆中保留 7（±2）个信息项目。
实际例子
❌ 超出记忆容量：手机通讯录按拼音顺序列出 500 个联系人
✅ 符合记忆容量：通讯录支持按"家人"、"朋友"、"同事"分组，每组 5-10 人设计应用
- 将大量内容分成小块（5-9 项）
- 使用分组和分类组织信息
- 避免一次性呈现过多选项
选择性注意
人们倾向于只关注环境中与当前目标相关的刺激，忽略其他信息。
实际例子
❌ 视觉噪音：页面上有 5 个按钮都很醒目，用户不知道点哪个
✅ 视觉层次：主按钮用实心蓝色，次按钮用线框灰色，用户自然聚焦主按钮设计应用
- 使用视觉层次突出重要元素
- 通过对比和颜色吸引注意力
- 避免过多视觉噪音干扰用户
感知与视觉法则
审美-可用性效应
用户通常认为美观的设计比不美观的设计更好用，即使两者功能相同。
实际例子
| 不美观的界面 | 美观的界面 |
|---|---|
| 医院挂号系统的灰白界面 | 苹果官网的简洁优雅设计 |
| 银行老旧的后台系统 | 现代金融 App 的精致 UI |
| 用户容忍度低，遇到问题容易放弃 | 用户容忍度高，愿意重试 |
设计应用
- 投资于界面美学设计
- 美观的设计可以增加用户容忍度
- 保持视觉一致性和专业感
选择过载
当用户面对大量选项时往往会感到不知所措，这被称为"选择悖论"。
实际例子
❌ 电商首页显示 200+ 个商品分类
✅ 电商首页只显示"猜你喜欢"、"今日特价"、"新品上市"，其余归入"全部商品"展开查看设计应用
- 限制用户必须做出的选择数量
- 提供智能默认值
- 使用渐进式披露避免信息过载
分块
将大量信息分解为小组，并将其有意义地组织为整体的过程。
实际例子
❌ 连续文字：手机号邮箱地址收货地址发票信息退款申请...
✅ 分块呈现：
┌─────────────────┐
│ 个人信息 │
│ 电话 / 邮箱 │
├─────────────────┤
│ 收货信息 │
│ 地址 / 邮编 │
├─────────────────┤
│ 发票选项 │
│ 需要 / 不需要 │
└─────────────────┘设计应用
- 将大量数据分成易于管理的小组
- 使用视觉分组和间距区分内容
- 创建清晰的层次结构
共同区域定律
如果元素共享具有明确边界的区域，则用户倾向于将它们感知为一组。
实际例子
┌─────────────────────────────┐
│ 个人信息卡片 │
│ 头像 姓名 职位 │
└─────────────────────────────┘
┌─────────────────────────────┐
│ 设置面板 │
│ 开关1 开关2 按钮 │
└─────────────────────────────┘设计应用
- 使用边框和背景区分内容组
- 创建明确的卡片和面板
- 使用容器组织相关信息
接近定律
靠近或相邻的元素倾向于被用户归为一组。
实际例子
❌ 元素间距不明确：
名称 [输入框] 电话 [输入框] 地址 [输入框]
✅ 相关元素靠近：
名称 [输入框]
电话 [输入框]
地址 [输入框]设计应用
- 相关元素靠近放置
- 不相关元素保持距离
- 使用间距创建视觉关系
简洁定律
人们倾向于将模糊或复杂的图像感知为尽可能简单的形式，因为简单的解释需要最少的认知努力。
实际例子
❌ 复杂图标：一个齿轮包含 20 个锯齿、阴影、高光、文字
✅ 简洁图标：齿轮只有 8 个均匀的齿，轮廓清晰设计应用
- 保持 UI 简洁
- 使用简单形状和清晰轮廓
- 避免不必要的复杂性
相似定律
人眼倾向于将相似元素感知为完整的图片、形状或组，即使这些元素是分开的。
实际例子
所有主要按钮都是蓝色圆角
所有次要按钮都是灰色圆角
所有危险操作按钮都是红色直角
→ 用户无需阅读文字就知道按钮的类型设计应用
- 使用一致的样式表示相关元素
- 视觉上区分不同类型的元素
- 保持相关按钮和链接的样式统一
均匀连接定律
视觉上连接的元素被认为比没有连接的元素更相关。
实际例子
┌──────────────────────┐
│ 标签：______________ │ ← 下划线连接标签和输入框
└──────────────────────┘
[ 按钮A ]——[ 按钮B ] ← 连接线表示关联设计应用
- 使用线条或边框连接相关元素
- 通过下划线或背景连接标签和输入框
- 创建清晰的导航路径
交互与性能法则
多赫蒂阈值
当计算机与用户的交互响应时间 < 400 毫秒时，生产率会大幅提升。
实际例子
| 响应时间 | 用户感受 |
|---|---|
| < 100ms | 几乎感觉不到延迟 |
| 100-400ms | 轻微等待，可接受 |
| 400-1000ms | 明显等待，开始分心 |
| > 1s | 焦虑，需要加载提示 |
设计应用
- 确保核心交互响应时间 < 400ms
- 提供即时反馈和加载状态
- 使用乐观更新减少等待感知
菲茨定律
获取目标的时间取决于到目标的距离和目标的大小。
实际例子
❌ 差的设计：删除按钮放在屏幕左上角小角落
✅ 好的设计：大按钮放在手指自然落点位置（手机屏幕下半部分）设计应用
- 将重要按钮放置在手指易于点击的位置
- 增大可点击目标的大小（至少 44x44 像素）
- 减小导航距离
波斯特尔定律
对自己接受的要宽松，对自己发送的要保守。
实际例子
✅ 宽松接受用户输入：
- 电话号码可以是 13812345678、138-1234-5678、(138) 1234 5678
- 邮箱可以是 test@example、test@example.com 都接受
✅ 保守发送数据：
- 始终输出标准格式的日期：2026-05-16
- 始终使用统一编码发送数据设计应用
- 接受用户输入的各种格式
- 提供明确的输入指导
- 优雅地处理错误和边界情况
特斯拉定律
每个应用程序都有固有的复杂性，无法完全移除或隐藏，只能转移。
实际例子
简单模式：用户只需设置 WiFi 名称和密码
高级模式：显示频段选择、信道、加密方式、代理设置...
→ 复杂性没有消失，只是对普通用户隐藏了设计应用
- 接受某些复杂性是必要的
- 将复杂性隐藏在高级选项中
- 让用户选择他们想要的复杂性级别
决策与选择法则
希克定律
做出决定的时间随着选择的数量和复杂性增加而增加。
实际例子
❌ 外卖 App 一屏显示 100+ 家餐厅
✅ 外卖 App 先让用户选择菜系（川菜、粤菜、日料...），每类 10-20 家设计应用
- 减少选项数量
- 使用渐进式表单分步收集信息
- 提供清晰分类和筛选功能
帕累托原则
对于许多事件，大约 80% 的影响来自 20% 的原因。
实际例子
一个新闻 App：
- 80% 的用户只使用 20% 的功能：浏览、搜索、收藏
- 其他 80% 的功能（评论、分享、设置）只有 20% 的用户使用
→ 应该优先优化这 20% 的核心功能体验设计应用
- 识别并优先处理最常用的 20% 功能
- 优化产生最大影响的用户路径
- 使用数据分析确定功能优先级
峰终定律
用户主要根据体验过程中的"峰值"和"结束"时的感受来评判整个体验，而不是平均值。
实际例子
一场电影：
- 前半部分无聊（-10分）
- 高潮部分精彩（+20分）
- 结尾平淡（+5分）
- 用户回忆 = 高潮 + 结尾 = 好电影
一款产品：
- 注册流程繁琐（-10分）
- 首次使用获得惊喜（+20分）
- 完成首个任务后展示成就（+5分）
- 用户记得 = 惊喜 + 成就感设计应用
- 设计令人难忘的"峰值"时刻（如首次使用的引导）
- 确保结束体验是积极的（如完成任务后的感谢页面）
- 优化用户旅程中最关键的环节
序列位置效应
用户最容易记住系列中的第一个和最后一个项目。
实际例子
App 底部导航顺序：
[首页] [分类] [购物车] [我的]
用户最记得：首页（第一个）和我的（最后一个）
→ 最重要和最常用的功能放首位和末位设计应用
- 将最重要的项目放在开头或结尾
- 在列表中间放置最不重要的项目
- 使用折行或分页重新定义序列
用户行为法则
雅各布定律
用户大部分时间花在其他网站上，因此希望你的网站以他们已经熟悉的方式工作。
实际例子
✅ 符合预期：
- 搜索框在页面顶部
- Logo 点击返回首页
- 购物车图标在右上角
❌ 反直觉设计：
- 搜索框在页面底部
- Logo 点击打开菜单
- 购物车在左下角设计应用
- 遵循平台设计规范（iOS 人机界面指南、Material Design）
- 使用用户熟悉的 UI 模式
- 避免不必要的创新，核心交互保持一致
目标梯度效应
接近目标的倾向随着与目标的距离减少而增加。
实际例子
游戏升级进度条：
████████████░░░░ 80%
还差 500 经验值升级！
→ 越接近目标越有动力继续
签到连续天数：
已连续签到 29 天
明天继续签到获得双倍积分！
→ 接近成功时用户更不愿意放弃设计应用
- 显示进度条鼓励用户完成目标
- 早期给予奖励保持用户动力
- 突出显示已完成步骤
活跃用户悖论
用户从不阅读手册，而是立即开始使用软件。
实际例子
❌ 指望用户看文档：
发布新功能后写 5000 字使用指南
→ 0.1% 的用户会阅读
✅ 设计直观的界面：
新功能首次使用时弹出 3 秒的引导提示
→ 80% 的用户会看到设计应用
- 设计直观的界面，让用户无需阅读文档就能使用
- 提供上下文帮助（在需要时显示提示）
- 使用渐进式引导，而非提前展示所有功能
时间管理法则
帕金森定律
任何任务都会膨胀，直到耗尽所有可用时间。
实际例子
项目截止日期 = 3 天 → 3 天完成
项目截止日期 = 1 周 → 1 周完成
功能开发：
scope 明确 → 按时完成
scope 模糊 → 无限延期设计应用
- 设置明确的项目截止日期
- 限制功能范围（Feature Freeze）
- 使用时间盒方法管理开发和设计冲刺
奥卡姆剃刀
在预测效果相同的竞争假设中，应选择假设最少的一个。
实际例子
实现一个搜索功能：
方案 A：引入 Elasticsearch + 机器学习排序 + 个性化推荐
方案 B：使用数据库 LIKE 查询 + 简单的相关性排序
→ 如果搜索量不大，方案 B 足够，选择简单的方案 A？
❌ 不对！应该选择方案 B，因为它更简单设计应用
- 优先选择最简单的解决方案
- 避免过度工程化
- 消除不必要的复杂性
法则分类速查
认知心理学
- 认知负荷
- 心流
- 心智模型
- 米勒定律
- 选择性注意
感知与视觉
- 共同区域定律
- 接近定律
- 简洁定律
- 相似定律
- 均匀连接定律
交互与性能
- 多赫蒂阈值
- 菲茨定律
- 波斯特尔定律
- 特斯拉定律
决策与选择
- 选择过载
- 希克定律
- 帕累托原则
- 峰终定律
- 序列位置效应
用户行为
- 审美-可用性效应
- 目标梯度效应
- 雅各布定律
- 活跃用户悖论
时间管理
- 帕金森定律
- 奥卡姆剃刀