原标题:状态可见设计原则(上):“异常状态”篇
系统应该让用户时刻清楚当前发生了什么事情,也就是快速的让用户了解自己处于何种状态、对过去发生、当前目标、以及对未来去向有所了解,一般的方法是在合适的时间给用户适当的反馈,防止用户使用出现错误。
我们知道,用户在和页面发生交互时会遇到各种状态,此时需要通过一定的界面反馈将信息反馈给用户,“反馈”是人机交互最重要的原则,无论是视觉(界面变化)、听觉(声音提醒)、触觉(震动),都可以帮助用户理解自己所在页面的状态及接下来会发生了什么、怎么做。
其实讨论“状态可见原则”就是讨论如何把“反馈”设计得更合理。下面我从产品常见的几大异常状态切入,讨论出现异常状态时对应的解决方案,让错误状态“可见”。
目前主要整理了以下常见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)
模态弹窗打断用户的操作,用于提供重要信息或者要求用户决策。出现时会禁用所有的应用程序功能,并且一直显示在屏幕上,直到用户选择确认、关闭或已采取必要措施为止。但由于会打断用户,所以要谨慎使用。
模态弹窗的使用原则:
因此模态弹窗更适用于以下两种情景:
网络异常反馈形式总结:
由于空状态没有实质性的页面内容,所以需要反馈给用户相关信息去添加或重新提交数据请求。
一般来说,我们说的空状态有两种触发场景:
1. 需要用户主动添加信息的空状态
此类空状态一般有时会通过文案提示引导用户创建内容,如上图中的“下厨房”APP,利用了俏皮文案加操作指引的方式引导用户创建菜谱。
设计形式上需要注意:遵循产品整体风格、文案+插图的形式比较常见美观。
2. 用户通过APP内的操作如搜索、删除等导致的空状态
这种被动空状态的情况更需要提示用户
从上图实例中可以看出,功能系统较为完善的产品中,当有被动空状态出现时,往往会给用户其它选择避免当前的“尴尬”,而不是冷冰冰的空白页面,不知道的还以为正在搜索或者是卡了呢!
空状态反馈机制总结:
因为网络或者服务器问题导致的页面加载失败问题,同样需要反馈给用户,告知用户当前的状态问题,如最近因为疫情隔离的原因各种服务器崩溃的软件。(爱奇艺↑)
服务器异常导致的加载失败等问题可以采用同上文讨论的网络异常问题的解决方案,但仍然需要针对不同异常场景采用不同的设计方案:
需要注意的是提示的问题类型的文案描述要清晰,毕竟网络问题和服务器问题是不同的,避免误导用户进行无用的修复。如果我知道是因为服务器崩了而不是我网络的问题,那我可能就去微博看是不是上热搜了,而不是重启网络试试,对吧~
服务器异常反馈机制总结:
当处于流量模式下用户观看视频、下载文件、播放歌曲等会消耗大量流量,此时有必要警告用户目前处于流量模式,以免应用先消耗大量流量导致欠费问题。
针对该警告的提示形式有以下几种:
1. 播放区/加载区文字提示
主要适用于视频播放、直播类软件,将提示和播放区结合设计的好处是:用户原先进入播放页后紧接着就会关注视频播放区域,所以这种提示很符合应用场景,比较自然和直白,也能直接看到需要消耗多少流量。
2. 简单toast提示,在切换WiFi之前会继续消耗流量
常见于抖音等短视频软件,这种软件对用户的体验流畅度要求很高,单个短视频消耗流量并不多,而且在播放下个视频之前不需要提前缓存。
综合来看,采用toast的形式既不会过度干扰用户观看视频的体验,居中显示的提示也容易被用户注意到,可以在播放下一个短视频时可以及时更改流量模式。同时,遇到网络不稳定的情况,WIFI流量互切时,也不至于打断用户观看视频。
3. 模态弹窗提醒
现在软件一般都内置流量模式设置,用户可以依据自己的情况开启流量模式下的查看/下载功能,一般默认关闭流量模式下的下载功能。
以腾讯视频为例可以看到,点击下载时从开始的提示到设置过程,两次出现了模态弹窗提示,并辅以详细的文字说明。可见模态弹窗的形式比较适合在“下载”这种通过用户主动触发且流量消耗大的动作情景下使用,减少用户的错误点击,并且可以提供设置按钮入口。
4. 贴心的“已WiFi预加载”
在一些用户体验良好的产品中,我们还可以看到设计者在一些加载、广告页面添加的温馨提示比如“过程不消耗流量”、“已WiFi预加载”,这也是状态可见原则更细节贴心的应用。
流量模式警告反馈机制总结:
版本不兼容一般有两种触发情景:
1. 消息等内容类显示不兼容提示
我们使用低版产品收到高版本用户发来的消息,若此低版本产品不兼容此消息的显示样式,则应该触发该提示,提醒用户当前版本不兼容或者,一般以在消息旁边注明版本不兼容,点击该文字提示,弹出产品升级提示弹窗,引导用户升级版本。
2. 非消息类内容版本不兼容提示
长时间不更新版本过低,导致产品部分功能无法正常使用,此时提示用户立即更新版本。常见直接以模态弹窗的方式提醒用户更新版本比较合适,一是因为该功能已不可用,及时打断,提醒用户;二是弹窗内可配置下载更新按钮,引导用户前往更新。
六、操作失败
在操作过程中经常伴随着操作失败的情况,此时要及时告知用户失败的状态。一般以toast的形式进行提示。
七、无权限状态提示
无权限的情况在B端产品及办公类APP(如钉钉)常见,常见的处理方式有三种:
点击后给出提示,APP使用toast或者缺省页面比较合适,B端常用弹窗的形式提示用户
页面内直接隐藏无权限的功能或内容,虽然简单粗暴,但是容易给用户带来困扰,因为用户会相互比较,如果发现比别人少了什么,难免心里会打问号甚至误以为BUG。
用户无权限点击的功能置灰,不可点击。用户尝试点击后可以给toast或者tips提示,告知无权限。
八、功能建设状态
一般未开发上线的内容不会在页面内占位显示,但有一些用户期待较高的功能我认为可以配合如何运营的思路,在页面内相应区域提示用户“功能建设中,敬请期待哦”,可以增加用户的期待感和参与感。
九、内容删除、违规导致的查看异常 1. 内容删除导致的查看异常
此时想查看内容,页面需要分为两种情况考虑:
发布内容链接被转发后,如果删除了原链接内容,建议在之后转发出的链接中注明被转发的链接内容已删除,防止用户点开浪费时间。
A发布内容,B在信息流中浏览过,此时若A删除,B用户因为有缓存,仍可以看到该内容,当点击打开该内容链接时,出现删除提示。
2. 内容违规造成的查看异常
内容违规造成的异常比较特殊,一般在打开前用户是不知道违规的,所以打开后页面以缺省页的形式注明违规即可,同时附带违规法律及违规详情。
End…未完待续,下面可能会写正常状态相关的“状态可见”原则的应用总结。
作者:阿泽,公众号:阿泽设计笔记
本文由 @阿泽 原创发布于人人都是产品经理。未经许可,禁止转载
题图来自Unsplash,基于CC0协议游戏网
相关下载 |
嗨咯,各位小伙伴们大家好呀!我是你们灵狐姐。随着新版本的更新,全新的刀战玩法“占领刀战”也是终于跟大家见面了!相信大家都有第一时间去体验这种全新详情>>
原标题:金豪制药:与时间赛跑启动应急状态备货 2月27日,金豪制药员工在实验室中工作。新京报记者 李云琦 摄 为患者做核酸检测,目前是新型冠状病毒感详情>>
项目基本没动工。,在施工详情>>
导 读 【九游攻略】怪物猎人世界冰原DLC剑斧斧强化状态是怎样的?很多玩家对怪物猎人世界冰原DLC剑斧斧强化状态不是很了解,本文为大家带来怪物猎人世界冰原DLC剑斧斧强化状态详情>>
要根据自己的需求来看吧~疫情期间售楼处暂时关闭,拼房帝线上售楼部全面开启,让你在家躺着就能逛遍各楼盘! 可以关注[拼房帝]公众号,回复[北京]添加小助理微信,随时在线解答购房疑详情>>
是的,考虑疫情严重。您可以线上直接咨询,您好,因为疫情严重,为了配合政府做好疫情防控工作,也为了保证您的身体健康,目前空港新都孔雀城售楼处暂停接待。您可以通过微信公众号和详情>>
大家好,欢迎阅读234游戏的小编带来的游戏资讯,上一篇小编分享了一下《战棋三国2手游特色玩法详解》的相关讯息,这一篇小编将跟大家分享一下《崩坏3中如何触发麻痹状态?》的相关详情>>
原标题:同样是85后辣妈,赵丽颖杨幂同框,这一次她赢得彻底 本文由明星粉丝团作者芦笙原创,未经允许不得转载 很多人说现在越来越能够看到很多有生之年详情>>
原标题:被李英爱们的状态吓到了,怎么可以这么美 前不久,韩国某在线调查数据网站以14周岁以上的大约2万7000名会员为对象进行了“童颜终结者明星”问详情>>
相信很多玩家都在看《魂器学院》的时候看到了主播的页面上有一个欧气加成的buff,那么这个buff怎么才能获得呢?玩家如何才能获得欧气加成呢?这个欧气加成有什么用呢?一起来看看吧详情>>
英雄联盟官方其实是有大区服务器状态的查询页面的,很多玩家还不清楚怎么查询各个服务器的状态如何,下面就来为大家分享一下英雄联盟全服务器状态查询详情>>
原标题:HERO输给RW侠 久诚被喷又混又菜?状态成谜引玩家争议 在昨晚的KPL秋季赛中,迎来久诚回归的HERO战队被RW侠让一追三翻盘。这场战败引发了玩家热详情>>
在北京时间10月15日21:00,迎来了2019年《英雄联盟》全球总决赛小组赛的第四个比赛日,当天有六场BO1的比赛。小组赛第一轮的最后一个比赛日即将到来,RNG和FNC迎来了正面交锋,详情>>
原标题:rookie采访谈打野,宁王状态还不如乐言!打野状态好点可以冲冠! 近期iG的比赛算是让很多iG的粉丝看的心血澎湃,尤其是Rookir和TheShy的状态更是让详情>>
原标题:郑爽状态爆表,张恒比张翰、胡彦斌强在哪儿 说郑爽是一个“奇女子”一点也不为过,10年前未成年就出演《一起来看流星雨》,一炮走红,正面看脸型线详情>>
虽然现在游戏女玩家已经越来越多,但是在大量的男玩家中,女玩家还是比较少。我们在看很多的女主播或者女玩家的宣传照或者直播的时候都会发现女玩家们都会妆详情>>
今天SKT以2:0战胜了KZ,获得了八连胜,积分也来到第三名。下面是对SKT打野选手Clid的采访内容。 Q:获得胜利的感想是? Clid:对现在的竞技状详情>>
《了不起的修仙模拟器》中灵植的煞性状态是一种有利有弊的状态,很多玩家都不太清楚灵植的煞性状态有什么用,今天小编就给大家带来玩家“Zz鳕鱼桑”分享的灵植煞性状态作用介详情>>
《了不起的修仙模拟器》中的灵植有两个状态,一个是灵性状态,一个煞性状态,很多玩家都不太清楚灵植煞性状态的效果是什么,今天小编就给大家带来玩家“Zz鳕鱼桑”分享的灵植煞性详情>>
一个人最好的生活状态 详情>>
微信收不到消息怎么办?步骤分解1确认已开启通知功能:1)微信应用内设置,我-设置-新消息提醒。22)系统设置,全部设置-隐私和安全-通知中心-微信的权限。3确认系统休眠时保持联网状态详情>>
微信怎么发状态,很多朋友都喜欢用微信,喜欢用微信发状态,发图片,还有人想发纯文字的状态,那么微信怎么发状态呢,在微信朋友圈哪里有一个按钮可以发状态,可以发纯文字的。下详情>>
微信再来消息的时候不能及时的查看,如果你想第一时间看到的话可以设置微信消息在状态栏显示。下面的经验里面冰冰就和大家分享一下微信来消息怎么在状态栏显示的方法。微信设详情>>
LOL英雄联盟游戏界面上的状态栏,可以显示玩家当前的状态。其中有客户端的状态栏和游戏界面英雄技能属性状态栏。那么要怎么修改这些状态栏呢?一:客户端状态栏修改1在客户端右侧详情>>
有的时候领导发给我们的文件可能是他在审阅状态下修改的,方便我们查看修改内容,但是我们最好要用下面方法修改成最终状态攻略对象电脑Word步骤分解1打开对应的文件,如图发现标详情>>
苹果手机在锁屏状态下就能看到微信的提示消息,是不是感觉用起来非常方便呢,但是安卓机也能,现在本小编教你用安卓手机怎么设置,让你的微信使用起来更加方便哟,当然,本小编用的是HU详情>>
原标题:G2今年状态如何?别的不说竟然先开始调戏Faker了! 今年MSI入围赛已经打了有一段时间了,不过毕竟实力放 详情>>
DNF安装wegame后显示无网络连接状态解决办法 复杂版 首先进入安全模式,具体操作可以百度 win10的话可以直接在Windows 的logo那个开机界面的时候直接按重启,笔记本就关机... 详情>>
Game234问答中心有网友提出了一个比较有代表性的问题【魔域什么是XP回复状态?】,【魔域什么是XP回复状态?】具体问题如下:魔域什么是XP回复状态?就是12星座卡的那个任务,白详情>>
Game234问答中心有网友提出了一个比较有代表性的问题【玩英雄联盟状态不好的时候,当天还能找到状态吗,...】,【玩英雄联盟状态不好的时候,当天还能找到状态吗,...】具体问题如下:打了两局,一局被详情>>
Game234问答中心有网友提出了一个比较有代表性的问题【DOTA2游戏个人状态怎么设置?】,【DOTA2游戏个人状态怎么设置?】具体问题如下:我有个好友没事就显示洗澡中没事就显示吃饭中,这个状详情>>
Game234问答中心有网友提出了一个比较有代表性的问题【dota2怎么改状态】,【dota2怎么改状态】具体问题如下:就是自己名称底下的那个状态,我看到别人有离开空闲什么的。怎么做到的?展开小编觉详情>>
自从3月22日晚上IG老板和RNG粉丝的一波混战之后,双方粉丝之间的矛盾就日益升级。这其中受到牵连的还有UZI的老队友无状态,无状态也遭到了很多RNG粉丝的怒喷,主要是因为在王思聪乱喷UZI和姿态的时详情>>
鬼泣5无限魔人状态怎么解锁?无限魔人如何关详情>>
王者荣耀霸体状态什么意思?许多英雄都会产生霸体效果,触发霸体会发生什么呢?一起来了解一下吧。王者荣耀霸体状态什么意思霸体就是王者荣耀中一种可以免控的状态详情>>