编辑指南:用户在使用产品的过程中，有时会遇到没有网络的状态。一般没有网络的场景多且复杂，会导致用户跳转到外部场景，所以很多人会忽略没有网络状态的交互体验。但是根据不同的非网络场景，向用户提供反馈是非常重要的。本文将对此进行分析，希望对你有所帮助。

在设计App的过程中，我们经常会遇到不正常的场景，比如没有网络状态。对于很多设计师来说，这些场景往往是“黑箱”，他们很少关注甚至忽略。

写交互文档时，可能会简单提一下，比如“无网络连接”、“网络问题”。

网上有很多简单处理这类场景的应用，可能会考虑到各种原因，比如用户很少遇到且大多会处理的极端非网络场景，越来越复杂的非网络场景，会导致用户跳转到外部场景等。而这些我们经常忽略的异常场景，往往是用户在体验产品时感到“挫败”的场景。

我们可以从三个方面来分析没有网络:

底层逻辑：无网络会有多少种状态，我们能否根据不同状态给予用户不同的帮助。框架层面：根据数据加载的情况，可以分为空页面，缓存页面，其中缓存页面的更需要结合产品属性采用合适的提示方式。UI 层面：是否可以结合品牌特性进行情感化的设计，缓解用户焦虑感。

首先，没有网络的底层逻辑可以分为三个维度:没有网络有哪些场景，如何反馈，如何引导运营。

常见的非网络场景一般如下:

未连接移动网络或 WLAN —— 未连接网络导致的无网络场景，较为常见。移动网络或 WLAN 网络信号差 —— 经常出现在路上、地铁等场景，导致弱网情况。开启飞行模式 —— 打开飞行模式同时关了 WLAN，导致无网络。网络未认证 —— 场景出现在外面连错专用网络，没有认证，导致无网络。未开启移动数据权限 —— 常见于 iOS，未连接 WLAN，且用户自己禁止使用移动数据。

没有网络的案例那么多，需要区分吗？你想想，如果只给出一个简单的提示，大多数用户看到的提示可能是“网络断开”，但实际上用户可能只是启动了飞行模式，产品本身在信息准确性方面还不到位，无法提供适当的反馈和帮助，也无法快速帮助用户解决所面临的实际问题，所以有必要帮助用户区分当前的问题。

如何根据不同的非网络场景向用户提供反馈？虽然没有网络的细分情况很多，但作为设计师，我们也需要考虑普通用户是否能像我们一样区分不同的场景。普通用户只需要能够区分当前的问题是什么，如何解决。在向用户沟通问题时，不需要让用户仔细了解遇到的技术场景。

例如在“移动网络未连接或WLAN无网络连接”的场景下，可以提示“网络未连接，请设置网络”；当网络因“开启飞行模式”而断开时，可以提示“无网络连接，请关闭飞行模式”。

仅提供反馈信息，但不根据该信息提供相应的帮助。从经验层面来说，可能不到位。还能提供互动指导吗？比如JD。COM的处理方法是提供异常场景描述:

青芒杂志的处理方式更符合我们对于指导经验的要求。通过反馈用户目前遇到的实际情况，并提供正确的处理和指导方法:

我们还可以提供按钮指导。比如用户打开飞行模式，那么我们只需要引导用户点击【设置】跳转到设置页面，关闭飞行模式；如果是网络认证，可以点击【认证】跳转到网络认证页面。

实际上，实际网络条件的结合比上面列出的更复杂，但我们总结了无网络、弱网络、飞行模式、认证网络、网络权限等问题。，这可以帮助用户从较大的维度上区分问题。

其次，在没有网络的显示层面，空页面和缓存页面比较常见。空页面自身页面没有内容，所以设计比较清晰，常用的处理方法是导图+描述复制+导标按钮。

缓存页面，由于产品属性不一致，显示形式比较丰富，需要根据产品特点选择合适的形式。常见的有:

长期提醒:比如在微信这样的即时通讯软件中，由于最新消息在最上面，而用户在这里的习惯操作不是滑下列表，所以将提示设计固定在页面的最上面，这样的好处是用户可以清楚地注意到当前的网络情况，并提供相应的解决方案。然而微博不一样。用户使用微博最频繁的操作是向下浏览，因此不会在信息流下设计网络提示，并结合内容区，避免类似吐司的一次性提醒。

吐司提示:吐司在使用场景中比较通用，不受页面内容限制。但是缺点是大多数toast只提示一次，或者当用户再次拉动刷新时再次弹出。大部分toast不提供交互指导，不利于引导用户快速发现和解决问题。

最后，在没有网络的UI设计层面，我们经常可以看到，我们可以针对这些场景进行情感化的插画设计和文案设计，结合产品属性进行设计，可以缓解用户的厌烦和焦虑，同时提升产品的趣味性和品牌特色。比如美团外卖和袋鼠形象的结合，b站和2233娘形象的结合。

总结:用户实际使用产品的场景往往比较复杂。作为交互设计师，除了正常流程外，更要注意无网络等边界条件。对于UI设计师来说，可以考虑这些异常场景如何缓解用户的焦虑，如何更巧妙的帮助用户。