【产品经理学习笔记】Part 9 交互设计（1）

交互设计

• （一）交互设计-图形界面设计
• • 格式塔理论
  • • 1. 相似性
    • 2. 接近性
    • 3. 连续性
    • 4. 闭合性
    • 5. 图/地法则（主体与背景法则）
    • 6. 简单法则（Pragnanz）
    • 7. 共同命运法则
  • 视觉感知流程：人是如何获取界面上的信息的
• （二）交互设计-人机交互界面的视觉感知
• • 亮度感知
  • 色彩感知
  • 景深感知
• （三）交互设计-认知摩擦
• • 认知摩擦
  • • 如何降低认知摩擦
• （四）交互设计-认知负荷
• • 认知负荷
  • • 外在认知负荷
    • 内在认知负荷
    • 控制外在认知负荷
    • 控制内在认知负荷
• （五）交互设计-情景认知
• • 情景认知
  • • 改善用户情景认知
• （六）交互设计-产品设计原则
• • 7（±2）信息块效应
  • 80/20 原则
  • 奥卡姆剃刀
  • 菲茨定律（Fitts' Law）
  • 席克定律

（一）交互设计-图形界面设计

格式塔理论

人类视觉是整体的：我们的视觉系统自动对视觉输入构建结构，并在神经系统层面上感知整体和统一的形状、图形和物体，而不是只看到互不相连的边、线和区域。

1. 相似性

如果元素彼此相似，则元素倾向于被感知为一组。这也意味着如果具有相同功能、含义和层次结构级别的元素，则应在视觉上保持统一匹配（包括颜色、大小、形状、纹理、尺寸和方向的相似性）

2. 接近性

当物体彼此靠近时，它们倾向于被默认感知在同一个组织中。具体来说，物体之间的相对距离会影响我们感知它们是否或者以何种规则组织在一起。互相靠近（相对于其他物体）的物体看起来属于一组，而那些具里较远的则自动被划分到组外。

3. 连续性

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

“我们的思想更喜欢阻力最小的道路。连续性帮助我们通过构图来解释方向和运动。他在对齐元素时发生，它可以帮助我们的眼睛顺利地穿过页面，有利于提高易读性。连续性原则加强了对分组信息的感知，创建了秩序并引导用户通过不同的内容细分。”

（页面右侧按钮连续，方便用户手指连续操作）

4. 闭合性

视觉会自动尝试将空出/残缺的图形闭合（或脑补）起来，从而将其感知为完整的物体而不是破碎的物体。

5. 图/地法则（主体与背景法则）

表明用户界面需要将主体对象与背景区分开来。（前后、远近透视关系）

“这个原理指出：我们在感知事物的时候，总是自动的将视觉区域分为主体和背景。一旦图像中的某个部分符合作为北京特征的话，我们的视觉感知就不会把它们作为主体焦点。根据这样的原理在用户界面设计当中，我们就可以通过一些处理将图像中的某些部分变成北京，这样可以显示更多的信息或者将用户的焦点转移。”

6. 简单法则（Pragnanz）

人的眼睛喜欢在复杂的形状中找到简单而有序的对象，当我们在一个设计中看到复杂的物体时，眼睛更愿意将它们转化为单一统一形状，并尝试从这些形状中移除无关的细节来简化这些物体。

“Less is More ，简单的东西往往带给人们的是更多的享受”

7. 共同命运法则

前面的几个格式塔原理都是针对静态的图形，这里的共同命运针对的是运动的物体。东通命运和前面的相似性和接近性相关，都影响着我们感知的物体是否在同一个组里。共同命运指出具有共同运动形式的物体被感知为彼此相关的一组。

视觉感知流程：人是如何获取界面上的信息的

1. 视觉寻找：在视线所及的范围内搜索目标.
2. 寻找：当发现视觉探测到的对象与预期目标吻合时，排除其他对象的干扰，固定跟踪对象。
3. 分辨：对多个相似的对象的信息进行深入探测。
4. 识别：根据视觉特征信息和细节信息的差异，识别目标的含义。
5. 确定：锁定的对象与记忆中的存储信息相吻合，确认目标。
6. 记忆搜索：以上视觉过程的基础，以上视觉所获得的信息都要与记忆信息对比，从而做出判断。

（二）交互设计-人机交互界面的视觉感知

亮度感知

• 在较低的亮度对比条件下，亮度对比要比色彩组合对视觉感知具有更重要的作用
• 在较高的亮度对比条件下，用户更倾向于选择不同的颜色组合。

色彩感知

• 在用户界面的设计中使用色彩要谨慎
• 设计应该首先考虑单色，在白色背景下的黑色图案或者在黑色背景下的白色图案通常适用于大多数的用户
• 合理的颜色搭配不仅能够提高界面信息的认知效果，还能够丰富界面的层次

  

景深感知

• 人机交互中我们希望能够产生尽可能多的深度信息，因为在人机交互界面中图像是眼睛和大脑的注意焦点。如果破坏了深度信息，也就丧失了真实感。
• 在界面的设计过程中，亮度是一个决定视觉感知效果的因素，因此对象的明暗变化成为判断对象远近的依据。
• 此外，可以利用光与影的变化、内容的重叠与干涉以及细节与空中透视产生的立体效果。

  

（三）交互设计-认知摩擦

认知摩擦

• 因任职的差异性导致基于产品开发的界面变得复杂，用户难以通过界面表象理解程序员的意图，执行任务过程存在困难如标签或导航的认知不清晰、操作反馈得不明确或不及时，得不到预期的效果等问题。
• 设计者最重要的目标之一，就是要使表现模型和用户的心理模型尽可能地接近。

如何降低认知摩擦

• 界面应该有自己内部的和谐，这是最基本的要求。
• 将信息有效的组织从而控制认知差异。（分栏、分组等）

  

（四）交互设计-认知负荷

认知负荷

• 感觉输入和短时记忆的容量都是有限的，并且如果个体直接或间接接收到的信息量多余容量值时，势必会给个体的认知系统带来符合，即形成认知负荷。
• 在人机交互界面中可以认为，认知负荷使用户为了顺利完成某项工作任务，实际投入到注意和工作记忆中去的认知资源的总量占个体固有认知资源的比例。

外在认知负荷

• 这个页面的实体元素多少、容量大小等。
• 主要与人机交互界面信息的组织呈现方式有关，用于外在认知负荷的认知资源可能会超过用户的工作记忆容量，从而阻碍用户使用产品。例如用户从界面大量的信息中搜索目标时，无关信息往往成为干扰项，增加外在认知负荷。

内在认知负荷

• 主要在信息读取过程中需要被同时识别的元素数量决定，元素数量与内在认知负荷成正比。
• 内在认知负荷的高低主要是由产品的复杂性与用户知识之间的关系决定。因此，内在认知负荷不仅受到信息内容的影响，还受到用户特征的影响。

eg：一道选择题，如果有20个选项——外在认知负荷

如果是政治选择题，4个选项，但每一个都要思考很久——内在认知负荷

控制外在认知负荷

• 在界面元素的组织上，要遵循一定的视觉搜索原则，要符合人的视觉搜索规律，使用户以最短的视觉搜索线路找到所需信息，并建立信息之间的联系，进而整合信息，减少用户的分散注意力，从而降低用户的认知负荷。
• 在界面元素的呈现方式上，根据信息的特性和用户的任务需要选择适合的方式呈现，例如利用色彩块来表达区域和等级信息，增加复杂内容的帮助提示信息等。

控制内在认知负荷

• 采用图形化、模块化的构建产品规则，可以提高用户自身的认知能力，控制内在认知负荷。
• 减少各个元素之间的交互动作，可以降低图形化结构之间的复杂度，从而有效降低内在认知负荷。
• 采用简单的信息组织结构，减少各信息架构之间的交叉点和分支，也可以起到降低内在认知负荷的效果。

（五）交互设计-情景认知

情景认知

• 情景认知是对周围发生的事情感知和了解的意识，是对时间和行为产生影响的目标宗旨。
  • 情景认知第一阶段（感知阶段）：影响用户感知的直接因素：视觉感知、对象识别、知识认知、环境感知。
  • 情景认知第二阶段（理解阶段）：影响用户理解的直接因素：记忆、图示和认知偏差
  • 情景认知第三阶段（预测阶段）：影响用户预测的直接因素：推理、记忆和认知偏差
  • 情景认知第四阶段（用户内在因素）：间接因素包括：决策、内在能力、经验、情绪。

改善用户情景认知

• 感知阶段：从人机交互界面构成要素入手，以适合读取、便于记忆的方式进行设计。
  • 减少无效信息显示
  • 确保信息的清晰易读，对重要信息有一定的提示
  • 提供与情景任务相关的重要信息显示
• 理解阶段：要求人机交互界面提供与任务情境相符合的认知模式，帮助用户正确理解当前情景。
  • 提供与情景相关的信息，支持并引导用户在各种情景下的正确认知
  • 设计界面的应急机制，能够警告和提示错误
  • 界面逻辑层次简单，提供快捷遍历的操作方式
• 预测阶段：要求人机交互界面提供能对任务情景进行预测的认知信息，帮助用户正确预测将要发生的情况。
  • 对将要发生的具有确定性的情况向用户说明
  • 对不确定性的情况尽可能的提供给用户解决方案

（六）交互设计-产品设计原则

7（±2）信息块效应

应用：

导航或选项卡尽量不要超过9个。

如果导航或选项卡内容很多，可以用ige层级结构来展示各段及其子段，并注意其深广度的平衡。

使用场景：规范导航或者选项卡的数量和层级深度，例如，我们网站的菜单的最佳数量是多少个？

80/20 原则

• 用户80%的时间花在了20%的功能上
• 在传统的网站和网络应用中，使用频率和交互频率最高的区域被归入20%部分
• 当设计移动界面时，只关注那20%的功能

奥卡姆剃刀

• 简单有效原理（有意识做减法）

  

  1. 只放置必要的东西

  可以使用“更多信息”的链接来实现

  2. 减少点击次数

  3. “外婆”规则

  如果你的外婆（其他较老的人）也鞥轻松使用你的页面，你就成功了。

  4. 减少段落的个数

  5. 给予更少的选项

菲茨定律（Fitts’ Law）

从一个起始位置移动到一个最终目标所需额时间由两个参数来决定，到目标的距离和目标的大小（下图的D与W），用数学公式表达为时间T=a+b log2(D/W+1)

T=移动设备所需时长；

a,b是经验常量；

D=设备起始位置和目标位置的距离；

W=目标的宽度大小；

菲茨定律的启示：

• 按钮等可点击对象需要合理的大小尺寸
• 屏幕的边和角很适合放置像菜单栏和按钮这样的元素，出现在用户正在操作的对象旁边的控制菜单（右键菜单）比下拉菜单或工具栏可以被打开得更快，因为不需要移动到屏幕的其他位置
• 要让不常用或危险的UI元素难以被点击（撤回、删除等）

  

席克定律

一个人面临的选择越多没做出决策需要的时间就越多。

最小最优化设计选项，太多的选项会延长用户做决策的时间，甚至对一些选择困难户来说，会直接或间接导致他们任务失败。