【产品经理学习笔记】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. 共同命运法则
前面的几个格式塔原理都是针对静态的图形，这里的共同命运针对的是运动的物体。东通命运和前面的相似性和接近性相关，都影响着我们感知的物体是否在同一个组里。共同命运指出具有共同运动形式的物体被感知为彼此相关的一组。
视觉感知流程：人是如何获取界面上的信息的
- 视觉寻找：在视线所及的范围内搜索目标.
- 寻找：当发现视觉探测到的对象与预期目标吻合时，排除其他对象的干扰，固定跟踪对象。
- 分辨：对多个相似的对象的信息进行深入探测。
- 识别：根据视觉特征信息和细节信息的差异，识别目标的含义。
- 确定：锁定的对象与记忆中的存储信息相吻合，确认目标。
- 记忆搜索：以上视觉过程的基础，以上视觉所获得的信息都要与记忆信息对比，从而做出判断。
（二）交互设计-人机交互界面的视觉感知
亮度感知
- 在较低的亮度对比条件下，亮度对比要比色彩组合对视觉感知具有更重要的作用
- 在较高的亮度对比条件下，用户更倾向于选择不同的颜色组合。
色彩感知
- 在用户界面的设计中使用色彩要谨慎
- 设计应该首先考虑单色，在白色背景下的黑色图案或者在黑色背景下的白色图案通常适用于大多数的用户
- 合理的颜色搭配不仅能够提高界面信息的认知效果，还能够丰富界面的层次
景深感知
- 人机交互中我们希望能够产生尽可能多的深度信息，因为在人机交互界面中图像是眼睛和大脑的注意焦点。如果破坏了深度信息，也就丧失了真实感。
- 在界面的设计过程中，亮度是一个决定视觉感知效果的因素，因此对象的明暗变化成为判断对象远近的依据。
- 此外，可以利用光与影的变化、内容的重叠与干涉以及细节与空中透视产生的立体效果。
（三）交互设计-认知摩擦
认知摩擦
- 因任职的差异性导致基于产品开发的界面变得复杂，用户难以通过界面表象理解程序员的意图，执行任务过程存在困难如标签或导航的认知不清晰、操作反馈得不明确或不及时，得不到预期的效果等问题。
- 设计者最重要的目标之一，就是要使表现模型和用户的心理模型尽可能地接近。
如何降低认知摩擦
- 界面应该有自己内部的和谐，这是最基本的要求。
- 将信息有效的组织从而控制认知差异。（分栏、分组等）
（四）交互设计-认知负荷
认知负荷
- 感觉输入和短时记忆的容量都是有限的，并且如果个体直接或间接接收到的信息量多余容量值时，势必会给个体的认知系统带来符合，即形成认知负荷。
- 在人机交互界面中可以认为，认知负荷使用户为了顺利完成某项工作任务，实际投入到注意和工作记忆中去的认知资源的总量占个体固有认知资源的比例。
外在认知负荷
- 这个页面的实体元素多少、容量大小等。
- 主要与人机交互界面信息的组织呈现方式有关，用于外在认知负荷的认知资源可能会超过用户的工作记忆容量，从而阻碍用户使用产品。例如用户从界面大量的信息中搜索目标时，无关信息往往成为干扰项，增加外在认知负荷。
内在认知负荷
- 主要在信息读取过程中需要被同时识别的元素数量决定，元素数量与内在认知负荷成正比。
- 内在认知负荷的高低主要是由产品的复杂性与用户知识之间的关系决定。因此，内在认知负荷不仅受到信息内容的影响，还受到用户特征的影响。
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元素难以被点击（撤回、删除等）
席克定律
一个人面临的选择越多没做出决策需要的时间就越多。
最小最优化设计选项，太多的选项会延长用户做决策的时间，甚至对一些选择困难户来说，会直接或间接导致他们任务失败。
【产品经理学习笔记】Part 9 交互设计（1）相关推荐
- 【产品经理学习笔记】Part 1 产品体验及产品体验报告
[产品经理学习笔记]Part 1 产品体验产品体验报告 产品宏观分析(要素.情感.定位) 要素拆解 情感设计:感知产品 产品定位六问 产品微观分析:布局.交互和设计 产品体验报告 产品宏观分析(要素. ...
- 【产品经理学习笔记】Part 2 互联网经典产品案例分析
[产品经理学习笔记]Part 2 互联网经典产品案例分析 天猫国际产品体验 抖音电商场景产品体验 探讨:面对娱乐化消费,电商产品应该做出哪些改变? 天猫国际产品体验 产品定位与用户画像: 产品定位:平 ...
- 【 产品经理学习笔记 | 巨详细】1.1-1.4 初识产品经理
课程来源:B站(产品经理基础入门(172集全集已更新完毕)) 第一阶段:产品基础 (需求收集.需求管理.需求分析.结构图.流程图.原型.PRD文档.用户画像.后台角色管理-) 产品经理岗位要求的能力和 ...
- 极客产品经理学习笔记
经常有朋友问我"我听人说 人人都是产品经理,是不是你们产品经理对天赋的要求不是很高啊."我坚定的回答他,产品经理是极需天赋和才华的岗位,并不是人人都是产品经理.或许人人都可以有产品 ...
- 产品经理学习笔记- 猿题库运营面试准备
经过一个周的简历投递,今天终于有了一些回应,接到了三个电话面试,戴姆勒的采购部实习生,猿辅导的内容运营,搜狗的商业产品经理助理,可能真正的工作并没有自己想象的那样美好,但是尽早的踏出校门去锻炼一下,见 ...
- 产品经理内功修炼——扁平化交互设计技巧
交互设计扁平化 前言 自IOS7风格横空出世后,扁平化设计就深受设计师追捧并成为大势所趋,扁平化成为视觉设计的普遍标准之一,然而仔细想想,扁平化设计真的只是视觉设计师的工作吗? 其实扁平化不仅仅是界面 ...
- 【产品经理学习笔记 | 巨详细】2.规划阶段——2.1需求收集：用户访谈和问卷调查方式
(从规划阶段的需求收集开始,一般不会接触到市场调研) 2 规划阶段 2.1 需求收集 什么是需求? 需求和需要的区别: 需求:某方面未被满足而引发的感受指向具体的事物 需要:指向具体的事物 例: 我需 ...
- 人人都是产品经理学习笔记2
产品设计关键 用户.场景.需求 产品分析画布 产品经理的视角:用户视角.产品视角.商业视角 用户的视角:体验[产品报告不足的原因] 产品视角:逻辑,东西是怎么做出来的,替代品,结果-[产品经理的关注点 ...
- 决胜b端产品经理学习笔记01（持续更新版）
决胜b端-初识b端产品 什么是b端产品 b端产品,适用对象是企业或组织,用来解决企业某类经营管理问题. 1.核心价值:规模(提升收入).成本(降低成本).效率(提高效率).品质(保证品质).风控 好的 ...
最新文章
- shell-sed命令详解（转）
- Linux中进行用户UID测试导致系统报错
- 爬动的蠕虫(C++)
- MAC电脑常用快捷键
- Linux命令每五分钟执行一次,Linux crontab 每5秒钟执行一次 shell 脚本 的方法
- Android NDK 如何缩减库的大小
- UNIAPP中IOS和安卓应用热更新和整包更新app的方法
- 剑指 Offer 24. 反转链表
- C++ 类中的static成员的使用及单例设计示例
- 批量查找替换excel单元格中的软回车（alt + enter）
- [小白/详细]AC2100刷机教程开启telnet失败刷Breed----各类问题解决方案
- 排序的几种方法（合并，快速，冒泡排序）
- 【优化求解】基于帝国主义竞争算法ICA求解单目标问题Matlab源码
- 局域网工具_如何局域网管理企业海量文件？用这一个工具就够了！
- 微信开发者工具——合作开发 版本管理中：版本冲突解决办法
- Bat批处理方式发邮件
- 技校计算机学校排名,现在全国排名前十的技校有哪些
- IDA Pro 7.5版本使用IDAPython
- 许家印造车背后的大格局与大战略
- Redis Gli - 一个基于命令行的 Redis 图形界面客户端