交互基础之页面加载方式(一)
返回本版】  【发表帖子】  【回复帖子 浏览量  425      回帖数 0
lanlan123    等级  

楼主 发表于  2019/9/25 14:50:16    编 辑   


作为UI设计师,我相信大家都是专注于界面设计的好不好看,至于界面与界面之间如何交互,点击之后如何反馈,是一个比较容易被忽略的重要环节。
那么我们怎么处理好界面交互中的加载设计,减少用户因等待产生的焦虑情绪,保证整个体验无缝衔接,今天这篇文章就来总结下APP中数据加载模式设计。
一、为什么要加载?
1、用户在进行某些操作时,都要从后台请求数据,这个过程都需要时间,系统应该始终在合理的时间内做出适当的反馈,让用户了解正在发生的事情,让用户知道此时的操作是有反应,减缓用户因等待而产生的焦虑感。同时加载方式也可以做的有趣,吸引用户注意力,增加沉浸式体验,让用户轻松自在的享受等待;
2、体验无缝衔接,减少用户跳失,正常的等待加载时间是0.3秒以内,同时不同场景对应有不同的加载方式。
二、常见的加载场景及方式
a.加载场景:
不同场景有不同的加载方式,常见的加载场景一般有以下几种:下拉刷新、上拉加载、切换新页面的数据加载、页面局部模块的加载、启动页加载、操作按钮加载。实际工作中,要根据不同的场景搭配不同的加载样式,才能更好的做到缓解用户等待焦虑,降低用户的跳失率。
b.加载方式:
1、全屏加载
主要出现在手机H5页面,例如微信的文章详情页。一般会有进度条或有趣的动画设计,减轻用户等待时的焦虑感。加载失败后,页面通常为空白页,且有重新刷新操作按钮。
优点:将整个页面的内容都加载出来才展现给用户,能保证内容的整体性,全部加载完才能够系统化的阅读。
缺点:一般等待的时间较长,容易产生焦躁情绪,尤其是遇到网络不好的情况
2、下拉刷新加载
主要出现在页面内容为推荐类、或者信息更新频次高的产品,通过刷新加载新数据,加载的loading样式可以结合产品logo或IP形象进行设计,增加趣味性,吸引用户注意力。
3.占位图加载
如果页面布局样式比较固定,可以采用占位图加载机制,先加载页面布局和占位图,先给用户展示页面框架,后加载页面图片细节部分,这种加载方式相对于直接展示白屏来说,呈现给用户无缝衔接的感觉,体验更加流畅。
4.分布加载
当页面中有文字和图片时,优先加载占网络资源较小的元素,如先加载文字,后加载图片,图片加载完成前使用占位符显示,保证用户可以顺畅阅读,缩短用户的等待时间,提高产品体验。
优点:可以帮助用户快速阅读内容,了解信息。
这种加载形式更加适用于内容阅读型的APP或图片、视频类资源比较多的页面。
5.自动加载(懒加载)
当浏览信息时,不停的向上滑动,新的内容会不停的从底部出现,这种方式称为自动加载。对于自动加载,要注意每次加载多少条内容,或者多少屏的内容。一般会在距下面内容一定距离时开始加载,当网速非常快的时候,用户并不能感知懒加载的动作,这样可以营造一种无极限浏览的错觉,很容易的把用户吸引住。
优点:无需用户操作,自动加载后续内容,营造沉浸式体验。
应用:适合feed流、瀑布流、算法推荐类的内容。
更多文章就在蓝蓝设计每日一贴。欢迎访问,开始愉快的合作!
网站:www.lanlanwork.com
全国统一客服热线:400-608-6026
公司邮箱:weibaobei@163.com 
1
表情
所有内容均为会员自愿发表,并不代表本站立场.