欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

如何做好移动应用中的Loading设计?

发布时间:2017:12:15 14:08:24 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1390个文字,预计阅读时间4分钟
导语
设计移动端应用产品时,我们绝大多数的精力和时间都会花在各个页面的设计上。但与此同时,网络环境的复杂性,会造成在网速偏慢、弱网、无网的条件下,用户相当一部分停留时长

  设计移动端应用产品时,我们绝大多数的精力和时间都会花在各个页面的设计上。但与此同时,网络环境的复杂性,会造成在网速偏慢、弱网、无网的条件下,用户相当一部分停留时长会用在Loading上——无论页面最终呈现出来的状态我们设计得多么精美,它的加载总是需要一个过程。

  

如何做好移动应用中的Loading设计?

 

  而页面打开和跳转时的加载过程,很多时候会在设计中被严重忽视,最后在项目上线前仓促、随意地进行设计,甚至任由开发找一个「菊花」放上去转一转就完事了。

  Loading过程的设计缺失对用户体验的伤害无法量化,但长此以往,犹如一剂慢性毒药,总有突破用户忍耐极限,导致用户流失的一天。

  本文将简单梳理移动端应用设计中常见的加载模式,并结合一些国内外应用的实例,探讨如何针对场景特点选用合适的加载方式。

  一. 模态加载

  提到加载方式的分类,最明确的一个界限应该就是模态加载和非模态加载。而说起模态加载,可能有人会根据一些经典书籍中的观点认为模态一定是不好的,非模态才是正义。

  但事实上,选用模态加载还是非模态加载,首先要做的是问自己一个问题,这个加载是否出现在不可逆流程?

  1. 模态加载与「不可逆流程」

  这里说的「不可逆」并非表达平日语境下「无法挽回」的含义,只是指一些单向通行的线性流程。典型如注册类(注册、登录、找回密码)、交易类(下单、支付、转账)流程,比如下图易信的注册流程和微信发红包的流程。

  

如何做好移动应用中的Loading设计?

 

  在不可逆流程中,一个步骤加载时如果允许用户随意触发其他行为,极易导致各种分支和异常。为了防止用户犯错,也为了设计和开发时减少异常流数量,在这类流程中使用模态加载是很正常的选择。

  2. 其他场景下,避免模态阻断

  而在无关不可逆路径的情况下,确实如经典论述所说的,应该减少模态阻断的使用。

  采用模态加载则会让用户在等待期间无所事事,等待时间较长时会加剧焦躁情绪的产生。尤其是一些APP直接在启动页采用模态加载,这会导致用户感觉与产品每次见面都有一道无法逾越的鸿沟。

  在国内,这种情况已经比较少了。不过少数金融类的APP仍然会直接在启动页进行阻断式的模态加载,考虑到金融类APP需要保障资金安全,这样的处理方式可能有一些行业特殊性。

  

如何做好移动应用中的Loading设计?

 

  一贯传统的日本,时至如今,很多APP仍然保留了在登录页就模态加载的习惯。即使是毫无阻断必要的。

  电商类APP和交通查询类APP也是如此,以服饰电商ZOZOTOWN和东京メトロ为例。

  

如何做好移动应用中的Loading设计?

 

  当然,这两个APP实际上内部的设计质量已经非常不错了,有许多细节是值得借鉴的,这里只是就事论事讨论它们的启动加载问题。

  它们在启动加载中使用了蒙层式的模态加载,即使东京メトロ设计了极富特色的加载指示符(9个代表不同线路的小圆圈),仍然改变不了一种将用户拒之门外的隔阂感。

  如果说电商APP的启动多是在用户较为闲暇、安静的场景,模态登录带来的伤害相对较小。那么交通查询类APP就不一样了,启动场景多是在户外移动,急于知道结果以确定下一步往哪走的情形之下,更不适合使用模态加载。地铁查询APP更为特殊,很大比例的场景是用户正在地铁中查询换乘信息,在信号不佳的情况下直接模态阻断,这样的体验是致命的。

  综上,我的判断是,除了不可逆流程外,基本上没太大必要去使用模态加载。

  百度地图在搜索地点中使用了模态,相比之下,而iOS自带的地图,搜索地点就没有采取模态加载,用户可以在不耐烦时随时尝试其他操作,体验上的差别显而易见。

  

如何做好移动应用中的Loading设计?

 

  3. 模态阻断要有「取消」选项

  即使确信模态加载是正确的,最好也给用户一个「取消」的选项,避免用户只有杀掉进程以结束漫长的等待。

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:学会这5个PS小技巧,让工作效率提高5倍!

下一篇:App加载页面的等待体验设计研究

  • 18886 文章总数
  • 2253594访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信