App的加载样式该怎么用,你都知道吗?

当我们使用App浏览文章、逛淘宝的时候,时常会因为网速不快、网络异常、服务器异常、Bug等情况,而造成等待的情况。等待时间的长短,会影响我们是否要继续使用。为了降低用户等待的焦虑感,我们可以通过优化App的加载算法、预加载和智能加载、异步操作的方式解决,当然作为一名UI设计师我们也可以用以下集中视觉设计的方式解决这个问题。

目录

一、标题加载

二、单页面整体加载

三、同页面分步加载

四、Toast加载

五、信息流加载

六、点击加载

总结

参考链接

一、标题加载

如图,这个加载等待样式,为顶部状态栏文字信息提示,常用于社交聊天App和已有本地缓存的App中。使用场景多为本地已有缓存数据,在不影响用户正常阅读操作及使用情况下,在标题处起到加载提示运用。

优点:固定位置提示,加载无需获取用户视觉焦点,并在加载中及加载完成后及时给出反馈。

缺点:运用场景有限,无法用于局部内容提示。

对只需要告知用户正在请求新数据的页面,在标题栏展示是个不错的选择,加载成功则标题栏loading消失,若因为网络错误未连接服务器,则在标题栏显示未连接状态。

二、单页面整体加载

如图,这个形式多出现于跳转至H5页面或整体布局不同的页面跳转时。在内容加载完成之前界面都会停留在loading页面,等待时间较长,在产品初期通常会用小菊花来表示加载状态,过场动画、插画等更能分散用户的注意力、降低用户等待的焦虑感。

缺点:一般运用在页面内容比较单一的情况下。

多用于点击底部菜单栏等不同页面布局的切换,直接一次性加载完所有数据后再显示内容。其单页面加载失败的状态相对来说也比较好处理。

三、同页面分步加载

当有文字和图片时,图片会比文字加载的慢,这个时候往往文字先加载,图片在加载过程中使用占位符,直到图片加载成功。当加载的页面内容有固定的框架时,可以先加载框架,再加载框架内的内容。

通过先加载页面框架,设计占位符等形式可以减少用户的心理等待时长,提高产品体验。

优点:能让用户逐步看到内容,通过模块的优先级进行加载,在这个渐进的过程中降低用户的焦虑心理。

缺点:这样处理有一定几率让用户在长时间的等到后,仍没完刷出自己需要的信息。

多用于图片于文字信息相结合且模块较多的界面,如大众点评、微信、微博等。

四、Toast形式

在当前页面触发了某个需要服务器判断反馈的页面时,可以用toast的loading来表达加载。

优点:loading形式能够提示用户请求已经发送,继续操作导致数据加载失败,例如登录页面几乎都采用此种形式。

缺点:必须快速给用户一定的加载反馈,不能用于长时间的等待。

这个样式多用于表单提交后的加载等待状态,例如登陆注册提交后的加载状态。要注意结合反馈信息样式,例如加载失败、提交成功等,避免用户因为长时间的等待误以为是网络不稳定或其他。

五、信息流加载

多用于信息流加载页面,让用户能够手动对当前页面进行更新,加载的Loading样式可以做进一步设计。

优点:将Loading动画和下拉手势结合起来,增加了趣味性。

缺点:加载时,用户焦点回转移。

在产品使用之初,用户可能不会意识到这个需要交互才会展现出等待样式。刚开始使用时建议配合文字即比较有标示性的图标。

六、点击加载

当网络状态不好时,尤其是前几年3G网络的时代,常出现的图片加载方式。现在,适用于有大量图片或视频的App,如电商类或在线视频类App。

优点:是根据具体场景来控件流量和加载速度。

缺点:是不一定真实有效的命中用户需求,所以还是需要给予用户一定的查看详情的入口,或者是设置项。

当检测到用户正在使用蜂窝数据时,则显示占位符而不显示图片或显示精简图文;当使用WiFi时,则加载出高质量图文。这些设计方案都是站在用户的角度,替用户着想,为用户带来价值,用户才会真正喜欢上你的产品。

总结

优化App加载速度的方式有很多,但因为网速、服务器、bug等不确定因素。依然需要设计师们通过加载样式,来缓解用户的焦虑感。有趣的设计,不但能够利用用户等待期间,加深对产品形象的印象,也能反印出产品的调性。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180717G0CCGV00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励