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

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

目录

一、标题加载
二、单页面整体加载
三、同页面分步加载
四、Toast加载
五、信息流加载
六、点击加载
总结
参考链接

一、标题加载


如图,这个加载等待样式,为顶部状态栏文字信息提示,常用于社交聊天App和已有本地缓存的App中。使用场景多为本地已有缓存数据,在不影响用户正常阅读操作及使用情况下,在标题处起到加载提示运用。
优点:固定位置提示,加载无需获取用户视觉焦点,并在加载中及加载完成后及时给出反馈。
缺点:运用场景有限,无法用于局部内容提示。
对只需要告知用户正在请求新数据的页面,在标题栏展示是个不错的选择,加载成功则标题栏loading消失,若因为网络错误未连接服务器,则在标题栏显示未连接状态。

二、单页面整体加载


如图,这个形式多出现于跳转至H5页面或整体布局不同的页面跳转时。在内容加载完成之前界面都会停留在loading页面,等待时间较长,在产品初期通常会用小菊花来表示加载状态,过场动画、插画等更能分散用户的注意力、降低用户等待的焦虑感。
优点:这种形式不仅增加了loading的趣味性和设计感,如果运用logo进行延展,同时还达到了强化品牌的效果,大家可以借鉴使用。
缺点:一般运用在页面内容比较单一的情况下。
多用于点击底部菜单栏等不同页面布局的切换,直接一次性加载完所有数据后再显示内容。其单页面加载失败的状态相对来说也比较好处理。

三、同页面分步加载


当有文字和图片时,图片会比文字加载的慢,这个时候往往文字先加载,图片在加载过程中使用占位符,直到图片加载成功。当加载的页面内容有固定的框架时,可以先加载框架,再加载框架内的内容。通过先加载页面框架,设计占位符等形式可以减少用户的心理等待时长,提高产品体验。
优点:能让用户逐步看到内容,通过模块的优先级进行加载,在这个渐进的过程中降低用户的焦虑心理。
缺点:这样处理有一定几率让用户在长时间的等到后,仍没完刷出自己需要的信息。
多用于图片于文字信息相结合且模块较多的界面,如大众点评、微信、微博等。

四、Toast形式


在当前页面触发了某个需要服务器判断反馈的页面时,可以用toast的loading来表达加载。
优点:loading形式能够提示用户请求已经发送,继续操作导致数据加载失败,例如登录页面几乎都采用此种形式。
缺点:必须快速给用户一定的加载反馈,不能用于长时间的等待。
这个样式多用于表单提交后的加载等待状态,例如登陆注册提交后的加载状态。要注意结合反馈信息样式,例如加载失败、提交成功等,避免用户因为长时间的等待误以为是网络不稳定或其他。

五、信息流加载


多用于信息流加载页面,让用户能够手动对当前页面进行更新,加载的Loading样式可以做进一步设计。
优点:将Loading动画和下拉手势结合起来,增加了趣味性。
缺点:加载时,用户焦点回转移。
在产品使用之初,用户可能不会意识到这个需要交互才会展现出等待样式。刚开始使用时建议配合文字即比较有标示性的图标。

六、点击加载


当网络状态不好时,尤其是前几年3G网络的时代,常出现的图片加载方式。现在,适用于有大量图片或视频的App,如电商类或在线视频类App。
优点:是根据具体场景来控件流量和加载速度。
缺点:是不一定真实有效的命中用户需求,所以还是需要给予用户一定的查看详情的入口,或者是设置项。
当检测到用户正在使用蜂窝数据时,则显示占位符而不显示图片或显示精简图文;当使用WiFi时,则加载出高质量图文。这些设计方案都是站在用户的角度,替用户着想,为用户带来价值,用户才会真正喜欢上你的产品。

总结

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

海盐社(公众号)

作者: Quines·QQQ
(0)

相关推荐

  • 堆糖APP不能加载图片 堆糖APP不能登录怎么办

    堆糖APP不能加载图片 堆糖APP不能登录怎么办 操作方法 01 如果堆糖不能加载图片或者不能登录了,点击软件右下角的我.如图所示 02 打开我的界面后,不管能不能登录,都可以点击右上角的设置选项.如 ...

  • 从3个分类出发,深入研究App加载动画

    加载动画远不止我们看到的形式,背后还有关于加载性能的考虑. 数据是软件的血液,数据只有不断加载更新,软件才有生命力.数据加载是用户的经常性操作,因此是提升用户体验的重要方面,也是产品.设计.开发都要考 ...

  • 界面中被忽略的模块加载

    对于设计师来说往往更多的是注重界面的设计,从而忽略了用户对于加载等待的体验,如何用不同的加载来缓解用户的等待焦虑,从而提升用户对产品的体验呢?下面就来和大家介绍一下都有哪些加载样式和使用方法. 目录 ...

  • 加载,一个被忽略的模块

    什么是加载?用户在客户端的界面上进行操作,客户端发送请求到服务器,服务器处理请求,返回数据并显示给用户.简单的说就是用户与产品的每次互动时的等待时间. 目录 一.什么是加载? 二.加载的设计样式 三. ...

  • 加载动效项目全解析

    成长期产品如何用最小成本做加载动效统一?4步教你用最小成本达到目标,分别是了解加载动效的价值.成长期产品的加载开展.确定场景及类型.进行竟品分析总结 加载动效的价值 著名的Seo公司Kissmetri ...

  • 设计规范 | 详解组件控件结构体系-加载类

    本文作者将加载划分为6种类型,分别适用于不同的场景,各有优缺点.设计师在设计时,可以根据用户的使用场景和环境设计适合的加载. @Echo 设计师在进行APP设计时,往往会更加专注于界面的布局.界面和界 ...

  • IE8 网页加载速度变慢怎么办?

    故障现象: 在打开网页或新标签页时,会一直停留在“连接到.....”阶段,直到几秒后才开始加载网页内容。性能会随着时间的推移而变差。 原因分析: 像 Windows 系统会因为多余注册表项和开机启动程 ...

  • pe系统如何使用虚拟光驱加载iso文件

    而现在的问题就是很多电脑现在是没有配光驱的,那要怎么办? 在安装系统时经常要用到的就是虚拟光驱了,而虚拟光驱加载IOS镜像文件是大家都知道的. 下面就来介绍! 操作方法 01 首先需要准备一个U盘启动 ...

  • window未正确加载怎么办

    很多网友在遇到系统提示系统似乎未正确加载时重装系统,修复都无法彻底解决,下面小编教大家一种解决办法,供大家参考! 操作方法 01 在出现弹窗的界面选择查看高级修复选项,如下图所示 02 进入高级选项, ...