← 全部书单 / UI/UX 设计

《认知与设计》

《认知与设计》封面
作者: 杰夫·约翰逊
出版社: 人民邮电出版社
出版年: 2011-9-1
原作名: Designing with the Mind in Mind
8.6
★★★★☆
豆瓣评分 · 1,719 人评价
未标记阅读状态
把认知心理学翻译成界面设计规则:大脑怎么工作,界面就该怎么设计。

总体观点

所有优秀的 UI/UX 界面设计规范与经验法则,其底层逻辑都深深植根于人类的认知心理学与感知科学。设计原则绝不是凭空捏造的流行趋势或个人审美主观偏好,而是对人类生物硬件特性的工程学精密适配。

人类大脑并非像高清摄像机一样忠实记录世界:我们的知觉受过往经验、当前环境与任务期望的强烈扭曲;边缘视野分辨率极低,短期工作记忆极其脆弱,连续阅读更是一项极其耗费能量的非自然逆向活动。

界面设计必须顺应格式塔视觉规律组织信息结构,减少用户的记忆检索负荷,提供低风险的容错探索环境,并在系统响应时间上严格匹配人脑不同神经反射的时间常量,以达成无缝顺畅的人机交互协同。

核心观点

  1. 1. 感知由期望驱动:用户只看到自己预期会看到的内容

    人类感知不是客观镜面,而是被过往经验、当前目标与上下文环境高度过滤的产物。一旦与预期不符,即使摆在眼前也会视而不见。

    用户在安装软件时脑子里只有“快点装好”,所以会闭着眼睛狂点“下一步”,中间夹杂的勾选“捆绑安装全家桶”被大脑自动无视。
  2. 2. 格式塔原理:利用接近性、相似性、封闭性组织视觉结构

    人类视觉系统会自动把距离近的、外观相似的或被边界包围的元素合并成一个整体。利用这一规律能让复杂界面瞬间层级分明。

    表单中输入框与其对应的标签文本间距只有 4px,而与下一个输入项间距留出 24px,利用接近性原理让从属关系毫不费力一眼理顺。
  3. 3. 阅读是一项费脑的非自然活动:界面应减少长篇大论

    人类演化出语言有数十万年历史,但发明文字阅读仅数千年,大脑必须强行征用视觉与语音皮层联动。界面文字越繁琐,用户越早放弃。

    软件出错时抛出一大段英文堆栈报错代码,普通用户立刻崩溃;换成“网络连接已断开,请检查 Wi-Fi [重试]”,用户立刻能行动。
  4. 4. 色觉与对比度受限:绝对不能单独依赖颜色传递核心状态

    全球约有 8% 的男性存在色盲或色弱,且光照条件会极大干扰色彩辨别。传递警报或成功等关键信息时,必须色彩与图标双重呈现。

    交通信号灯除了红绿颜色外,红灯亮在最上方、绿灯亮在最下方;表单校验失败除了把边框变红,旁边必须附带一个感叹号图标与提示语。
  5. 5. 边缘视野分辨率极低:不要指望用户能注意到屏幕角落的动态更新

    眼睛中央凹高分辨率视野只有硬币大小,余光区域几乎只能察觉粗糙的运动。在屏幕右下角静悄悄弹出一行字,用户经常完全看不见。

    购物车加购成功后,如果在右上角只给数字加 1,用户以为没点上;必须在屏幕正中央弹出半透明的“已加入购物车”吐司,或让物品抛物线飞过去。
  6. 6. 识别远胜于回忆:提供可视选项而非迫使用户在脑中凭空检索

    人类大脑回忆需要主动激活神经突触检索记忆,而识别只需外部线索进行模式匹配。好界面永远展示选项让用户选,不让用户记。

    文件另存为时直接列出最近使用的文件夹列表,用户扫一眼点击即可,不需要在脑海中背诵“D 盘/工作项目/2026/设计稿”的复杂路径。
  7. 7. 低风险环境加速学习:撤销机制赋予用户无畏探索的自由

    当试错代价高昂时,用户会极度恐惧并拒绝使用新功能;当用户知道随时可以 Ctrl+Z 回退时,才会敢于主动探索与熟练操作。

    相册修图软件提供随时重置所有滤镜的原图对比按钮,新手才敢大胆拖动高光、对比度滑块尝试各种戏剧性效果。
  8. 8. 响应时间决定体验心流:0.1秒即时响应,1秒保持流畅,10秒任务中断

    0.1秒是人类神经感知“直接操作”的极限;1秒是思维连贯的上限;超过10秒注意力彻底漂移。必须针对不同时延配置对应反馈机制。

    点击按钮在 100ms 内展示按下动效;耗时 2 秒的查询展示局部骨架屏加载;耗时 15 秒的导出必须弹出进度百分比并允许后台运行。
树状思维导图

全书思维导图 · 知识脉络树

💡 拖拽平移 · 滚轮缩放 · 点击分支圆点折叠/展开
已复制思维导图大纲到剪贴板!

全书结构

  1. 第1章 我们感知自己的期望

    剖析知觉偏见:过往经验、当前情境与任务目标如何先入为主地扭曲我们的视听觉,阐明为什么用户常常对预期之外的明显信息熟视无睹。

    用户在找“发票申请”按钮时,屏幕正中间一个写着“财务凭证下载”的超大横幅被其视而不见,因为关键字与大脑预期不匹配。
  2. 第2章 为观察结构优化我们的视觉

    系统讲解格式塔七大原则(接近性、相似性、连续性、封闭性、对称性、主体/背景、共同命运),指导如何构建符合视觉本能的页面。

    表格隔行采用深浅交替的斑马纹背景色(相似性),让读者的视线能沿着横向长数据行平滑浏览而绝不串行。
  3. 第3章 我们寻找和使用视觉结构

    阐明人类大脑本能地渴望从信息中寻找结构,讲解如何通过专有控件、清晰分段与视觉层级帮助用户轻松扫描长数字与繁杂数据。

    将 11 位手机号自动格式化为“138 0000 1234”,用户核对校验的速度比连在一起的“13800001234”快三倍且错误率降低 80%。
  4. 第4章 阅读不是自然的

    从神经生物学角度揭示阅读的艰难本质,对比熟练阅读与初学阅读的脑区差异,批判软件界面中由于长篇大论造成的巨大认知阻力。

    将冗长的 10 条退款细则提炼为三张醒目的图示清单,配合打勾打叉的简洁图例,用户投诉退款规则看不懂的比例骤降。
  5. 第5章 色觉是有限的

    讲解视网膜感光细胞的工作机制、边缘反差对色彩识别的决定性作用,指导如何针对色盲群体和不良照明环境规范用色。

    股票交易软件提供“红涨绿跌”与国际通用的“绿涨红跌”自由切换,并允许开启高反差黑白线框模式服务色盲投资者。
  6. 第6章 我们的边界视力很糟糕

    对比眼睛中央凹与余光视野的分辨率悬殊差异,警告设计师不要在用户视线聚焦区域之外随意刷新信息,必须谨慎使用动效提示。

    用户正在中央输入框填表,页面右上角的通知铃铛默默闪烁红点,90% 用户根本无法察觉,重要提示必须就地就近弹出。
  7. 第7章 我们的注意力有限,记忆力也不完美

    深度剖析短期感觉记忆、工作记忆与长期记忆的特性与衰退曲线,指导界面设计如何充当用户的外部记忆支架。

    跨步骤的问卷调研顶部展示步骤条(1.个人信息 → 2.工作背景 → 3.需求评估),清晰卸下用户对“还要做多久”的记忆负担。
  8. 第8章 对注意力、形状、思考以及行动的限制

    揭示用户的六大行为模式(专注于目标而非工具、追踪信息气味、偏好熟悉路径、目标-执行-评估思考环,以及忘记任务收尾)。

    ATM 取款机必须设计为“先退还银行卡,再吐出钞票”,否则用户拿了钱立刻拔腿就走,把银行卡彻底忘在卡槽里。
  9. 第9章 识别容易,回忆很难

    阐述识别与回忆在神经激活层面的巨大难度鸿沟,提出用可视菜单、图标标签与智能联想全面取代命令行式的脑力搜索。

    字体选择下拉框不仅展示字体英文名称,同时把“微软雅黑”、“楷体”直接用该字体的真实外观渲染出来供用户秒选。
  10. 第10章 从经验中学习与学后付诸实践容易,解决问题和计算很难

    解释旧脑、中脑与新皮层的不同分工,说明人类擅长执行已固化的肌肉记忆与直觉经验,而在面对数学计算和新问题推理时极其痛苦。

    优惠券满减计算器在商品页直接计算并大字显示“预估到手价 ¥79”,而不是让消费者心算“满300减40跨店凑单后每件折合多少”。
  11. 第11章 许多因素影响学习

    梳理影响用户学习成本的关键要素:任务聚焦度、用词熟悉度与系统一致性,阐明低试错风险如何成倍加速用户的技能掌握。

    企业 ERP 系统的按钮文案坚决使用业务一线熟悉的“入库、调拨、盘点”,坚决杜绝工程师自创的技术黑话“提交批次实体”。
  12. 第12章 我们有时间要求

    从人脑感知常数出发严格定义系统响应度(Responsiveness),给出手眼协调、心流保持与任务中断的三大时间数量级阈值及应对方案。

    点击打车按钮后,后台计算司机匹配需要 4 秒,界面立刻展示雷达扫描光波与“正在为您呼叫附近 5 辆出租车”,消除焦躁不安。
返回 UI/UX 设计 目录

观点与结构均为转述总结,非原文摘录。封面图片来自豆瓣读书,仅作展示。

豆瓣评分与评价人数为逐本人工核实当天的数值。 · GitHub 仓库 · v1.0.0