怎样的APP loading设计更讨用户欢心

用户在浏览网页时,由於网络原因可能需要花费一定时间才能加载完成,这个时候就要用到loading加载机制,告诉用户网页正在努力为您加载数据,请稍安勿躁。好的loading设计能减弱用户等待网站加载的焦虑,不合理的loading设计则会让用户产生厌恶感。下面,我们就以app为例,介绍怎样的loading设计更讨用户欢心。

数据加载的几种形式及对应的交互设计

1.标题loading

怎样的APP loading设计更讨用户欢心

大多数通讯工具软件都是采用这种形式,由於聊天列表页的聊天记录是储存在手机本地的,所以页面内容一般都不为空。这个时候,app加载无需获取用户的视觉焦点,只要告知用户页面正在请求新数据即可。所以选择在标题栏展示app正在加载是个不错的选择,加载成功标题栏loading小时,如果因为网络错误未链接服务器,则在标题栏显示未连接状态。

2.白屏loading

怎样的APP loading设计更讨用户欢心

当页面内容比较单一,加载时间较短的可使用白屏loading,而这多数会出现在H5页面中。然而现实中已经很少产品会采用这种loading设计,大多数产品采用无限循环的小菊花、单进度条或有趣的动画设计,这样更能减轻用户等待时的焦虑感。

3.优先加载

怎样的APP loading设计更讨用户欢心

当页面同时具备文字和图片时,由於图片会比文字所需的加载时间要长,所以往往会先加载文字,图片在加载过程使用占位符,直到图片加载成功。另外,如果加载的页面内容有固定的框架时,可以先加载框架,再加载框架内的内容。通过先加载页面框架或设计占位符等形式可以减少用户的心理等待时长,提高产品体验。

4.Skeleton Screen

怎样的APP loading设计更讨用户欢心

这种加载形式你可能没听过,但一定见过。它是一种将未加载出来的内容区域,用灰色色块填充的方式。所以会令整个页面在加载过程有一种连贯的感觉。这种形式一般用於内容框架固定的页面,如果页面出现空数据的情况下则不宜使用。

5.下拉刷新加载

怎样的APP loading设计更讨用户欢心

Twitte当年提出下拉刷新,并被广泛使用,让用户能够手动对当前页面进行更新,加载的loading样式可以做进一步的设计,例如:将loading动画和下拉手势结合起来,增加趣味性;把loading做成笑脸,赋予产品人性化设计等等。

6.分段加载

怎样的APP loading设计更讨用户欢心

当新页面的内容有很多的时候,如果一次性加载所有内容,就会有可能出现增加设备的负担,延长加载时间、app运算成本太高而崩溃等等影响用户体验的问题。所以,为了解决这一问题,可以采用分段加载形式,即先加载最新的几十条数据,当用户继续向上滑动想浏览更多内容时,再加载几十条。

7.智能加载

怎样的APP loading设计更讨用户欢心

当网络状态不好时,可以考虑加载低质量的图片,当网络良好时,则加载高质量的图片;同理,当用户使用蜂窝数据时,显示占位符而不显示图片,当使用wifi时则直接加载图片。这些设计方案都是站在用户的角度去想,为用户带来价值,从而让用户真正喜欢上这个产品。

作为产品设计人员,不应该把视野局限在人与客户端之间的交互,而应该站在用户、客户端和服务器的角度去思考产品,只有这样,才能设计用户体验更好的数据加载方案,而不会有失偏颇。

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/40259.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
Inspirr的头像Inspirr订阅用户
上一篇 2022年6月9日 23:06
下一篇 2022年6月9日 23:06

相关推荐

  • 新手引导页面设计要注意的三个方面

        1、不要使用过长的新手教程 为了降低使用者流程中可能存在的摩擦,尽量遵循少即时多的原则。如今不少的使用者APP应用页面,在打开时都会有新手引导页。而静态的话一般用来呈现产品的功能和价值,动态…

    2022年6月25日
    0182
  • APP设计案例:如何设计移动医疗保健类APP

    对很多企业而言,受新冠疫情影响,2020年是十分艰难的一年,但同时也给部分企业创造了不少机会,例如:医疗保健类行业。下面,小编将梳理「如何设计移动医疗保健APP」的内容,希望对相关行业有帮助! ● 医疗保健类AP…

    2022年6月25日 建站资讯
    0313
  • 折叠屏手机或将大热 如何在折叠屏手机上做交互设计

    最近,不少手机品牌都发布折叠屏手机,它可以把一台8英寸的平板电脑,通过折叠的方式变成方便携带的6英寸手机。而随着折叠屏手机的发布,未来手机形态可能会朝着柔性手机方向发展,那麽,如何在折叠屏手机上做交互…

    2022年6月25日 建站资讯
    0218
  • APP设计新知:APP设计中如何做好引导设计

    APP设计中的引导设计,主要是帮助用户更快熟悉APP的操作,及了解APP的特点。引导设计得好,不仅能有效实现用户的留存和转化,还能降低用户的使用成本。 既然引导设计这麽重要,那麽APP设计中如何做好引导设计? 一、…

    2022年6月25日
    0343
  • 常见iOS开发关键词的区别

    iOS的发展,对开发者来说,无疑在技术层面上给了不少的考验,因此开发者必须通过不断学习新知识来完善自己。先将iOS开发的关键词奉献给各位,希望对各位的工作和学习有帮助。 知识一:概念 ① 浅Copy:指针的复制,只…

    2022年6月12日
    0147
  • 如何设计一个针对女性市场的照片编辑类APP

    照片是记录生活的重要手段,而这些记录关键时刻的图片,对每位拍摄者而言都是不可复制的珍贵瞬间,也因此不少用户对摄影和照片的编辑美化处理,都有着无比的热情和兴趣。下面,Inspirr Creation将为大家分享,如何…

    2022年6月13日
    0162
  • 盘点2018年移动端UI设计的趋势

    随着移动互联的普及,使用移动端上网的人数甚至还超过PC端,也因此越来越多的企业更倾向於移动端的设计,甚至开发纯移动端产品。而随着用户需求的不断变化,移动端的UI设计也随之而变化。 2018年移动端UI设计的趋势…

    2022年6月12日 建站资讯
    0186
  • APP设计基础知识:为什麽儿童类APP要使用圆角设计

    近年来圆角在网页设计和APP设计的使用越来越广泛,尤其是儿童类APP,圆角设计几乎被融入到产品的各个部分中,成为不可或缺的元素。为什麽儿童类APP要使用圆角设计?圆角设计不仅为儿童类APP增色不少,而且还和儿童产…

    2022年6月25日 建站资讯
    0203

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息