体验提升设计清单:加载、刷新和缺省页

体验提升设计清单:加载、刷新和缺省页

产品中某些模块,不用于满足业务或功能,但因为触发场景多、操作高频、性能相关,是每个产品必须有设计。基本业务需求满足之后,优化这些模块,可提升体验,增加操作效率。以下总结加载、刷新、缺省页的常用设计模式,亦可作为自检清单。

刷新

刷新场景

  • 用户主动试探是否新内容
  • 确定有新内容(比如微博顶部提示),按引导操作获取
  • 网络异常,按引导操作刷新

是否提示内容更新

  • 无更新提示:产品打开频率高,内容会经常更新、不按时间顺序浏览内容、或不依靠feed流更新推送,比如新闻类产品
  • 有更新提示:产品打开频率低,无法预知是否有新内容、重视feed流更新推送;比如FM类产品

控件触发位置

  • 页面下拉时顶端触发
  • 空数据页面点击按钮或轻触屏幕
  • hud或浮层提示点击
  • 自动刷新,比如微信朋友圈,先读取缓存内容,自动请求服务器,左上角七彩转盘加载动效

不同类型UI,分别适用哪种触发刷新的方式?刷新控件展示在UI上,UI决定刷新位置,位置决定触发方式

  • 列表、栅格列表、卡片、内容流、瀑布流:下拉或上滑刷新
  • 系统插件、地图应用:因为没有排序方向、新内容生成位置不明确,用户无法凭直觉做出手势触发刷新;适合自动刷新
  • 个人中心、设置:内容并不经常更新,无需主动操作;自动更新
  • 更新频率高的内容:股票、财经类,最好实时自动更新
  • 网络异常缺省页:引导用户主动做出手势,操作刷新

刷新样式

  • 导航栏:列表存在本地数据、内容页不为空,用户注意力集中在已有内容,无需突出刷新过程,所以loading控件放在顶部导航栏,比如钉钉、微信
  • 进度条:页面包裹H5时刷新,内置浏览器标准加载方式
  • toast:常见于屏幕中间转圈,因为某些页面有其他操作项,防止继续操作导致数据丢失,所以使用toast提示,防止误操作
  • 下拉刷新:往往在顶部下拉出的空间加上动效,往往和刷新成功后提示一起使用,保证了用户保持注意本地数据,也充分感知有新内容加载好
  • 整屏动效刷新:整屏为空,中央加载动效,一般取产品主色为背景。可以从三个方向考虑UI动效
    • 品牌,产品的宗旨或目标或口号
    • 引起共鸣占位图和文案
    • 直接告诉用户正在发生什么

加载

和刷新类似的是加载,在此定义为首次进入某个页面或触发控件,请求服务器的状态。加载样式有以下几种:

  • 导航栏:同刷新样式中的导航栏
  • 进度条:同刷新样式中的进度条
  • toast:同刷新样式中的toast
  • 整屏动效加载:同刷新样式的整屏动效

除了和刷新一样的样式,加载状态还有两种样式可用:

  • Skeleton: 如facebook,先加载出页面框架,再展示数据内容。
    • 有研究发现Skeleton让人感觉加载速度更快,即使加载时间没有变化
    • 不是每个页面都要这种效果,如果打开频度不高,或不请求网络数据,不需要此加载效果
  • Shimmer:翻译成微光,动效和Skeleton类似,只是整屏闪烁,更重口味

根据不同界面,加载机制和样式可以不同,比如个人中心页面可以自动刷新甚至不刷新,列表页面可以下拉刷新,并且在下拉出的屏幕空间添加占位图/动效,有很多发挥空间,以突出品牌形象。

  1. 无本地框架的页面,整个页面需要请求数据:适合整屏动效加载、比如白屏中间转圈或占位动画
  2. 有本地框架或数据缓存,如个人中心、聊天列表:适合导航栏加载方式,因为只有部分数据需要请求网络,所以优先展示框架或本地数据,加载占位的面积小,退居次要关注点,不覆盖已有页面
  3. 当前整屏数据已加载,新操作请求服务器,但新数据还未覆盖原有页面:适合toast加载,让用户感知页面正在切换

同一个页面,加载和刷新可以用两种样式;比如微信聊天列表,加载控件在导航栏,刷新控件是实时自动;简书加载用Skeleton,刷新用下拉方式。

加载的后台增强设计。为了减少等待时间,提升体验,往往不会一次加载完所有数据才展示

  • 分步加载:比如先文字再图片、先框架/预设图再框架内数据
  • 预加载:先加载最先要看到的内容,再根据用户行为习惯预判后续想看内容,提前加载好;比如阅读App,阅读当前页时自动加载后几页
  • 异步加载:比如某App网络不好时点赞,本地提示用户点赞成功,网络好时再请求到服务器,完成点赞数据交互

加载的最大时间。加载状态,不管是动效、hud、toast,不宜过久。再好看的动画也不意味着可以无限等待,应该控制在5-10s以内。加载时后台重连几次、每次加载多久timeout,和性能有关,与开发商定一个合适解决方案。

缺省页

缺省页有三种,空数据、网络异常、页面报错。后两者为异常情况处理。

空数据

空数据页面,没太多后续操作,一般是搜索结果列表为空、无数据交互页面状态,可以做以下设计

  • 摆放活泼友好的空数据占位图和文案
  • 展示运营推荐元素,比如推荐商品和文章,引导浏览更多
  • 留有call to action的入口或按钮,告诉用户,你想要这个页面有数据,该怎么做
  • 页面有框架,需展示数字时,比如股票、钱包,如果是实际数额为0,可用 ‘-’ 代替

网络异常

请求服务器失败,常见于断网、网络不稳定。这个场景若发生,在某些主路径页面,提升体验最好方案是事先预防:预先缓存内容到本地,对于内容不常变化的页面,写死UI框架到本地。网络异常发生时,可采取的补救机制:

页面有本地缓存,顶部hud提示,不占据内容空间,可以在浏览缓存内容同时,知道网络异常。从Hud可点击进入“指导检查网络页面”,该页面为静态页面,用文案指导如何检查wifi或移动网络。另外一种方案为,从hud点击直接进入手机“系统设置”页面,期待熟练用户自己检查WIFI或移动网络。微信、京东用静态页面的文案指导检查网络,而非直接跳转系统设置,因为直接跳转到系统设置,会让很多小白茫然无措,加之不同手机系统,可跳转的权限不同。用静态页面指导,是更简洁通用、覆盖更多人群的方案。

页面无本地缓存,使用网络异常占位符,与空数据页面类似,摆放活泼友好的网络异常占位图和文案。此类页面又分两种情况来布局:

  • 页面有下拉刷新:文案提示用下拉手势刷新 + 指导检查网络状态入口
  • 页面无下拉刷新:文案提示轻触屏幕或点击按钮刷新 + 刷新按钮 + 指导检查网络状态入口

另外,还需考虑网络异常提示的时机。如果网络状态经常不稳定,一监听到断网就提示异常,反反复复太频繁,可以考虑延时反馈,比如监听到网络异常5s之后,给出提示;5s内如果链接上了,不提示。

页面报错

在PC网页,浏览器提示404、或页面不存在,可操作浏览器刷新按钮重新请求或返回上一层。在App中,页面定制化程度更高,加之报错不是刷新或检查网络可以解决,像浏览器默认那般提示404之类错误码,不如突出友好活泼的占位图,并引导用户主动反馈或探索更多其他内容。

推荐阅读更多精彩内容

  • 前段时间断断续续看了几页书,眨眼离考试只有仅仅两周了,这得有多不靠谱,多懒。
    枭岛阅读 36评论 0 0
  • 今天也就是国庆节,我回到了我的老家,我非常的开心,因为可以见到我的哥哥。 哥哥现在上初中,平时很难见到他,趁这...
    吴熙567阅读 39评论 0 1
  • 估计这一期作业以后,我会放弃这般每日文字的生活方式。很忙,每每想要尝试放弃,却又想着这个也是喜欢的事情,难得是坚持...
    雯慧阅读 44评论 0 0
  • 我深深的觉的每个人都是由一个灵魂的自己和一个肉体的自己。做一个有趣的灵魂并让它去支配肉体的自己,证明这世...
    龙女快跑阅读 63评论 0 2