编辑导读：在使用产品的过程中，用户有时会遇到无网络的状态。一般无网络场景多且复杂，会引导用户跳转至外部场景，因此很多人会忽略无网络状态的交互体验。但是，根据不同的无网络场景，向用户提供反馈是非常重要的。本文将对此进行分析，希望对你有帮助。
    image.png
    我们在设计 App 的过程中，经常会遇到异常场景，如无网络状态相关的情况，对许多设计师来说，这些场景往往都是“黑盒”，也很少会去注意甚至忽视这些场景。
    在写交互文档时，可能一笔带过，比如：“无网络连接”、“网络出问题了”。
    image.png
    线上对这种场景做简单处理的 App 很多，可能考虑到多种原因，比如无网络场景比较极端，用户不常遇到且大部分知道如何处理、无网络场景较多且较复杂、会引导用户跳转至外部场景等。但我们经常忽视的这些异常场景，往往可能是用户在体验产品中，感到“挫败感”比较强的场景。
    我们可以从 3 个方面分析无网络：

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

    首先，无网络的底层逻辑可以分为 3 个维度：无网络有哪些场景、如何反馈、如何引导操作。
    常见的无网络场景一般如下面几种情况：

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

    无网络的情况这么多，我们是否有必要区分呢？可以想想，假如只做简单提示，大部分用户看到的提示可能是“网络断开了”，而实际上用户可能只是开启了飞行模式，产品在信息准确性方面传达本身就不到位，并且也无法提供合适的反馈及帮助，无法快速帮助用户解决当前面临的实际问题，所以有必要帮助用户区分当前问题。
    我们该如何根据不同无网络场景向用户提供反馈呢？尽管无网络有多种细分情况，但是作为设计师，我们也需要考虑到普通用户是否能像我们一样区分不同的场景。普通用户只需要能够区分当前什么问题及怎么解决即可，向用户传达问题时，无需细致地让用户知道遇到的技术场景。
    举个例子：如“未连接移动网络或 WLAN 无网络连接”的场景，可以提示“网络未连接，请设置网络”；“开启飞行模式” 导致断网的场景，可以提示“无网络连接，请关闭飞行模式 ”。
    仅仅提供反馈信息，但是没有根据这些信息提供对应帮助，从体验层面，也许做的还不到位，我们是否还能提供交互的引导，如京东的处理方式是提供异常场景说明：
    image.png
    轻芒杂志的处理方式则更符合我们对引导体验的要求，通过反馈用户当前遇到的实际情况，并且提供正确的处理引导方式：
    image.png
    我们也可以提供按钮引导，比如假如用户开启了飞行模式，这时我们只需要引导用户点击【设置】跳转设置页，关闭飞行模式；遇到需要认证网络的情况，可以点击【认证】跳转网络认证页。
    image.png
    其实网络实际情况组合比上述列举的更复杂，但我们汇总了无网络、弱网、飞行模式、认证网络、网络权限等问题，从大的维度能帮助用户区分问题即可。
    其次，无网络的展示层面，常见的主要是空页面、缓存页面。其中空页面由于本身页面无内容，所以设计方面较为明确，常见的处理方式是引导图+描述文案+引导按钮。
    image.png
    而缓存页面，由于产品属性不一致，展示形式也较为丰富，需根据产品特点选择适合的形式，常见的有：
    长驻提醒：比如微信这种即时通讯类软件，由于最新消息在最上方，且用户在这里的习惯性操作而并非滑动列表向下浏览，所以把提示设计在页面上方固定，好处是可以让用户明确注意到当前网络状况，并提供对应解决方式。而微博则不同，用户使用微博最频繁的操作就是向下浏览，所以无网络提示会设计在信息流下方，与内容区结合，避免类似于 toast 的一次性提醒。
    image.png
    toast 提示：toast 在使用场景上则更加通用，不受限于页面内容，但是弊端是大部分 toast 往往只提示一次，或者用户再次拉动刷新时再次弹出。大部分 toast 未提供交互引导操作，也不利于引导用户快速发现问题、解决问题。
    image.png
    最后，无网络的 UI 设计层面，我们经常能看到会对这些场景做情感化的插画设计、文案设计，可以结合产品属性进行设计，在缓解用户枯燥及焦虑的同时，也提升产品趣味性及品牌特点。如美团外卖和袋鼠的形象结合、B 站和 2233 娘的形象结合。
    image.png
    总结：用户实际使用产品的场景，往往都很复杂。作为交互设计师，除了考虑正常的流程之外，更应该多考虑无网络等边界情况。对于 UI 设计师而言，可以考虑这些异常场景如何通过设计，缓解用户的焦躁情绪，思考如何能以更巧妙的方式帮助用户。