UI设计与认知心理学（全彩）

这本书更合适的名字可以叫《认知心理学在设计中体现和运用》。作者用了相当大量的篇幅介绍认知心理学的相关知识，好巧不巧，与我正在看的《普通心理学》和《心理学与生活》搭配出一套课外延伸阅读的体系，其中还涉及了社会心理学，生物心理学等内容，还提到了文化对认知的影响，进而对建筑设计园林设计的影响，对UI设计的影响。 本书更侧重的是对设计原因的探寻，对UI设计的直接指导很少，知识很庞杂，看下去需要有耐心有悟性，有各类知识，还可以懂得作者的逻辑框架（感觉这个框架有点偏了）。

我来搜索关于《UI设计与认知心理学》这本书的相关信息，以便为您提供准确的主要观念和思维导图内容。 根据搜索结果，我为您整理了《UI设计与认知心理学》的主要观念和思维导图框架。 📚 书籍基本信息 - 书名：《UI设计与认知心理学》 - 作者：郑昊 - 出版社：电子工业出版社 - 出版时间：2019年9月 - ISBN：9787121295195 - 页数：300页 - 作者背景：北京理工大学设计与艺术学院硕士，北京搜狗科技发展有限公司资深交互设计师，参与设计人人网、百度手机输入法、搜狗搜索、搜狗百科等众多项目 --- 🎯 核心观念与主要内容 一、认知是UI设计的本源问题 核心议题 关键观点 设计的本质 UI设计不仅是视觉美学，更是认知过程的设计 互联网产品本质 信息交互与认知效率的优化 与传统设计的区别 UI设计更偏重"示能性"（Affordance），即物体本身具有的、暗示其用途的属性 理论基础 必须基于认知心理学与神经科学，而非仅凭经验直觉 二、格式塔心理学在UI设计中的应用 1. 视觉感知原理 - 图形与背景关系：金刚区圆形图标与矩形图片的差异设计 - 接近性原则：空间接近的元素被视为一组 - 相似性原则：形状、颜色相似的元素被视为一组 - 连续性原则：人眼倾向于将连续的元素视为整体 - 闭合性原则：人眼倾向于将不完整的形状"补全" 2. 注意机制的设计运用 - 反射性注意：UI动效和光强变化引起上丘投射，自动吸引注意力 - 有意注意：基于目标和任务的主动注意力分配 - 设计策略：利用图形与背景差异、大小差异、清晰度差异、阴影差异、颜色差异引导注意 三、认知神经科学的设计启示 1. 面孔识别与情绪感知 - 梭状回面孔区（FFA）：大脑存在特异化的神经结构专门用于面孔识别 - 设计应用： - 头像与表情在UI中更能吸引注意力 - 社交应用中情绪符号（文字表情、GIF表情、AR表情）的设计至关重要 - 面部表情提供丰富的情绪状态信息，对社交类应用尤为重要 2. 记忆系统与设计 - 外显记忆：有意识回忆的信息存储 - 内隐记忆：无意识影响的技能与习惯 - 场景性设计：好的图片具有场景性，能交代故事背景（如亲子关系配沙滩大海背景） 四、信息认知的平衡定律（扁平化设计理论基础） 1. 逆简化原理 - 当视觉内容极度单调时，用户会追求形式信息的复杂和多样 - 反之，当视觉内容充实时，形式信息趋向简化 2. UI扁平化的认知根源 - 技术驱动：CPU工艺进步支持复杂UI，但富媒体化导致软件内部界面形式信息必须简化 - 三维化需求：系统UI界面三维化需要去除拟物界面的冗余信息 - 空间隐喻：扁平化通过三维空间隐喻信息结构（层级缩放、水波点击效果、高斯模糊景深等） 3. 扁平化设计要点 - 通过距离区隔信息（无框界面、无UI设计） - 简化与逆简化的动态平衡 - 桌面端与移动端的差异：桌面端可保留更多三维信息线索 五、重要心理学效应 1. 曝光效应（多看效应） - 人们偏好熟悉的人或事物 - 设计应用：适度"刷存在感"的元素更容易被用户接受 2. 斯特普鲁效应（Stroop Effect） - 对文字意义的反应（优势反应）快于对颜色的识别（非优势反应） - 设计启示：避免文字与颜色信息冲突，减少认知干扰 3. 黄金分割比效应 - 费希纳与拉洛的实验证明人们对黄金分割比矩形有天然偏好 - 设计应用：界面比例、图片裁切、布局分割的数学基础 4. 模度理论 - 以人体比例作为设计基准（柯布西埃《模度》） - 设计应用：触控按钮大小、信息层级间距的人体工学依据 --- 🧠 思维导图框架 ``` 《UI设计与认知心理学》 │ ├── 01 认知是UI设计的本源问题 │ ├── 1.1 为什么英文版面看上去更简洁 │ ├── 1.2 设计的本质 │ ├── 1.3 互联网产品的本质与UI设计的本质 │ ├── 1.4 UI设计与传统设计的区别 │ ├── 1.5 UI设计在"示能性"上的偏重 │ ├── 1.6 UI设计需要认知心理学与神经科学 │ └── 1.7 本书结构：解决问题的过程 │ ├── 02 格式塔心理学与视觉感知 │ ├── 图形与背景关系 │ │ └── 金刚区圆形图标 vs 矩形图片 │ ├── 接近性原则 │ ├── 相似性原则 │ ├── 连续性原则 │ └── 闭合性原则 │ ├── 03 注意机制的设计运用 │ ├── 反射性注意 │ │ ├── UI动效引起上丘投射 │ │ └── 光强变化与注意力转移 │ ├── 有意注意 │ │ └── 基于目标的主动注意分配 │ └── 引导注意的设计手段 │ ├── 图形与背景差异 │ ├── 大小差异 │ ├── 清晰度差异 │ ├── 阴影差异 │ └── 颜色有无差异 │ ├── 04 面孔识别与情绪设计 │ ├── 梭状回面孔区（FFA） │ │ └── 特异化的神经结构 │ ├── 头像与表情的注意力吸引 │ ├── 情绪符号设计 │ │ ├── 文字表情 │ │ ├── GIF表情 │ │ └── AR表情 │ └── 社交应用中的情绪传达 │ ├── 05 记忆系统与场景设计 │ ├── 外显记忆与注意 │ ├── 内隐记忆与习惯 │ └── 场景性图片设计 │ └── 交代故事背景（如沙滩大海+亲子关系） │ ├── 06 信息认知的平衡定律 │ ├── 逆简化原理 │ │ ├── 视觉内容匮乏 → 形式信息复杂化 │ │ └── 视觉内容充实 → 形式信息简化 │ ├── UI扁平化的认知根源 │ │ ├── 富媒体化导致形式信息简化 │ │ └── 三维化需求去除冗余信息 │ └── 扁平化设计要点 │ ├── 三维空间隐喻信息结构 │ ├── 通过距离区隔信息（无框界面） │ └── 简化与逆简化的平衡 │ ├── 07 重要心理学效应 │ ├── 曝光效应（多看效应） │ │ └── 熟悉度偏好 │ ├── 斯特普鲁效应 │ │ └── 优势反应 vs 非优势反应 │ ├── 黄金分割比效应 │ │ └── 费希纳与拉洛的实验 │ └── 模度理论 │ └── 人体比例设计基准 │ └── 08 设计实践应用 ├── 导航条位置（左上角 vs 右上角） ├── 信息层级设定（WAP端三级 vs Web端两级） ├── 控件按钮的位置与形态规划 └── 产品信息结构的认知依据 ``` --- 💡 核心设计原则总结 1. 认知负荷最小化：减少用户处理信息所需的认知资源 2. 注意引导：利用视觉差异和动效引导用户关注重点信息 3. 情绪设计：重视面孔、表情等情绪符号在社交应用中的作用 4. 空间隐喻：扁平化设计通过三维空间关系展示信息层级 5. 熟悉度偏好：适度重复增强用户接受度（曝光效应） 6. 人体工学：以人体比例作为界面元素大小的设计基准 7. 场景化：通过背景交代增强信息的故事性和说服力 --- 🔍 书籍特色与价值 - 理论深度：基于格式塔心理学、认知心理学、神经科学的经典研究 - 实践结合：融合搜狗搜索等互联网产品的真实工作经验 - 问题导向：解决设计师面临的职业困境（如如何证明设计价值） - 跨学科视角：引入神经科学、生物学、医学、计算机科学等多领域知识 - 未来导向：为UI设计的基础理论构建和未来发展提供方向

废话连篇，不排除明显凑字数的嫌疑。搬运 Norman 内容的同时，转译却不得精髓。建议有兴趣的朋友可直接移步《设计心理学》。

将认知心理学原理融入 UI 设计的各个环节，搭建起了一座连接用户心理与界面设计的桥梁。 书中强调，认知心理学为 UI 设计提供了科学依据。设计界面时，不能仅追求视觉上的美观，更要考虑用户的认知习惯和心理预期。例如，在信息架构的搭建上，要遵循用户的思维模式，让用户能快速找到他们需要的内容。利用格式塔原理，合理安排元素的位置和间距，增强界面的整体感和可识别性，帮助用户更高效地处理信息。 优秀的 UI 设计不仅是技术与艺术的结合，更是对人性的洞察。它要求设计师站在用户的角度，了解他们的认知局限、行为习惯和情感需求。只有这样，才能设计出用户体验良好的界面，减少用户的学习成本和操作失误，提高用户的满意度。

看标题好像是给设计师看的书，但对只学艺术和设计的人来说有点硬核或者说痛苦。大部分内容不是UI设计而是神经科学的长篇解释，还有像分析哲学一样晦涩的逻辑表达，不是通俗易懂的风格。建议用AI辅助阅读。

作者从人类认知的生物学、心理学方面讲述了UI设计的含义以及背后的原因。 1、UI设计的本源问题是认知。 UI设计是非语言的表达，这种表达的本质是为了解决信息与人之间的沟通问题，再进一步，其实是我们如何认知信息。 而互联网设计则是在无实体的虚拟世界中，对信息及感受的表达。 涉及到表达，那就要考虑到人类文明发展；涉及到认知，那么就要考虑认知心理学和神经科学。 于是乎作者给出了UI设计解决问题的过程：①选择合适构图比例 ②利用栅格系统构建界面边界和具体结构 ③利用格式塔原理组织页面要素 ④确定合理色调 ⑤确定icon的表达意义 ⑥确定虚拟空间及动画效果 2、黄金分割比例来源于生物环境特征。 黄金分割比例符合斐波那契数列，为什么黄金分割看起来更舒服，因为人类心理存在曝光效应。 即出现次数越多越有印象，在生物环境中，黄金分割比例存在较好的生存优势，因此存在更多符合此类特征的生物，进而人类在此环境下更偏向习惯此类比例。 3、使用栅格系统是因为人的视觉认知基础偏向喜爱简单几何。 人类的记忆规律是简化，抽取特征，然后记忆。因此使用简单几何可以降低认知过程成本。 4、邻近原则与赫布定律 邻近原则只空间相邻或时间相邻的元素，人类更倾向于视为整体并产生关联。 格式塔中的非封闭视图可以带来封闭感觉，是因为一个不完整刺激可以激活完整刺激，这就是赫布定律——一个邻近的神经元被长久刺激后，周围的神经元也倾向属于这个刺激-反应中。 应用到设计中，我们可以通过给不同元素之间相同规律（共同命运原则）使其感觉起来是一个整体。 5、人类视觉原理及色彩认知 人眼有两种细胞一种是视杆细胞一种是视锥细胞，视锥细胞对色彩反应，视杆细胞对明暗反应。 不同视锥细胞对色相反应不同，大致可以分为红 蓝 绿，作用机理是受到刺激时会兴奋某部分并抑制某部分细胞。 红绿色盲只能看到黄色的原因是缺失了反应红或绿的视锥细胞，进而产生红不明显，抑制绿不明显，两者共同作用激活了黄色的感受。 人类喜爱暖色调是在生存中寻找食物和温暖留下的习惯。 而视杆细胞则是感受明暗，在暗环境中会提亮某个亮点，刺激更强烈，所以我们手机需要夜间模式。 色彩的明暗会导致产生色相偏差，所以暗一点和亮一点的时候相同颜色看起来感受不同。 6、人类图像及物体识别原理 人类通过声音、视觉来判断距离。 视觉是因为我们通过视差来感受判断距离，我们通常用一只眼睛作为主视眼，另一只眼辅助完成视差距离感判断。 视锥，视杆，横向细胞会组成感受野，其结构带来特点是中心会对光线刺激更兴奋，两侧则是对暗感更抑制。 所以我们在明暗交接处会看到暗侧有亮边，亮处有暗边，所以形成轮廓阴影感觉。 7、利用上述视觉原理设计UI动效 动效的目的是吸引注意力，表达空间和信息，表现风格。 归纳起来，我们在设计中如何展现距离：遮挡（safari标签栏）、透视（素描的透视）、参考已知物体（远小近大）、改变阴影（轮廓阴影表现凸出方向）和改变景深（iOS文件夹的高斯模糊背景） 8、外部信息刺激带来的认知 我们接受信息是有过滤机制的，感光细胞和神经细胞会模糊视线边缘，清晰视线中央，这是因为一个依赖视杆细胞一个依赖视锥细胞，其生物原理是为了侦查中央，警觉周围。 利用这个原理我们可以设计出有动效的UI来吸引注意力，加强表现效果。 9、内部感受刺激带来的认知 内部感受与记忆关联，作者将人类记忆分为 长期记忆，短期记忆和感觉记忆，其中长期记忆又分为可陈述和非陈述记忆。非陈述记忆又分为联系的，条件反射的，知觉层面的，非联想学习的。 我感觉作者想表达就是人会有反射性的记忆，然后多次刺激形成短期记忆，久而久之又形成了身体里的长期记忆。 再简单点，人类有思维定式：页面导航一般在左上角，东方古画多朝右，西方古画多朝左。 应用到设计中：icon改版要使用渐进式，不然一下改变的图形会存在很高的学习成本，体验不好。针对首次上线的新产品，要预设所有可能的视觉目标，然后都做好引导和反馈。对于有针对性目标的产品，要学会突出该视觉目标。 10、创造是模因的正迁移 创造是源于有目标和有困境，这里介绍了两个人类描述信息的假说：双重编码和命题，双重编码认为人类通过视觉+语言/语义来描述信息，而命题认为人类通过主谓宾结构表述元素间关系从而描述信息。但二者问题在于有时候图像和语义会互相影响作用，我们描述单个物体变化不需要命题。 所以作者提出了模因论，类似自然选择学说就是一个视觉表象在不断的复制和变异中，适用于环境的被保留了下来并形成了人类的思维定式。 ...然后我就看不懂中心思想了。 11、分解练习有助于提高能力 12、扁平化原因是因为信息爆炸密集之后，不需要通过丰富细节来提供信息，因此通过扁平化来精简表达。 扁平化的设计要点是：更多利用空间变换，图形的选择和缩放；更多利用现实世界的物理规则来模拟；利用格式塔 距离感来区分区域 形成无框界面；扁平化与否，简化细节与否与信息承载容量有关，越大肯定越多细节。 末尾几个章节作者讲了一些AI/5G/VR的原理知识和见解，这里不赘述了。 全文用了很多生物与心理的理论知识，算是很深入地较科学地探讨了UI设计与认知的本源。 需要吐槽的是，本书过于理论化，对设计应用篇幅较少，更多地在解释一些学说，这也是这本书有些晦涩的原因； 还有一点是作者在表述上的逻辑关系不够清晰，致使我有些地方看不太懂想要表达的中心思想。何为逻辑关系呢，就是并列，因果，递进这种关系，而作者非常喜欢分段然后给段落加上1 2 3的序号。每次你以为他在描述几个并列的事情，结果他讲了两个并列和一对因果；你以为他在并列，不，他说这个我们下一章再说。 这种感觉在第7第8章感觉最明显。 最后这种通过生理学和心理学来探讨设计规律，书中的认知理论，莉莎费德曼巴瑞特的《情绪》有相似而详细的描述，感兴趣可以阅读下。

理论很好，有些收获，但是怎么落到实处，没说。

这本书讨论的全面得来很浅薄，又把一些本来可以集中简单说的要点无限没有重点的延伸。总的来说不是内行人写给内行人看的，像是外行人教的学术作业。

从斐波那契数列、格式塔邻近原则、库里肖夫效行、色彩拮抗理论、有意注意、斯特普鲁效应、无意识设计、表征的双重编码理论、VR到5G等等等讲述UI设计的理论来源或参照，讲述到去为什么mac os和ios系统的icon设计不同、为什么手机导航栏要是原型、为什么扁平化不是潮流是发展的必然趋势，棒！！！

内容很丰富，但阅读起来有一定的难度，一些专有名词的理解上面尚有困难。中间的一些内容直接把我打趴下，让我直呼好家伙！根本看不懂啊，这可如何是好