恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
常见的等待加载设计
0.0°
2017-01-19 原创文章 经验/观点 举报 4207 22 11 0

 在APP开发当中,客户端与服务端是2个最重要的组成部分,它们之间必然发生数据请求的过程,也就是客户端发起请求给服务端,服务端收到请求之后把数据传输给客户端,当APP请求获取成功之后展示数据内容,在这个过程当中有一个非常重要的设计就是等待加载机制;

在数据请求过程当中,由于客服端与服务端需要进行数据的交互,客户端需要等待一些时间展示请求到的数据,这个时候客户端需要用到等待加载机制,这个目的就达告知用户,APP正在加载数据,请你稍等,一定程度上面减少用户因等待产生的焦虑感;

目前最主流就等待加载机制有全局加载与局部加载,全局加载就是一次性向服务端请求数据展示数据,比如标题栏加载,白屏加载,进度条加载toast加载,局部加载就是先加载一部分展示出来,然后再加载其他数据,比如下拉刷新加载,占位图加载;


标题栏加载机制

Image title

微信与QQ

微信、QQ等都采用了标题栏加载机制。聊天列表界面本地缓存聊天记录,所以聊天界面不为空。这个时候加载无需获取用户的视觉焦点,只要在标题栏展示App正在加载,加载成功则标题栏等待加载消失,若因为网络错误未连接服务器,则在标题栏显示未连接的异常状态。


白屏等待加载机制

Image title

小米商城与微博问答

当前界面没有做任何本地缓存的时候,则采用白屏加载机制。所有加载获取数据的时候界面无任何内容,一旦出现异常情况,需要展示对应的缺省界面,比如网络异常,获取失败等等,而不是一直在做白屏加载;


进度条加载机制

Image title

微博详情与afari浏览器

进度条的加载样式,多见于浏览器,包括PC端和移动端的浏览器。一些App页面会用H5的形式去做,这种页面多数也都会采用进度条的样式来显示loading过程。


toast加载机制

Image title


移动OA与那刻

当用户执行了某个操作时,为了防止用户继续操作而导致数据加载失败,则用Toast的样式来提示数据正在加载,同时限制用户继续操作。这种情况用户一般只能执行返回到上一级页面的操作,其他操作都被禁用。


下拉刷新加载机制

Image title


微博与头条新闻

下拉刷新广泛被运用于大多数App,这种加载机制,保证了用户能看到本地缓存数据的同时,还能告知用界面正在刷新,同时,用户还可以通过下拉的手势操不断重新选择加载的数据内容;


占位图加载机制

Image title

当页面的框架固定时,只需要加载框架内数据时,采用这种占位图加载机制,首先加载框架,其次加载框架内的数据。为了不让框架内的内容为空,会用占位图来填充界面。


好的设计是让用户感知不到设计;除了上面提到的几种加载机制,我们还要进一步深度思考,有没有更好的加载机制带来更好的用户体验;

第一:技术优化,这方面就需要客户端与服务端大神对数据请求方面进行优化;

第二:预加载机制,拿阅读App打比方,当用户在看第一页的时候,App在后台加载完后面的几页,等用户翻到第二页的时候就不需要等待加载了,因为App已经帮用户提前加载好了。这种加载机制对用户体验特别好,但是存在一个问题,就是要预测用户行为,加载其他数据,这样会消耗不少流量,所以建议在WiFi网络环境下采取这种预加载机制,而在蜂窝网络状态下则不采用预加载机制。这个要和开发人员讨论沟通,确保预加载机制完美运行;

第三:异步处理,最熟悉的就是微信朋友圈,当用户提交点赞或者评论的时候,用户会看到提交的结果,这样用户感知是非常愉悦,其实真实的逻辑是,微信朋友圈记录你提交的结果,然后异步处理,当你继续刷朋友圈的时候,它悄悄的提交你刚才的结果,一旦出现异常情况,会在朋友圈界面最上面提示提交结果,比如提交失败;这样做的目的就是减少用户的操作负担,让用户顺利完成主流程的操作,目的就是让产品自己去解决问题,最终达到极佳的用户体验;


记住这几种等待加载机制原理,灵活运用,做出最后的APP;

更新:2017-01-19

收藏

22人已收藏

此刻产品设计中心刘刚

目前正在找工作,需要UI设计师的请加我微信

  • 64

    作品

  • 1076

    粉丝

  • 72

    关注

  • APP设计思路
  • 加油站-ipad
  • 设计规范
  • 自定义配置
相关标签
设计经验分享

    猜你喜欢

      2017-01-19 原创文章 经验/观点 举报 4207 22 11 0

      常见的等待加载设计

      0.0°

      你确定要举报常见的等待加载设计

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年01月19日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      11
      22
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录