《认知与设计》

总体观点
所有优秀的 UI/UX 界面设计规范与经验法则,其底层逻辑都深深植根于人类的认知心理学与感知科学。设计原则绝不是凭空捏造的流行趋势或个人审美主观偏好,而是对人类生物硬件特性的工程学精密适配。
人类大脑并非像高清摄像机一样忠实记录世界:我们的知觉受过往经验、当前环境与任务期望的强烈扭曲;边缘视野分辨率极低,短期工作记忆极其脆弱,连续阅读更是一项极其耗费能量的非自然逆向活动。
界面设计必须顺应格式塔视觉规律组织信息结构,减少用户的记忆检索负荷,提供低风险的容错探索环境,并在系统响应时间上严格匹配人脑不同神经反射的时间常量,以达成无缝顺畅的人机交互协同。
核心观点
-
1. 感知由期望驱动:用户只看到自己预期会看到的内容
人类感知不是客观镜面,而是被过往经验、当前目标与上下文环境高度过滤的产物。一旦与预期不符,即使摆在眼前也会视而不见。
用户在安装软件时脑子里只有“快点装好”,所以会闭着眼睛狂点“下一步”,中间夹杂的勾选“捆绑安装全家桶”被大脑自动无视。 -
2. 格式塔原理:利用接近性、相似性、封闭性组织视觉结构
人类视觉系统会自动把距离近的、外观相似的或被边界包围的元素合并成一个整体。利用这一规律能让复杂界面瞬间层级分明。
表单中输入框与其对应的标签文本间距只有 4px,而与下一个输入项间距留出 24px,利用接近性原理让从属关系毫不费力一眼理顺。 -
3. 阅读是一项费脑的非自然活动:界面应减少长篇大论
人类演化出语言有数十万年历史,但发明文字阅读仅数千年,大脑必须强行征用视觉与语音皮层联动。界面文字越繁琐,用户越早放弃。
软件出错时抛出一大段英文堆栈报错代码,普通用户立刻崩溃;换成“网络连接已断开,请检查 Wi-Fi [重试]”,用户立刻能行动。 -
4. 色觉与对比度受限:绝对不能单独依赖颜色传递核心状态
全球约有 8% 的男性存在色盲或色弱,且光照条件会极大干扰色彩辨别。传递警报或成功等关键信息时,必须色彩与图标双重呈现。
交通信号灯除了红绿颜色外,红灯亮在最上方、绿灯亮在最下方;表单校验失败除了把边框变红,旁边必须附带一个感叹号图标与提示语。 -
5. 边缘视野分辨率极低:不要指望用户能注意到屏幕角落的动态更新
眼睛中央凹高分辨率视野只有硬币大小,余光区域几乎只能察觉粗糙的运动。在屏幕右下角静悄悄弹出一行字,用户经常完全看不见。
购物车加购成功后,如果在右上角只给数字加 1,用户以为没点上;必须在屏幕正中央弹出半透明的“已加入购物车”吐司,或让物品抛物线飞过去。 -
6. 识别远胜于回忆:提供可视选项而非迫使用户在脑中凭空检索
人类大脑回忆需要主动激活神经突触检索记忆,而识别只需外部线索进行模式匹配。好界面永远展示选项让用户选,不让用户记。
文件另存为时直接列出最近使用的文件夹列表,用户扫一眼点击即可,不需要在脑海中背诵“D 盘/工作项目/2026/设计稿”的复杂路径。 -
7. 低风险环境加速学习:撤销机制赋予用户无畏探索的自由
当试错代价高昂时,用户会极度恐惧并拒绝使用新功能;当用户知道随时可以 Ctrl+Z 回退时,才会敢于主动探索与熟练操作。
相册修图软件提供随时重置所有滤镜的原图对比按钮,新手才敢大胆拖动高光、对比度滑块尝试各种戏剧性效果。 -
8. 响应时间决定体验心流:0.1秒即时响应,1秒保持流畅,10秒任务中断
0.1秒是人类神经感知“直接操作”的极限;1秒是思维连贯的上限;超过10秒注意力彻底漂移。必须针对不同时延配置对应反馈机制。
点击按钮在 100ms 内展示按下动效;耗时 2 秒的查询展示局部骨架屏加载;耗时 15 秒的导出必须弹出进度百分比并允许后台运行。
全书思维导图 · 知识脉络树
全书结构
-
第1章 我们感知自己的期望
剖析知觉偏见:过往经验、当前情境与任务目标如何先入为主地扭曲我们的视听觉,阐明为什么用户常常对预期之外的明显信息熟视无睹。
用户在找“发票申请”按钮时,屏幕正中间一个写着“财务凭证下载”的超大横幅被其视而不见,因为关键字与大脑预期不匹配。 -
第2章 为观察结构优化我们的视觉
系统讲解格式塔七大原则(接近性、相似性、连续性、封闭性、对称性、主体/背景、共同命运),指导如何构建符合视觉本能的页面。
表格隔行采用深浅交替的斑马纹背景色(相似性),让读者的视线能沿着横向长数据行平滑浏览而绝不串行。 -
第3章 我们寻找和使用视觉结构
阐明人类大脑本能地渴望从信息中寻找结构,讲解如何通过专有控件、清晰分段与视觉层级帮助用户轻松扫描长数字与繁杂数据。
将 11 位手机号自动格式化为“138 0000 1234”,用户核对校验的速度比连在一起的“13800001234”快三倍且错误率降低 80%。 -
第4章 阅读不是自然的
从神经生物学角度揭示阅读的艰难本质,对比熟练阅读与初学阅读的脑区差异,批判软件界面中由于长篇大论造成的巨大认知阻力。
将冗长的 10 条退款细则提炼为三张醒目的图示清单,配合打勾打叉的简洁图例,用户投诉退款规则看不懂的比例骤降。 -
第5章 色觉是有限的
讲解视网膜感光细胞的工作机制、边缘反差对色彩识别的决定性作用,指导如何针对色盲群体和不良照明环境规范用色。
股票交易软件提供“红涨绿跌”与国际通用的“绿涨红跌”自由切换,并允许开启高反差黑白线框模式服务色盲投资者。 -
第6章 我们的边界视力很糟糕
对比眼睛中央凹与余光视野的分辨率悬殊差异,警告设计师不要在用户视线聚焦区域之外随意刷新信息,必须谨慎使用动效提示。
用户正在中央输入框填表,页面右上角的通知铃铛默默闪烁红点,90% 用户根本无法察觉,重要提示必须就地就近弹出。 -
第7章 我们的注意力有限,记忆力也不完美
深度剖析短期感觉记忆、工作记忆与长期记忆的特性与衰退曲线,指导界面设计如何充当用户的外部记忆支架。
跨步骤的问卷调研顶部展示步骤条(1.个人信息 → 2.工作背景 → 3.需求评估),清晰卸下用户对“还要做多久”的记忆负担。 -
第8章 对注意力、形状、思考以及行动的限制
揭示用户的六大行为模式(专注于目标而非工具、追踪信息气味、偏好熟悉路径、目标-执行-评估思考环,以及忘记任务收尾)。
ATM 取款机必须设计为“先退还银行卡,再吐出钞票”,否则用户拿了钱立刻拔腿就走,把银行卡彻底忘在卡槽里。 -
第9章 识别容易,回忆很难
阐述识别与回忆在神经激活层面的巨大难度鸿沟,提出用可视菜单、图标标签与智能联想全面取代命令行式的脑力搜索。
字体选择下拉框不仅展示字体英文名称,同时把“微软雅黑”、“楷体”直接用该字体的真实外观渲染出来供用户秒选。 -
第10章 从经验中学习与学后付诸实践容易,解决问题和计算很难
解释旧脑、中脑与新皮层的不同分工,说明人类擅长执行已固化的肌肉记忆与直觉经验,而在面对数学计算和新问题推理时极其痛苦。
优惠券满减计算器在商品页直接计算并大字显示“预估到手价 ¥79”,而不是让消费者心算“满300减40跨店凑单后每件折合多少”。 -
第11章 许多因素影响学习
梳理影响用户学习成本的关键要素:任务聚焦度、用词熟悉度与系统一致性,阐明低试错风险如何成倍加速用户的技能掌握。
企业 ERP 系统的按钮文案坚决使用业务一线熟悉的“入库、调拨、盘点”,坚决杜绝工程师自创的技术黑话“提交批次实体”。 -
第12章 我们有时间要求
从人脑感知常数出发严格定义系统响应度(Responsiveness),给出手眼协调、心流保持与任务中断的三大时间数量级阈值及应对方案。
点击打车按钮后,后台计算司机匹配需要 4 秒,界面立刻展示雷达扫描光波与“正在为您呼叫附近 5 辆出租车”,消除焦躁不安。