1. 主页 > 网络营销 >

状态可见设计原则(上):“异常状态”篇

系统应该让用户时刻清楚当前发生了什么事情,也就是快速的让用户了解自己处于何种状态、对过去发生、当前目标、以及对未来去向有所了解,一般的方法是在合适的时间给用户适当的反馈,防止用户使用出现错误。

状态可见设计原则(上):“异常状态”篇

我们知道,用户在和页面发生交互时会遇到各种状态,此时需要通过一定的界面反馈将信息反馈给用户,“反馈”是人机交互最重要的原则,无论是视觉(界面变化)、听觉(声音提醒)、触觉(震动),都可以帮助用户理解自己所在页面的状态及接下来会发生了什么、怎么做。

其实讨论“状态可见原则”就是讨论如何把“反馈”设计得更合理。下面我从产品常见的几大异常状态切入,讨论出现异常状态时对应的解决方案,让错误状态“可见”。

目前主要整理了以下常见9种异常,以后会不间断补充:

网络异常

空状态

服务器异常

流量模式警告

版本不兼容

操作失败

无权限

功能建设状态

内容删除、违规导致的查看异常

一、网络异常状态提示

当设备丢失网络连接时,导致网页/APP无法传输数据导致的异常状态。网络异常通常有两种触发场景:

自动触发:断网后,用户进入软件时,程序检测到无网络,自动提示

被动触发:断网时用户在软件内操作,系统被动触发无网络提醒

在无网络的情况下打开APP时页面需要刷新,此时需要提醒用户网络问题,常见的提醒方式有如下四种,分别适合于不同的应用场景:

状态可见设计原则(上):“异常状态”篇

对于这几种提示类型,除了本篇讨论的断网提示之外,还有很多的其它的应用场景,如操作提示、进度提醒、程序提醒等。我们来看下各种提示形式的特点及应用场景。

1. 缺省页面提示

在内容更新频繁的内容型产品(如视频、帖子动态类)中常用缺省页的形式表现无网络状态,直接明了,附有个性化插图及提示文案,同时带有【刷新】或者【解决方案】入口,引导用户点击查看原因解决问题。

状态可见设计原则(上):“异常状态”篇

2. tips提示

tips提示常见于页面顶部或者底部固定,更适用于于信息列表类页面,如图示的钉钉及微信等,采用tips的形式,样式上与列表形式更接近、和谐统一。点击后可以跳转系统设置或帮助页面。

状态可见设计原则(上):“异常状态”篇

3. toast提示类

toast(不带交互性)

状态可见设计原则(上):“异常状态”篇

toast提示的特点是弹出后自动消失(一般至少为1s),视觉层级高,能够吸引用户的注意力。消失后用户可以在软件中继续其它点击动作。但是由于存在时间短,容易被用户忽视,所以一般不会放置过多文字和重要信息。

此种方式很适合比较用于有不需要联网即可查看/使用部分功能内容(缓存)的产品中,比如网易云音乐,无网络时仍然可以选择听本地歌曲。

表现形式上,toast出现的位置以中、上为主,因为它的出现是在动作之后,所以位置不能偏离动作发生位置过多,以免造成视觉的跳跃感。

Snackbars(带交互性)

Material Design(Android)中有一个与常见Toast类似的提示–Snackbars,是一种针对操作的轻量级反馈机制,一般在页面下方浮出,在该页面层级最高,同样在一定时间后自动消失。

与toast最大的区别是允许用户交互,用户可以手动点击页面其它地方或手动滑动关闭snackbars,有时也会带有操作按钮,提供继续或撤销功能。

Snackbars使用原则:

状态可见设计原则(上):“异常状态”篇

Snackbars演示示例:

状态可见设计原则(上):“异常状态”篇

有兴趣的同学可以去matreia design官网了解snackbars https://www.material.io/components/snackbars/#anatomy

4. 模态弹窗(Alert)

状态可见设计原则(上):“异常状态”篇

模态弹窗打断用户的操作,用于提供重要信息或者要求用户决策。出现时会禁用所有的应用程序功能,并且一直显示在屏幕上,直到用户选择确认、关闭或已采取必要措施为止。但由于会打断用户,所以要谨慎使用。

模态弹窗的使用原则:

状态可见设计原则(上):“异常状态”篇

因此模态弹窗更适用于以下两种情景:

阻止应用正常运行的错误

需要特定用户任务,决策或确认的关键信息

网络异常反馈形式总结:

对于不同情景下的网络异常提示,我们需要区别考虑,选用最优的状态反馈方式,我认为有以下几点在之后的设计中可以运用:

对于一般的列表消息类的APP,采用相对简单、与整体列表和谐的tips提示,可以加入跳转逻辑,如引导用户查看帮助等

对于内容类产品,经常需要刷新页面读取最新动态内容的产品,采用toast提示,一般存在1-2s,需要注意不要放置过多文字

toast的延伸类型snackbars可以加入按钮、拖拽关闭等,比常规toast更具备交互性,可以用于向用户展示一些比基础的正确/错误反馈稍重要些的提示

除非重要信息提醒/紧急情况,慎用/不用模态弹窗

二、空状态提示

由于空状态没有实质性的页面内容,所以需要反馈给用户相关信息去添加或重新提交数据请求。

一般来说,我们说的空状态有两种触发场景:

1. 需要用户主动添加信息的空状态

状态可见设计原则(上):“异常状态”篇

此类空状态一般有时会通过文案提示引导用户创建内容,如上图中的“下厨房”APP,利用了俏皮文案加操作指引的方式引导用户创建菜谱。

设计形式上需要注意:遵循产品整体风格、文案+插图的形式比较常见美观。

2. 用户通过APP内的操作如搜索、删除等导致的空状态

状态可见设计原则(上):“异常状态”篇

这种被动空状态的情况更需要提示用户

为什么会出现空状态的情况

怎样做可以解决空状态

其它可能你需要的功能等

本文由摸索网(http://www.lnmosuo.com)发布,不代表摸索网立场,转载联系作者并注明出处:

联系我们

工作日:9:30-18:30,节假日休息