Appearance
心智模型 Mental Model
简介说明
一个基于我们对系统及其工作方式的认知而构建的压缩模型。
心智模型是一个与 Jakob 定律密切相关的心理学概念。
要点
我们会在脑海中围绕我们对一个系统的认知，特别是它的工作方式，形成一个工作模型，然后将该模型应用于新的、与该系统相似的情况。将设计匹配到用户的思维模型，以提升他们的体验。这使他们能够轻松地将他们的知识从一个产品或体验转移到另一个产品或体验，而无需首先花时间理解新系统的工作方式。良好的用户体验得以实现，是因为产品或服务的设计与用户的心智模型相一致。以电子商务网站为例，它们使用一致的模式和惯例，例如产品卡片、虚拟购物车和结账流程，以符合用户的期望。缩小我们自身心智模型与用户心智模型之间差距的任务，是我们面临的最大挑战之一，为了实现这一目标，我们使用各种用户研究方法（例如用户访谈、角色设定、用户旅程图、同理心地图）。理论背景
心智模型的观念最初由心理学家肯尼斯·克雷克在 1943 年的著作《解释的本质》（1943）中提出。他提出人们心中持有关于世界运作方式的小型模型。这些模型用于预测事件、推理以及形成解释。
Mental Model(心智模型)是 UX 设计中最基础也是最重要的概念之一,指用户基于过往经验和知识,对系统如何工作所形成的内在认知模型。理解并匹配用户的心智模型是创造直观、易用界面的关键。
核心概念
什么是心智模型?
心智模型是用户脑海中对"事物应该如何运作"的假设和预期:
- 基于过去的经验
- 简化的现实表征
- 可能不完全准确
- 但影响用户行为和决策
经典比喻:
真实系统 ≠ 用户理解的系统
就像:
• 用户认为"云存储"是天上的云☁️
• 实际是分布式服务器💾
• 但"云"的隐喻有效传达了概念三种模型的关系
1. 设计模型 (Design Model)
设计师/开发者理解系统的方式
开发者视角:
文件系统 = 树形数据结构
├─ inode
├─ 文件指针
└─ 块存储2. 系统模型 (System Model)
产品实际的运作方式
实际实现:
复杂的技术架构
数据库、API、缓存层...3. 用户心智模型 (User's Mental Model)
用户认为系统如何工作
用户理解:
文件夹 = 现实中的文件夹📁
"把文件放进去"理想状态
设计模型 ≈ 用户心智模型
↓
直观易用的产品
设计模型 ≠ 用户心智模型
↓
困惑、错误、挫败感心智模型的形成来源
1. 现实世界经验
✅ 物理世界隐喻:
购物车 🛒
• 现实: 装商品的推车
• 数字: 暂存待购商品
• 匹配心智模型: ✓
回收站 🗑️
• 现实: 扔垃圾但可以捡回
• 数字: 删除文件但可恢复
• 匹配心智模型: ✓
文件夹 📁
• 现实: 存放文件的物理容器
• 数字: 组织文件的虚拟容器
• 匹配心智模型: ✓2. 过往使用经验
用户预期基于熟悉的产品:
"这个应该像微信一样..."
"为什么不能像淘宝那样..."
"其他应用都是这样的..."
示例:
• 右上角 = 设置/个人中心
• 下拉 = 刷新内容
• 左滑 = 返回上一页
• 双击 = 点赞3. 文化背景
文化差异影响心智模型:
颜色:
• 中国: 红色 = 喜庆、好运
• 西方: 红色 = 危险、警告
阅读方向:
• 从左到右(大多数)
• 从右到左(阿拉伯语)
• 从上到下(传统中文)
手势:
• 竖起大拇指 👍
- 西方: 赞同
- 中东某些地区: 冒犯4. 行业惯例
特定领域的约定俗成:
金融:
• 红色数字 = 亏损(西方)/上涨(中国股市)
• 绿色数字 = 盈利(西方)/下跌(中国股市)
社交媒体:
• 心形 ❤️ = 点赞/喜欢
• 对话气泡 💬 = 评论
• 箭头 ↗️ = 分享
电商:
• 购物车图标 = 待结算
• 收藏/心形 = 收藏夹
• 比较图标 = 对比功能匹配用户心智模型的设计
1. 使用熟悉的隐喻
✅ 好的隐喻:
桌面 (Desktop)
└─ 让用户理解虚拟工作空间
保存图标 💾
└─ 虽然软盘已过时,但隐喻延续
放大镜 🔍
└─ 通用的搜索象征
音量滑块 🔊━━━━○━
└─ 模拟物理旋钮❌ 糟糕的隐喻:
"守护进程"(Daemon)
└─ 技术术语,普通用户不理解
"挂载磁盘"(Mount)
└─ 抽象概念,缺乏现实对应
"路由配置"
└─ 专业术语,吓跑用户2. 遵循惯例和标准
✅ 符合惯例:
导航位置:
• 顶部导航栏
• 左侧边栏菜单
• 底部Tab栏(移动端)
操作位置:
• 确认按钮在右侧
• 取消按钮在左侧
• 危险操作需要二次确认
图标语义:
• ⚙️ = 设置
• 🏠 = 首页
• 👤 = 个人资料
• ✉️ = 消息❌ 违反惯例:
• 滚动方向反转
• 红色按钮表示"确认"
• 左上角放置"退出"按钮
• 创新但反直觉的手势
结果: 用户困惑,学习成本高3. 提供即时反馈
强化用户的正确心智模型:
✅ 反馈示例:
拖拽文件:
[文件] 🖱️ ➡️ [文件夹] (高亮显示)
释放: ✓ "文件已移动"
删除操作:
点击删除 → 确认对话框
"确定要删除这个文件吗?"
[取消] [删除]
表单验证:
输入邮箱: user@example
实时提示: ✗ "请输入完整邮箱地址"
修正后: ✓ "格式正确"4. 提供清晰的路标
帮助用户构建正确的心智模型:
✅ 面包屑导航:
首页 > 电子产品 > 手机 > iPhone 15
↑ 用户知道自己在哪里
✅ 进度指示:
[●]──[●]──[○]──[○]
购物车 确认 支付 完成
↑ 当前位置
✅ 状态提示:
订单状态:
✓ 已下单 (2024/10/20 14:30)
✓ 已发货 (2024/10/21 09:15)
● 运输中 (预计10/23送达)
○ 已签收5. 使用用户的语言
✅ 用户友好的语言:
技术术语 → 日常用语
• "认证失败" → "密码错误"
• "网络超时" → "网络连接不稳定,请重试"
• "非法字符" → "不能使用特殊符号"
• "内存不足" → "存储空间已满"
✅ 情境化描述:
而非: "错误代码 404"
使用: "抱歉,我们找不到这个页面"
而非: "会话已过期"
使用: "您已经很久没有操作了,请重新登录"心智模型错配的后果
常见问题
❌ 用户预期 vs 实际行为:
案例1: 文件"删除"
用户心智模型: 删除 = 永久消失
实际系统: 删除 = 移到回收站
冲突: 用户担心误删,不敢删除
案例2: 保存操作
用户心智模型: 点"×"会提示保存
实际系统: 直接关闭,丢失内容
后果: 用户丢失工作,愤怒
案例3: 搜索功能
用户心智模型: 模糊搜索,自动纠错
实际系统: 精确匹配,大小写敏感
结果: "搜不到任何结果"
案例4: 分享链接
用户心智模型: 链接永久有效
实际系统: 链接24小时后失效
问题: 用户后续无法访问错配的表现
观察这些信号:
1. 用户反复尝试相同操作
"为什么点了没反应?"
2. 频繁求助和错误
"这个怎么用啊?"
3. 完成任务的非预期路径
用户走了"弯路"
4. 负面反馈
"这个设计太反人类了"
"不符合使用习惯"
5. 高流失率
用户直接放弃使用研究用户心智模型的方法
1. 用户访谈
关键问题:
• "您认为点击这个按钮会发生什么?"
• "您期望在这里看到什么?"
• "这个功能让您想到了什么?"
• "您通常如何完成这类任务?"
• "为什么您会这样操作?"2. 任务分析
观察用户:
1. 给用户一个任务
2. 观察他们的操作路径
3. 记录困惑点
4. 询问思考过程
示例:
任务: "请找到上周的销售报告"
观察:
- 用户首先去哪里找?
- 使用搜索还是浏览?
- 在哪里卡住了?
- 最终是否成功?3. 卡片分类 (Card Sorting)
了解信息架构心智模型:
1. 准备功能/内容卡片
2. 让用户分组
3. 让用户命名分组
4. 分析分组模式
示例:
电商网站功能卡片:
• 购物车
• 订单历史
• 收藏夹
• 优惠券
• 地址管理
...
用户分组可能是:
[购物相关] [账户管理] [优惠活动]4. 原型测试
测试概念模型:
A方案: 传统文件夹结构
B方案: 标签系统
C方案: 时间线视图
测试:
• 哪个方案用户理解最快?
• 哪个匹配用户预期?
• 哪个任务完成率高?5. 竞品分析
了解行业标准心智模型:
研究类似产品:
• 用户已经习惯什么模式?
• 哪些设计成为事实标准?
• 创新设计的接受度?
示例:
短视频应用:
• 抖音: 上下滑动切换
• Instagram: 横向滑动
→ 上下滑动已成为主流心智模型实际应用案例
案例 1: Google Drive
心智模型匹配:
传统认知:
文件 → 文件夹 → 存储设备
Google Drive:
文件 → 文件夹 → 云端
↓
保留熟悉的隐喻
+ 添加新概念(共享、协作)
成功因素:
• 保持文件/文件夹概念
• 拖拽操作同现实世界
• 右键菜单同桌面系统
• 逐步引入新功能(共享、协作)案例 2: Tesla 触摸屏
心智模型冲突:
传统汽车:
物理按钮 → 即时触觉反馈
雨刷开关 → 固定位置
Tesla:
触摸屏 → 需要看屏幕
雨刷 → 多级菜单中
问题:
• 违反驾驶安全心智模型
• "开车时不应该看屏幕"
• 物理操作变成视觉任务
反馈:
初期用户抱怨较多
需要较长学习时间案例 3: iPhone 的滑动解锁
创新心智模型:
2007年iPhone推出:
"滑动来解锁" →
新的交互模型:
• 没有物理键盘
• 触摸屏交互
• 手势操作
成功因素:
• 简单直观的视觉提示
• 符合物理直觉(推开门)
• 即时视觉反馈
• 容错性好(滑错了可重来)
影响:
成为智能手机标准交互
建立了新的心智模型案例 4: Slack 的频道概念
心智模型转变:
从: 邮件列表(传统认知)
到: 频道/房间(新概念)
挑战:
• 用户习惯邮件通讯
• 需要理解"频道"概念
• 公开/私有频道区别
Slack的策略:
• 使用"#"符号(Twitter影响)
• 清晰的视觉区分
• 详细的引导教程
• 从小团队开始推广
结果:
逐渐成为团队沟通新标准案例 5: 拼多多的拼团
新心智模型建立:
传统电商:
个人购买 → 单独下单
拼多多:
拼团购买 → 组团优惠
匹配现实:
• 联合采购(熟悉概念)
• "团购"已有认知基础
• 社交互动(微信群)
成功因素:
• 利用已有的"团购"心智模型
• 社交裂变机制
• 价格优势强化模型不同平台的心智模型
iOS vs Android
iOS心智模型:
• 返回: 左上角"<"按钮
• 主屏: Home按钮/手势
• 多任务: 双击Home/上划
• 设计哲学: 简洁、一致
Android心智模型:
• 返回: 底部返回键/手势
• 主屏: Home按钮
• 多任务: 多任务按钮
• 设计哲学: 灵活、可定制
跨平台挑战:
• 用户在两个平台间切换
• 需要适应不同的交互模式
• 设计需要尊重平台规范Web vs 移动应用
Web心智模型:
• 点击链接 → 新页面
• 浏览器返回按钮
• 右键菜单
• 悬停效果
• 多窗口/多标签
移动应用心智模型:
• 点击 → 新屏幕(无"页面"概念)
• 应用内返回
• 长按操作
• 无悬停
• 单任务专注
响应式设计考量:
• 不能简单移植交互
• 需要针对平台优化设计原则与最佳实践
1. 优先匹配而非教育
✅ 匹配现有模型:
利用用户已知的概念
❌ 强制新模型:
"我们的方式更好,学吧!"
例外:
创新产品需要教育市场
但要循序渐进2. 当需要创新时,提供支架
引入新概念的策略:
1. 渐进式引导
第一次使用 → 交互式教程
2. 视觉提示
动画展示操作方式
3. 示例和类比
"就像现实中的便利贴"
4. 可发现性
让功能易于探索
5. 容错性
允许撤销,降低试错成本3. 一致性是关键
内部一致性:
• 相同操作在不同页面行为一致
• 术语统一
• 视觉元素统一
外部一致性:
• 遵循平台规范
• 符合行业惯例
• 尊重用户从其他产品带来的习惯4. 提供清晰的反馈
强化正确的心智模型:
操作 → 反馈
• 视觉变化
• 动画过渡
• 状态提示
• 成功/错误信息
帮助用户验证心智模型:
"我以为会这样... 确实这样!"5. 测试,测试,再测试
验证心智模型匹配度:
• 新用户能否无指导完成任务?
• 用户是否按预期路径操作?
• 错误率如何?
• 用户反馈如何?
持续迭代:
心智模型会随时间演变
需要持续研究和优化常见陷阱
❌ 设计师陷阱
1. 假设用户和你一样懂技术
"这个很简单啊,就是..."
2. 过度创新
"我们要重新定义交互!"
(用户: ???)
3. 忽视平台规范
"我们有自己的设计语言"
(违反用户习惯)
4. 技术导向而非用户导向
界面反映系统架构,而非用户思维
5. 没有测试真实用户
只在内部团队测试✅ 如何避免
• 做用户研究,不要假设
• 在创新前理解现状
• 尊重平台和行业标准
• 从用户角度思考
• 持续测试真实用户与其他 UX 概念的关系
Mental Model ↔ Affordance(可供性)
└─ 设计应该提示用户如何交互
Mental Model ↔ Learnability(可学习性)
└─ 匹配心智模型 = 易学习
Mental Model ↔ Consistency(一致性)
└─ 一致性强化心智模型
Mental Model ↔ Feedback(反馈)
└─ 反馈验证和调整心智模型
Mental Model ↔ Mapping(映射)
└─ 控制和效果的对应关系关键要点
🧠 核心理念: 设计应该匹配用户脑中的模型,而非系统的实际运作方式
🧠 设计目标: 让用户觉得"这就是我想的那样!"
🧠 黄金法则:
- 了解用户的心智模型
- 设计匹配用户预期
- 必要时引导,但不强迫
🧠 平衡艺术:
- 创新 vs 熟悉
- 功能强大 vs 简单直观
- 完整性 vs 渐进披露
🧠 持续工作:
- 心智模型会演变
- 需要持续研究
- 不断测试和优化
🧠 终极测试: 如果新用户无需说明就能使用你的产品,说明你成功匹配了他们的心智模型。
Mental Model 是 UX 设计的基石。Don Norman 说过:"当用户的心智模型与设计模型匹配时,产品就是直观的。"理解并尊重用户的心智模型,是创造优秀用户体验的第一步,也是最重要的一步。