导图社区 ux理论让你的设计更有说服力
- 111
- 10
- 举报
ux理论让你的设计更有说服力
这是一篇关于UI.UE设计师宝贵资料的思维导图，里面的知识点包含了雅各布定理、简介法则等，喜欢可以收藏哦。
编辑于2021-10-08 15:21:23- 设计方法，设计原则，设计方法论
- 相似推荐
- 大纲
ux让你的设计更有说服力
1. 美及好用效应
1.1. 原理表述
当界面被设计得足够美观时，用户往往会容忍一些较为轻微、影响较小的可用性问题
1.2. 实验背景
文献中的数据表明，表观可用性的决定因素对真实可用性的影响系数大多在 0.000-0.310 之间，而界面美观度这个数据达到了 0.589。
1.3. 文章链接
https://www.uisdc.com/beauty-is-the-best-effect
1.4. 注意点
「美即好用」并不意味着一味追求界面好看，设计者应极力避免设计出好用但丑、美却难用这两种极端的界面，无论是哪一种对用户的吸引力都会大打折扣。
1.5. 总结
1.5.1. 尽量将界面设计得好看，而不影响其可用性。
1.5.2. 权衡之下可以牺牲轻微的可用性，而将页面设计得更为美观，需要依靠经验来保持它们的平衡。
1.5.3. 可用性测试过程中应留意测试者的反馈，从而消除「美即好用效应」的影响，觉察到真正需要改进的问题。
2. 多尔蒂门槛
2.1. 原理表述
系统需要在 400ms 内对使用者的操作做出响应，这样才能够让使用者保持专注，并提高生产效率。
2.2. 实验背景
Doherty 认为人们会将工作需要的一系列操作步骤存储在短时记忆之内，如果系统响应时间太长，就会打断人们的短时记忆，换句话说，思路都不连贯了。
2.3. 文章链接
https://www.uisdc.com/20-ux-rules-doherty-threshold
2.4. 注意点
2.4.1. 动画的持续时间应当在适当的区间中取到最短，而不能太突然或太缓慢。
2.4.2. 动画元素越小、动画幅度越小，持续时间就越短。
2.4.3. 复杂的动画比简单的动画持续时间更长
2.4.4. 一个页面出现的动画总是比消失的稍稍长一点（相差大致50ms）
比如有趣的加载动画、闪屏页等，都算是解决办法解决不可避免的高延迟
2.5. 总结
2.5.1. 合理的操作响应时长、方式有助于用户保持专注和提高效率
2.5.2. 软件操作的过度动画时间不宜太短或太长，最常见于 400ms 左近
2.5.3. 如果无法避免操作中较长读取、等待时间，那么就用其他更有趣的动画、页面来减少用户的焦虑感
3. 菲茨定律
3.1. 理论表述
任意一点移动到目标中心位置所需要的时间，与目标距离正相关，与目标大小负相关
3.2. 设计案例
3.2.1. 1. 需要连续操作的控件尽可能接近
3.2.2. 可点击的按钮尽可能大
3.2.3. 边角的利用
3.2.4. 菲茨定律的逆向应用
3.3. 文章链接
https://www.uisdc.com/fitts-law
3.4. 注意点
D 不能过分短
3.5. 总结
3.5.1. 尽可能缩短连续操作所相关按钮的间距，尽可能做大需要频繁点击的按钮（但都不要太过分）。
3.5.2. 注意屏幕四边和四角在交互中的价值
3.5.3. 逆向运用菲茨定律以延长用户在当前页面的时间，或对用户的下一步操作发出警示。
4. 希克定律
4.1. 理论表述
决策所需要花费的时间随着选择的数量和复杂性增加而增加
4.2. 研究背景
总之，无论是对数还是线性，选择数量越多，我们就需要花费更多的时间作出决定
4.3. 设计案例
4.3.1. 提供尽可能少的选项
4.3.2. 必须有较多选项的时候
4.3.3. 分步进行选择
4.4. 文章链接
https://www.uisdc.com/hicks-law
4.5. 注意点
4.5.1. 选项不要减到只剩一个
4.5.2. 不要把选项做得更复杂
4.5.3. 适用边界
4.6. 总结
4.6.1. 尽可能缩减用户一次决策中出现的选项；
4.6.2. 已经有多个选项时，不要增加选项的复杂度。
5. 雅各布定律
5.1. 理论表述
用户将大部分时间花在别人家的网站（产品）上，而不是你的。这意味着他们希望你的网站（产品）跟别人的有相同的操作方法和使用模式。
5.2. 理论背景
当一个网站跟其他网站一致的时候用户会立刻知道该如何操作，但如果违反了雅各布定律，那么用户会毫不犹豫地离开。
5.3. 文章链接
https://www.uisdc.com/jakobs-law
5.4. 设计案例
5.4.1. 一致的排版
雅各布定律并不是说所有页面统统要设计成一模一样，而是具有相同功能的页面，尽量保持一致。
5.4.2. 一致的示能
示能是《设计心理学》中引入的一个「直接知觉论」的概念，它表达了一个物体或者操作对象与人的可交互关系
5.4.3. 一致的符号映射
一致的符号映射就是相同或者类似的符号/图标会给用户提供相同的功能暗示。
5.4.4. 一致的概念模型
最后说下概念模型，概念模型同样是一个心理学词汇，这种模型会对用户提供暗示──产品内某一条功能流程的使用方法。
5.5. 注意事项
5.5.1. 不要违反雅各布定律
5.6. 总结
5.6.1. 你的页面应该与其余相同功能的页面具有一致的使用模式
5.6.2. 没有足够的理由，就不要轻易尝试标新立异。
6. 简洁法则
6.1. 理论表述
为了更方便地理解这个世界，人类会将接受到的大量信息进行过滤和简化
6.2. 理论背景
也正是人类的这种近乎于本能的信息处理模式，我们的设计才具备坚实的理论性和生物性基础，所以简洁法则对我们的设计具有极大的指导意义。
6.3. 文章链接
https://www.uisdc.com/rule-of-simplicity
6.4. 设计案例
6.4.1. 与简洁法则的第一次接触
6.4.2. 界面设计中的几何
6.4.3. 细分原则介绍
邻近性原则原理示意图
相似性原则 Law of Similarity
连通性原则原理演示图
同域原则原理演示图
6.5. 注意事项
6.5.1. 简洁法则是一种原则
6.5.2. 作为一种基础原则，想要应用进设计中就要具体到某个细分原则中，比如通过邻近性原则完成某个列表的排版，但无法直接套用简洁法则。
6.6. 总结
6.6.1. 简洁法则是大多数排版原则的基石
6.6.2. 格式塔中的邻近性、相似性、连通性、同域性原则都脱胎于简洁法则。
7. 邻近原则
7.1. 理论表述
彼此靠近的元素倾向于被视为一个组。
7.2. 理论背景
邻近性原则是格式塔组织律中的一个部分，是简洁法则的一种具体的表现场景。
7.3. 文章链接
https://www.uisdc.com/principle-of-proximity
7.4. 设计案例
7.4.1. 同一个组内的元素间距更小
7.4.2. 组之间的距离比边距更小
7.4.3. 具有强关联性的模块互相靠近
7.5. 注意事项
7.5.1. 无关联的元素或组件不要刻意做近
7.5.2. 距离的对比需要易被感知
7.6. 总结
7.6.1. 元素的关联性越大，间距就越小；
7.6.2. 无关联的元素不要近到让大家产生误解；
7.6.3. 间距的对比需要能够容易被清晰地感知到。
8. 相似性
8.1. 理论表述
相似的元素倾向于被视为一个组。
8.2. 文章链接
https://www.uisdc.com/similarity-rules
8.3. 设计案例
8.3.1. 矩形比例、圆角大小、描边样式
8.3.2. 不同字段对应的字体、字重、字号、色彩
8.3.3. 颜色的明度、饱和度、色相
8.3.4. 图标样式、色彩、大小
8.4. 方法论
8.4.1. 界面内相同功能的组件保持样式统一
8.4.2. APP风格保持统一
8.4.3. 特异点更易获得视觉焦点
8.5. 总结
8.5.1. 利用相似性原理，使应用内页面达到风格统一；
8.5.2. 特异点更容易获得视觉焦点
8.5.3. 相似不等于过度重复
9. 连通性
9.1. 理论表述
视觉上相连的元素倾向于被感知为具有更强的相关性（相较于不相连的元素）。
9.2. 理论背景
9.2.1. 连通性原则是格式塔组织律中的一个部分，是简洁法则的一种具体的表现场景。
9.2.2. 对比之前的邻近性原则和相似性原则，连通性的作用和影响都要更强。
9.3. 文章链接
https://www.uisdc.com/connectivity-rule
9.4. 设计案例
9.4.1. 利用连接线强化元素之间的相关性
9.4.2. 利用运动的下划线表达页面可滑动到达
9.4.3. 对齐线也是一种隐性视觉线
9.5. 注意事项
9.5.1. 不要乱用连接线
9.5.2. 不要使用过多的对齐方式
9.6. 总结
9.6.1. 利用连接线（显性的和隐形的、静止的和运动的）来强化元素之间的相关性；
9.6.2. 连接线不要乱用、滥用；
9.6.3. 对齐线不宜过多。
10. 同域原则
10.1. 理论表述
如果元素处在一个具有明确边界的区域内，那么在用户的感知中，这些元素倾向于成组。
10.2. 理论背景
同域原则是从格式塔知觉律和组织律中发展而来的一条亚原则，在少数文章中也属于连通性原理的某种细分应用场景，但这里将两者分开解释。
10.3. 文章链接
https://www.uisdc.com/common-region-and-millers-law
10.4. 设计案例
10.4.1. 利用共同区域来强调元素相关性
10.4.2. 利用共同区域来区分元素权重
10.5. 注意事项
10.5.1. 隔断线不要太显眼
10.5.2. 边界的共同区域不要多层嵌套
10.6. 总结
10.6.1. 利用「共同区域」使元素具有更强的相关性或权重；
10.6.2. 弱隔断的边界不能太显眼；
10.6.3. 强边界区域尽量不要多层嵌套，卡片尤其是如此
11. 米勒定律 Miller’s Law
11.1. 理论表述
在短时记忆中，人平均只能记忆 7（±2）个项目。即人们最多只能够记住 7（±2）个项目组成的一组。
11.2. 理论背景
后来的研究虽然对 Miller 论文中的某一些概念进行了修正和完善，但是数字 7 却被保留了下来，成为了 UI/UX 设计中的一条经典普适的定律：米勒定律
11.3. 文章链接
https://www.uisdc.com/common-region-and-millers-law
11.4. 设计案例
11.4.1. 审视每一种需要排列的选项组
11.4.2. 选项的描述词也需要注意
11.4.3. 利用希克定律和格式塔原理进行缩减和分组
11.4.4. 信息同样需要分块处理
11.5. 注意事项
11.5.1. 描述词不清晰的后果也很严重
11.5.2. 大量选项不进行分组的后果很严重
11.6. 总结
11.6.1. 每一组选项最多包含 7（±2）项；
11.6.2. 选项较多时，对选项进行分类和分组，并尽可能使描述词清晰易懂；
11.6.3. 长信息也需要分块处理。
12. 奥卡姆剃刀
12.1. 理论表述
如无必要，勿增实体。
12.2. 理论背景
切勿浪费较多的东西去做用较少的东西同样可以做好的事情
12.3. 文章链接
https://www.uisdc.com/occams-razor
12.4. 设计案例
12.4.1. 以苹果为首的简约化设计潮
12.4.2. 如无必要，勿增实体
12.5. 注意事项
12.5.1. 奥卡姆剃刀不是真理
12.5.2. 拒绝无意义的复杂
12.6. 总结
12.6.1. 避免增加无意义的视觉元素和操作流程；
12.6.2. 奥卡姆剃刀不是真理，过犹不及。
13. 伯斯塔尔法则
13.1. 理论表述
接受多变，输出保守。
13.2. 理论背景
对发送的内容保持谨慎，对接收的内容保持自由。
13.3. 文章链接
https://www.uisdc.com/postels-law-serial-position-effect
13.4. 设计案例
13.4.1. 允许用户进行任何操作，即便是错的或无效的
13.4.2. 对用户可以进行的操作定义边界
13.4.3. 如果操作是错的，及时给出反馈
13.5. 注意事项
13.5.1. Amino，过于奔放的视觉输出
13.6. 总结
13.6.1. 允许用户的任何操作，必要时给出操作边界；
13.6.2. 无效或错误操作及时给出反馈。
14. 系列位置效应 Serial Position Effect
14.1. 理论表述
户更容易记住系列中出现的第一项（首因效应）和最后一项（近因效应）。
14.2. 理论背景
对发送的内容保系列位置效应（Serial Position Effect）是一种心理学现象，它由两部分组成：首因效应（The Primacy Effect）和近因效应（The Recency Effect）。1913 年，德国心理学家 Hermann Ebbinghaus 在对自己的研究中发现当自己回忆一系列项目时，回忆的准确性会随着项目在列表中位置的改变而改变，于是他创造了「系列位置效应」这个词汇。持谨慎，对接收的内容保持自由。
14.3. 文章链接
https://www.uisdc.com/postels-law-serial-position-effect
14.4. 设计案例
14.4.1. 首因效应
14.4.2. 近因效应
14.4.3. 首因和近因在界面中的位置
14.5. 注意事项
14.5.1. 快速浏览过程中，首因效应影响有限
14.5.2. 近因效应的时限很短
14.6. 总结
14.6.1. 在一连串的内容当中，用户更容易记住第一个和最后一个；
14.6.2. 首因效应作用于长期记忆，近因效应作用于短期记忆。
15. 冯·雷斯托夫效应
15.1. 理论表述
当存在多个相似的物体时，与众不同的那个更容易被记住。
15.2. 理论背景
冯·雷斯托夫效应（Von Restorff Effect），也称为隔离效应（Isolation Effect）。1933 年，德国精神病学家、儿科医生 Hedwig Von Restorff 在研究中发现，对被测试者提供一系列相似的项，而只有一项显得特别、孤立、与众不同的时候，这一项往往更容易被记住。
15.3. 文章链接
https://www.uisdc.com/von-restorff-effect-zeignik-memory-effect
15.4. 设计案例
15.4.1. 环境差异──获取视觉焦点
15.4.2. 经验差异──强化时间特征
15.5. 注意事项
15.5.1. 所有都不一样 = 所有都一样
15.5.2. 把差异放在该放的地方
15.6. 总结
15.6.1. 利用环境差异让元素快速获得视觉焦点；
15.6.2. 利用经验差异使用户记住特殊的时间点；
15.6.3. 一页中不能做太多差异化设计，得做到关键的元素上。
16. 蔡格尼克记忆效应
16.1. 理论表述
人们对未完成任务的记忆比已完成的更深刻。
16.2. 理论背景
Bluma Wulfovna Zeigarnik，前苏联心理学家和精神病理学家。她的导师首先注意到了餐厅服务员能够很好地记住未付账单，但是却无法记住已付账单的更多细节，针对这种现象，她进行了更加深入的研究。在研究中，她发现了人存在一种天生的，做事有始有终的驱动力，这种驱动力使得人们对还没有完成的任务念念不忘，而对已经做完的任务印象不深。
16.3. 文章链接
https://www.uisdc.com/von-restorff-effect-zeignik-memory-effect
16.4. 设计案例
16.4.1. 对未显示完全的信息设置「悬念」
16.4.2. 提醒用户任务还未完成
16.4.3. 有效的任务激励
16.5. 注意事项
16.5.1. 任务已完成同样需要提醒
16.5.2. 避免过分强迫
16.6. 总结
16.6.1. 利用「未完成」的可视化意象对用户形成激励；
16.6.2. 已完成的任务同样需要提示；
16.6.3. 拆分任务进度，避免形成过分强迫。
17. 帕累托原则
17.1. 理论表述
对于许多事件，大约 80％ 的影响来自 20％ 的原因。
17.2. 理论背景
80/20 虽然只是一个相当不精确的数字，在很多具体情况之下，这个数字会有细微的波动，但这个数字背后所蕴含的思想或是规律却是不变的：更集中的投入将产出大于预期的结果。
17.3. 文章链接
https://www.uisdc.com/pareto-principle
17.4. 设计案例
17.4.1. 将时间投入到用户常用的页面
17.4.2. 奥卡姆剃刀的另一种诠释
17.4.3. 长尾模型与帕累托原则的对抗
17.5. 注意事项
17.5.1. 不得不做的需求
17.5.2. 最重要的「少数人」
17.6. 总结
17.6.1. 将时间和精力投入到用户常用的页面；
17.6.2. 根据地方政策和应用本身的付费用户特征，可以选择为小众需求投入时间。
18. 帕金森定律
18.1. 理论表述
任何任务都会拖延，直到所有可用时间都用完为止
18.2. 理论背景
Cyril Parkinson 是英国的海军历史学家，他曾经作为英国公务员工作过很长一段时间。作为第二次世界大战期间英国的参谋，他观察到大型的官僚机构效率极其低下的现象。实际上，他还指出尽管英国已经开始没落，但殖民地办公室却依然年复一年的在增加。
18.3. 文章链接
https://www.uisdc.com/parkinsons-law
18.4. 设计案例
18.4.1. Deadline 是第一生产力
18.4.2. 分解任务&分解时间
18.5. 注意事项
18.6. 总结
19. 特斯勒定律
19.1. 理论表述
任何系统都存在固有的复杂性，无法减少；唯一的问题是谁来处理它。
19.2. 理论背景
既然产品固有的复杂性守恒不变，那么该把谁置于复杂之下？是增加代码的复杂度而让交互更便利，还是增加用户的交互成本让代码变简单？特斯勒认为产品的复杂度应该交由代码，开发人员应该多花一周时间用代码来简化应用的复杂度，而不是让成千上万的用户在应用里为交互多花哪怕一分钟。
19.3. 文章链接
https://www.uisdc.com/teslers-law
19.4. 设计案例
19.4.1. 用代码简化交互
19.4.2. 算法解放「生产力」
19.5. 注意事项
19.6. 总结
19.6.1. 系统存在固有的复杂性，要把复杂性转嫁到代码的层面而降低用户端的；
19.6.2. 代码不能代替决策。