怎样的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

相关推荐

  • 网页设计趋势: 为何那麽多APP喜欢使用卡片式设计?盘点卡片式设计的好处

    APP设计中,卡片式设计是最受欢迎且应用最广的经典排版方式。卡片式设计不仅能打破传统界面版式那种呆板布局,还能更好地归纳网站的信息。虽然卡片式设计看上去简单,但要把控得好,却并不容易。那麽卡片式设计有什…

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

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

    2022年6月25日
    0347
  • APP设计新知:左文右图和右文左图的差异在哪里

    新闻资讯行业从传统纸媒体时代,到PC互联网时代,再到如今的移动互联网时代,用户阅读习惯和媒体转型、技术已有非常大的转变。企业若有计划制作新闻资讯类APP,就需要多留意市面上这类主流APP。 目前市面不少新闻资…

    2022年6月15日 建站资讯
    0514
  • APP设计基础知识:UI设计的五大视觉基本要素

    我们经常会用UI设计去衡量APP的好坏,的确UI设计除了包含界面的美观性外,更多会考虑到视觉体验方面。怎样让UI设计变得更加出彩?香港网页集团表示,APP UI的美观程度,主要是由界面中的视觉基本要素决定的,而从美…

    2022年6月15日 建站资讯
    0763
  • 移动端设计如何保持美学一致性?

    美学一致性是移动端设计尤为重视的原则之一,尤其是产品界面设计。因为它能够很好地呈现给用户产品的视觉效果和交互行为是否整合、和谐。 界面设计在元素和内容上,能够整体上标准化,尤其是用户可预知的交互行为,…

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

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

    2022年6月13日
    0165
  • iOS 11在iPad的UI设计中有哪些改变

    上期,我们说了iPhone iOS 11与iOS 10的UI交互设计上的区别,这期我们就来说说iPad的UI设计有什麽改变? 其实,这次iOS 11系统除了给iPhone带来不少改变,在iPad上的表现也算是非常惊艳,尤其是在交互设计方面。 改…

    2022年6月12日 建站资讯
    0198
  • 贴心!两招解决移动端输入难题

    词典不够智能时关闭自动纠错 很明显,对於低效的自动纠错功能只会对用户体验有挫伤的功能。常见的自动纠错多用於单词缩写、街道名称、邮箱、人名以及一些不在字典的单词。若然词典不够智能,最好不要使用自动纠错功…

    2022年6月7日
    0155

联系我们

QQ:951076433

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