给予用户一份贴心|（数十份案例）APP异常界面与Toast产品设计落地

异常界面与Toast

提及异常界面，这里不禁想起在平常生活中咱们所使用的APP带来的各类阻碍状况下的一些反馈提示。这里要说明异常界面里面可能会包含Toast。

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

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

请点击此处输入图片描述

请点击此处输入图片描述

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

01异常页面与异常状况

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

• 访问页面不存在的页面

• 操做失败的页面

• 拉取数据失败的页面

异常状况分为：

• 断网状态

• 服务器异常

• 操做失败

• 权限限制

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

• 字符限制

• 反馈提示

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

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

页面异常：

案例1

请点击此处输入图片描述

案例2：

请点击此处输入图片描述

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

原型设计上：

请点击此处输入图片描述

操做失败页面：

案例3

请点击此处输入图片描述

案例4

请点击此处输入图片描述

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

原型设计上：

请点击此处输入图片描述

拉取数据失败页面

案例1：

案例2：

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

断网状态：

案例1

案例2

2个案例说明，在断网状况下不只仅须要给予用户当前网络提示，还须要给予用户一个操做入口，可以给予去修复当前状态的行为操做。

原型设计：

请点击此处输入图片描述

服务器异常：

案例1：

请点击此处输入图片描述

案例2：

请点击此处输入图片描述

一样的，服务器没有相应咱们须要在文案中提示当前的状态，而且给予用户当前操做的权限。

原型设计：

请点击此处输入图片描述

操做失败：

这里提到操做失败，首先须要梳理清楚当前用户的操做场景，根据产品不一样，其不一样产品的功能点也不一样，那么用户操做也不一样。这里我梳理了如下用户操做行为：

• 发送操做

• 评论操做

• 点赞操做

• 分享操做

• 收藏操做

• 拍照

• 录像

• 剪辑

• ......

因操做的场景不一样，产品落地中使用TOAST或页面提醒也不一样。这里举例为：

案例1：

案例2：

以上操做失败有操做失败提示，提高当前处于XX操做，而且可以给予用户再次尝试的入口。

权限限制：

案例1：

案例2：

权限限制基于在移动端中，须要给予用户说明的是当前权限的文案、操做选择

这里都是以TOAST或DIALOG进行提醒。不少会直接调用系统层的部件进行设计

原型设计：

网络切换：

案例1

网络切换这里须要说明以TOAST或DIALOG进行提示，在移动端中给予用户信息显示，让用户知道当前的网络切换状态在应用中已经识别，尤为是在须要耗流量的场景下，提醒用户显得尤其重要（直播、短视频等）

原型设计：

字符限制：

案例1

案例2

限制的提示须要区分场景，是发送场景、仍是编辑消息中的场景，若是是在内容编辑中，则在输入中进行提示。

原型设计：

反馈提示：

案例1：

案例2：

案例3：

请点击此处输入图片描述

案例4：

请点击此处输入图片描述

以上反馈为用户操做成功提高、操做提示反馈，但反馈提示每每是为了让知足人类的交互习惯，人与人之间的交流，最不能忍受的是：和别人说话，可是别人却没有一点反映，好像视而不见。这些提示都是在1秒左右会小时，短暂的出如今画面上。

原型设计：

请点击此处输入图片描述

最后要说的是，反馈须要避免过渡反馈、不要打断用户的意识流、避免遮挡用可能回去查看或目前操做的对象和内容。

02

贴心在文案

拿了几十份案例，梳理了异常界面的产品设计，但要想给予用户一份贴心，其最重要的是文案的结合。经过产品形态+内容的方式，达到转化、促活的目的。

首先咱们要清楚用户在移动端的操做状况，视频》动态》图》文字

用户在浏览新闻、文章内容都是以扫的速度来进行留来，所以一份好的文案必需要简短！

简短

写好文案后，尽可能的缩减。根据产品落地的形态，若是是TOAST那么文案尽量在10个字或15个字符之内。

区分字体

根据不一样的内容重要，进行区字体。好比以标题和正文来区分

请点击此处输入图片描述

给词汇排序

设计文案时，思考将最重要的词语呈如今屏幕上，以及不重要的内容看起来也不重要。

案例1：

请点击此处输入图片描述

你以为那个更好通俗易懂？

分部展现文案

这里特别适用于用户引导文案，每每一个页面不能把所有文案写上去，这时候能够根据操做步骤或引导用户的操做步骤将文案分开来。

请点击此处输入图片描述

利用高保真

这个是为了解决WORD或TXT文档中，文案的显示效果没法预测，致使文案可能太长或过短，达不到咱们想要的效果。

所以利用高保真的原型设计，能够更快的落地文案。

案例1：

2017年，让咱们继续前进！

与KEVIN一块儿在产品中学习交流QQ群：257051609

个人我的微信，欢迎添加请修改备注 

574319420 名称—地区——职位