Question

设计心理学

• 格式塔心理学，完形心理学。格式塔原理注重整体的统一。
• 形状心理学：不同形状有特定含义。
• 颜色心理学：不同颜色有特定含义。

格式塔心理学(Gestalt)

格式塔心理学（Gestalt Psychology），又叫完形心理学，是西方现代心理学的主要学派之一，诞生于德国 1912 年，后来在美国得到进一步发展。该学派既反对美国构造主义 心理学的元素主义，也反对行为主义心理学的刺激—反应公式，主张研究直接经验（即意识）和行为，强调经验和行为的整体性，认为整体不等于并且大于部分之 和，主张以整体的动力结构观来研究心理现象。该学派的创始人是 韦特海默 ，代表人物还有 苛勒 和 考夫卡 。

格式塔心理学是由德国心理学家组成的研究小组试图解释人类视觉的工作原理。他们观察了许多重要的视觉现象并对它们编订了目录。其中最基础的发现是人 类视觉是整体的：我们的视觉系统自动对视觉输入构建结构，并在神经系统层面上感知整体和统一的形状、图形和物体，而不是只看到互不相连的边、线和区 域。“形状”和“图形”在德语中是 Gestalt，因此这些理论也称做视觉感知的格式塔原理。

格式塔心理学感知理论最基本的法则是简单精练法则，倾向于将事物理解为一个整体，而不是分割成部分。所以格式塔法则又称为完图法则。

格式塔原理 (Gestalt) 是设计心理学里具备纲领性和指导性的设计法则，我们非常熟悉的设计 4 原则「对齐、重复、对比、亲密」其实就是格式塔原理的另一种总结。

七大原理：接近性原理；相似性原理；连续性原理；封闭性原理；对称性原理；主体/背景原理；共同命运原理。

备注：在现实世界的视觉场景中，各种格式塔原理并不是孤立的，而是共同起作用，在工作中用每一条原理来考量各个设计元素之间的关系是否符合设计初衷。

1、接近性原理（注：强调的是位置）

接近性原理说的是物体之间的相对距离会影响我们感知它是否以及如何组织在一起。互相靠近（相对于其它物体）的物体看起来属于一组，而那些距离较远的则自动划为组外。

2、相似性原理（注：强调的是内容）

如果其它因素相同，那么相似的物体看起来归属于一组。

3、连续性原理

视觉倾向于感知连续的形式而不是离散的碎片。

4、封闭性原理

视觉系统自动尝试将敞开的图形关闭起来，从而将其感知为完整的物体而不是分散的碎片。

5、对称性原理

我们倾向于分解复杂的场景来降低复杂度。

6、主体/背景原理

我们的大脑将视觉区域分为主体和背景。主体包括一个场景中占据我们主要注意力的所有元素，其余则是背景。

7、共同命运

与接近性、相似永生原理相关，都影响我们感知的物体是否成组。指出一起运动的物体被感知为属于一组或者是彼此相关的。

形状心理学

人们的潜意识对不同的形状也有不同的反应：

• 圆形、椭圆形：传达积极的信息，通常与社区或关系有关；
• 正方形、三角形：传达强烈的信息，通常与强度和稳定性有关；
• 垂直线：表示强度或力量。
• 水平线：表示平静、相等或安静。

色彩心理学

色彩心理透过视觉开始，从知觉、感情而到记忆、思想、意志、象征等，其反应与变化是极为复杂的。色彩的应用，很重视这种因果关系，即由对色彩的经验积累而变成对色彩的心理规范，当受到什么刺激后能产生什么反应，都是色彩心理所要探讨的内容。

心理颜色视觉上的六种基本感觉，是红、黄、绿、蓝加上白和黑。

心理学家认为，人的第一感觉就是视觉，而对视觉影响最大的则是色彩。人的行为之所以受到色彩的影响，是因人的行为很多时候容易受情绪的支配。颜色源 于大自然的先天的色彩，蓝色的天空、鲜红的血液、金色的太阳……看到这些与大自然先天的色彩一样的颜色，自然就会联想到与这些自然物相关的感觉体验，这是 最原始的影响。这也可能是不同地域、不同国度和民族、不同性格的人对一些颜色具有共同感觉体验的原因。

不同的色彩给人不同的感觉，色彩会给人冷和暖、狭窄和开阔、大和小、轻与重、柔和与强硬、兴奋和镇静等不同的感觉。不同的人，不同的季节，不同的场合，我们需要不同的感觉。

表格 色彩与心理感受

色彩	心理感受	颜色示例
冷与暖	冷色为镇静色、收缩色、后退色--收缩、镇静、清爽、遥远的感觉。色彩通透，清亮，透亮，开阔。暖色为兴奋色、膨胀色、前进色--膨胀、兴奋、热情、狂野的感觉。色彩温和，活泼，热烈，澎湃。冷亮色调偏轻，而暖暗色调偏重。	见下文 色调章节
狭窄与开阔	空间。空间开阔度排列如下：红色， 橙色， 黄色，绿色，白色，蓝色。	黄色有膨胀，迫近，狭窄的感觉，蓝色有收缩，遥远，开阔的感觉。
大与小/膨胀与收缩/前进与后退	色彩可以使人有大小、凹凸上的心理感觉。大小感觉排列如下：红色，橙色，黄色，紫色，绿色，蓝色，黑色。	红色和黄色有扩大、凸起、突出背景向前的感觉，称为膨胀色或前进色。蓝色有缩小、凹陷、向后的感觉，称为收缩色或后退色。
轻与重	重量。以色相分，轻重次序排列为白，蓝，绿，黄，橙，灰，棕，红，黑。	白色，蓝色，绿色，黄色给人感觉较轻，而棕色，红色和黑色给人感觉较重。
柔和与强硬	暖色感觉柔和、柔软，冷色给人坚实、强硬的感觉；中间色为过渡色。
兴奋与镇静		赤红色和金黄色调成的橙色--给人活泼、愉快、兴奋的感受。青色、青绿色、青紫色--让人感到安静、凉爽、开阔、通透。

色调

色调是指图像的相对明暗程度，在彩色图像上表现为颜色。

颜色在心理上的一个特点是“冷热感”，这是对颜色的心理感觉。可分为暖色调、冷色调和中性色。冷色调的亮度越高--越偏清冷，暖色调的亮度越高--越偏闷热。

表格 色调

色调	定义	颜色说明	作用
暖色调	使人心理上产生温暖感觉的红、橙、黄、棕色以及由它们构成的色调。	红色、橙色、黄色象征着太阳、火焰、大地。	暖色是兴奋色、膨胀色、前进色。
冷色调	使人产生凉爽感觉的绿、蓝、紫以及由它们构成的色调。	绿色、蓝色、紫色象征着森林、天空、大海。	冷色是镇静色、收缩色和后退色。在视觉上有收缩的作用，也有使空间开阔、通透的效果。
中间色	又称为无彩色系，指由黑色、白色及由黑白调和的各种深浅不同的灰色系列。	中性色主要分为五种，分别是黑白灰金银 。黑白灰这三种中性色能与任何色彩起谐和、缓解作用。	中性色主要用于调和色彩搭配，突出其它颜色。它给人们的感觉轻松，可以避免疲劳，沉稳，得体，大方。

视觉设计

布局

分清数据间的主次关系，根据数据主次关系确认布局。

• 驾驶舱布局 分清主、次、辅。主居中显示，次两侧显示，辅助分析的内容通过钻取和轮播展示。
• 多级分析页面布局 通常为“总 - 分 -分”的结构，多维度地展示数据的全貌，帮助阅读者发现当前问题。
• BI 分析报表 二栏，左栏分析方法说明、公式和结论；右栏分析内容说明和图表。
• 移动端布局 横向 TAB 导航 + 页面布局（折叠、列表式...）。

布局注意事项有间距相等，合理留白。

展示类型

• 大屏 ：是以大屏幕为载体进行可视化展示的统称。大屏的终极目标是通过大屏幕的可视化，帮助用户洞悉业务数据， 在脑海中高效处理信息、快速做出应答。按应用场景可分为物联网大屏和展示分析大屏两大类。大屏需要专门采购硬件，布局需要特别设计（大屏有些专用图表）， 背景、特效都需要特别设置。
• 驾驶舱 ：驾驶舱的展示大多有一个特定的主题或是分类。从战略的角度而言，自上而下大致归纳为三种：战略型、分析型和操作型驾驶舱。驾驶舱也可以从不同角度多维度分析如角色、行业和场景。
  • 战略型：作用主要是让使用者快速掌握企业的运营情况，并据此快速做出决策，对过去做出总结或是对未来拟定战略性目标。这里的运营情况主要是过去已经发生的事。因此战略型的驾驶舱不需要实时的数据展示，只是对关键任务信息的简洁视觉显示，这些简洁而直观的信息有助于管理人员迅速实现决策和定位和诊断出不良运营存在的问题。战略型驾驶舱，能够帮管理者随时同步汇报结果，从而让部门和企业在正确的方向上朝着目标努力。
  • 分析型：作用主要是让管理者不仅可以看到到表层的信息，还可以深入探究表层现象发生的原因。通过钻取联动过滤等操作，从现象出发，沿着数据的脉络 去寻找原因。比如销售业绩为什么下降，回款时间长的原因又是什么。分析型驾驶舱更多的是落实战略到战术执行层面的中层管理人员服务，这部分需要更多体现的 是问题直接显性化，优先级排序，关联直接采取行动的方式推进。
  • 操作型：强调持续、实时的信息汇报。所以对数据的时效性比较高。操作型驾驶舱，用于监控每日进度和产出，以保证预期计划和实际达成业绩的相符，也 就是保证战略目标分解到每一天的完成度（daily check），这样的驾驶舱，提供了有关信息，让我们能够在小问题演变成棘手的大风险之前，及时解决并有助于递增地提高业绩。操作型驾驶舱需要从业务需求 出发，实现业务操作的提醒、监控和预警功能。
• 仪表板 ：Dashboard，也叫看板、仪表盘。目标是条理性，让用户理解数据观点。布局可以简单标准化。交互较多。

表格 大屏和仪表板比较

比较项	大屏	仪表板
对象	群体，领导层、公众、全体员工	个体，领导个体、个体员工
目标	冲击感，让用户产生深刻印象	条理性，让用户理解数据观点
场景	监控、专题、领导等	业务 KPI、用户分析、营销增长等
方式	物理大屏	电脑、手机
频率	低	高
地点	固定	不固定
共享	所有人共享	按角色甚至个人定制
布局	复杂，考虑尺寸、效果、拼缝等	简单，相对标准化
风格	炫酷	简洁
色彩	深色系背景图，色彩多，渐变多	浅色系纯色背景，色彩少，无渐变
图表	定制化强，象形图多，需设计师参与	标准化强，使用线饼柱等常规图表
3D 图表	较多	较少
操作交互	无或较少	较多，需要筛选、切换、下钻等
动态效果	动态效果多	基本静态图
数据更新	定时自动更新、清缓存	手动刷新更新
设计重点	效果优先，指标辅助	指标优先，图表辅助
硬件要求	高性能、独立显卡的高配电脑	普通配置的电脑、手机即可
变更成本	高	低

配色

在使用颜色的时候可以遵循以下的配色一致性原则：

• 指标数值一致性
• 语义颜色一致性：参考日常颜色的实际含义，如红绿灯、股市。红色危险，橙色预警，绿色正常。
• 指标颜色一致性
• 色系颜色一致性

交互设计

术语名词 ：

• UI：User Interface
• UE: User Experience 用户体验
• UCD: User Center Design 用户为中心的设计

产品框架设计理论-用户体验五要素

产品框架基于用户体验五要素：战略层、范围层、结构层、框架层、表现层，来进行制定。

产品框架设计理论-7（±2）信息块效应

人类头脑最好的状态能记忆含有 7±2 项信息块，在记忆了 5-9 项信息后人类的头脑就开始出错。假如你的短时记忆像一般人那样，你可能会回忆出 5~9 个单位，即 7±2 个，这个有趣的现象就是神奇的 7±2 效应。这个规律最早是在 19 世纪中叶，由爱尔兰哲学家威廉汉密尔顿观察到的。

产品框架设计理论-卡片分类法

卡片分类法是一种规划和设计互联网产品或者软件产品的信息构架的方法。它属于用户研究中的一种方法，简单来说就是用户来对信息卡片（或者是菜单卡片）进行归类，从而得出信息关联性的一种方法。我们最后把关联性更强的菜单放在一起，就形成了较为科学的一套信息分组。

交互设计的历史 ：网页设计 -> UI -> UED

图 交互设计的历史

用户体验的层次

图 用户体验的层次

UED 的组成：视觉设计 + 交互设计 + 用户研究 + 前端开发 + 文案撰写

交互设计的一些准则

• 最少移动原则 , 费茨法则（Fitts’ Law，1954）是一则人机交互法则。它阐述了：快速移动到目标的时间是离目标距离与目标大小的函数。目标距离愈远，目标面积愈小，则移动到目标的耗时愈久。 费茨法则适用于手或手指进行实体触摸或显示器上用指针虚拟指向。
• 漏斗法则 : 尽量减少操作步骤和界面跳转，每增加一个操作步骤或者界面切换，就有可能流失 10％的用户。
• 过度设计 的判定：设计路径坏死；功能堆积与复杂；功能重复与冗余；

移动设备的交互设计

广义的手势

1. 利用鼠标、光标的轨迹模拟手势
2. 在物理硬件上的手势: android 有 4 个缺省键 HOME, return, menu, search.
3. 在触摸屏上的手势: 主要有长按 Press、轻触 Tap、滑动 Flick、拖动 Drag、旋转 spin、缩放、摇动 spread 这八种手势。点击 Tap/Click, 双击 Double Click.
4. 远距离体感: 通过摄像头，传感器等捕捉手甚至整个身体的姿势，来进行控制。
5. 未来手势：利用全息投影以及传感器，在空间或者投影上直接操作。

常见的一些设计：

• 控件的隐藏设计
• 顺畅的返回及导航设计
• 轻巧的移位与重叠设计

Android 的交互设计

• 布局：Screen box
• 意图动作
  1. 单击，长按，拖拽，pinch……
• 意图对象
  1. 物理按键，menu，置于屏幕对象，状态栏
• 反馈
• 导航
• 其它