广州总部电话:020-85564311
广州总部电话:020-85564311
20年
互联网应用服务商
请输入搜索关键词
知识库 知识库

优网知识库

探索行业前沿,共享知识宝库

80%设计师没理全的UI加载方式

发布日期:2025-06-04 15:06:57 浏览次数: 827 来源:行空XKdesign
01
循环loading
循环loading图标传递信息最少,也称为不确定指示器。建议用于加载耗时1-2秒的时候,作为弱提示即可。常出现在状态栏、上拉或下拉刷新等待等等。
状态栏loading

状态栏加载是系统提示,出现在网络信号情况不好的时候。

标题栏也可以进行loading设计,比如QQ相册加载提示。


图片loading
图片加载常用loading样式简单够用,比如公众号图片加载。
若需要体验更好的图片加载,可以先采用色块占位符或模糊图像再获取完整数据。这种属于分步加载模式,优先展示加载快的数据,让用户有内容可看而不是干等。

通过程序提取面积较大的主色调,并设置几种符合产品调性的默认色,以防取色失败。需保证色彩库的颜色高级耐看,饱和度不要太高,不然很刺眼反倒引起到不好的体验。


按钮loading
按钮loading是按钮控件的状态之一,命令提交后因为网络等原因可能需要等待时间以loading样式反馈给用户。按钮loading的非模态加载形式可以保障用户浏览体验。

还有Google地图在进行搜索时,搜索框最右侧功能图标会变成loading,采用轻量的loading替换功能图标进行局部反馈提示。

除了关键任务外都建议使用非模态加载设计,比如iOS地图搜索时的局部加载,用户在等待时仍可浏览地图或选择进行其他操作。


页面刷新
上拉或下拉页面刷新,设计上有以下几种方式提升品牌感知或情感化体验。
  • 结合IP设计成趣味动画,如芒果TV、美团外卖(下拉拿红包)、遥望、知乎等。

← 5图 →

  • 结合文字LOGO图形进行设计,如得物、链家等

  • 结合产品图形进行设计,如麦麦商场的汉堡刷新动画
  • 情感化文案,如喜马拉雅每次下拉都会提示不同文案


启动页/白屏加载
产品启动页或空白页加载,一般采用品牌logo进行设计。如headspace一款正念冥想的APP启动页是logo模拟呼吸的加载动画,贴合产品且让人身心舒缓。

同样的,空白页加载也是loading占据整页,当内容呈现时间较长时出现。


toast模态加载
toast加载形式出现在画面中间,是模态加载提示,可以避免用户继续除返回外的其他操作。可以用于可以作为关键操作提交时等待提示,如手机验证码发送任务提交中、支付中等。也可以是作为异常情况下的通用处理方式。



02
进度条样式
进度条带进度信息,也称为确定指示器。常用于页面加载,可以出现在导航栏或页面中间,进度条样式根据场景进行设计。
进度页/弹窗

进度页或弹窗形式,一般在耗时大于8s的阻断型任务时做明显提醒。所以需明确进度占比减缓用户焦虑。英语流利说的课程下载页进度提示清晰,还会提供学习贴示。

软件更新进度提示,提供进度百分比,预计大概剩余时间。

另外,还可以采用分步进度提示,将后台任务转变成用户语言来告知耗时的必要性。


导航栏进度条
导航栏进度条较轻量,可等同于不确定加载指示器使用。常见于内容页加载,比如各类新闻内容页、微信公众号内容页等等。

底部导航栏进度条弱视觉,可以不干扰用户,比如视频加载、浏览器搜索加载。


进度图标

另外还有进度图标,图标样式提示弱没有进度百分比,可用于异步任务进行中。

文件下载进度图标提示。

英语流利说APP的导航图标在有任务进行时,会切换成进度图标以激励用户。

微信图片/文件发送进度。



03
等待体验优化
用户等待忍耐度

加载设计本身是为了减少用户等待感觉,针对不同等待时长使用相应加载设计:

  • <1s,无需加载动效避免引起负面效果
  • 1-2s,建议使用不确定指示器loading
  • 2-8s,需要使用带进度百分比的加载提示
  • >8s,可以设计互动贴示、场景故事动画等缓解用户焦虑,或进行加载拆分或直接转为异步加载

常见有以下几种设计方式来优化等待体验,让用户尽可能快得有内容可看:分步(渐进式)加载、骨架屏加载、预加载、智能加载、缓存加载。
分步加载
分步加载是根据内容资源加载性价比决定先后,一般图文会优先加载文字,让用户对页面内容有大概了解。适用于内容较多的复杂页面。比如AppleMusic优先加载名称,再是专辑封面。

骨架屏加载
在数据加载之前先显示页面大概框架布局,用灰色占位色块模拟。适用于页面布局较固定的情况,常见于内容型产品。


预加载/懒加载
预加载是指在用户操作之前,提前加载下个模块可能需要的数据。
而懒加载只在用户到相应位置时进行加载,避免一次性加载过多数据。通常应用在上拉下拉刷新处。
在页面加载时通常先加载首屏可见区域的图片,其他区域图片等用户滚动到时才进行加载,也是符合元素加载性价比原则。
智能加载

根据网络情况选择不同的数据加载,常见于视频播放质量的选择上,保证视频播放的流畅度。












优网科技,优秀企业首选的互联网供应服务商

优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!

优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真)、移动端应用(手机站APP开发)、微信定制开发(微信官网、微信商城、企业微信)、微信小程序定制开发等一系列互联网应用服务。


我要投稿

姓名

文章链接

提交即表示你已阅读并同意《个人信息保护声明》

专属顾问 专属顾问
扫码咨询您的优网专属顾问!
专属顾问
马上咨询
扫一扫马上咨询
扫一扫马上咨询

扫一扫马上咨询