多图预警，且长达 4000 字。
在进入主题之前，让我们先来看看一道题目。
假设你是一名公共汽车司机。在第一站上来 6 个男人和 2 个女人，在第二站 2 个男人下车，1 个女人上车。在第三站 1 个男人下车，2 个女人上车。在第四站 3 个男人上车，3 个女人下车。在第五站，2 个男人下车，3 个男人上车，1 个女人下车，2 个女人上车。
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
问题来了：
公交车司机叫什么名字？
怎么回事
这道题体现了记忆过程的一些基本特征。
我将在接下来的内容中，简单的介绍一下人类记忆的过程与一些设计原理之间的关系。
0. 记忆的过程
人类的记忆过程可以划分为 3 个阶段：
- 编码（encoding）
- 存储（storage）
- 提取（retrieval）
其中，编码是通过各种感觉系统来接受信息，并进行初步加工的过程，总的来说就是关于人类如何感知这个世界的方法。百万年来，人类进化出了几种可以帮助我们更好地活下去的心理特征。
我们就从编码过程的三个基本特征开始。
1. 记忆过程的第一步：编码
这是我们公司洗手间的推广位，大家能快速看到哪些文字呢？
洗手间墙上的推广位
这是我们公司洗手间的推广位，大家看看有什么问题？
在这张推广图中，正文的文字被复杂的背景图所干扰，变得难以阅读。在这个场景这个时刻，每次看到都让我很纠结。
隔壁同学
上图这个界面呢，又有什么问题？
同样地，这个界面的主体应该是用户发布的内容，但也许是为了渲染气氛，加入了表意不明的背景图和花边纹理，抢夺了用户的大量注意力资源。
美妆嘉人
上图是进入某个 app 后，首屏都还没加载完，马上看到的空前绝后的新手引导。用户本来可以好好的浏览内容，逐步了解这个产品的价值，然而这个引导的字比首页的字还多……
通过上面的例子，我想告诉大家的是，人的注意力资源是非常有限的。上面的界面被人为地制造了大量干扰，耗费了过多注意力资源，让我们难以获取关键信息。
1.1 编码过程的基本特征：人类的注意力资源非常有限
有限到什么程度？请看图。
效果图
你以为用户看到的是上面的样子，其实是用户的清晰视野只有下面的区域。
真实的可视区域
怎样度量这个核心区域？你可以把手臂往前方伸直，然后朝上伸出拇指，你能看到的拇指指甲大小约等于人眼分辨率最高的区域，范围之外的分辨率成指数级下降，边缘区域甚至只有相当于屏幕上的几个像素。
既然注意力资源这么有限，我们在设计上应该怎么做呢？
我们在开始设计之前，要思考用户在每个界面的核心目标，不添加任何多余的元素，避免干扰用户。
iOS 验证密码
这是验证 Apple ID 的第一步，需要用户输入 iPhone 的解锁密码。由于输入密码是一个需要耗费大量注意力资源的行为，整个界面真正做到了毫无干扰。
macOS 桌面
既然注意力那么稀缺，为什么上图又不只显示一个窗口呢？因为当前这个场景，用户需要的是多窗口多任务联动，因此只能够通过其他方法来突出重点。这里使用了合理的视觉层级关系，让我们可以快速捕捉到上方的窗口就是当前的主体。
1.2 编码过程的基本特征：填补遗漏的倾向
我们再看下方的这一组图，能否识别出分别是什么东西？
格式塔的闭合与连续
我们的大脑其实是很「先进」的，可以自动填充那些没闭合的事物，也可以把不连续的东西连起来，把它们看做一个整体。上图中的熊猫，我们不会看成是一堆黑色色块，右边的两条相交的曲线，也不会成是一堆小点。
IMB logo；Dribbble 某图
我们可以利用人类这种自动「补漏」、自动「缝合」的心理特征，来减少界面上的部分元素。
涂手
上图是涂手的作品详情页，通过边缘的切割，和右侧、下侧的阴影处理，就可以让我们感知道是一个正方形的画布容器。
通过这个心理特征，还以用来拓展屏幕的有限空间。
App Store
只露出内容的一部分，就可以让用户感知到后续有更多的内容，突破了屏幕的限制，也节省了版面空间。
1.3 编码过程的基本特征：分组的倾向
我先说一个假的故事……
一个美女要我马上去跟她吃饭，我开心得要死，立刻去乘坐宇宙最快的交通工具——地铁。刚走到地铁门口，看到这样一个指引，马上一脸懵逼。
大家能快速辨识到哪边是进站，哪边是出站么？
好不容易来到了商场电梯，一看……
当我悄悄地按下了两个按钮之后，美女电话来了，她说你来这么晚，不吃了，直接来我房间吧，房间号是 114。美女就如救世主一样把我从电梯口拉了回来。
然后我兴冲冲的跑到一楼酒店入口，准备看看 114 号房在哪里……
为什么看到刚刚几张图，我们会觉得很别扭甚至无法理解呢？
因为人是有将事物分组的倾向，刚刚看到的都是分组不合理的例子。那应该怎么分组才合理呢？我们先来做个小实验。
不同颜色、大小的圆
在上图中，在进行数量计算之前，有的同学可能会根据颜色来把圆分组，有点同学可能会根据大小来分组。但是应该很少同学会直接一个一个数。
分好组的圆
如上图所示，经过一定方式的排列之后，我们会更容易计算圆的数量。这就反映了一个问题，为什么我们更容易感知有一定规律的事物？
百万年前，我们的祖先为了更好地理解事物，逐渐学会在复杂之中寻找规律，从而进化成为一种基本信息加工本能。这就是人类将事物分组的倾向。
我们倾向于把位置上靠近的物体看成一组，也倾向于把形状、颜色、运动方向相似的物体看成一组。
回头看看一些设计得很不错的案例，你会发现，把组分好也是一种技术活。
白云机场
把界面元素按照不同的特征来排列，可以帮助用户更快识别，节省了大量注意力资源。
燃兔
上面就是一些与记忆编码过程相关的特征。大家看看下图的界面应用了哪些特征和设计方法？
tribe 的短信验证界面
2. 记忆过程的第二步：储存
信息在经过识别加工后，就会进入到我们大脑的储存区域。按照时效来区分，记忆分为两种——短时记忆和长时记忆。
在继续下去之前，大家先回答两个问题。
- 人类记忆的编码过程，有哪几种认知倾向？
- 刚刚地铁站入口的图里面，地铁站的墙壁是什么颜色？
我相信有大部分同学回答不出来。上面的东西也不是很多，只有 3 个概念、1 种颜色，距离我介绍完也就相隔几分钟，为什么还是记不住全部东西？
有没有试过，接了个电话后，忘记接电话前在做啥；谈话过程中被打断，回头发现忘记谈到哪里；正在进行复杂的数字运算，被打断后需要重新计算。
被忘记的东西，是因为被储存到容量极小、极其不稳定、时效最短几秒最长仅有 2 分钟的短时记忆里面。
而应该有些同学能记住部分甚至全部概念，为什么呢？
因为他们之前有了解过这些相关概念，或者他们在听的时候有下意识地不断复述，在不断复述的过程中，这些短时记忆就会转变为长时记忆。
短时记忆与长时记忆，及其转变
短时记忆是依靠不断复述来转变成长时记忆。
长时记忆也有自己的弱点：
- 易出错，就像高压缩比的图像，解释度不高，提取之后很零散、模糊，例如「提笔忘字」；
- 受情绪影响，伤心、生气等情绪激动的时候，短时记忆最容易变成长期记忆，特别是女性；
- 追忆时可被改变，经常记错别人的事情发生在自己身上。
这里要注意的是，短时记忆是各种感官接收到的感觉，还有各种注意现象的集合，如果不转变成长时记忆，就会消失。短时记忆并不是从长期记忆里提取出来的缓存。
既然短时记忆那么不稳定，我们在设计上又可以做些什么呢？
2.1 清晰的流程与反馈
首先，还是得明确用户目标，特别是在包含多步操作的交互流程中，提供清晰的任务流程和反馈。
Town 的注册流程-1
Town 的注册流程-2
Town 的注册流程-3
2.2 记住用户的选择
其次，我们要记住用户的选择，减少用户的记忆负担。
喜马拉雅 FM 记住了我的上次登录方式
▲ 喜马拉雅 FM 记住了我的上次登录方式。
京东可实时同步购物车选中状态-1
▲ 京东的购物车，除了会提醒我商品降价之外，还会记住购物车的选中状态，而且多端实时同步。
京东可实时同步购物车选中状态-2
▲ PC 端的京东购物车实时同步勾选状态。
我自己经常遇到一个情况，就是在某些 apps 里面操作的时候被打断，回来之后就不知道在做什么了。我也会担心自己设计出这样的产品，因此我想到一个土办法，来验证自己的设计是否清晰高效。
在设计任务的关键页面的时候，假设此时收到一条重要的微信，然后你去微信，回复该消息后，再回来这个页面，还知道这个页面是干嘛的么？
假微信
当短时记忆转变为长时记忆之后，储存过程就结束了。在有需要的时候，外界的刺激或者我们自己都可以把长时记忆回忆出来，这就是我们记忆的提取阶段。
3. 记忆过程的第三步：提取
看到张学友，你们第一时间会想起什么？
有人会想起他的歌和演唱会，有人会想起他的广告，有人会想起他的电影，我只会想起他的表情包。为啥呢？这是因为每个人都有不同的心理模型。
心理模型：人们对世界的认知和处事的经验，受教育、家庭、社会环境等因素影响，不同的人，会有不同的心理模型。可以说是各种长时记忆的合集。
我们一直期望用户在使用我们产品的时候，把主要任务流程都烂熟于心，但除非是高频的需求，否则用户不可能经常使用我们的产品，因此他们对我们的产品的了解，也仅储存在短时记忆里面。
因此，在产品设计当中，需要思考如何帮助用户更好地理解和记住我们的功能与流程。
3.1 符合目标用户的心理模型
首先，我们要找出目标用户，然后所有的设计都要符合该用户群的心理模型，让该用户群更容易理解和记忆我们的产品功能或流程。
航班信息在 iOS 信息 app 中的呈现方式
上图是一个航班细节的信息，非常难以识别和提取。人类进化了上百万年，但文字的心理模型仅存在数千年，因此文字阅读并不是自然的，而是靠后天不断练习而成的心理模型。因此，纯文字的表述让用户难以储存和提取。
航班信息在飞猪中的呈现方式
通过优化排版布局后，会比纯文字更容易识别，但是也不太利于记忆的提取。
Hipmunk Travel 的航班选择
这个界面与前面的相比，更容易识别和提取，因为它通过各种图形化元素来表达关键信息，并且通过拖动操作来代替文字输入和点按选择。图形跟自然手势都是比较通用的心理模型。
3.2 符合逻辑
另外一方面，有很多新的新创意，用户都没有见过，所以没有任何可用的心理模型。那为了让用户更容易理解，这些创意必须符合逻辑。
逻辑-appstore
上图的界面跳转、多选操作在我们现在看来最平常不过，但是对于刚开始接触智能手机操作系统的人来说是全新的东西，页面从边缘滑入、多选的操作、状态的实时变化，在现实世界中不存在这样的模式。页面前进、返回的动效是相呼应的，操作和反馈是对得上的，这就符合了基本的逻辑，用户也容易理解和记忆。
3.3 稳定的最简路径
有一个经典的心理学案例，有一个人，上班的时候一直走了远路，后来另外一个人告诉他有一条捷径，但是他第二天还是走了远路，那个人就问他为什么，他回答说「我赶时间，所以我走了远路」。为了节省注意力资源，也为了减少犯错的机会，人类倾向于使用那些更省力的方法。
这就带给了我们一个启示，就是在设计任务流程的时候，要优先保证任务路径的稳定，然后把各个流程节点简单化。这里用的是「最简」而不是「最短」，是避免大家把很多东西放在同一个流程上，就觉得让用户走了捷径。
肌肉记忆
在我关闭朋友圈之后的一段时间，我还是习惯性的会去打开朋友圈。然后，我点错了入口。
稳定的最简路径，在不断重复后，可直接转化为肌肉记忆。我觉得做产品做设计的终极目标，就是要让关键功能都变成肌肉记忆。
总结
以上就是记忆过程与设计之间的一些关系。
其实很多原理大家都知道，我只是用心理学上的一些特征，来告诉大家这些设计原理背后的原因，加深大家的理解。
本文同时发表于 我的博客
网友评论