你一定要知道的无网络状态提示

前段时间在做项目的时候，开发提醒我断网状态的提示还没有做，并给我指出了明确的设计方向（他说“你断网看一下微信的断网状态是什么，做个一样的就行”）。当时我就想无网状态的样式有很多，微信无网状态的样式是适合我们产品的吗？带着这个疑问，我研究总结了不同的相关样式发现，产品目的不同所选择无网状态的样式也不同。所以在用户断网时，产品通常希望做到以下几个方面来帮助用户解决问题：

01：以解决问题为目的

02：以减少对用户的干扰为目的

03：以缓解用户的情绪为目的

04：以警示用户为目的

当用户遇到网络问题时，为了避免有一部分用户不知道问题出现的原因，我们可以采用警告框的设计样式窗直接给出解决方案 ，另一方面也节省了用户的操作步骤。需要注意的是对话框一定要慎用，一定要是用户非知道不可，或者是用户必须亲自做决策的内容才使用。否则，选用 Toast 等其他较弱的反馈方式。

如上图，以小黄车与BOSS直聘为例。它们都以警告框的形式设计，通过文字提示网络出现问题，同时以按钮的形式引导用户点击设置网络，从而解决网络问题。

为了避免对用户施加压力，断网提示会设计成Toast的形式，Toast提示不会像警告框那样强制要求用户必须进行相关操作，出现的方式相对温和，短时间内出现后既会消失，不会给用户带来过多干扰。

如上图，以飞猪和豆瓣为例。Toast提示常出现在页面的中部与顶部，底部较少出现。设计样式常以黑色透明度为背景，白色字为内容，浮与页面上方，无法对其操作，出现一段时间后便会消失。

断网情况下，用户的情绪一般是比较着急的，这时候反复出现的提示框会加重用户的焦虑感，这时可以加入情感类或品牌形象插画设计提示断网状态，增加页面的趣味性，从而缓解用户的焦虑情绪。其多用在电商类或以销售为主的产品上使用。

如上图，以咸鱼和饿了么为例，断网状态下它采用了撇嘴的品牌形象和送餐员无奈的背影，同时以文字进行无网络提示，增加了页面的趣味性以达到缓解用户情绪的目的。

浮层通知的设计方式会一直提醒用户处在断网状态具有强提示功能，会对用户造成一定的压力，直至问题解决才会消失但是提示明显，多用在社交类产品中，部分电商产品也有使用。

如上图，以京东和微信为例。这种设计方式能引起用户的注意但又不打断当前页面的操作，常出现在页面上方，文字内容一般提示网络连接失败，支持点击，点击后会出现相关的问题解决方案（如下图）。

不同的无网状态设计形式所传递给用户的感受也是不相同的，我们可以根据产品不同目的采用不同的设计方式。当产品是以解决问题为目的时，一般会采用警告框的设计方式，通过文字提示与按钮辅助用户操作解决问题。当产品是以减少对用户的干扰为目的时，一般会采用Toast的设计形式，它对用户的干扰较小。当产品是以缓解用户的情绪为目的时，一般会采用情感类或品牌形象插画设计，常用在电商或以销售为主的产品上使用。当产品以警示用户为目的时，一般会采用浮层通知的设计形式，会对用户造成一定压力，但却能起到时刻提醒用户的作用。

参考：

《网络状态提示思考》http://www.ui.cn/detail/177567.html

《理性的选择 ，移动端四组件的使用指南》http://www.ui.cn/detail/400850.html