《设计与认知—理解UI设计准则》PPT

1、UI即User Interface（用户界面）的简称。UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。

2、在介绍书的详细内容前，我们需要先了解一下以用户为中心的设计。

1、简单地说，就是站在用户的角度去设计产品，让产品去适应用户，而不是用户去适应产品。也就是从视觉上去美化产品（界面）使用户感觉舒适的设计。

2、《认知与设计：理解UI设计准则》就是从用户的角度出发，向各位读者介绍了一些作者经过实践总结出来的设计准则。从用户的心理、思考的习惯、阅读的习惯、对颜色图形的感知等围绕着用户的各个方面出发，向读者介绍怎样的UI设计对用户来说是有良好的体验的。

3、技术，特别是计算机技术，一直都在迅速的发展。就算是UI设计方面，它也有自己的流行趋势，从以前的立体的设计，到现在扁平化设计。虽然看起来相差很多，但是无论怎么变化，他们还是有必须遵循的准则，

例如在《认知与设计：理解UI设计准则》一书中，作者提出的准则。因为这些准则都是从用户体验出发提出的准则，而无论技术如何变化，人们如何感知、学习和思考的基本知识变化并不快，因此，我们不必因为行业信息的不断更新，而担心自己获得的知识已经过时，反而，通过这本书的学习，还能帮助我更好的学习和理解其他的设计准则。

给你一张设计的图纸，如果我告诉你，这是某房地产公司某个园区的规划图，你看到的可能是小区房子排列的格局，或者是花园的位置。但是如果我告诉你是一个广告设计公司设计的广告牌，你可能看到的将会是一个单词Life(看白色的部分)，或者是其他的一些东西。

1、这张素描大部分人对他的第一印象是随手泼出的墨点，但实际上这是一只在树附近嗅着地面的斑点狗，你的视觉系统才会把影响组成一幅完整的画面，并且你一旦把他看成完整的画面之后就很难把他在看成无序的点了。

2、以上两个图片带给我们的感受是我们的感知是受其他因素影响的。

1、经验影响感知第三种方式被称为习惯性，重复置身于同样的感觉会让感觉系统敏感度降低。

列：确认框一次又一次出现，开始你会注意并作出反应，但最终会反直接忽视并关闭确认框

    在微信朋友圈中，新用户会对一开始朋友圈分享体验的创新感到兴奋，但迟到会疲惫，并且不愿意再看。（身有同感）

2、举一个环境影响感知的列子

1、我们在阅读的过程中的语境一样，在不同的语境下，相同的单词可能会有不同的意思

2、一个字母出现在不同的单词中，我们可能觉得它是不同的单词

3、同样是一个字母H，在左边单词“THE”中，我们一眼望过去，觉得它是字母H，但在右边单词“CAT”中，一眼望过去，它就像字母A。

4、比如当我们与他人对话时，如果内容越引起兴趣，我们会深深融入其中而自然而然的忽略周围的一切，反之我们会觉得谈话内容无趣，从而将对谈话内容的关注上转移到别的方向，观察周围其他的实物，或者倾听周围别人的讲话。

5、成人比儿童对目标更加专注，儿童比成年人容易分心，但是观察能力却很好。

6、上京东-买书-选择自己需要的书-并在网上找到并交易。

1、20世纪早期，一个德国的心理学家组成的小组试图解释人类视觉的工作原理。

我们的视觉系统自动对视觉输入构建结构，并且在神经系统层面上感知形状，图形和物体，而不是只看到互不相连的边，线和区域。这就是著名的“格式塔”原理。

2、格式塔原理为图形和用户界面设计准则提供了有用的基础。

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

格式塔原理：相似性
    如果其他因素相同，那么相似的东西看起来归属一组。例如：虽然行和列的距离都相似，但是我们可以看出，空心的太阳属于一组。

格式塔原理：连续性
    上面的两个原理，都与我们试图给对象分组有关，另外几个原理与我们的视觉系统试图解析模糊或者填补遗漏来感知整个物体的倾向有关。第一个是连续性原理。
     我们的视觉倾向于感知连续的形式而不是离散的碎片。
     例如下面的图：我们看到的是两根线交叉，既不是四根线，也不是两个V，我们的视觉系统会自动填补遗漏的地方。

IBM的标志是由非连续的蓝色块组成，但一点也不含糊，很容易就看出三个粗体的字母。

就像透过百叶窗看到的效果一样。

1、与连续性相关的是封闭性原理，我们的视觉系统会自动尝试将敞开的图形关闭起来，从而将其感知为完整的物体而不是分散的碎片。
2、 我们能将下面左边的图中分散的弧形感知为一个圆。可以将右边的图形感知为一个白色三角形，另一个三角形和三个黑色的圆形叠加在一起，尽管画面实际上只有三个V形和三个黑色的吃豆人。

例如文档或者消息。仅仅显示一个完整的对象和其“背后”对象的一角就足以让用户感知到由一叠对象构成的整体。

 对称性原理抓住了我们观察物体的第三种倾向性：我们倾向于分解复杂的场景来降低复杂度。我们的视觉区域中的信息有不止一个可能的解析，但我们的视觉会自动组织并分析数据，从而简化这些数据并赋予他们对称性。

1、 主体/背景原理提出我们的大脑将视觉区域分为主体和背景。主体包括一个场景中占据我们主要注意力的所有元素，其余的则是背景。主体/背景也说明场景的特点会影响视觉系统对场景中的主体和背景的解析。

例如，当一个小物体或者色块与更大的物体或者色块重叠时，我们倾向于认为小的物体是主体而大的物体是背景。

如上图，当物体重叠时，我们把小的那个看成是背景之上的主体。
2、在用户界面设计和网页设计中，主体/背景原理经常用来在主要显示内容之后旋转印象诱导的背景。

背景可以传递信息（用户当前所在位置），或者暗示一个主题，品牌或者内容所表达的情绪。

例如，在一个网页的页面背景设置类似水印的图片，来显示这个网站的主题，或者是在其他内容这上弹出信息提示的时候，

比如，百度文库登录的时候，弹出登录对话框后，后面的网页内容变灰了，但还是可以看见。这样能够帮助用户理解他们在交互中所处的环境。
  

1、 前面的6个原理都是针对静态的图形和对象，最后一个原理，共同命运，则涉及运动的物体。

共同命运原理指出一起运动的物体被感知为属于一组或者是彼此相关的。

最明显的一个例子就是在桌面拖动文件的时候，如下图：

2、我们会发现里面有部分是运动的，而其他的是静止的，我们就会认为这些运动的是一组的。

3、将格式塔原理综合起来
     在现实世界的视觉场景中，各种格式原理不是孤立的，而是共同起作用的。

     同时用上所有的格式塔原理时，设计可能会导致无意产生的视觉关系。

推荐的办法是，在设计一个显示之后，使用每个格式塔原理——接近性原理，相似性原理，连续性原理，封闭性原理，对称性原理，主体/背景原理以及共同命运原理，来考虑各个设计元素之间的关系是否符合设计的初衷。

4、格式塔原理来展示视觉系统是如何被优化从而感知结构的。

1、上面是对同一种机票预定信息的两种呈现方式，一个是松散无结构的文字，另一个是以概述的形式结构化的文字。

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

即使是少量的信息，也可以通过结构化使其更容易被浏览。

电话号码和信用卡就是两个例子。

为了容易浏览和记忆，习惯上这两类号码会被分割为多个部分。

结构化的数据明显易于浏览。

1、视觉层次让人专注于相关的信息
     可视化信息显示的最重要目标之一是提供一个视觉层次，即信息的布置安排能够：
     将信息分段，把大块整段的信息分割为各个小段；
     显著标记每个信息段和子段，以便清晰地确认各自的内容；（帮助阅读者更好的阅读信息，且不会太疲惫的感觉）
     以一个层次的结构来展示各段及其子段，使得上层的段能够比下层更重点地被展示。

2、 当用户查看信息时，视觉层次结构能够让人从与其目标不相关的内容中立刻区分出与其目标更相关的内容，并将注意力放在他们所关心的信息上。

因为他们能够轻松地路过不相关的信息，所以能更快地找到要找的东西。

1、人类的色彩感知既有强处也有限制。
       我们的视觉是为检测反差（边缘）优化的，而不是绝对亮度。
       我们辨别颜色的能力依赖于颜色是如何呈现的。
有些人是色盲。
       用户的屏幕和观看条件会影响对颜色的感知。
2、色觉是如何工作的
    视网膜有两类感光细胞：
    视杆细胞：察觉光线强度但感觉不到颜色，在当今的社会我们几乎用不到视椎细胞，它们只在低亮度下工作。
    视椎细胞：察觉颜色，分为三类，分别对红色，绿色，蓝色光敏感。

1、视觉是为边缘反差而不是为亮度优化的，对比鲜明的边缘，比对绝对的亮度水平要敏感得多。

2、区别颜色的能力取决于颜色是如何呈现的，有以下三个因素，影响了我们区别颜色的能力。

       深浅度：两个颜色越浅（不饱和），就越难将它们区分开。
       色块的大小：对象越小或者越细，就越难辨别它们的颜色
       分隔的距离：两个色块之间离得越远，就越难区分它们的颜色，尤其是当它们之间的距离大到看它们时眼球需要运动。

3、然而其实我们的边界视觉很糟糕，边界视野中很难注意到暗色静止得的物体，而运动的物体却很容易被人察觉！

1、人类视野的空间分辨率从中央向边缘锐减。

2、我们平时看到的东西，是以眼球以每秒大约三次的速度不断快速移动，被这个中央凹扫描过才进入视觉系统的，阅读要求大量的眼球运动。

3、视网膜上面有一个盲点，如果我们阅读的内容落在这个盲点之上我们就看不到他了。边界视觉

4、我们边界视野中任何运动，即使非常轻微，很可能吸引我们的注意，从而引导中央凹去注视它。这点在很多网页设计中都有体现。

1、当传统的提醒方式不能引起用户的注意时，就会出现一个突然跳出来一个提示对话框，使用声音（如蜂鸣声）：闪烁或者短暂的晃动：（因为我们的边缘视觉善于捕捉运动）提示用户有些信息可能出现错误。

2、但这也有他的负面影响，当这种提示方式被滥用，如当下当我们打开很多页面时，很多垃圾广告页面就长以这种方式出现，最终使用户自觉屏蔽掉此类信息

这是一种好方法，但却被滥用，是有些可惜的

然而如何可以使人更好的阅读，理解重要的信息也是一个让人思考的问题

1、说话和理解口头语言是一个自然的人类活动，但阅读不是。

在人的进化过程中，逐渐形成了口头语言所需要的神经结构，其结果是普通人在幼童时期，不需要经过任何系统的训练就能够学会他所在的环境下的语言。

而阅读却不是，我们的大脑没有显示出任何特殊的天生的阅读能力。

阅读其实是一种人造的，通过系统的训练获得的能力。

2、因为人的大脑没有设计成能够天生学习辛庄 ，因经抚养人若不为儿童朗读，或者儿童在学校里面没能获得适当的阅读指导，他们可能永远无法学会阅读，而相比来说，很少有人从来学不会一门口头语言的。

实验研究证明，最有效的阅读方式是无语境的，自下而上特征驱动的方式，这需要熟练掌握到无意识的程度。

尽管与特征阅读是两个并行的阅读方式，但语境驱动阅读在如今主要被视为一种候补的方法，只有在特征阅读存在困难或者不能达到足够无意识的时候才起作用。
熟练的阅读者也许会在基于特征的阅读被糟糕的信息展示方式干扰时转身基于语境的阅读。
对于较不熟练的阅读者，基于特征阅读不是无意识的，而是有意识的，费劲的。因此，他们大部分的阅读使用基于语境的方式。这种不得已的基于语境的阅读和非无意的基于特征的阅读消耗了短期感知能力，导致对内容缺少理解。他们不得不把注意力放在解读一串串单词上，导致没有更多精力构建语句和段落的含义。这就是为什么差的阅读者可以大声读完一段文字，却不清楚究竟读了什么。

1、设计过程中所用语言需通俗易懂

2、有时背景设计也要干净简洁，这样可以使阅读者，视觉上没有负担，轻松阅读，获取所需信息。

3、设计中，文字排版需是有序的使人易辨识内容，混乱的排版使用户体验极差，达不到一目了然的效果。

4、简洁的文字与干净的排版使用户在视觉上有良好的阅读环境。

5、尽量减少不必要的阅读。

1、短期记忆（也被称为工作记忆）:瞬时发生的事件记忆不深刻但是感知到过并快速逝去，使我们意识到它们。这些感官特异性的残留感觉共同组成了长期记忆的一小部分。（低容量和高度不稳定性）

比如用PS进行绘图室我们不会精确记住绘图时所画的每一个坐标位置。

比如导航

2、长期记忆：是我们大脑中反复出现，无法忘怀的记忆片段。（长期记忆是记忆的存储）

登陆银行账户，京东淘宝使要可以记住的账户名称及密码。
（给用户界面的启示是不同功能的操作越一致，或者不同类型 对象的操作越一致，用户要学的就越少。用户界面的一致性能大大减轻用户长期记忆的压力。）

仓库中充满了长期记忆，而探照灯则是工作记忆。被探照灯照射的物体则是工作的内容。

工作记忆容量不大且易丢失但他可以帮助用户界面应帮助用户从一个时刻到下一刻记住核心的信息。

比如：百度搜索，拍照。

因为人类的注意力有局限性，所以网页设计师都知道的设计原则：一个页面放一个主题，不可以放得太多，使用户感到疲惫。

长期记忆对用户界面的启发：

不同功能的操作越一致，或者不同类型对象的操作越一致，用户要学的就越少。

1、如果你想让用户习惯地、无意识的使用你的软件，需要使其设计鼓励用户定使用。

2、要设计的软件、服务和设备提供与用户目标和任务匹配的操作，了解用户目标，和所有工具的支持，先做到以下三步：

做一个任务分析。设计一个专注于任务的概念模型，其中主要包含对象/操作分析。严格按照任务分析和概念模型用户界面。

模型越简单，用户掌控越容易，但不可丧失用户最要的基本要求。

3、有一个好的概念模型能够方便开发一套专注于任务、熟悉和一致的专用词汇。

4、如果实践和探索不受鼓励，那么学习会很困难。降低风险的方法：

尽可能防止出错。停用不合理命令。向用户清晰地展示他们做了什么，这样错误就容易被发现。让用户能够轻松地撤销、逆转或修正错误。