文章目录

• 一、网络异常状态提示
  • 1.默认页面提示
  • 2.小贴士小贴士
  • 3.吐司提示类
  • 4.模式弹出窗口(警报)
• 第二，空状态提示
  • 1.需要用户主动添加信息的空状态。
  • 2.APP中操作导致的空状态，比如搜索、删除。
• 三、服务器异常状态提示
• 四。交通模式警告状态提示
  • 1.播放区/加载区的文本提示
  • 2.简单的吐司提示，会在切换WiFi前继续消耗流量。
  • 3.模态弹出提醒
  • 4.贴心的“WiFi预装”
• 动词 （verb的缩写）版本不兼容状态提示
  • 1.邮件和其他内容类别显示不兼容的提示。
  • 2.非消息内容版本不兼容提示
• 不及物动词操作失败。
• 七、无权限状态提示
• 八。功能结构的状态
• 九。内容删除和违规导致的非正常观看
  • 1.内容删除导致观看异常
  • 2.内容违规导致的异常观看

系统要让用户时刻知道当前发生的事情，也就是快速让用户知道自己处于什么状态，过去发生了什么，目标是什么，未来要做什么。一般的方法是在适当的时候给用户适当的反馈，防止用户犯错。

我们知道，用户在与页面交互时会遇到各种状态。这时候就需要通过一定的界面反馈把信息反馈给用户。“反馈”是人机交互最重要的原则。无论是视觉(界面变化)，听觉(声音提醒)，还是触觉(震动)，都可以帮助用户了解自己页面的状态，下一步会发生什么，怎么做。

讨论“状态可见性原理”其实就是讨论如何更合理地设计“反馈”。下面，我就从产品常见的几种异常状态入手，讨论出现异常状态时相应的解决方法，让错误状态“可见”。

目前已经整理出以下9个常见异常，以后会不断补充:

网络异常空状态服务器异常流量模式警告版本不兼容操作失败无权限功能建设状态内容删除、违规导致的查看异常

一、网络异常状态提示

当设备失去网络连接时，网页/APP无法传输数据，导致异常状态。网络异常通常有两种触发场景:

自动触发：断网后，用户进入软件时，程序检测到无网络，自动提示被动触发：断网时用户在软件内操作，系统被动触发无网络提醒

在没有网络的情况下打开APP，需要刷新页面。这时候就需要提醒用户网络问题了。常见的提醒方式有四种，分别适用于不同的应用场景:

对于这几类提示，除了本文讨论的断开提示，还有很多其他的应用场景，比如操作提示、进度提示、程序提示等等。我们来看看各种提示形式的特点和应用场景。

1.默认页面提示

在内容更新频繁的内容型产品(如视频、贴吧动态类)中，经常使用默认页面显示无网状态，直接明了，有个性化的插图和提示文案，同时配有【刷新】或【解决方案】条目，引导用户点击查看原因，解决问题。

2.小贴士小贴士

提示提示通常固定在页面的顶部或底部，比较适合信息列表页面，比如钉钉等。它们是以提示的形式出现的，风格与列表形式更加紧密和谐。单击跳转到系统设置或帮助页面。

3.吐司提示类

吐司(无互动)

吐司提示的特点是弹出后自动消失(一般至少1s)，视觉层次高，能引起用户注意。消失后，用户可以继续软件中的其他点击动作。但由于其存在时间较短，容易被用户忽略，一般不需要放置过多的文字和重要信息。

这种方式非常适合不需要联网就可以查看/使用一些功能性内容(缓存)的产品，比如网易云音乐，在没有网络的情况下仍然可以选择听本地歌曲。

形式上，吐司出现的位置主要是中上，因为是在动作之后出现的，所以位置不要偏离动作发生的位置太多，以免造成视觉上的跳跃感。

小吃店(带互动功能)

Material (Android)有一个类似于常见的Toast -Snackbars的提示，是一个轻量级的操作反馈机制。它通常出现在页面的底部，在页面上的级别最高，在一定时间后自动消失。

与toast最大的不同是，它允许用户之间进行交互。用户可以手动单击页面的其他部分或手动滑动来关闭snackbars。有时，它们也有操作按钮来提供继续或取消的功能。

Snackbars使用原则:

Snackbars演示示例:

感兴趣的同学可以去matreia design官网了解一下snack bars https://www.material.io/components/snackbars/#anatomy.

4.模式弹出窗口(警报)

模态弹出窗口中断用户的操作，用于提供重要信息或要求用户做出决定。出现时，所有应用功能将被禁用并显示在屏幕上，直到用户选择确认、关闭或采取必要措施。但是，应该谨慎使用，因为它会打断用户。

使用模态弹出窗口的原理:

因此，模态弹出窗口更适合以下两种情况:

阻止应用正常运行的错误需要特定用户任务，决策或确认的关键信息

网络异常反馈表汇总:

对于不同情景下的网络异常提示，我们需要区别考虑，选用最优的状态反馈方式，我认为有以下几点在之后的设计中可以运用：对于一般的列表消息类的APP，采用相对简单、与整体列表和谐的tips提示，可以加入跳转逻辑，如引导用户查看帮助等对于内容类产品，经常需要刷新页面读取最新动态内容的产品，采用toast提示，一般存在1-2s，需要注意不要放置过多文字toast的延伸类型snackbars可以加入按钮、拖拽关闭等，比常规toast更具备交互性，可以用于向用户展示一些比基础的正确/错误反馈稍重要些的提示除非重要信息提醒/紧急情况，慎用/不用模态弹窗

第二，空状态提示

因为空状态没有实质性的页面内容，所以需要向用户反馈相关信息来添加或重新提交数据请求。

一般来说，对于空状态有两种触发场景:

1.需要用户主动添加信息的空状态。

这种空状态通常有时候会通过文案提示引导用户创作内容。比如上图中的“下厨房”APP，用俏皮的文案加上操作说明，引导用户创作菜谱。

设计形式要注意:遵循产品整体风格，文案插画形式，共同美观。

2.APP中操作导致的空状态，比如搜索、删除。

这种被动空状态需要提示用户。

为什么会出现空状态的情况怎样做可以解决空状态其它可能你需要的功能等

从上面的例子可以看出，当功能系统相对完善的产品出现被动空状态时，往往会给用户其他的选择来避免目前的“尴尬”而不是冷冰冰的空白页，不知道的人会以为是在搜索或者是被卡住了！

空状态反馈机制概述:

注意区分两种情境下的空状态空状态的文案和插图可以根据产品风格自由发挥，能帮到用户当然更好当出现空状态时，可以提供给用户其它相似/推荐内容，使部分用户的体验更为顺滑，而不是断断续续的体验。

三、服务器异常状态提示

网络或服务器问题导致的页面加载失败也需要反馈给用户，告知用户当前的状态问题，比如最近各种服务器因疫情隔离而崩溃的软件。(爱奇艺↑)

由服务器异常导致的负载故障等问题可以通过与上述网络异常相同的解决方案来解决，但是对于不同的异常情况，仍然需要不同的设计方案:

如果是简单的服务器满员等问题导致页面加载失败，可以用toast或缺省页面的形式提醒用户。如果有详细告知用户服务器的问题的需要（如金融交易相关），为避免造成用户恐慌，可以采深圳生活网用承载信息更多的模态弹窗提示，吸引用户的注意力，把情况说明白。

需要注意的是，题型的文案描述要清晰。毕竟网络问题和服务器问题不一样，以免误导用户做无用的修复。如果我知道是服务器崩溃而不是我网络的问题，那我可能会去微博看看是不是做了热搜而不是尝试重启网络，对吧~

服务器异常反馈机制概述:

注意区分不同情境下的异常及严重程度采用最简单直接的提示形式，考虑解释不清是否会对用户造成恐慌或更严重的后果？文案描述要清晰准确，避免用户为了解决问题做无用操作

四。交通模式警告状态提示

用户在流量模式下，看视频、下载文件、播放歌曲等。会消耗大量流量。这时候就要提醒用户当前处于流量模式，避免应用先消耗大量流量而导致欠费的问题。

此警告有几种类型的提示:

1.播放区/加载区的文本提示

主要适用于视频播放和直播软件。把提示和播放区结合起来的好处是:用户进入播放页面后会立刻播放视频播放区，所以这个提示符合应用场景，更加自然直观，也可以直接看到需要消耗多少流量。

2.简单的吐司提示，会在切换WiFi前继续消耗流量。

常见于Tik Tok等短视频软件，这类软件对用户体验流畅度要求很高，单个短视频并不会消耗太多流量，播放下一个视频之前也不需要提前缓存。

总体来说，吐司的使用不会过度干扰用户观看视频的体验，中央显示的提示也很容易被用户注意到，以便在下一个短视频播放时及时改变流量模式。同时，在网络不稳定的情况下，WIFI流量互切时，也不会中断用户观看视频。

3.模态弹出提醒

现在的软件深圳生活网一般都内置了流量模式设置。用户可以根据自身情况开启流量模式下的查看/下载功能，一般默认关闭流量模式下的下载功能。

以腾讯视频为例，我们可以看到从下载开始到设置过程，有两个模态的弹出提示，辅以详细的文字说明。可以看出，模态弹窗更适合用在“下载”的动作场景，由用户主动触发，消耗大量流量，减少用户的错误点击，可以提供设置按钮的入口。

4.贴心的“WiFi预装”

在一些用户体验较好的产品中，我们还可以看到设计师在一些加载和广告页面中添加的温馨提示，比如“进程不消耗流量”、“WiFi预装”等，这也是对状态可见性原则更细致、更贴心的应用。

交通预警反馈机制综述:

结合应用本身的特点采取合适的反馈形式，如有的不需要强制打断，有的必须打断用户，让用户确认。总体设计原则是不过分打扰用户，体验良好。挖掘用户可能会认为消耗流量但并不会消耗流量的细节页面，比如进度加载、广告等，通过提示告知用户。这不仅是产品状态可见，也是让用户心理状态更“放心”的可见。

动词 （verb的缩写）版本不兼容状态提示

版本不兼容通常有两种触发情形:

1.邮件和其他内容类别显示不兼容的提示。

我们使用低版本产品接收来自高版本用户的消息。如果深圳生活网的低版本产品与该消息的显示风格不兼容，则触发该提示，提醒用户当前版本不兼容。或者，通常，版本与消息不兼容。点击该文本提示，弹出产品升级提示窗口，指导用户升级版本。

2.非消息内容版本不兼容提示

长期不更新的版本太低，导致产品部分功能无法正常使用。此时，系统会提示用户立即更新版本。通常用模态弹出的方式直接提醒用户更新版本更合适。一是因为该功能已经不可用，及时中断提醒用户；第二，可以在弹出窗口中配置下载更新按钮，引导用户更新。

不及物动词操作失败。

在操作过程中，往往伴随着操作失败。此时，应及时告知用户故障状态。通常以敬酒的形式提示。

七、无权限状态提示

无权限在B端产品和办公app(如钉钉)中很常见，常见的处理方式有三种:

单击以给出提示。APP用toast或者默认页面比较合适。B端通常以弹窗的形式提示用户。

未经许可的功能或内容直接隐藏在页面中。虽然简单粗暴，但是很容易给用户带来困扰，因为用户会互相比较。如果他们发现的东西比别人少，必然会打问号，甚至误认为是bug。

用户没有权限点击的功能是灰显的，不能点击。用户尝试点击后，可以给toast或tips一个提示，告知他们没有权限。

八。功能结构的状态

未开发的在线内容一般不会显示在页面中，但部分用户对功能的期待较高。我觉得可以本着如何操作的思路，在页面相应区域提示用户“敬请期待功能建设”，可以增加用户的期待感和参与感。

九。内容删除和违规导致的非正常观看

1.内容删除导致观看异常

要查看此时的内容，需要将页面分为两种情况:

发布的内容链接转发后，如果删除了原链接内容，建议在后面的转发链接中注明转发的链接内容已被删除，防止用户点击浪费时间。

a发布内容，B在信息流中浏览。此时，如果A被删除，B用户由于缓存的原因，仍然可以看到内容。单击链接打开内容时，会出现删除提示。

2.内容违规导致的异常观看

内容违规导致的异常比较特殊。一般用户在打开之前是不知道违规的，所以打开之后的页面可以以默认页面的形式注明违规，有违规的法律和细节。

End…未完待续，下面可能会写出与正常状态相关的“状态可见性”原理的应用总结。

作者:阿泽，微信官方账号:阿泽的设计笔记

本文由@ Aze原创发布。每个人都是产品经理。未经许可，禁止转载。

图片来自Unsplash，基于CC0协议。