认知与设计-理解UI设计准则

我们对周围世界的感知很大程度上是我们期望感知到的，有三个因素影响我们的预期，也因此影响我们的感知：过去，现在，将来（经验影响感知，环境影响感知，目标影响感知）

控件的摆放要一致

当前目标影响我们的感知的机理有两个：

影响我们注意什么

使我们的感知系统对某些特性敏感

这些对感知的影响因素对于用户界面设计有以下三点启发：

1、避免歧义（遵从使用惯例）

2、保持一致（在一致的位置摆放信息和控件，不同页面上提供的相同功能的控件和数据显示应该摆放在每一页上相同的位置，而且应该有相同的颜色、字体和阴影，这样的一致性能让用户很快的找到和识别它们）

3、理解目标（用户用一个系统是有目标的，设计师应了解这些目标，并认识到不同用户的目标可能不同，而且他们的目标强烈左右他们能感知到什么。在一次交互的每个点上，确保提供了用户需要的信息，并非常清晰地对应到一个可能的用户目标，使用户能够注意到并使用这些信息）

格式塔原理：接近性、相似性、连续性、封闭性、对称性、主体/背景、共同命运

信息呈现方式越是结构化和精炼，人们就越能更快和更容易地扫描和理解。

进行更精炼、更结构化的设计，去掉重复并只把代表选项的文字标记出来，占用的页面空间更少，同时也更容易浏览。

通过信息结构化和避免重复的“噪声”来提高用户浏览速度。

要让信息能够被快速的浏览，仅仅把它们变得精炼、结构化和不重复是不够的，还必须遵从图形设计的规则（格式塔原理）

一个长串的数字可以用两种方式分隔：用户界面明确地为不同部分提供独立字段，或者界面提供一个字段，但允许用户输入时将号码用空格或者其他符号分隔开。

不是数字的数据字段也能提供有用的视觉结构，比如日期：2015/06/30

数据专用控件提供了专业的结构，比如日期、邮箱等

视觉层次让人专注于相关的信息

1将信息分段，把大块整段的信息分割为各个小段

2显著标记每个信息段和子段，以便清晰地确认各自的内容

3以一个层次结构来展示各段及其子段，使得上层的段能够比下层更重点地被展示

糟糕的信息设计会影响阅读：

不常见和不熟悉的词汇

难以辩认的书写和字形

微小的字体

嘈杂背景下的文字

信息被重复的内容淹没（如果连续多行文字里有许多重复内容，读者接收到的相关反馈就太少，不知道自己正在读哪一行。另外，这也让人很难从中提取出重要的信息）

居中对齐的文字（很大程度上破坏了读者的无意识眼动）

交互系统的设计师可以遵循以下准则来为阅读提供支持：

1、保证用户界面里的文字允许基于特征的无意识处理有效地进行，可以通过避免之前描述的破坏性缺陷做到。这些缺陷包括难辨认的或太小的字体、带图案的背景和居中对齐等。

2、使用有限的、高度一致的词汇，在业界这有时被称为“直白的语言”或者简单的语言

3、将文字格式设计出视觉层次，以便使浏览更轻松，如使用标题、列表、表格和视觉上加强了的单词

对设计的启示：尽量少让人阅读

色觉是有限的：

我们的视觉是为检测反差（边缘）优化的，而不是绝对亮度

我们辨别颜色的能力依赖于颜色是如何呈现的（深浅度，色块的大小，分隔的距离）

有些人是色盲

使用色彩的准则：

1、用饱和度、亮度以及色相来区分颜色，避免采用轻微的差别，确保色彩之间有较高的反差。

2、使用独特的颜色：红-绿、黄-蓝、黑-白

3、避免使用色盲的人无法区分的颜色对

4、在颜色之外使用其他提示

5、将强烈的对抗色分开。将对抗色放在一起会产生令人难受的闪烁的感觉，因此必须避免。

让信息可见的常用方法

1、放在用户所看的位置上（当与图形用户界面交互时，人们的注意力在可预期的地方。）

2、标记出错误（用某种方式显著地标记出错误并清晰的指明出错了）

3、使用错误符号

4、保留红色以呈现错误（信息）（习惯上，在交互的计算机系统里，红色暗示警告、危险、问题、错误等。使用红色来标记其他信息会导致误解。但假设主色是红色，或者在红色被认为是吉祥、积极的颜色的情况下，就使用另一种颜色代表错误，用错误符号标记或者使用其他更强大的方法）

让用户注意到信息的重武器（请小心使用）：

弹出式对话框中的信息：错误消息对话框打断用户的工作而且要求立即将注意力转向它，如果这是个紧急情况的错误消息，那么这样做是正确的；但如果仅仅用于类似确认用户请求操作的执行情况等不重要的信息，就会让人觉得厌烦。

使用声音：在一些人的电脑上，声音是关闭的，或者竟是调得很低。

闪烁或者短暂的晃动：必须简短：它应只能延续四分之一到二分之一秒，不能再长。否则它很快就会从无意识的提醒变成有意识的打扰了

强烈的注意力获取方法的滥用会导致重要信息被习惯化屏蔽。

短期记忆的特点对用户界面设计的影响：

短期记忆的低容量和不稳定性对交互式计算机系统的设计有很多影响。最基本的启示是用户界面应帮助用户从一个时刻到下一时刻记住核心的信息，不要要求用户记住系统状态或者他们已经做了什么，因为他们的注意力专注于主要目标和朝向目标的进度。

模式：短期记忆有限的容量和不稳定性是为什么用户界面设计准则中经常说要么避免模式要么提供足够的模式反馈的原因。在一个使用模式的用户界面下，一些用户操作根据系统所在的模式会有不同的效果。

长期记忆的特点：易产生错误、受情绪影响、追忆时可改变

长期记忆的特点对用户界面设计的影响：

1、人们需要工具去加强它

2、用户界面的一致性有助于学习和长期保留

人们在与周围世界有目的进行互动时，行为的某些方面会遵循一些可预测的模式，这些模式如下：

模式一：我们专注于目标而很少注意使用的工具

这就是为什么大多数的软件设计准则要求应用软件和大部分的网站不应唤起用户对软件或网站本身的注意，它们应该隐入背景中，让用户专注于自己的目标。

模式二：我们使用外部帮助来记录正在做的事情

模式三：我们跟着信息“气味”靠近目标

模式四：我们偏好熟悉的路径

对交互性系统的设计来说，用户这种对熟悉的和相对不需要动脑子的路径的偏好意味着：

1、有时不动脑子胜过按键

2、引导用户到最佳路径

3、帮助有经验的用户提高效率

模式五：我们的思考周期：目标，执行，评估

模式六：完成任务的主要目标之后 ，我们经常忘记做收尾工作

软件设计者应该考虑，他们设计的系统所支撑的任务中，是否有用户可能会忘记的扫尾工作。如果有，那么应该把系统设计成能够帮助用户记住，或者根本不需要用户记住。

识别容易，回忆很难

识别与回忆对用户界面设计的影响

相对回忆，我们能够更轻松地识别，这是图形用户界面（GUI）的基础。GUI基于下面两个著名的用户界面设计规则：

1、看到和选择比回忆和输入要容易

2、尽可能使用图像来表达功能

使用缩略图来紧凑地描绘全尺寸的图像

越多人使用的功能，应该越可见

让许多人需要的功能高度可见，用户就能看到并识别出可有的选择而不是必须去回忆它们在哪儿。相反，少数特别是充分训练的人才会使用的功能，可以隐藏起来，比如放在“详细”面板、右击菜单中，或者通过特殊的键盘组合操作才显示出来。

使用视觉提示让用户知道他们所处的位置

让认证信息容易回忆

生物识别的认证方式看起来是个解决方法，但要做到被广泛接受，其实现方式必须达到严格的隐私保护要求。

从经验中学习与学后付诸实践容易，解决问题和计算很难

交互系统应尽可能减少用户不得不投入注意力去操作它们，否则这会把稀缺的认知资源从他们要用电脑要解决的任务上抽取出来，其设计原则如下：

1、显著的标识系统状态和用户当前进度

2、引导用户完成他们的目标

3、不要让用户诊断系统问题

4、尽可能减少设置的数量和复杂度

5、让用户使用感觉而不是计算

6、让系统令人感到熟悉

7、让电脑去计算

影响人们学习使用交互系统的因素：

1、操作是专注于任务、简单和一致的

2、词汇是专注于任务、熟悉和一致的

3、低风险

对象-动作分析也就是对用户可见的对象做出声明。请遵循这个规则：如果某件东西不在对象-动作分析里，用户就不需要知道它。

尽可能简单

除了专注于用户的任务，一个概念模型也应该尽可能简单。越简单就意味着概念越少。而只要提供了用户需要的功能，那么用户需要掌握的概念就越少越好。只要能够很好地让用户达到目标完成任务，少即是多。

不论惯例和约定是如何被封装起来的，目标都是在概念和任务层面上创新而在按键层面上坚持惯例。作为设计者，我们真的不想让我们的软件用户在使用软件工作时不停地去想按键层面的动作，用户也不愿意这么做。

当词汇专注于任务、熟悉和一致时，我们学得更快

当每一个概念有且只有一个名称时，交互系统所用的专用词汇就是一致的。某位用户界面和表彰设计的专家提供了这条规则：

同一个名称，就是同一个东西；不同的名称，就是不同的东西。

这意味着词条和概念应该有着一一对应的关系。绝对不要使用不同的词条表示同一个概念，

也不要用同一个词条表示多个概念。即使在现实世界中有歧义的词条在系统中也应只表示一个东西。不做到这些，人们更难学习和记忆如何使用这个系统。

为了促进学习，交互系统应提供低风险的环境，使得用户不怕探索，愿意尝试新东西。这么设计软件意味着以下几点：

1、尽可能防止出错

2、信用不合理的命令

3、向用户清晰地展示他们做了什么，这样错误就容易被发现

4、让用户能够轻松地撤销、反转或者修正错误

高响应度的应用可以做到：

1、立刻告知已经接收到你的输入

2、对操作需要多长时间完成一定的指示。

3、在等待时允许你去做其他事情

4、能够智能地管理事件队列

5、将系统内部管理和低优先级的任务放在后台运行

6、对最常见的用户请求做出预期。

为满足实时交互的设计

要让用觉得响应度高，交互系统应遵循下面这些准则：

1、立刻告知收到用户的动作，即使回应用户需要时间。保持用户对因果关系的感知。

2、让用户知道软件是否在忙

3、在等待一个功能完成的同时允许用户做别的事情

4、动画要做到平滑和清晰

5、让用户能够终止（取消）他们不想要的长时间的操作

6、让用户知道长时间的操作需要多长时间

7、尽可能让用户来掌控自己的工作节奏

达到高响应度交互系统的另外一些指导原则

1、使用忙碌标识

2、使用用户进度指示

以下是设计有效的进度标识的一些指导原则：

（1）、显示还剩下多少工作，不是完成了多少。这么说不好：“已经复制了3个文件”，这么说才好：“已经复制了4个文件中的3个”

（2）、显示总进度，而不是当前步骤的进度。

（3）、显示一个操作已经完成了的百分比时，从1%开始，而不是0%开始。如果进度条在0%上超过了1~2s，用户就会开始担心

（4）、类似地，在操作结束时，只要非常短暂地显示100%，如果一个进度条在100%的地方超过1~2s，用户就会以为出问题了

（5）、进度的显示应该是平缓的，线性的而不是不稳定爆发式的。

（6）、用人们平时使用的，而不是电脑用的精度。这么说不好：240s，这么说才好：大约4分钟

3、单位任务内的延迟比单位任务之间的延迟麻烦

一个决定反应延迟是否可接受的关键因素是封闭性的高低。一个在主要单位工作结束后的延迟并不会困扰用户或者对性能有负面影响。然而，在较大单位任务中的小步骤之间的延迟可能就会让用户忘记计划中的下一个步骤。总的来说，有高度封闭性的动作，例如保存一个文档，对延迟较不敏感。封闭性低的操作，例如敲击字符并看到它在屏幕上显示出来，对反应时间延迟更敏感。

底线就是：如果一个系统有延迟，应把延迟放在单位任务之间，而不是之内。

4、先显示重要的信息

通过先显示重要的信息再显示详细和辅助信息，可以使系统看起来速度很快。不要等到所有显示内容完全渲染后才让用户看到。给用户一些东西去动动脑子，同时运行系统。

5、在手眼协调的任务中伪装重量级计算

6、提前处理

7、根据用户输入的优先级而不是输入的顺序来处理

8、监控时间承诺，降低工作质量来保证不落后

9、提供及时反馈，即使网页也应如此

设计者和开发者们如何能够在网页上尽可能提高响应度？下面是一些对策：

（1）尽可能减小图片的尺寸和数量

（2）提供快速显示的缩略图或者概略图，想办法只在需要的时候才显示细节

（3）当数据量太大或者一次显示太消耗时间时，让系统提供一个所有数据的概览，并允许用户深入到他们需要的数据的具体部分和细节层面

（4）使用CSS来对页面渲染和布局，不要使用展示性的html、框架或者表格

（5）使用浏览器内置组件，比如错误提示框，而不是用html来创建自己的提示框

（6）下载小应用程序和脚本到浏览器，使用Ajax方法。

10、实现高响应度是重要的

以下是关于响应度的几点事实：

（1）对用户来说响应度很重要

（2）与性能不同，响应度的问题不是仅仅靠优化性能或者使用更快的硬件就能够解决的

（3）响应度是设计问题，不仅仅是实现问题

后记  著名的用户界面设计准则

从研究中得到的推论

1、模式错误意味着需要更好的反馈

2、描述错误说明需要更好的系统配置

3、缺乏一致性会导致错误

4、获取错误意味着需要避免相互重叠的命令序列

5、激活的问题说明了提醒的重要性

人会犯错，所以要让系统对错误不敏感

教训：

1、反馈 用户应该能够清楚地了解系统的状态。最好是以清晰明确的形式展现系统状态，从而避免在对模式的判断上犯错

2、响应序列的相似度 不同类型的操作应有非常不同的指令序列（或者菜单操作模式），从而避免用户在响应的获取和描述上犯错。

3、操作应该是可逆的 应尽可能可逆。对有重要后果且不可逆的操作，应提高难度以防止误操作。

4、系统的一致性 系统在其结构和指令设计上应保持一致的风格，从而尽量减少用户因记错或者记不起如何操作引发问题。

另一位大师说的准则：

1、力争一致性

2、提供全面的可用性

3、提供信息充足的反馈

4、设计任务流程以完成任务

5、预防错误

6、允许容易的操作反转

7、让用户觉得他们在掌控

8、尽可能减轻短期记忆的负担

又一位大师说：

1、一致性和标准

2、系统状态的可见性

3、系统与真实世界的匹配

4、用户的控制与自由

5、错误预防

6、识别而不是回忆

7、使用应灵活高效

8、具有美感的和极简主义的设计

9、帮助用户识别、诊断错误，并从错误中恢复

10、提供在线文档和帮助

又来一位大师说：

1、可见性 朝向目标的第一步应该清晰

2、自解释 控件本身能够提示使用方法

3、反馈 对已经发生了或者正在发生的情况提供清晰的说明

4、简单化 尽可能简单并能专注具体任务

5、结构 内容组织应有条理

6、一致性 相似从而可预期

7、容错性 避免错误，能够从错误中恢复

8、可访问性 即使有故障，访问设备或者环境条件存在制约，也要使所有目标用户都能够使用。

最后一位大师，他这么说：

1、专注于用户和他们的任务，而不是技术

（1）了解用户

（2）了解所执行的任务

（3）考虑软件运行环境

2、先考虑功能，再考虑展示

开发一个概念模型

3、与用户看任务的角度一致

（1）要争取尽可能自然

（2）使用用户所用的词汇，而不是自己创造的

（3）封装，不暴露程序的内部运作

（4）找到功能与复杂度的平衡点

4、为常见的情况而设计

（1）保证常见的结果容易实现

（2）两类“常见”：“很多人”与“很经常”

（3）为核心情况而设计，不要纠结于“边缘”情况

5、不要把用户的任务复杂化

（1）不给用户额外的问题

（2）清除那些用户经过琢磨推导才会用的东西

6、方便学习

（1）“从外向内”而不是“从内向外”思考

（2）一致，一致，还是一致

（3）提供一个低风险的学习环境

7、传递信息，而不是数据

（1）仔细设计显示，争取专业的帮助

（2）屏幕是用户的

（3）保持显示的惯性

8、为响应度而设计

（1）即刻确认用户的操作

（2）让用户知道软件是否在忙

（3）在等待时允许用户做别的事情

（4）动画要做到平滑和清晰

（5）让用户能够终止长时间的操作

（6）尽可能让用户来掌控自己的工作节奏

9、让用户试用后再修改

（1）测试结果会让设计者感到惊讶

（2）安排时间纠正测试发现的问题

（3）测试有两个目的：信息目的和社会目的

（4）每一个阶段和每一个目标都要有测试

如果有帮助，请大家给个赞，谢谢！