字节小程序
开发者社区
小程序小游戏
登录
小程序启动美学之骨架屏能力

小程序启动美学之骨架屏能力

3249浏览作者: 抖音开放平台团队

骨架屏(Skeleton Screen)是指在初始加载阶段就显示页面的主要框架,而不是空白页面。是通过其他元素(大多为灰色块状元素)替代占位图像、视频和动画的内容来创建的页面大致轮廓,让用户产生一种已经有内容返回了的感觉,减少用户等待焦虑。


通常在小程序启动过程中,开发者也会在主要内容渲染完成前展示 loading 图标,当然也有更好的处理方式,采用骨架屏。但自研骨架屏依赖小程序生命周期,展示时机较晚,体验不佳


好消息来了!抖音小程序框架也提供了自动生成骨架屏能力,一键生成、高效迭代,出现时机更早(小程序启动立即出现)!

以懂车帝小程序为例,使用框架骨架屏后与自研骨架屏对比 LCP 到达率显著提升,Android 提升率达 6.79%,尤其对于页面加载复杂,LCP 到达率较低的页面,效果显著。

根据官方实验数据,骨架屏能够有效提升LCP到达率,也表示有更多用户愿意等待到渲染完成。

一览「骨」芳容

小程序默认加载状态

框架生成的骨架屏

更快的骨架屏

「技术面对面」:框架提供的骨架屏有什么特色,相对自研的优势在哪里?

1.展示快  

自研骨架屏受限于小程序生命周期,展示时机同页面渲染时机。而框架的骨架屏机制借助客户端能力,能够在小程序启动时立即展示骨架屏,使用这一机制,可以减少用户的白屏等待时长,给用户带来更好的用户体验。

2.生成快  

以下简单几步就可以生成骨架屏,默认骨架屏样式已经能满足大部分需求,小程序迭代只需要重新一键生成,再也不用担心需求变更手动修改骨架屏。


美学X体验 纵享丝滑感

除了追求「快」,在产品美学和用户体验方面,合理的选择和细致的设计,使得骨架屏也具备产品特色,转场更丝滑~

「技术面对面」:哪些场景需要使用骨架屏呢?

以下场景中使用骨架屏能显著提升用户体验

  • 列表、卡片、图文等结构页面,对于动画/原生/复杂组件较多的页面展示效果不佳;
  • 首屏内容或渲染较慢的页面,减少等待焦虑
  • 局部加载缓慢场景


「技术面对面」:默认骨架屏样式与产品本身不融合怎么办?

生成骨架屏后也可以手动修改 *.sk 文件,根据自身需要灵活选择。以下细节的把控也可以提升骨架屏的适配性

  • 合理控制移除时机。自行移除骨架屏能够更精准的掌握用户等待时长,建议在主要内容渲染渲染后主动移除。移除时机过早起不到过渡效果,过晚用户可能会误认为内容获取失败
  • 自行适配自定义导航栏,默认生成骨架屏不包含导航栏样式,需要自行适配,方式见开发文档
  • 自行适配固定背景。默认生成的骨架屏为白色背景,如有固定背景,自行调整背景样式启动更丝滑。


为留住用户,骨架屏不失为一把利器,能够有效缓解用户等待焦虑,但也不是绝对的神药,结合其他优化手段减少启动耗时才可能「一触即达」。


👉 优化手段直通车:小程序启动性能优化小程序运行时性能优化

👉 小程序问题扫描仪:体验评分工具

最后一次编辑于 2023年06月08日
加载中