文章来源：优设

很多时候，当你的设计遇到了挑战，你无法客观地回答为什么，甚至在和业务方沟通的过程中表现得很被动。

为什么行为召唤按钮的位置在右侧

通常根据人们的习惯，我们将核心行动操作都放置在右侧，例如下图核心的行为召唤按钮都放置在右侧，那为什么都要放在右侧呢？

我们可以用古腾堡图表来解释一下。古腾堡——西方活字印刷术的发明人，顺便看一下他发明的图表，啥意思呢？就是当我们在浏览一个不熟悉页面的时候，我们通常浏览的路径是一个对称的，从左上到右下的一个路径，最终的视觉落点通常就会在这条线上。

所以我们很多的信息和操作按钮，都是在右侧。然而我们发现有些对话框却把行动按钮放在左侧，我们来分析一下原因，像下方的对话框：

左侧的是我们常规看到的一个模态弹框，弹框内右侧的行动按钮可以是确定，也是可以删除，但是右侧的弹框基于我们的猜测是希望用户在高风险操作下，再次确认要进行的操作，所以当用户视线移动到右边的行动按钮时发现它并不是想要的操作，这时用户会对左侧信息进行一次再浏览，确认后再选择，很多时候用户在进行操作的时候会下意识地进行右侧点击，所以这样的处理方法可以避免用户对高风险行为的误操作。

但是话又说回来，这样的设计其实违背了用户的习惯和预期，所以还是要慎重考虑。

我们再来看一下高德地图的案例， 点击「退出」后展开两个选项，「退出导航」在左侧高亮，取消放在了右侧。

那这算不算违反用户的习惯和预期呢？我们换一种解释，这里运用到的是「菲兹定律」，目标按钮的大小、和手指间的距离影响用户操作的效率

如果退出导航放在右侧可以吗？在别的场景下没问题，但是在行车驾驶的场景中，任何的操作都需要快速。可以再想一下场景，什么时候会退出导航：1.目的地已到 2.开到一半认识路了 3.导错目的地了 4.要换交通工具了…..所以高德作为一个工具型产品，是一个核心的准则。

菲兹定律深入解读：

为什么用户要被「区别对待」

现在随着大数据和人工智能的科技进步，人们日常生活也变得越来越便利，或者说人也变得越来越懒。我们不用再费尽心机寻找我们想要的，所有的内容都会跟我们的习惯、行为被智能推送，产品也越来越人性化。所以我们今天的十万个为什么就来聊一聊个性化设计！

1. 内容个性化

个性化内容需要通过发现偏好-帮助过滤-使用 3 个步骤来看。首先内容个性化可以分为用户偏好个性化以及用户设置个性化，比如抖音、淘宝等应用，会根据用户对内容的搜索、浏览等行为习惯的偏好进行不同的算法推送，比如抖音我最近看鉴宝和篮球比较多，所以针对这些视频，我的完播率、播放数、点赞评论数据有变化之后，推送给我视频内容的权重就发生了变化。

其实很多用户不太理解，在电商应用，我已经购买过一件商品后，却依然还是给我推送同样类型的商品。

而用户设置个性化比如在使用 bilibili、漫画等应用时会在正式浏览前让用户设置自己的偏好和基础信息帮助用户进行更精准的推荐。

但这里有一个问题是，我们给用户设置的选项和用户实际本身不符，比如让用户选择他的年龄，很多用户可能觉得自己会更年轻，所以选择年龄和实际不符，那么推送的内容是他需要的吗？所以这里就需要根据用户真实行为数据来进行再次的过滤。

但是如果我们就这样把用户所选的内容都推送给他，那效率一定很低下，所以我们会从时间、热度和用户自身行为权重进行排序计算，当然这些内容也并不是都用 feed 流来承载，形式可以多样化，也包括进行分类，就像微信阅读会推荐 3 本书，你也可以选择点击换一换，甚至还把推荐来源给写出来了。

2. 场景个性化

最近看到两个不同的界面，实属有趣。某天我下了地铁用支付宝扫码出站后，页面提示我是否要进行打车，我觉得还是挺贴心的，虽然我不需要打车但是这个场景让我有了更加方便的选择。

同时发现在群里有另一个小伙伴也截了这个页面，他的界面却是提醒他是否要租一辆共享单车！这简直是赤裸裸的「歧视」呀。当然这个也就是和下面要讲的用户行为有关了，如果你经常骑车，他就会在这里给你推荐共享单车。

还比如高德地图在导航的时候如果即将进入收费站，在页面明显的位置也会出现支付宝入口的图标。（图片找不到了）

3. 行为个性化

这个应该正确的说是行为导致的功能个性化，比如知乎，从之前的上下切换话题到左右切换，再演变成上下切换话题。大家用过知乎的同学知道，现在上下切换话题其实还是有些不方便的，但是知乎为了让更多金主爸爸的广告能露出，不得已出此「下策」。

我们在设计的过程中也有一个原则「避免功能即按钮」的设计，在业务的背景下也被选择性忽略，所以他做了一个悬浮可动的切换按钮，其实在可动之前，他是固定的，是由于用户频繁误操作的行为，让知乎的设计师将它变成了可动吸附的按钮了。这个就是行为导致的功能个性化。

再比如腾讯视频、爱奇艺里的「只看 TA」这个功能。通过数据和用户行为路径的分析，发现很多用户会在一个视频里频繁观看某一个演员的片段，可能是自己喜欢的演员，可能是被其他平台吸引过来看某个片段的用户，这样大量的行为让我们发现用户的这个高频需求。

4. 目标个性化

最近也在体验了一款游戏，完美世界的笑傲江湖。其实现在很多的手游都会有这样的功能，就是会让用户选择如何体验游戏，由于玩游戏用户时间、职业的不同，所需要体验游戏的内容也是有区别的。

时间多的用户更想要体验所有内容，快速提高战力。而女性用户可能更想边看风景边玩，看唯美的画面。如果是时间少的上班族，那么更希望能做一些性价比高的任务，不至于脱离大部队的节奏。所以当用户有不同目标时，产品也有相应的策略让用户更好地体验产品。

为什么你设计的信息用户看不见

很多设计师在进行信息设计的时候，通常靠着感觉和曾经尝试过的经验进行信息美化。但是当我们遇到需要对信息设计进行解释的时候，理由通常很苍白。

你无法说出为什么用户能够快速地浏览信息，只是觉得又大、又粗、又鲜艳的信息能够被识别。所以今天我们就要来聊一聊，为什么。

首先给大家介绍一些经过研究之后的数据结论：

人类视野的空间分辨率从中央向边缘减少。我们人类每只眼睛具有 700 万左右的视锥细胞，它们在人眼中的分布是越靠近中央凹的区域越密集。而另外一个研究表明，边界视觉的信息在被传递到大脑之前是经过压缩的，而中央凹的视觉则不会。大概就是下 2 图这个意思。

然后有同学会问，既然我们的边界视觉那么差，当用户在浏览界面信息的时候，为什么给用户 3 秒钟时间看界面他还是能够记住页面中的一些信息呢，或者会说为什么我们在浏览的时候，它不像下图那样只有一小圈是高清，而边上的文字是模糊的呢。

这其实是因为大脑通过一个比较粗犷的方式，基于我们的预期，给视野进行填充，大脑也会命令你的眼睛对边上的信息进行细节采样。所以这是一个很快速的过程。

为什么有的人能够一目十行就是，他的大脑能帮他补充得更多，或者说他的中央凹面积大。

但是有一个实验是，我们通过眼动测试，当用户的中央凹停留在一篇文章中的一个地方时，这个文字显示的是正确的，但是随着中央凹的移动，他周围的文字会进行随机的变化，他虽然能够成功地完成阅读，但是速度大幅下降。

比如大家看一下这个页面的区域：

当我们扫完这个页面也就 2-3 秒，但是如果你没有把中央凹停留在一个信息上的时候，其实都是靠大脑对我们的预期进行的补充。而真实的情况是，你们并没有发现页面中错误的地方。

言归正传，为什么你的信息用户总是看不见呢。我们又要讲到边界视觉。我们的设计如果不考虑边界视觉，那么就会影响到能够被识别的信息。那么边界视觉到底有什么用呢？

1. 引导中央凹

我们刚才说了中央凹的重要性，那么我们在什么时候会把中央凹放到我们要看的信息上呢？其实就是依靠我们的边界视觉。

边界视觉引导中央凹，它帮助中央凹捕捉关键信息。我举个例子，大家在查看一个食品包装的生产日期的时候是怎么寻找的呢，大家的眼睛不断地在搜索，而边界视觉是提供了低分辨率的线索，帮助大脑，控制眼睛以线索的发现顺序进行移动。

2. 捕捉运动元素

边界视觉可以非常快速的捕捉到运动的物体，所以在界面设计中，无法放置在核心位置的元素但又需要用户去注意到的时候，通常就会使用动效。

那么我们要怎么做才能让用户关注到关键信息呢？

1. 将信息尽量放在中央凹或者中央凹边上能够被预期的位置

在小红书很早的一个版本中，当用户进行点赞操作后，反馈消息在顶部显示，让用户无法察觉和关注到。因为边界视觉都无法捕捉。所以当用户在进行操作时，如果需要将状态、文字告知用户，就需要显示在用户能预期以及能被边界视觉捕捉到的位置。

2. 使用图标、图片的形式标记出关键信息

比如在一大段的文本中，用户无法快速的查看内容标题，我们就可以在标题前使用图标、图片的形式进行标记，让边界视觉获取到信息之后在大脑中产生预期模型。

3. 使用动态效果吸引用户注意

动态效果能够快速被捕捉，甚至引导用户的视线。比如马蜂窝在底部进行点赞后通过动效引导用户，告知用户该点赞是为用户而赞，同时让用户的视线又回到了顶部，可能增加用户的停留时间。

4. 使用高亮的颜色来吸引用户的边界视觉进行捕捉

由于边界视觉的搜索是线性的，所以我们必须将重点的信息进行高亮显示，比如警告的红色，可点击的蓝色等。

在这里再补充一个我总结出来的规律，不一定对。

大家可以看到，下方的知乎话题界面，一进入界面我们的边界视觉立马给我们进行信息捕捉，所以首先被关注到的是呈现蓝色的文字、图片、图标等。

这里大家发现一个问题没有

为什么在这个界面中上方的两个按钮不用色块的形式做呢？

例如右边这样，很多同学在这里第一反应是这个按钮太重了！很突兀！为什么很突兀？

既然要引导用户为什么不做得重一点呢？那有同学又会说这样设计会干扰用户对其他信息的浏览，那么为什么会干扰对其他信息的浏览呢？

我猜测人眼的中央凹视锥细胞会根据界面中信息的重要程度进行调整，也就是说不同程度的强化会让边界视觉的捕捉能力下降。

像右侧的色块按钮让中央凹的视觉细胞更加聚集，而导致边界视觉的范围也大幅缩小，所以你们看左边界面觉得信息优先级很清晰，但是右侧的就会觉得我只看到了两个大按钮，而其他的信息都没有被捕捉到。

那继续思考一下，什么时候能用大色块的按钮呢？很多电商平台的购物都是大按钮，这个难道不会让用户的边界视觉受影响吗？

大家发现一个规律没有，有大按钮的页面基本上图片、图标都很多，而一般都是文字的页面，通常都不会出现大按钮，因为出现了就会被喷太突兀了！！

这就是因为大按钮在没有其他更高层级信息的配合下让边界视觉捕捉范围降低了，如果都是高层级的信息，那么边界视觉的捕捉范围就会「一视同仁」。

所以，为了让一个界面的按钮不突兀，一种方法是用和它相似级别的元素进行辅助展示，另一种方法就是降低该按钮的视觉引导层级。

为什么用户心流那么难设计

不知道大家是否曾经或者现在使用过某个产品，当我们在完成某一个任务或者在某个场景中时，自己的操作行为特别自然流畅，注意力也非常集中，这种感觉让你非常的愉悦、舒适。

所以契克森米哈提出了心流的概念：个体完全投入某种活动的整体感觉，当个体处于心流体验的过程中，会对周边干扰视而不见，过程非常愉快且会觉得时间过得很快。

所以当我们在做交互设计时，我们追求的就是一种自然、能让用户进入心流的交互体验。但是大家不要误会了心流的概念，有些同学觉得我们在刷抖音、微博、微信就是一种心流的状态，那就错了。

心流并不是一种简单的沉浸的状态，当我们在娱乐时不过是被内容吸引了，让你觉得沉浸只不过是你的行为操作形成了习惯，不是心流状态。

今天我就来和大家分享一下如何通过一些方法，作出让用户进入心流状态的设计，这些都是有迹可循的。

1. 用户自信的控制感

开过车的同学都知道，左侧刹车右侧油门，档在右手边，在国内所有车都是这样，所以我们不会搞错。在经过一段时间的驾驶后我们更能够清楚的了解汽车的动力、刹车等性能，所以我们会觉得这辆车的操控感觉很好。原因是他的设计符合了用户的预期。直觉的预期、位置的预期、功能的预期以及结果的预期。举个例子，当我给你一个任务，希望你能够快速的进入 xxapp 进行个人头像的设置，在这个前提条件下我们来看一下刚才说的几个预期：

直觉预期

每个人的直觉都不同，这来源于他生活中的环境影响和习惯影响所以对于我个人的直觉来说，要完成这个任务首先必须找到最初的入口，我的直觉告诉我这个功能大概率可能出现的位置会在底部标签中的个人中心板块中。

位置预期

个人中心板块的位置可能会根据信息架构而出现变动，比如抽屉导航中会出现个人中心的入口，例如滴滴。当我们进入之后会看到头像、名字、箭头等信息，特别是箭头，这个图标给人的预期是你可以继续进入进行下一步操作，那么用户对下一步操作的预期基本上就是会点击箭头或者头像，这个也是比较明确的。或者直接来一个编辑的按钮也是可行的，这样就不需要用户去猜了，但编辑的功能比较垂直了，所以到底用哪种形式，要根据内容来。

如果没有这个箭头，用户一定会产生试探性的行为操作，此时内心已经有疑惑且不自信了。所以在心流交互中，明确的功能引导非常重要。

功能预期

用户预期通过他的操作能够达成目的，那么最基本的就是在这条路径上的功能不能缺失以及减少其他的干扰。可以发现微信的个人中心最底部板块有两个热区，并不是一块直接进入个人中心的热区，如果点击名字这一整行，则会下拉引导你拍摄一段视频。所以有时候想替换头像以为点击这一块都可以进入二级，却发现这并不是我要的功能。

结果的预期

最后当用户进入编辑头像页面之后，需要关注其场景，这边微信做的就挺好：

• 直接拍摄
• 之前拍摄或保存的图
• 上一张头像
• 当下我要保存这张头像

2. 减少阻断式的干扰

很多时候交互流程已经做的非常自然了，但是当用户正在他的心流体验中，突然一个模态弹框跳出打断了用户，令人啼笑皆非的是这个弹窗只是告诉你一个不痛不痒的信息，这就比较难受了。

而我们来看马蜂窝当用户在 app 中完成某些特定任务后，不会出现模态弹窗的强制干扰，而是在顶部出现一个通知 bar，这样原本在进行任务中间阶段的用户不会受太大的干扰，可以继续任务行为。

再例如美团外卖和饿了么，用户在点餐时对优惠优惠的关注是特别强烈的，而是否能够让用户认真的挑选菜品，我们也尽可能做到影响的打扰，就像满减去凑单的交互形式，点击后不跳转，仅在当前页面以文字形式让用户明白并行动，但这里去凑单很容易和去结算有误操作。

3. 并减少不必要的操作

例如马蜂窝自定义旅程，进行多标签选项，当用户在当前页面选择完该页面的选项后自动帮助用户定位到选择日期的功能模块中。这样减少了用户不必要的下滑操作，像这样单一场景中对用户的行为预期是比较好判断的。

4. 闭合路径

之前玩过很多款手游，即便是一些常用的套路，每家都能玩的不一样，例如宝石合成、英雄装备获取，有些游戏能够做到让用户在一个场景中不脱离。

比如宝石合成这个功能。宝石从哪里来？是否能在合成合成路径中穿插购买的分支并再链接回合成场景？在包裹中进行合成和在装备界面进行合成是否流程一样；然而有些游戏当用户购买完宝石后需要重新自己再打开合成界面，非常繁琐，同时也导致了用户消费路径的断裂。

再比如装备副本获取这个功能，这里我们看一下权利的游戏这款游戏，当我一件装备的零部件不足需要进行扫荡获取，这里有两种场景，一种是我刚好只需要这 4 个件合成 1 件，另一个是我需要更多的零部件，不仅仅这一个，所以对前者来说我达成了目的就可以返回去合成界面，而后者我可能需要更多数量的零件，但不管如何我一定还是需要返回合成界面的，然而不管是哪个场景，都必须点击两下关闭按钮才能返回合成界面，所以在这个地方缺少了一个快速拉回用户状态的按钮，叫做「去合成」。

当我已经完成了我的需求后，能够让我快速的返回合成界面，因为合成装备才是我的最终目的，而不是刷更多的碎片。

下方的案例再解释一下第 3  点，当用户点击合成之后，不要提示告知用户数量不够，因为你已经显示了数量未达标，用户想点击的目的是让你告诉他未达标改怎么办，所以这里最好的处理方式就是把获取该装备的方法告诉用户。

5. 恰到好处且不易发现的微交互

我们希望一个产品使用起来很自然，除了操作成习惯之后流畅外，一些帮助用户潜意识的连贯的微交互也显得非常重要。不需要有华丽的动画，有时候仅仅只是一个晃动，一个速度曲线就足以合理的表达功能的语言。

文章来源：优设

您最近填写过在线表单了吗？

答案应该是肯定的。根据最近的研究，84% 的人每周至少会填写一份线上表单。

虽然你可能没有感受到，但在线填表单已经成为我们生活中不可或缺的一部分了。

其实，几乎每个把用户由 A 带向 B 的线上交互都是一个网络表单：与某个公司联系、订火车票、购物、订一晚酒店等等。

网络表单最早在 1994 年开始用于在线销售，第一个拖拽式表单 2006 年在屏幕上出现。从那时起，表单已经成为线上交互的关键。

企业和客户之间需要通过网站进行联系，小到县城的官网，大到国家政府网站，现在很难想像一个没有网络的世界。

但为什么线上表单一直备受诟病？

当然，确实没几个人喜欢填表，但大多数人绝对不会介意填写那些清晰、简洁、设计优秀的表单。

其实这也就是症结所在。太多的在线表单冗长、令人迷惑或让人感到有所冒犯（有时甚至三者同时出现）。

当表单产生让人迷惑，或提出的要求超出必要范围时，用户的放弃几率就会大大增加。 有些用户可能会放弃填写，甚至退订整个业务。无论是以上哪种情况，您都不会再有第二次机会。

在设计一个表单的时候，我们怎么保证用户能填到最后一步？

「创建一个表单很简单，难的是让人填完它。」

在帮助 420 万用户创建线上表单后，我们在 JotForm 发现了一件重要的事情，就是一些小小的改变会让整个事情大有改观。通常，这些改变都是从那些被放弃的表单中获得的灵感。

例子：

• HubSpot 发现，当一份 14 页的潜在用户登记表，被放在一个单独的登录页上时，用户填完的可能性要高出 17%。
• Marketo 发现，一些非关键的填写区域，反而让每位潜在客户的线索成本上涨了 25%。

表单设计成什么样呢？应该直观、简单以及体验友好。以下是一些推荐的参考方法。

第一部分：表单的主要元素

1. 欢迎填表者：标题与介绍

无论是谁，欢迎朋友的时候难道不会说「你好吗？」我们都知道礼貌的重要性，但是在线上却往往忽略了这一点。

欢迎页和标题让您有机会以一种清晰而友好的方式介绍表单和自己，而且还会留下一个良好的第一印象。

看看 BettingExpert 的数据吧：通过修改表单标题来强调「注册理由」以后，他们的注册率提高了31.54%。

标题是对下文最短最精的概括。用户一般都会跳过表单内容，而且几乎都不会仔细阅读那种特别详细的描述。所以用最少的文字说清楚一个表单的目的尤其重要。

标题可以简单理解为描述被调查者对表格的期望。尽可能保持中立：要确保应答者诚实回答，而不是去满足出题者的设想。甚至像陈述一个目标这样简单的事情，也可能会不知不觉地诱使应答者试图迎合。

而且现在也需要一份清单，说明应答者应该事先准备的外部文件，没人想中途去满屋子找纳税证明或者护照。

如果填表需要很长的时间去完成，一定要提前告知用户。不过如果是又快又简单的？让用户感到惊喜吧(但不要冒险侮辱任何人的智力，以防万一)。毕竟，他们能够通过查看进度条或字段数量来推断出这一点。

2. 放置相关的标题和副标题

一个有趣的事实：人类会在 50 毫秒内形成第一印象。重点：由于时间不够长，他们无法仔细阅读你的作品。

表单用户很可能就是快速浏览一小部分内容，忽略大部分内容。而且有很大可能是他们正在忙着其他事情，无法集中注意力或者几乎就没有什么耐心，只想要快点结束。

显然，我们无法阻止用户，所以只能通过简洁明了的标题来引导他们。标题绝对是个得力助手：可以将文本结构化、清晰化、保持用户的参与度。

用户应该可以看一眼标题就知道他们应该怎么做，而不是非得把剩下的全部看完。

测试这一点的最好方法是单独阅读标题，是否能让人看懂呢？

3. 问题之间要有分隔符

分隔符很重要。就传统表单来说，在视觉上把问题隔开以达到减少干扰的最好方法，就是使用分隔符。并不需要在视觉上做出很大的区别，区别太大反而容易分散用户注意力。

4. 多页面表单或单页表单？

这主要取决于表单有几个议题。

如果只有1，2个议题，单页表单肯定是最佳选择。但是如果一个表单有很多议题，那么就需要多页表单来呈现。想象一下：用户在面对一个似乎有成千上百议题的表单时，得有多心烦。

5. 强调「行动召唤」（CTAs，Calls-to-Actions）

成功的「行动召唤」强调的是「行动」部分：单击这个按钮，用户要执行什么操作？类似「发送」，「注册」或者「过程」之类的通用标签并不会削弱召唤机制。描述越多越好。

为了消除不确定性，试着从用户的角度回答一下这个问题「我想干什么？」举个例子，如果是某项服务的调查表单，那就应该是「我需要免费咨询」。

还需要更多证据吗？在这类研究中，Unbounce 发现只是把「开始你的试用」换成「开始我的试用」，就提高了90% 的点击率。

6. 标明表单中的区域

这并不是说要弄得花里胡哨的……

单选框、挑选区域和复选框之所以有效，是因为它们既简单又常见。表单元素的标准格式等同于更好的可用性。

单选框适用于有很多选项而只有一个可选的情况。复选框用在多项选择的情况下最好。

为了更短的认知适应过程，要尽可能地使用多选框或者单选框而不是下拉菜单。就像 Luke Wroblewski 说的：「下拉菜单应该是 UI中的最后选择。」

7. 别忘了「感谢」页面

记住用户是花时间的。所以千万不要唐突结束，要记得说谢谢。

第二部分：怎么写用户才愿意看

以下是一些关于表单书写艺术的小建议。

1. 言简意赅

从形式上来说，我们都更喜欢简单的语言，尤其是那些学者，天才和专家。那为什么还有那么多线上对话像是复读机一样？

「请接受来自我们最诚挚的道歉。即便如此，我们还是希望能知道您的建议。除此之外……」

像一个老学院派那样说话只会疏远用户，让他们瞠目结舌。

简单不意味愚蠢，而是等于可读性。这意味着最清晰的平白直述。每个词语都应该是最短，最直接的版本，能用「不过」就别用「尽管如此」。不用行话，不写复杂句。

你可以通过大声朗读来检查连贯性。耳朵能够听到眼睛看不到的东西，特别是在描述那些冗长复杂概念的时候。

2. 拟人化

一份表单应该就像是你和填表者之间的对话。通过用「我」，「你」，「你的」这些代词来拟人化。

3. 减少被动句

主动语态的表达（比如：约翰写了一封投诉信）比被动语态（比如：一封投诉信由约翰写出）更加有力。

被动语态会更冗长，不够集中。

（译者注：以下文章中带横线的内容适用于英语语法，不感兴趣的读者可自行跳过。）

一个被动语态句子究竟有多糟？这是两点教训：

• 动作的执行者不够清晰（一封信被写错了）
• 这个句子的 Be 动词（to be ,has been,was）后面跟着一个过去分词。

还是不确定？你可以去查一下微软 Word 可读性标准，或者普渡大学语句方法。

4. 尽可能地删减词语

许多作者都会陷入这样的思维误区：用的词越多，就显得他们越聪明。其实不是这样的。在表单编写方面，或者说各种写作中，删减词语都要比添加词语更加有益。

「你删掉的每一个词，都会为你多增加一个读者。」

在仔细检查不必要的词语后，文章会更笃实，更连贯，更吸引人。

删减重点：

• 副词（以ly结尾）。
• 无意义的量词（很多，大量）。
• 空洞的程度形容（副）词（非常，特别，尤其）。
• 「that」这个词。
• 非必要信息。
• 模糊词（东西，少量，大量）。

5. 尽可能使用缩写

比起完整形态（比如 cannot，is not），语句的缩写形式（比如 can’t，isn’t）能够让文章看起来更简洁，友好和易读。

另外，还能节省文字篇幅。一份优秀的表单阅读性都不错。

What’s 优于 What is。很简单。

6. 长句变短句

冗长曲折的句子容易让人难以理解。密密麻麻的文字堆也是如此。

对于大多数读者来说，每个句子最多 20 个单词，每个段落最多 3 个句子，是最合适的。把每个长句都扩成两个短句。短句实际上并不逊色。

使用空格，项目符号，表格以及打破繁琐说明的任何其他元素，都会使您的读者松一口气。

7. 检查文字

在我写博客的过程中，我（艰难地）认识到，优秀的文章是 30％ 的写作加上 70％ 的编辑。

当你完善了问题，精简了文字和内容后，把表格存储好。隔几天再回过头来看，你会发现有些之前没有发现的地方还可以再改进。

第三部分：表单心理学

大多数用户体验的心理学原理其实都在人们的潜意识中，所以难以让人注意到。

但是每种颜色，字体，线条和按钮都有其用途。

日常的小规模设计可能不如十亿美元的营销活动那么引人注目。但小设计也需要花心思。而且，研究令人愉悦的设计背后的心理学机制很有意思，成本也不高。

以下是一些关键的心理原则，这些原则构成了设计优良的表格的坚实基础。

1. 比较成本和收益

我们做出的每一个决定，从倒垃圾到订婚，都要经过我们头脑中的自动成本收益分析。一项任务的成本是否值得完成后的收益？

设计师的工作是确保用户在感知上收益是大于成本的。

当然，成本与收益是主观的，填表通常源于义务，而不是受访者希望从中获益的行为。除非给受访者奖励，否则无法确保收益。但是我们可以把成本降到。

降低受访者成本的一些关键策略:

2. 使用文本块

+1-919-555-2743 vs 19195552743.

哪个电话号码会留在你的脑海里？当然是第一个。那是因为它被分块了。

组块是一种方便的记忆技术：我们把它用于银行个人识别码、社会安全号码和储物柜代码。它指的是将信息排列成「块」的过程，使内容更容易保留、处理和回忆。

研究声称数字 3 是帮助人们吸收和回忆信息的神奇数字。所以尽可能使用它：针对段落，列表，关键步骤等等。

3. 定义格式要求

如果可能，避免任意格式化规则。但如果是必要的规则，用红色记号笔拼写出来。填表单时，没人愿意猜。密码要求、语法规则、编号间距等等，如果一个字段需要特定的输入，告诉用户。

席克定律

如果我要举办一个晚宴，我总是选择从当地一家小杂货店购买我的配料，而不是从一个杂乱无章的超市购买。那是因为有太多的选择往往会让人感到麻木。这就是席克定律：它指出，随着选项增加，做出决定的时间也在增加。

应用到用户体验领域，席克定律简直就是去繁求简的一剂良方：限制导航选择，给用户明确但受限的选项。因为随着设计灵活性的增加，它的可用性会降低。少即是多。

4. 下定决心（再次）删除

这个链接有什么用？还是右上角的按钮？如果并没有增效，那就是减效。每一个字，每一张图片，铃铛图标或者口哨图标都不是100% 必需的，这些都会降低你表单的转换率。

尼尔·帕特尔称只需删除一个字段，他的联系人表单提交率就可以提高 26%。

正如杜鲁门·卡波特曾经说过的，「我更相信剪刀，而不是铅笔。」

5. 减少打字需求

打字是在线表单中最耗时、最密集的部分，而且经常会导致错误——尤其是在手机上。用按钮、滑块替换文本框并使用自动完成功能，将减少工作量并提高转化率。

6. 用条件逻辑缩短表格

根据 Marketing Insider Group 的调查，有 78％ 的互联网用户表示来自品牌的个人相关内容会增加他们的购买意愿。而当体验与用户无关时，营销活动的效果将降低 83％。

因此，感谢条件逻辑！

条件逻辑（或「分支逻辑」）通过允许基于特定响应的附加指令——类似：「如果这样，那么」，简化了复杂的流程。

使用条件逻辑将不会显示与用户无关的问题，从而减少完成表单的时间，从而使他们不太可能放弃前面的任务。

是的，这听起来像是常识，但是大多数表单都会向每个用户（无论他们是谁）提出相同的问题。使用条件逻辑是双赢的，因为通过明确定义用户细分，可以捕获更干净，更有用的数据。

双重编码理论

我说树时。您就会想到树干、绿叶、树枝。

我们的大脑就像这样聪明：它把图像和文字联系在一起。

这是双重编码理论背后的关键原则，该理论指出记忆有两个不同但相互关联的系统，一个用于文字信息(「树」)，另一个用于视觉信息(「树干、绿叶、树枝」)。

当某样东西以两种方式(图像和文字)被「编码」时，它被理解和记住的几率比仅仅以一种方式(图像或文字)被编码的几率要高。

换句话说，将单词和图像配对会使它们更容易记忆。儿童书籍充分利用了这一点。在设计表单时，有两种方法可以将双重编码理论付诸实践。

7. 信息可视化

我们的大脑处理图像比处理文本快得多。使用图标、照片、形状等线索——无论什么有助于说明你的观点——都会让用户体验更加直观。

表单设计应该是一致的，但这并不是说就不能加入一些小惊喜。通过使用非标准的界面元素——如可点击的图像和切换的滑块——可以使表单填写更加愉快和直观。

8. 颜色

你知道吗：用户最初对产品的判断有 90% 仅仅基于颜色？

实际上，根据营销大师尼尔·帕特尔（Neil Patel）的说法，色彩是「购买特定产品的原因的 85％。」正确的组合可以使读者人数提高 40％，理解力提高 73％，学习能力提高 78％。

你不需要成为一名设计师来找出哪种配色方案和对比效果最好。像 Adobe Color CC  和 Paletton 这样方便的程序可以帮助你选择一个能反映你公司形象的调色板。

9. 让表单更漂亮

我们是肤浅的生物，习惯于相信有吸引力的设计在其他方面也更好：更快、更智能、更易用。这被称为「审美可用性效应」，漂亮的界面增加了我们的耐心和忠诚度，甚至让我们更有同理心。

如果内容或布局不吸引人，38% 的人会停止使用页面。换句话说，如果线上表单看起来不漂亮(也不容易填写)，那就是浪费时间。

当然，一百个人心里有一百个汉姆雷特。但是一个简单的界面、干净的字体和时尚的造型绝对会赢得用户欢心。

进度条效应

如果我们知道我们已经取得的进展，我们就更有动力去完成一项任务。特别是已经领先进度的时候，感知上的工作量会相应减少，最终达到超预期效果。美国教授约瑟夫·努内斯和泽维尔·德雷泽将这种现象总结为「进度条效应」——「当人们能看到已付出的努力时，会更有动力完成任务。」

10. 以下是一些适用于表单的进度条效应的应用方式：

问题排列从易到难

如果表单里的问题按照从简单到困难的顺序排列(而且保持逻辑顺序)，用户将快速完成表单的初始阶段。这反过来会触发连胜效应：快速进步和动力感带来的满足感，让用户不愿意打破连胜。这意味着，当表单变得更加苛刻时，用户会继续坚持下去。

画出进度条

随时反映用户的进度。用户越接近目标，就越有可能完成。如果表单是多页的，请指出还有多少页要完成。

一份来自 Clutch 的研究表明 90% 的用户希望在线表单能有进度条来管控他们的花费时间。

第四部分：问题、回答和分组

1. 用头脑风暴讨论题目

所有的表单的关键都是题目。特别是在头脑风暴讨论题目的时候，最好的就是从目标出发，倒推回来。

所以你的第一个问题就是：你的表单的目的是什么？入职表？反馈意见？研究表单？

尽可能地记下你希望从表格中获得的信息。把它表达为题目(以问号结尾)，而不是灵光一闪。一定留足时间反复推敲。

然后，写下一些可能的答案，这些答案可能会给你一些灵感。

最后，头脑风暴讨论这些题目，这些题目就会解答刚才提到的第一个问题。

作为调查后的回顾，写下每个问题的回答百分比。将这些猜测与你的实际结果进行比较，会发现下一轮要注意的盲点。

这种回顾过程还有助于您的设计并节省您的时间。

关于板块的科学

根据表单转换率报告，表单类型直接影响表单的板块数量。仔细考虑每一个板块的每个问题。

现在，问问自己：你真的、确定、必须要问哪些问题？

多数情况下都不是必要的。但是，即便我们明白少即是多原则，但是真的有机会去用户的脑子里一探究竟的时候，我们还是希望问题越多越好。

当然，这些问题的答案是很重要。但真的重要到失去用户都在所不惜么？

你需要用户的配合。但是每加一个板块，他们的耐心就会失去一点。所以，在你把所有的题目和答案全列出来以后，能删尽量删掉。考虑收集数据的其他方法，并考虑这个题目是否可以推导出来，或者以后再说甚至完全排除。

尽量避免可选问题。如果必须，请在表单最后列出来。

2. 正确地分组题目

将线上表单结构化是成功的关键。

在你经过头脑风暴讨论，修剪精炼得出了最终的问题清单后，就该组织他们了。用一个「主题」标题将它们组织成组和子组，比如说联系方式，工作经验等。

这样一来，用户不用去读具体的问题就大概知道自己接下来要做什么。

3. 定义问题的逻辑序列

现在要考虑问题的顺序了。按照经验来看，主题相似的问题，就应该放在一起。

每一个问题，每一个板块，都应该激励用户到下一步。大跨步似的前进会让用户困惑，所以要用一种一步一步引导用户往前的模式。

用户会通过调节对信息的流动有一种预判。比如说，「你叫什么名字？」应该在「你住在哪儿？」之前，而「介绍一下你的工作经验？」应该再往后。

4. 决定「必填 vs 选填 vs 友好」

最好的做法是把你的表单只限于必填的问题。选填问题将毫无必要地延长表单并激怒用户：「你从哪里听说我们的？」 「你想收到营销邮件吗？」

不过对那些非强制性的但是友好的问题，将它们放在表单的末尾，作为可选的后续内容。这样，他们会感觉不那么有侵略性，也不会影响你的转化率。

5. 一次只问一件事

双管齐下的题目会让用户觉得模棱两可。而且——你已经猜到了——模糊的答案无法量化。

看看题目中有没有用「和」，「或」。找到了吗？如果有，把这个题目改成两个。

题目越清楚，答案就越清楚。答案越清楚，数据就越清晰。

6. 提供便利

优秀的表单描绘了一条清晰的路线，通过线索、提示等引导用户完成表单。路线越短，用户完成的可能性就越大，所以尽可能地给用户提供便利。

以下是比较有用的便利方法：

邮编索引

要求用户填写地址的时候，最好的方式是只让他们填写门牌号和邮编，然后使用邮编索引服务完成地址信息的其他内容。（译者注：此条比较适用于国外。）

默认提示

默认文本提示是出现在表单字段中描述其预期值的浅色文本。只有在存在潜在歧义的情况下，才应该使用它。

字段标签

字段标签是出现在字段上面，关于问题性的文本。它经常都会出现，并且不应该用占位符提示来替代。人们常常为使用默认提示同时作为字段标签，但却引发了可用性的问题。

换句话说，你可以使用字段标签，不用默认提示；但是不能在没有字段标签的情况下只有默认提示。

预设答案

大家都喜欢做选择题。它们可以节省读者的时间，并且易于评估。

你可以通过回答「是/否」、「单选」或「多选」来预定义答案。如果有一个你无法预测的答案，添加一个「其他」文本框让读者输入一个自定义的答案。

搜索预测

在要求用户选择他们的国家、职业或具有大量预定义选项的其他内容时，搜索预测会减少所需的打字量(和认知负荷)。

第五部分：表单的受众，目的以及环境

表单只完成了一般的工作。它是被动的，不是主动的。表单的效果依赖于填表者。它们需要从一开始就嵌入到框架中。

表单是交流的工具。需要两方来参与。

因此，在设计表单时，你还需要从用户的角度考虑……这从他们的目的和环境开始。

为什么要有人填写你的表格？他们的目的是什么？把它们写下来。

目的和环境息息相关，所以要让环境在你的头脑中具体化。他们在哪里以及如何填写表格？在家吗？在笔记本电脑上？在手机上？在地铁上？

环境不仅仅是场景。关键是用户能明白在他们的帮助下你的表单可以实现什么目的。

1. 知道你的受众是谁

表单需要吸引目标受众的注意力——那么，这些受众由谁组成？

在泛泛人群中思考是没有意义的。要集中你的注意力，集中在一个人身上——或者说，一个「买家画像」比任何一个普通人群给你的信息都多。

试着描绘一个理想的用户画像，有工作、个性、家庭、希望和梦想。集中思考这个理想用户群体。他们在哪里生活和工作？他们的观点和价值观是什么？他们与你的业务有什么关系？

如果你发现对这些理想群体来说什么是有意义的，你就离最终给你带来高价值数据的那些问题又进了一步。

这些人就是你需要反复思考的人。这些人就是会给你答案的人。

表单视觉和结构

填表单肯定不会像过生日一样充满惊喜。

一致性是保持表单填写体验顺畅的关键。一致就是指颜色要一致、视觉感受要一致、主题调性要一致。

你的公司形象是什么？什么短语和单词能概括这一点？你的价值观是什么？在 JotForm，我们注重包容性、友好度和脚踏实地——我们的语言就在传达这些主旨。

当你定义了品牌调性后，在所有的表单中保持住——你的用户应该感觉到他们每一步都在和同一个友好的人互动。

视觉一致性同样重要。在整个表单中都应该用一种视觉风格(以后创建的其他表单同样如此)。

2. 左上对齐标签

Google 的 UX 研究人员发现，将标签左上对齐会减少表单完成时间，因为它需要的「视觉注视」更少。

3. 避免将问题并排放置。

眼动研究表明，简单的单列布局比并排放置的多列布局要好。

该规则的唯一例外是要求输入日期（日，月，年）或时间（小时和分钟）时，其中多个字段应在一行上。

4. 尝试一页一事

每页一件事是一种心理技巧，定义为：

「将一个复杂的过程分解成多个小步骤，并将这些小步骤单独用一页来呈现。」

本质上，用户只需要关注一件事。一条信息、一个决定、一个问题要回答。

整洁的页面鼓励用户继续执行任务。

5. 用输入框长度提示用户

把输入框的长度控制到正好能够包含所有的输入字符的长度（用户可以看到填入的完整内容）。

输入框的长度应该反映用户预期输入的文本量。邮政编码或门牌号等字段应该短于地址行。

贝马尔德研究所的可用性研究发现，如果一个字段太长或太短，用户开始怀疑他们是否正确理解了标签。这尤其适用于具有异常数据或技术标签的字段，如信用卡背面的 CVV 码。

表单设计中的错误和完成路径

就像生活中一样，填写表格时有可能出错就像生活中一样，关键问题是发出错误信号并允许快速纠正。

6. 不要只靠颜色

十分之一的男性有一定程度的色盲。

当显示验证错误或成功消息时，不要依赖使用绿色或红色文本(因为红绿色盲相对常见)。使用文本、图标或其他东西。JotForm Cards 用一个微动画警告用户，当出现错误时，该动画会说「错误」。

7. 在同一行内指出错误

向用户显示错误发生的位置，并说明原因。
如果您必须使用验证，请确保它是内嵌的(在字段的右侧)，并提前报告错误。不要等到用户点击提交来报告验证错误。但是同样，内联验证不应该是实时的，因为这可能会在用户完成字段之前报告错误。

8. 使用字段验证

你需要一个电子邮件地址，你会收到一个没有@符号的回复。你要求一个电话号码，而你的回答中有一半位数不够。

打字错误不应该成为表单可用性的障碍。

使用「字段验证」来确保得到您需要的答案，例如，「答案必须包含__」

JotForm Cards 恢复错误输入域名的用户的电子邮件地址；约翰@ gnail . com 应该是 john@gmail.com。

9. 但别太苛刻

如果用户回答的方式有很大差异(例如，用+12345678912、+44 12345678912、012345678912回答「电话号码」)，请将其转换为一致的格式。

第六部分：关于支付表单

什么是支付表单？

支付表单就是线上的收银台。它授权在线支付，验证用户的详细信息，检查资金是否可用，并确保你收到支付。

支付整合有很多优势。他们帮助你 ：

• 销售产品或服务；
• 在结算过程中进行复杂计算，例如增加税收和运输成本或减去优惠券；
• 呈现你的产品描述，如图片、数量、颜色和尺寸选项；
• 收集固定金额的捐款和付款，或者通过订阅服务保证周期性付款。

在设计支付形式时，遵循最佳实践是至关重要的。以下是一些关键规则。

1. 限制付款步骤

Baymard 研究所分析了支付表单，发现支付过程太长或太复杂是放弃支付的主要原因之一。所以一定要分块，分得越细越好。

2. 使用安全视觉提醒

当输入敏感的细节，如信用卡细节时，用户会对任何看起来可疑的东西保持高度警惕。最近的一项研究显示，出于安全考虑，17%的购物者没有付费就离开了页面。

专业的支付形式让用户感到轻松，而任何看起来「不舒服」的东西都会让他们感到紧张。这就是为什么你应该从头开始构建支付表单时就保持谨慎——即使是最小的错误或不一致也会吓跑用户。

它还有助于在表单上启用 SSL 来帮助保护数据。用户知道所有的互动都是加密的，因此可以安心。JotForm 是最安全的数据传输方式:我们符合支付卡行业数据安全标准 (PCI DSS) 1级，并启用了 SSL。

3. 清楚地解释你为什么要求敏感信息

人们越来越关注隐私和信息安全。如果你要求必须填写敏感信息，请确保使用字段下方的注释文本解释为什么需要这些信息。

4. 保存数据

让用户可以选择保存他们的地址和支付信息，可以使这个过程更快、更简单——尤其是在手机这样的设备上。这同时也会给回头用户一种奖励和忠诚的感觉。

5. JotForm添加支付集成的方式

• 第 1 步:添加你的品牌标志和定制风格。
• 第 2 步:使用链接按钮输入集成凭据，或者直接输入。
• 第 3 步:添加产品图像、产品细节，如数量、颜色、尺寸。
• 第 4 步:计算优惠券、税金和运费。（你可以使用集成采购订单来检查通用付款字段创建的详细信息和选项(这不需要任何凭证，因为它不会创建真正的交易)。你可以查看 Sofort 集成指南作为示例，了解整个支付过程。）
• 第 5 步:写一封私人感谢信——自动回复邮件。

一切就绪。现在你可以在网站、博客或社交媒体上轻松销售你的产品。当你完成表单后…万岁！完成了！但是……等一下。你的表单可能已经完成，但现在还不是发出去的时候…

还有最后一个步骤。

6. 发出前，测试您的表单

我们都有盲点。所以保持谨慎很重要，毕竟数据的质量决定了表单的成功。因此，需要事前检查一下调研题目，确保答案选项的完整可靠，没有任何遗漏。

把表单发送给家人/朋友，并要求他们记录填写表单需要多长时间，以及对这一连串的问题他们体验如何。这也将有助于你下次评估表单的设计。

文章来源：优设

画插画可以用哪些构图方式？他们的优缺点是什么？本文总结了9种常见的构图方式。

框式构图

对角线构图

向心式构图

对分式构图

三角构图

垂直线构图

紧凑式构图

S型构图

三分式构图

其中，个人认为，最为核心的是第二点：多体验原型或产品，直到自己觉得周到为止。

文章来源：站酷

引子问题：

从眼睛进入的视觉信息，占大脑皮层中形成视觉的视觉信息的百分之多少？

这个是视觉通路的说明图，是认知心理学的一个知识。外界信息从眼睛到LGN之后，会往两个方向走，一个形成腹侧通路另一个形成背侧通路。也就是一个形成“你看到是什么”，另一个形成“这个东西离你有多远”。

这是的研究，就是主视觉皮层那块区域并不像我们想象的一样，是一个简单的、从下往上的一个回馈。它真正来自LGN的信息输入只占到10%，LGN从眼睛获得信息也不超过10%。你可以想一下眼睛到LGN，到大脑皮层形成视觉的过程。大脑皮层中的视觉信息90%是它自己产生的，只有10%是来自LGN。LGN当中视觉信息的90%由大脑皮层自己产生的，只有10%来自眼睛。

做一下乘法，你就会发现，即使是眼睛看到的数据信息完全进入大脑皮层，它至多只能占到10%，如果他不是至多10%的话，有可能眼睛实际进入大脑皮层的数据信息只有1%。也就是说大脑主要是在生产信息，而不是在接受信息。所以你应该把你的精力用于研究那90%左右的信息是怎么产生的、它是什么样的规律。

1. 《UI设计与认知心理学》一书的主要内容和结构

本书的结构第一从设计实现角度来讲比例构图、构建页面的具体结构、栅格系统、组织原则等等。

第二部分是主要的部分，从第八章一直到十六章是从认知智能的角度，就是你怎么处理信息的角度去做这个交互设计。第十章这里头有一个叫模因论，模因论就是把模因类比成基因。

第十三章和第十六章写的就更抽象一些，第十三章主要是讲人工智能的基础，第十四章是讲应用，第十五章就是和今天话题有相关的地方，就是VR、5G这些，第十六章是我研究生毕业论文，我个人认为没写完，又写了一遍，是从心理学角度去阐述，为什么我们设计和国外的设计是不一样的。

2. 举例认知与UI设计

我们先有一个感性认识，认知与UI设计有什么关系？这其中有两点。

第一个就是古腾堡定律与内隐记忆。古腾堡定律，大家都听过吧，（注：该法则描述了一个理论：人的眼球移动规律趋向于从上到下，从左到右，在视觉区域中，左上角通常为视觉起始点，右下角为视觉终点，而右上和左下是视觉落盲点。）也就是F形阅读。这是尼尔森·诺曼在2006年产出的一个结论，即人浏览页面的方式会形成一个F型的路径。

但是有个公司叫EyeQuant，他们是做一些眼动仪及其研究的。他们统计了大概是15万张前六秒人的注意力的热区图，它形成了大概这个结果。

EyeQuant就说尼尔森·诺曼的结论可能不太对，它不是F型的，他给出了很多结果。

你会发现这个图很多时候是居中或者是中间等等。于是EyeQuant公司的研究结论就是：有太多因素影响眼球运动，不用把F型法则当做金科玉律。他们在官网上发了一个帖子，这是他们这结论，底下是论文的网址，大家也可以自己看一下文章，判断一下EyeQuant说的对不对。

我们来了解一下古腾堡定律，如果大家不了解，我先来解释一下。古腾堡是一个德国人，他发明了独立印刷术，他认为人的阅览浏览页面的规律是从左上到右下的。左上是第一注意区，然后是右下，另外两个区域是最容易被人忽略掉的。

上方是热力图，大家可以看一下，这两个图其实是有关联的，热力图和古城堡定律大家注意看，最关键的点都是左边。比如当你做web导航的时候，你一般会把导航放到左上角，很少有人放在右上角。跟我们阅读习惯是相关的。读书写字都是从左开始的，所以热力图表现出来并不是彻底的居中或者是在右下，左边还是一个很重要的位置。第二点是2006年的互联网产品形态和现在互联网产品形态是不同的，过了十几年了，拿现在的数据说以前的事情，有效性是有限的。

另外，有几个反例它是没法解释的。大家有没有关注过阿拉伯语的网站，你会发现它的导航是倒过来的。我看了之后我以为是有个镜子，它其实是正确的，因为阿拉伯文是从右向左书写的。通过以上，我们可以认识到古腾堡定律其实还是起作用的，它是根据你的书写的方向形成的。

有关网页布局的规律，应该是：同时受到古腾堡定律以及产品自身因素的影响。那么EyeQuant公司做的那个研究有没有价值呢？是有价值的，它确实是往中间偏了，但是这是和产品的特性有关，因为06年之后越来越多电商的页面，包括纯展示的东西越来越多了，居中构图的情况也越来越多，很多吸引注意的图片放到中心位置了，所以它会影响整个观感。

古腾堡定律在认知心理学里实际就是内隐记忆。内隐记忆就是：无法通过有意识的过程而接触的知识。举个例子，骑自行车大家都会吧。如果我跟你说有本书教骑自行车，你看完了就能学会，这不可能对吧，你需要自己练习骑。你学会了之后，当你要教别人，你也没办法通过语言告诉他，你只能说你必须得练，这个就是内隐记忆。

生活当中有一个体验，我相信所有人都会有，就是不管是用是安卓还是iOS都会有一个问题，就是比如你把A左边的应用删了，iOS系统会让后面的应用自动补位，它会把A应用推到第一个位置，结果就是你每一次想要打开A应用时候很容易点错。这也是内隐记忆在起作用。

这是内隐记忆的分类，有四种。骑自行车与古腾堡定律和第一种程序性记忆比较相关。第二种是知觉表征系统，大家听说过无意识设计吧，这就和知觉启动是相关的。条件反射就不用说了，巴甫洛夫的狗玩摇铃它就流口水。非联想学习中的习惯化和敏感化是什么意思呢？就是比如说你家里有一个空气净化器，打开的时候你会感觉它发出的噪音很明显，但是过一段时间你又不太注意它的噪音了，就是习惯化。

敏感化是什么呢？烟尘和污染的空气非常刺激呼吸道，所以一旦雾霾 ，呼吸道不好的人就会非常敏感，非常难受。比如说北京的雾霾，一开始可能不太注意到它，但是在北京待十年的结果是只要看天，我就能估算出这个pm2.5是多少值，正负不超过50，非常精准。比如一看今天这个天气情况，我猜污染指数有150，一查手机大概130左右。这就是敏感化，你对这个刺激的信息处理会变得更快。

画表情的秘诀，这个是其中一个例子，它涉及到一块脑区叫梭状回面孔区。大家可以看一下，这些表情有一个什么样的共同点。

大多数的表情是没鼻子的，或者鼻子特别小。再看一下这两张图片，有什么明显差异么？

这两个照片差异非常明显，这个叫撒切尔效应。这时候你感觉还行，两个人可能眼睛不太一样，但是当把照片导过来的时候，反差就特别大，你就感觉右边那不是个人，对吧？

这叫面孔倒立效应，只有正立的时候，才能有效识别面孔。就是必须得形成倒三角你才能有效识别一张面孔。鼻子并不参与三角区的方向判定。

你会发现插座也会被当成表情，面孔倒立效应的基础是部分神经的特异化，部分神经元是专门用来处理面部信息的，识别人的情绪对人的认知是很有作用的。快速地判断一个人的情绪，对社会化动物来说非常关键。有一块脑区专门处理人脸识别，识别情绪。

以上大家可以形成一个大概印象，就是认知心理学可能会和你的设计相关联，也说明了认知科学对UI的指导性，这是我的一个观点。右边是它的逻辑事实，书中尽量去证明这个观点。

3. 认知科学对UI设计的指导性

第一，广义的设计概念。想证明认知科学对UI设计的指导性，得先说清广义设计概念。我对它的定义是解决问题的目的与恰当方式的综合。

你想解决这个问题是吧？方式的综合前面还有一个恰当，我强调这个恰当。

第一个先说他目的性，比如说你设计一个汽车、设计一个界面、设计一个流程，是有目的的，不是无目的的。第二是设计是解决问题的恰当手段，设计是你要找一个恰当的解决方法。比如你累了怎么办，你可以造个沙发、设计个躺椅。还有各种各样的方式，哪一种方式是最恰当的方式，是设计出来的。这都是各种各样能解决你累了的一个手段，但是你一定要找到那个最合适的。

这个之后我们还要定义一下UI的概念，这也是我个人的观点和定义。就是解决虚拟界面信息传输问题的目的与恰当方式的综合。

我是交互设计师，我没有用比如说交互或者视觉这个概念，因为我认为这个概念有些窄，并不是说我区分不了视觉设计师和交互设计师。别人问你如何区分交互设计师和UI设计的时候，你就用一句话就能区分：你和界面之间有没有一次以上的信息互动？如果有，那就是交互要介入，如果没有一次就够了，基本就是视觉的活。

传统设计的目的、主题和体验公式。首先传统设计处在两个过程的中间，第一个是“人-自然“中间，也就是人造物，就是你要通过你设计的工具去改造自然。种个地、开个矿等，你设计这个东西是在告诉别人怎么用。比如说不能把门把手放到转轴的内侧，他一定放到转轴的外侧，这个门把手就是在提示我们怎么去操作这门，怎么推这个门。这是基于材料及其加工工艺的造型理论。

另一个就是设计处在“人-人造物-他人“的认知过程中间。它所具有的特性是示能性与自我定位。比如说我穿衣服，你会发现我没有一个红色和绿色的衣服，我喜欢穿蓝色，黑色等，这实际是对自己身份认识的一种构建，向别人传达出一种信息的设计物。传统设计都会包含这些信息，你住什么地方，穿什么衣服，看什么书，都会有这两个作用。

这是史上特别著名的穿丝袜的潮男叫路易十四。你会发现这个东西就是在两方面表达出传统设计的作用，第一个就是示能性。高跟鞋的形状一定是后边开口前面是收口的，因为你要把脚放进去。高跟提高你的身高。这个执杖宽头的地方是用来放手的，窄头的地方是用来杵地的。传统设计的主题是基于材料及其加工工艺的造型理论与设计实践，这是我的观点。我本科是学工业设计的，读研究生的时候也是学工业设计的，我发现我做的所有的事情都是围绕造型和工艺的造型理论。

举几个例子，轮胎演化过程、手机演化过程，你会发现材料的变化，造型的变化。

再来看一个深刻的例子。

这是一个著名的女设计师设计的，她为什么能做成这个东西？是因为她做这个东西的时候，出现了新的数学工具来帮助建筑造型，很多原有的建筑学派不愿意用这套东西，但是她非常激进，要用的数学工具来处理这个造型，才能做成这个建筑。

包括大家现在坐的车，你会发现曲面的车越来越多，车越来越漂亮，是因为数字化之后，加工的工艺更好了，能做出特别漂亮的曲面。原来为什么红旗特别贵？因为那是老师傅用锤子敲出来的，不是像现在数控技术就把它弄出来的。劳斯莱斯也都是敲出来的，所以很贵，想做很好看的曲面成本极高，但现在就成了很容易的一个事情。

传统设计的体验公式就是E=e*n，e是衰减的。e就是每一次使用的体验，比如说手机，你拿到手机的时候是一个体验，是一个e，用了多少次，n就是几。比如说我做一个椅子，用一次是e，用了多少回，它的乘积是整个体验。n是不会变的， e是唯一的关键，而且他每一次都一样。所以传统设计里对它的造型会非常看重，到底表现出什么东西，好不好用，会特别关键。

我再说一下UI设计的目的、主题和体验公式，UI设计的目的和传统设计不一样的地方是，它示能性更主要，自我定位更次要。我举一个例子，马云想用支付宝，不好意思，他也得跟我们用的一样。不管多有钱的人都好，还是只能用Facebook不太可能为这个人单独设计出一款来。也就是说UI设计是绝对平等的，只能说买个皮肤，你可以花钱，但大多数情况下，它的主体功能是不区分消费能力的，所有人用的支付宝都是一样。不管这个人多穷、多有钱。

所以UI设计更主要的是通过界面来告诉你这个东西怎么用，是比自我定位更重要的。所以我们主要考虑的是界面能不能告诉用户是干嘛用的，怎么用，这是最关键的。这和传统设计不一样，传统设计因为有材料成本的问题，一定会涉及到选择和自我定位的关系的问题。

UI的设计体验公式就是E=a*b*c*…*n。这里为什么用乘法而没用加法呢？大家知道有一个叫迷失度的一个概念，它是形容网页体验中，如果a是零的话，后面做再好也没有用。比如说用户找不到入口，到界面这卡在这了，这界面如果是0.1，那后边所有的转化率就全是0.1乘以这个系数。所以它并不要求每一个页面达到百分之百，但是它强调整体乘积一定是一个高值，比如说这个页面的转化率提高了，提高3%，下一页面降低5%，它是一个乘积的关系，每个页面都很重要，它是一个拉长的一个体验公式。最后乘以一个使用次数。

我们再回到认知心理学，我家有三本到四本心理学的书，来看看他们每个人是怎么定义认知心理学的。

斯腾伯格所著的是一本卖得比较好的书，大家可以看一下，认知心理学规定了研究范畴是什么，这是斯滕伯格写的，他认为认知心理学就是研究人如何觉知，学习、记忆和思考问题的。

下面这本书是三个人合著的，他们压根没有给认知心理学一个明确的定义，只是提到这是有关于思考者的心智的科学。但是他说的不是很具体，而是写了一堆研究对象，你把它抽象一下，会发现关键词实际和斯坦伯格的是一样，觉知、学习、思考、语言。

再来看第三个，艾森克和基恩干脆就没定义认知心理学是什么东西，他说现在这个东西是一个特别广泛的研究领域。

这三本书里头有两本书的第二章叫认知神经学，有一本是在第一章的第三部分叫认知神经学。我原本为我的书取名叫《认知与UI设计》，就是这个原因。很难把认知心理学和认知神经学切得特别开，它们的联系实际是很广泛的。

UI设计围绕觉知、注意、记忆与识别会有一些简单的例子。

视觉组织原则，这个是格式塔闭合原则，这是从神经学层面解释格式塔的闭合原则。就是有一个未封闭的图形，大家可以看到左边，你知道他是未封闭的，包括有那种特别的那种三角，有两个半圆，三个半圆，我们会把它脑补成一个闭合的图形，这个是有神经学基础的。

有个叫赫布定律，这个是什么意思呢？两个神经元如果彼此之间互相刺激，他的神经的突触就会变多，它表现在除了突触增多还有髓鞘增厚，都会使神经之间的联系变得更紧。

细胞集合的定义就是，人对信息整个识别过程是这样的，过去你接受过原始刺激，你会记住它，比如说右边这个完整的圆，你第一次看到这个圆，会形成刺激，再看这个圆又形成刺激，它会形成一个完整的赫布集合。等你再看到左边这个不完整的圆的时候，就是一个不完整的刺激，它会激活原来形成的赫布集合，让你产生错觉认为它是原来的完整的状态。识别和记忆是一体的。记得越少，识别越快。

意识和注意的模型与用户体验是相关联的。真正进入到意识的信息是少之又少的。因为人的视觉能看到的只是可见光。在一个很长的光谱中，视觉信息只占这么一点。人对视频信息的感知还有个体偏向，人对红黄蓝的敏感程度是不一样的，它只对部分色彩更敏感一些，更窄。

信息有一部分是无意识的，比如说心跳的声音，在环境特别安静的时候，你能听见心跳的声音，但是当你注意力在别的地方时，你会过滤掉它，心跳声就不进入你的意识了，但它实际是一直在发生的。

你要建立一个概念，就是用户能注意到的事情，是整个界面里头很小的一部分，大部分他什么都记不住，因为他没空。短时记忆的容量是非常少的，比如说让你记电话号码，一般大家都是以443或者344地记，会把它切割成几个块，这样会更容易记一些。

下面这是《艺术与视知觉》这本书里的一个实验。左上角的图案是他们用来做实验的图。你会发现这个图是一个特别拧巴的形状，首先它是不闭合的，不是完整对称的，设计师看到会非常不舒服。这个图是怎么做实验的呢？就是把这个图给你闪一下，就给你0.2秒或者0.3秒。看完之后让你回忆，回忆这个图是怎么构成的？右边这七种是大家回忆的，它有一个共同的特征，就是把它规律化。这个不是有意进行的，是你与生俱来的能力。把一个不规则的东西记成一个规则东西，是你本来的能力。

我们再看一下，我们把这个时间拉长，你会发现很有趣，第一个是字母A的演化。这原来是头牛，公元前1800年恐怖谷铭文里的文字，长得像左上角第一个。后边的人画牛很费劲，识别它、记忆它很费劲。就把它简化，简化，最后就变成拉丁字母。每一次他都在丢失视觉信息，每次都在不停的丢失识别，使它更规整。26个字母基本都是按照这种原理出现的，只不过它是一个特别长时间，跨度上千年，变成这种结果。

第二个是中国的鱼纹，这是李泽厚的书《美的历程》里的截图。你可以发现鱼纹的演化过程也这样，开始鱼纹真的是条鱼，后来这个鱼变成对称性了，上下对称的。到最后它已经不是鱼了，花了几百年时间变成这个样子。

谷歌的logo也是一样的规律。不停地进行简化，不停地进行识别。识别和记忆是一体的。每次记忆时一定会丢失信息，不管记什么东西一定会丢信息。记忆的东西比看的东西更少，当再识别的时候是拿剩下的东西来识别。这也是和人的认知相关的。

4. 科学研究的范式。

要想研究一个东西，得有一个合理的思维的过程，才能产生正确的思维的结果。思维能力和思维形式会决定思维产出。

我们看一下概念和命题，这是柏拉图的三段论。我举个例子，大前提是希腊人是勇敢的人。小前提是雅典人是希腊人，结论是雅典人是勇敢的人！这是一个特别标准的三段论推理，大前提小前提，不停地缩小集合的范围，得到这个结论。

但是问题是什么？这个语境里头我没有解释这几个概念：雅典人的概念是什么？如果你注意土耳其的地图，你会发现爱琴海那一块靠近土耳其大陆的很多岛是希腊的，特洛伊现在应该是更靠近土耳其一些。雅典人的概念就是伯罗奔尼撒半岛上一个地区的人叫雅典人，但整个希腊实际是一个特别宽泛的概念，它并不是原来的半岛，而是把周边很多岛屿，甚至靠近罗马的岛都扩到希腊地域里，所以这是一个问题。希腊人的概念又是什么？我也没说。我尽管做了推理，我没说勇敢的人的概念是啥。有个坏人在行凶，你用声音制止了还是用行动，能不能作为判断这个人是否勇敢的标准？在你说出一个推理命题的概念的一刹那，实际上已经把这个东西表达出来，但是在这个命题里是没有说的。

我说得有点绕，其实我想表达的意思是：做推理的时候，推理里的概念，你是不可能在这个推理里头说出来的。你想把这个概念进行规定的时候，还得通过其他语言和其他概念来说这个概念。比如说我们学的数学几何，是基于欧几里得的五大公理，五大公设。有了这个东西，才有推理和判断的基础，它是先于命题存在的。如果不对UI进行定义，如果不对设计进行定义的话，我写这本书就是一个很扯的一个事情，因为并没有形成自己的观点和基础。只有形成观点和基础了，才能围绕这个东西进行推理，哪些是合理的哪些是不合理的。先有概念和命题，才有后边理论和假说。

要判断一个理论靠不靠谱，需要符合逻辑三恰。

第一个要逻辑自洽，就是你不能自己打自己的脸，你需要自圆其说。事实与逻辑相符，就是一个观点在你的学说里是兼容的，不能出现逻辑矛盾。

逻辑它恰是什么呢？你提出这个理论和其他理论不能产生矛盾，除非你能证明理论错了，或者在某些条件不适用，这个理论才是靠谱的，你不能和原来既有的公理产生冲突。

逻辑续洽是什么？就是新的场景、新的案例用这个理论还能解释的通满足这三条才是好理论，缺一条都不行。

5. 视角

这一章是从逻辑的视角去看一看，这套理论对不对。从认知的角度考虑设计对不对。认知角度本身对不对。

第一个叫逻辑自洽，在认知理论内部没有矛盾。

我举一个案例。这里有两个图，大家第一眼看上去它是怎么构成的？我用等式表示出来。会有人第一眼看上去认为它是最上方的方式或者是最下方的方式构成的吗？没有人会说这个图形是用这两个更复杂的方式构成的。但是你想没想过，为什么你第一眼看上去就是按中间这两个等式的方式构成的。因为这样理解认知成本，如果把一个你没见过的东西或者一个复杂的东西展示给你看，一定是按照你的记忆，还原成你接触过的最简单的一个构成。它会降低你认知的成本，如果记成奇怪的形状，一定会使你记忆成本更高。

第二，认知一定是要符合演化论。

人们对演化论的误解之一，就是认为越快越强越好，其实不是，而是适应。可能你更强、更聪明、更快，但是适应不了环境。

比如说为什么色盲基因还存在？

男性里头大概有7%-10%，女的还少一点。按理来说我们应该认识更多色彩，为什么色盲还存在？外界信息变成视觉信息主要是靠视锥细胞，它比较密，是在中凹附近。眼动追踪的时候，也主要靠中凹移动来看东西。视感细胞对色彩并不敏感，但是对明暗敏感。色盲在夜间视力很好，比如说晚上要偷袭猎物，或者是偷袭敌人，有色盲的部落会派出这些人，这些人夜间视力更好，会给种群带来生存优势。所以色盲基因没有消失是有意义的。非洲有一种镰刀形红细胞贫血病也是一个案例，拥有这个基因的人不容易得疟疾。但是如果没有疟疾情况下，他容易贫血、容易患各种各样的病。

现实视角的逻辑续洽，第一个就是能预测新的设计趋势，第二是解释新的实验现象。

第一个是扁平化是趋势而不是潮流。这个用左上角的一个图一下就能解释清楚。鸡尾酒的杯子一定是透明的。我们做的界面很多时候就是那鸡尾酒的杯子，大家能理解扁平化是什么原因了吧？因为网速越来越快了，各种各样酷炫的东西越来越多，信息量越来越大，就相当于鸡尾酒里有颜色的酒，颜色越来越多。如果用一个不透明的杯子，或者透明度不够好的杯子，看不出里头的颜色。所以扁平化是一个趋势，不是潮流。

这是我前两天看到的一个帖， 2019年发的一个论文，叫图标样式对可用性的影响。大家可以自己去翻这个论文，很有意思。

测试结果是：最不易识别的是最右边这组。中间是识别度比较高的，这个解释特别简单：过度简化导致识别困难。意思是简化信息的时候，不是一减到底就是好。比如说前面的例子从牛到A的过程，你不能上来就给埃及人拿了一个A，他不认识。Instagram改版为什么受到热议？因为它突然之间扁平了，没有渐进过程，咣叽就变成一个特别扁平的图标，它的纹理和它的图形都发生了变化，所以识别上会特别不舒服。我举过一个例子，比如说你慈祥的老母亲整成了张柏芝或者是高圆圆，你一定不会认为这是一件好事，你会感觉很难接受。

第二个测试结果是这次识别度高的是右边的，中间的识别度是低的。测试结果是多数面型icon识别比线型icon更容易识别。这个是格式塔的描述方式，有阴影的图形只在内部成立，外部行成不了轮廓。线性图形则正好相反，是两向轮廓。

比如说我们看苹果图标，你不管它是从第一版还是到最后一版，他都是面性图标。

因为苹果是个球，它是个实体，这个轮廓在苹果内部成立，就类似于这种感觉。后边是有阴影的，有外部的，因为你要聚焦，后边东西会虚化掉。它只在内部成立。

面形图标普遍比线性图标识别要快，只有三个反例，只有三个反例需要解释。

第一个图，咱先不看虚拟的，你会发现这两个图标线性识别度高，原因是因为它表面有条纹，这两个图中圾桶和钥匙都有条纹，所以用线性来表达的时候，效果更好。其他图标的实体都是曲面，不是条纹。没有参差不齐的边缘，而是曲面，是单向轮廓形成的。因此线型图标更容易辨认。

感受野是人的视锥细胞和神经节细胞的一个联系，不管刺激中心区域、刺激整体、刺激边缘都会有反应。和感受野关联的是神经节细胞，人类眼睛有很多神经节细胞，但这些细胞不是完全均等的点，而是一组点围绕一个中心形成一个组合一样的结构，外边一圈组合，中间有几个组合。

下图的这个就类似视网膜上的结构，神经节也是类似这种结构。当环境同时变亮的时候，刺激比较弱。同时变黑的时候，刺激也比较弱。只有在交界点的时候，反应最强烈。想象一下，当我们看到一个物体的轮廓的时候，细胞对它的反应最大，就形成一条边。这个实际上就是卷积核，人工智能卷积核就是模拟感受野形成的一个原理。

内积就是矩阵内的数字一个一个互相乘，乘完之后形成一个结果。卷积核模拟感受野的原理是：数字矩阵就相当于一个卷积核从最左边一直扫到最后一排，会形成不同的数值。比如说这个是我们要看的图像，比如说黑的会计算成1，白的会计算成0。用卷积核扫一遍就相当于在模拟人眼睛看到的东西，黑白区域之间就会形成一条边，就是我们所看见的轮廓。

这就是我们眼睛看到东西的原理，比如说我们现在做视觉识别，也是用这种特别简单的技术。卷积核实际是模拟人的感受野。

关键点是神经学是怎么解释面形图标和线性图标的不同的。当你看到全亮的东西和全暗东西的时候是有差异的。卷积核扫一圈之后，计算机会认为这个里头的东西和外头东西是一样的。对它刺激是一样的。所以只对边缘有认识。但人的神经比较特殊，它自带一个数值，它能识别出暗和亮。所以当你看一个面形图标的时候，你对轮廓里面黑色部分的认知和对轮廓外白色认知是不一样的，这叫单侧型的轮廓，而不是双侧型的。当你看到线性图标的时候，类似于计算机的感觉，但是你看到面形图标的时候，是人的感觉。

文章来源：UXren

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

在我看来，界面设计的视觉层面主要可以分为三个维度来解析：信息传递、视觉美化、创意创新。

本文对几种常见的异常状态进行设计总结，其中介绍了不同异常状态的表现形式以及我们应展现的设计状态与规范。

异常状态多在特殊场景下出现，比如服务器异常、网络异常等，因为异常状态出现的概率是较低的，所以异常状态也常常会被忽略，等到实际碰到的时候才会意识到原来还有这种状态……

作为交互设计师，在完成主流程设计后，也应该考虑到异常场景。

从全局性出发，我们可以预先考虑到产品将会碰到的异常状态，针对不同的异常状态制定相应的设计规范，在后续的设计需求中直接复用即可。

下面对几种常见的异常状态进行设计总结。

一、网络异常

1. 原因

网络异常的原因主要有以下两种原因：

（1）网络连接权限

针对某App的网络连接权限可以通过手机进行设置，可设置为关闭应用使用数据，或者只允许应用在WLAN下使用，或者允许应用在WLAN与蜂窝网络下均可使用。

所以以下均属于网络异常的情况：

• 关闭应用使用数据，在流量或WI-FI环境下打开App
• 只允许应用在WI-FI下使用，但在流量环境下打开App

（2）网络连接状况

在断网（打开飞行模式）、弱网（手机信号差）的情况下， 也无法正常获取数据。

2. 处理方式

当网络异常时，用户点击进入新页面或在当前页进行操作时，App会通过异常状态缺省页或交互反馈来告知用户当前异常状态和解决方案。主要分为两种情况：

（1）当用户操作进入App新的页面时，常以缺省页的形式提醒用户当前网络异常。当应用检测到有可用网络时，缺省页将自动刷新页面内容。

比如网易云音乐在无网络连接下，进入新页面时，缺省页以简单的文案告知无网络的基础原因，通过查看详情来告知用户解决方案以及引导如何解决问题。

美团、腾讯视频等，引导用户检查网络权限设置和稍后再尝试刷新页面，稍后再试是因为弱网环境是暂时的，比如在地铁上高铁上或者某处手机信号接收较差的地方。

（2）当用户点击操作当前页面时，比如上拉加载页面、下拉刷新页面，点赞、关注等操作时，常以toast或对话框的形式提示用户。

比如网易云音乐，网络异常情况下下拉刷新或上拉加载页面均进行对话框提示，并引导用户检查网络权限设置。

美团外卖，无网络连接环境下，在我的订单页面进行评价操作，会进行toast提示。

二、流量警告

前面说完网络异常的设计规范，接下来就不得不提到流量警告的场景。

对于需要消耗大量流量的应用：

（1）在流量环境下进行需要消耗大流量的操作，比如播放/下载音视频等，页面会进行流量警告。比如网易云音乐在流量环境下打开MV。

（2）在WI-FI环境下切换到流量环境时通常应用会主动暂停进程并进行流量警告，并在页面上告知用户原因，让用户选择是否继续进程。

比如网易云音乐、爱奇艺、芒果TV、BiliBili等音视频娱乐App，在以上2种场景下，在视频画布上进行告知让用自己选择是否继续播放，同时也提供按钮入口让用户办理业务可免流量进行播放。其中，芒果TV和BiliBili的继续播放按钮还贴心地告知了用户将要消耗的流量值。

对以上两种场景的处理方式进行归纳，均为流量警告方式。

三、网络异常和流量警告适用场景快速查询

总结完网络异常和流量警告的设计规范，我们知道其中影响因素包含：网络连接权限、网络连接状况以及网络环境的变化，下面做一个小总结，以便快速查询。

在总结之前强调一下，网络权限设置是针对某App，连接Wi-Fi和流量是针对手机（所有应用）。以iOS为例，设置截图如下：

情况一：当前网络环境不变化

情况二：当前网络环境发生变化

针对以上情况，表现状态为“网络异常”，则参照网络异常的设计规范；表现状态为“流量警告”，则参照流量警告的设计规范。

四、服务器异常

服务器出错的情况是较少出现的，若出现服务器异常，其异常的时间也较为短暂。

一般不提示具体原因，处理方式为进入新页面的话则以缺省页（文案或是文案+插画）的形式进行提示+重试按钮，例如，进入小米金融贷页面时服务器出现异常，缺省页提示错误原因同时提供重试按钮。

点击操作的话则以toast或对话框的形式进行提示并重试，比如下图的段友app，服务器出错，刷新页面后进行toast提示；前段时间超级火的zao应用，朋友圈火爆传播，一度造成服务器访问过载，制作视频的时候应用给出了对话框提示。

五、加载失败

1. 原因

在数据加载过程中，导致异常的原因可能是：
1、网络异常导致加载失败

2、服务器请求数据失败导致加载失败

2. 处理方式

1、如果是因为网络异常导致加载失败，处理方式参照网络异常的设计规范。

2、如果是服务器请求数据失败，处理方式参照服务器异常的设计规范。

六、空状态

1. 原因

空状态就是指页面当前无内容，主要在以下场景下会出现空状态的情况：

1. 无权限，某些界面和功能会针对不同的角色设定不同的使用权限，无权限访问的页面会出现空状态的情况
2. 搜索无结果，搜索无相应结果会进行空状态提示
3. 初始内容为空，例如无浏览记录、无收藏、无购买记录、无订单记录、无下载记录等
4. 内容被删，若内容允许被清空，内容清空后会回到初始前的空状态

2. 处理方式

当前页面为空一般会提示用户当前页面为空状态，同时也可能会做适当的引导。

针对空状态的场景，主要采取以下几种设计原则：

（1）用户无权限

一般在B端产品中会碰到这种场景，通常来说，若用户无权限访问某功能模块的话，处理方式一般是将该功能模块对用户进行隐藏。

若有其他原因不能隐藏对应功能模块，处理方式为缺省页面（文案或是文案+插画），但文案要足够明确，告知无权限的用户该如何处理才能访问，一般是联系管理员添加权限。

（2）搜索无结果
搜索无结果的处理方式一般有两种处理方式，一种是缺省页面（文案或是文案+插画），另一种是在第一种的基础上加上相关推荐。具体用哪一种根据设计目标来决定。

比如网易云音乐搜索音乐无结果直接用文案告知。豆瓣搜索书影单无结果以插画+文案的形式展示结果。美团搜索不到相应的内容，应用直接推荐其他商家刺激用户购买。

另外也有应用会添加一些引导操作收集用户数据来优化搜索，比如微信读书找不到相关的数据，在页面的底部提供一个入口让用户填写书籍名称和作者，基于用户的反馈数据，微信读书在后续书城书目的收录工作中，就可以优先收录用户搜索率较高的书籍了，在优化搜索的同时也提供了用户反馈诉求的入口。

（3）初始内容为空

需要用户进行操作产生内容的页面，初始状态一般为空，和搜索无结果的处理方式类似，有2种处理方式，一种是缺省页面（文案或是文案+插画），另一种是在第一种的基础上加上快捷入口或推荐内容，其目的都是在于引导用户进行操作从而产生数据。具体用哪一种还是根据设计目标来决定。

直接用缺省页面告知方式上，例如网易云音乐，个人未发布相关动态，该动态页面直接用简短的文案告知用户暂无相关动态。

提供快捷入口上，比如微信读书，用户未加入书籍到书架时，进入书架页面，会有一句话文案引起用户共鸣，另外附上找书按钮方便用户快捷进入书城进行找书。

如果通过用户浏览记录和搜索行为等能够分析出用户的兴趣爱好，进行精准推送，那在空状态页面进行推荐引导也不乏是一种很好的尝试。比如网易云音乐、腾讯视频和美团均有采取该方式。

网易云音乐里头我从未购买或领取过数字专辑，该页面也是无数据的，网易云音乐在页面底部进行了数据专辑的推荐，具体的推荐算法不太清楚，我觉得可以是销售量较大的专辑，或者根据我个人的搜索和浏览记录进行相关推荐，最后通过埋点数据分析通过推荐引导购买是否提高了专辑购买率。

（4）内容被删除

页面内容被删除区分场景说明。

第一种是需要用户操作产生内容的页面，用户也可以通过删除将页面内容清空。

对于该场景，当页面内容被用户清空后，页面内容为空，处理方式和初始状态为空类似，以缺省页（文案或是文案+插画）的形式告知或在此基础上加上快捷入口或用户推荐。

比如清空网易云音乐中我的下载列表所有单曲、清空腾讯视频我的缓存视频，清空微信读书的书架，清空后的状态和初始状态是一致的。

另一种场景是的页面入口依然存在，但二级页面内容已经被删除了，二级空页面的设计处理方式是以缺省页（文案或是文案+插画）的形式告知，文案信息告知用户内容已被删除。

例如某微信订阅号的文章发布记录中的某篇文章已经被删除，点击进入二级页面后的提示如下：

七、功能重建

功能已上线，后期进行产品升级或迭代功能正在开发中，功能入口没有进行关闭还是允许用户访问，通常会在用户进入该页面之后进行对话对话框提示，告知原因。

总结

以上对几种常见异常状态的设计规范进行了总结，相对正常状态，异常状态较为少见，容易忽略，大家可以参照以上规范进行异常状态设计和优化调整。后面碰到其他异常状态，我会继续补充。

文章来源：人人都是产品经理

本文从什么是场景化、场景化设计的案例、为什么要基于场景化做设计和如何进行场景化设计 4 个方面为你完整梳理场景化设计思维的知识点。

什么是场景化设计

「场景」在百度百科里的定义是：戏剧、电影中的场面，泛指情景。情景又指：

• 感情与景色
• 情形、景象
• 环境：假设是在这个情景。

在戏剧或影视剧里，场景由人物，时空，事件（行为），环境（社会环境和自然环境）等要素构成。

互联网中的「场景」我把它分为两类，一类是为了实现用户目标而产生的场景，这种类型的场景需要明确用户目标，可能并不需要涵盖用户是怎么实现目标的。这类场景指根据用户的精准需求，为其提供精准服务，用明确的差异化服务给用户提供一个使用产品的动机。比如微博和微信，微信定位是熟人社交，微博则是陌生人社交。另一类是更加精细化的场景，这类场景需要明确用户操作流程。本文主要针对第二类场景展开。

场景化设计指基于对场景的分析，得出用户痛点与需求，结合前后场景预判用户目标，通过设计提高用户效率，给予用户惊喜与感动。

场景要素包括：4W+1H，即Who人、When时间、Where地点、What事件 、How环境，什么人，在什么时候，在什么地方，做了什么事情，所处的环境如何。其中 Where 又包括线上地点和线下地点，线下指现实中的定位，可以通过手机信号塔数据（GPS），Wifi 连接等获取；线上指用户所处的具体页面。

如：用户（who）早上上班（when）在地铁上（where）看电子书（what），地铁上人多嘈杂且操作不方便（how）。再比如用户（who）中午（when）在办公室里（where）点外卖（what），肚子很饿还不知道吃什么（how）。五要素就像口诀，帮助我们全面快速地描述场景。

有哪些场景化设计的例子

为帮助大家更好的理解场景化设计，这里基于上面提到的场景五要素举一些例子。

人是变量：用户不同，看到的信息不同。随着大数据和智能推荐技术的普及，越来越多的产品通过挖掘不同用户的喜好，生成用户画像，为每位用户提供「千人千面」的个性化内容。这样的产品大家都很熟悉，比如抖音，淘宝，微博，今日头条。

时间是变量：时间不同，看到的信息不同。比如小米 MIUI11 的效率革新功能「智能出行」，当在出行类 app 上定好行程后，MIUI11 就会自动将该行程记录在负一屏显示并同步日历，同时会根据出行的时间点，在通知栏实时更新提示：

再比如在 Google Maps 的 app 里开启导航时，如果目的地在预计到达时间还没有开门，或者快要/已经关门了的话，会有个弹窗提醒。

还有蚂蚁森林的页面会根据用户打开的时间进行变化（白天与夜晚模式）等等，这些都是充分考虑了场景中时间这一变量，才有如此暖心的设计。

地点是变量：同一个用户，在不同地点看到的信息不同。比如，大众点评APP当用户从常住地北京（where）定位成非常住地杭州（where）时，根据用户的上个场景与当前场景预测用户可能处于旅游状态，从而预测用户下一步的目标是在杭州「吃喝玩乐」，所以首页和攻略页的内容都发生了变化，为用户推荐旅行地的「吃喝玩乐」。

环境是变量：不同环境看到的信息不同，比如设备环境发生变化时：iOS13 中的备忘录页面，将「添加」按钮移到了右下角。为什么？因为手机屏幕越来越大，把按钮从右上角移到右下角，更有利于用户单手操作。

再比如：我们在驾驶环境下，要保持注意力集中，避免或减少分心驾驶导致的交通事故，所以基于驾驶环境，iOS11 上线了驾驶模式功能。当 iphone 与车内的 USB 或蓝牙连接，或 iphone 感知到人的移动速度时，iphone 就会自动进入驾驶模式，在该模式下，任何人发短信，我们都不会收到提示，对方会收到「我正在驾驶，稍后回复您」的自动回复。同时，iphone 会追加一条短信，提示对方只要回复「紧急」关键词，我们就能立刻接收到他们的消息提示。

为什么要基于场景做设计？

通过上面的举例想必大家已经了解到了基于场景做设计的好处。由于与用户的空间相隔，设计师无法感知用户在真实场景中使用产品的具体情况。通过场景化设计的方法，对用户使用场景进行分析与预期，可以帮助设计师找到用户与场景的内在联系，探索新的功能及交互方式。

怎么进行场景化设计

可以概括为以下四步。

1. 根据用户使用流程和行为路径穷尽场景

根据用户的使用流程和行为路径列举场景，这里以乘坐飞机（手机购票）为例，列举乘坐飞机涉及到的关键场景：

• 乘客（who）在航旅纵横页面（where）购票（what），航班多查找起来麻烦（how）。
• 乘客（who）起大早拖着疲惫的身体（how）在去往机场的路上（where），又遇到早高峰堵车，内心焦躁烦闷（how）。
• 起飞前（when）乘客（who）在机场（where）过安检（what），安检流程复杂，又检测出不符合登机规定的物品，让人心烦，手忙脚乱（how）。
• 起飞前（when），乘客（who）在候机口（where）候机（what），人多嘈杂，没有座位，还背着繁重的行李，还要时刻关注航班信息（how）。
• 起飞前40分钟（when），乘客（who）背着行李排着队（how），将登机牌（纸质/电子）和身份证出示给工作人员（what），工作人员（who）站在入口处（where）开始检查每位乘客的登机牌和身份证（what）。
• 检完票后（when），乘客（who）拿着身份证和登机牌，背着行李（how）乘坐摆渡车（what），摆渡车上嘈杂、拥挤（how）。
• 下摆渡车后（when），乘客拿出登机牌，背着行李（how）排队检票登机（what），工作人员（who）站在飞机前（where）开始检查每位乘客的登机牌（what）。
• 在起飞前30分钟（when），乘客（who）登机（what），背着行李在狭窄拥挤的通道里（how）寻找自己的座位（what）。找到座位后，将沉重的行李艰难的（how）放到上方的置物架上（what）。放好行李后，坐到自己的座位上（what），系好安全带（what），调节座椅靠背（what），等待飞机起飞（what）。
• 飞行过程中（when），气流导致飞机颠簸，乘客感到恐慌不适（how）。飞行过程中，乘客通过看电影，看书，睡觉打发时间（what）。
• 到达目的地（when），乘客（who）从高处置物架上（how）取下行李（what），拿着沉重的行李（how）排队下飞机（what）。此时乘客对目的地的天气等其他情况都不清楚。
• 乘客走出飞机到达航站楼后，在陌生的机场（where），跟着标牌指示艰难的找到自己的行李（what）。拿着行李跟着指示牌（how）困难的找出口（what）。

通过对关键场景的详细描述，我们将摸不着的用户场景像过电影一样在眼前一一呈现，有利于我们发现很多想不到或者通过调研得不到的细节，帮助我们发现用户真正的痛点与需求，洞察设计机会点。

2. 根据场景挖掘机会点

完成了第一步的场景列举，我们对流程中涉及的场景有了深刻的了解。下一步就是对场景的判断与分析，挖掘机会点。机会点挖掘有两个方向，一是通过分析当前场景存在的痛点和需求挖掘机会点，二是通过对用户下一步目标的预判寻找机会点。

通过分析当前场景存在的痛点和需求挖掘机会点

支付宝「朋友」界面，当用户输入某数值时，输入框上方会自动显示「给对方转账***元」按钮，用户可点击该按钮完成转账。这是因为经常有用户误以为输入数值发送即完成了转账，导致很多尴尬的状况出现。基于该场景下的痛点与需求，支付宝做了这个改进，贴心又好用。

iOS 系统在切换 APP 操作时，会将一些金融类 APP 虚化，以此来保证用户信息安全。这一设计细节也是充分考虑了用户在切换 APP 时的场景，解除了用户在公告场合担心被窥屏而泄露个人财富信息的担忧。

还有，当我们用耳机听音乐或播放视频时，拔下耳机，声音就会自动停掉，这样就算在安静的场合听音乐或者看视频，耳机不小心掉下来也不会发出尴尬的声音，这些都是充分考虑了用户当前使用时的场景，才做出如此贴心的设计。

通过对用户下一步目标的预判寻找机会点

第二个方法是通过对用户当前场景的分析，预判用户下一步的行为与目标，从而寻找当前场景的机会点。

如何预期用户下一步目标？有三个方法：

• 通过成组动作进行预期，如复制→粘贴，编辑→保存。
• 通过用户认知流程预判，如，浏览时反向滑动→结束浏览/回到顶部；再比如谷歌翻译在发音时，第一遍是正常语速，第二遍语速变慢，第三遍又恢复到常速。是不是很贴心，很符合用户期望？
• 通过产品使用流程进行预期，如订外卖→取外卖→评价。

在谷歌浏览器，当我们打开多个浏览窗口时，通常需要手动一个个地关闭标签页。chrome 充分考虑到了用户的使用场景，当用户关闭一个标签页时，预期用户会关闭下一个标签页，所以当关闭一个标签时，相邻标签会自动靠近，保证关闭的按钮始终位于鼠标的当前位置，这样用户就不用移动鼠标关闭下一个标签页，提高了用户的使用效率。

3. 机会点转化为落地的设计方案

在将机会点转化为具体的设计时，有两个可作为依据的设计原则，分别为，情感化。

实现有以下几个方法：

行动点前置

通过对用户下一目标的预测，将用户目标在当前场景展示，缩短操作流程，达到的目标。如淘宝首页的 tab 栏会根据每个用户的浏览记录预测用户目标，千人千面个性化展现，缩短了用户查找商品的路径，提高商品购买效率。

行动点置换

还是拿淘宝举例，淘宝底部的第一个导航，当用户滑动首页下方的商品流时，该按钮由首页变成置顶。

行动点相关提示

意思是根据用户当前目标或下一步目标进行相关的提示。如支付宝朋友页面，当上滑时，会出现「找人转账」的提示，点击进入朋友列表的纯净模式（去掉了服务通知等跟转账无用的列表），提高了用户寻找的效率。

再比如，网易邮箱，当邮件中提到附件，但是没有上传附件时，点击发送后，系统弹出下方的提示，解决了用户常常忘记添加附件的困扰。

突出行动点

根据用户当前目标或下一步目标突出关键按钮，帮助用户快速找到关键操作，吸引用户点击，降低了用户思考成本，提升效率。运用这个方法进行设计的例子太多了，比如淘宝的商品详情页用红色突出购买按钮等。

直接执行

根据用户当前目标或下一步目标直接执行。比如滴滴的扫一扫界面，当检测到光线较暗时，手电筒会自动打开，提高了扫一扫的效率。

情感化

唐纳德·诺曼在《情感化设计》中提到设计的三个层次，分别为：本能的设计，行为的设计，反思的设计。情感化设计是能打动人的，它能传递感情，勾起回忆，给人惊喜，情感化设计是帮助产品与用户之间建立情感的纽带，能强化用户对品牌的认知，培养对品牌的忠诚度。

情感化设计的步骤依次为：提炼影响产品的的情感指标→聚焦用户对产品的情感诉求→产出设计方案→验证设计价值（来源于周姮—知乎蚂蚁金服体验技术部的一次分享）。

在谷歌表格每列的开头依次输入「Pride」五个字母后，表格会变成彩虹样式。

网易云音乐在用户生日时会变成「生日快乐」的蛋糕样式，点击进去的音乐列表，第一首歌是生日歌，让人心里暖暖的。

4. 设计检验

最后一步就是设计方案的验证，设计方案能否帮助用户缩短操作流程？降低用户思考成本？帮助用户地完成任务？是否能打动用户给他们带来惊喜与温暖？通过可用性测试及上线后的数据反馈，帮助我们更好的优化设计方案。

总结

1. 什么是场景化设计？

场景五要素：4W+1H，即Who人、When时间、Where地点、What事件 、How环境，什么人，在什么时候，在什么地方，做了什么事情，所处的环境如何。

2. 有哪些场景化设计的例子？

3. 为什么要进行场景化设计？

4. 怎么进行场景化设计？

• 根据使用流程和行为路径穷尽场景
• 根据场景挖掘设计机会点
• 将机会点转化为落地的设计方案
• 设计检验