您需要AI互联网
顾问提供专业咨询
AI人工智能 · VR · AR · 智慧博物馆 · 智慧公园 · 景区 · 文创 · 动画 · 游戏 · 年度运营
大模型定制 · WEB3 · 元宇宙 · 区块链 · 高端网站建设 · 小程序 · APP · 微信 · H5 · 电商
网页设计如何克服界面上内容加载的等待感
2017.12.21
  介面内容的载入,一直都是令网页设计师头痛的议题,如何让载入更加愉悦更是努力的方向。然而在,网络上我一直没看到有人分享加载detail的文章,只有类似加载出现后如何降低用户情绪的主题。如果我们换个方式想呢?透用一些巧妙方式让载入画面减少出现,甚至不出现?这样用户的体验是不是会更好呢!否则往往设计得不错,但因为细节上配合得不够好,导致体验不如预期。

  在此跟各位分享之前在应用列表载入方面的设计方式,各位在搜索结果列表应该常遇到往下滑就要等待内容载入,因此我就一直在想怎么才能达到顺畅滑动,没有加载等待的体验设计,现在就来跟大家分享基础篇,之后有空在跟大家说说进阶篇。

  不顺畅加载

  列表的载入机制是开发团队很容易忽略的地方,若这个地方没有规划,团队就会很自然的用简单方式来解决,这样当然很容易造成停顿,等待加载动作。

  网页设计如何克服界面上内容加载的等待感

  顺畅载入

  我们可以透过网页设计让载入更顺畅,让用户宛如在本地上浏览一般,无需等待。这样的做法不仅提升用户体验,也提升了用户的使用效率。但我们要如何降低载入画面,甚至到不显示载入的画面?可能的解法是,先进行预载。但问题又来了,该何时预载才能不浪费资源又能达到效果,总不能因为体验而牺牲程序效率吧。


网页设计如何克服界面上内容加载的等待感


  打造完美浏览?

  我们都知道列表都是采取分页的方式,举例来说如果每次载入30笔,通常我会在列表滑动到第20笔的时候进行预载动作。但为什么这样做呢?因为当用户滑到2/3时,应该可以判断为用户有想要继续看下去的可能,所以在这时候进行预载。另外,我们还需评估给予载入的处理时间,例如以iPhone 7 plus的画面一次可以看到5笔资讯来说,滑动10笔的时间,正常使用约需1.5秒,而这正是多给加载的处理时间,只要在这时间内处理完,就能达到完美浏览。


网页设计如何克服界面上内容加载的等待感


  处理预载的时机点与载入的处理时间,这两者达到一个平衡,就是完美。

  预载时间不够,怎么办?

  即使我们已经增加了载入的处理时间,但有时网络就是会比较慢,伺服器就是比较慢才回应,这时只能呈现载入的画面,让用户清楚状态。但这时载入的等待也会比较短,因为如上述,我们多给了1.5秒的载入处理时间嘛,用户等待的时间相对也会比较少,不耐烦的感觉也会比较小。




  网络错误呢?

  网络发生问题的处置也是不能忽视的,虽然发生机会并不高,不过一但发生,也必须让用户知道,让用户掌握状况并且排除。但与其只显示错误,然后重试,还不如用轻松的文字显示并邀请用户一起解决问题方式。这样不仅增加用户的参与度,也能增加产品的温度与个性表现。


网页设计如何克服界面上内容加载的等待感


  预载的目的

  预载的目的就是要“偷时间”与“偷感觉”,偷时间是为了来增加载入处理的时间,偷感觉是为了减少用户等待的感觉,让一切都是这么自然及顺畅,这些努力都是为了让用户感受到更佳愉悦的体验。
400-6446-365 / 010-64928252 我想要个更针对我需求的方案
让决策变的简单
好的开始是成功的一半
请输入关键字