APP异常界面与Toast产品设计落地 | 案例分析

2017-08-06 08:33 来源:互联网早读课 设计 /中国移动

原标题：APP异常界面与Toast产品设计落地 | 案例分析

作者：KEVIN

来源：Kevin改变世界的点滴（ID：Kevingbsjddd）

编辑：Verna

异常界面与Toast

说起异常界面，这里不由想起在日常生活中我们所使用的APP带来的各种阻碍情况下的一些反馈提示。这里要说明异常界面里面可能会包含Toast。

但从Android和IOS的人机交互规范角度，国内的APP包括大厂（某宝）都会将Android和IOS进行统一，这是在有限的人力和开发资源上有限，交互设计师或产品经理只需要出一套说明文档，自然控件会出现在IOS中出现ANDROID中特有的提醒机制，但从产品落地来说，只要不影响用户实际操作体验，当然就没有问题。

异常界面的反馈提示是需要文案和BUTTON的合理搭配，能够起到降低用户心理对产品的抵触或失落，甚至能够有效的引导用户进入某个模块或功能。起到流量循环不停的节奏感。

关于网络链接失败，提醒用户重新链接，并给予用户指导进入网络设置。给予用户解决当前页面问题的方法和指导。相比什么都没有，或者给用户报错90001错误，请重试。是不是会好的更多？

1.异常页面与异常情况

页面异常在移动端总共有以下分类：

访问页面不存在的页面

操作失败的页面

拉取数据失败的页面

异常情况分为：

断网状态

服务器异常

操作失败

权限限制

网络切换（WIFI—移动数据—飞行模式）

字符限制

反馈提示

罗列出了以上的页面异常和异常情况之后，那么自己在落地产品设计中，如何去保证自己的异常页面发生时，能够正确的去给予用户一份贴心？

因此，我收集了来自大厂的一些产品截图，或许会帮助你能够落地相应的页面。注意其文案和ICON以及BUTTON的结合，提高转化。

页面异常：

案例1

案例2：

以上页面都有当前页面的错误情况说明，以及当前页面的走向按钮。

原型设计上：

操作失败页面：

案例3

案例4

以上案例有区分单个异常和异常说明的情况，其中在美的智能APP上我们可以看到其异常不仅有提示，并且给予TOAST显示当前的错误原因，可以检查理由。方便用户去恢复当前出现的错误

原型设计上：

拉取数据失败页面

案例1：

案例2：

以上分别是用两种方式，第一个是以页面文案提示；第二种是以TOAST来作为表示。最终需要说明该页面的错误原因，并且需要对用户的心情进行调理

断网状态：

案例1

案例2

2个案例说明，在断网情况下不仅仅需要给予用户当前网络提示，还需要给予用户一个操作入口，能够给予去修复当前状态的行为操作。

原型设计：

服务器异常：

案例1：

案例2：

同样的，服务器没有相应我们需要在文案中提示当前的状态，并且给予用户当前操作的权限。

原型设计：

操作失败：