骨架屏

大白话解释

骨架屏是页面刚打开、数据还在路上时先给你看的一堆灰色方块。它们按真实内容的样子摆好，标题的位置一条灰条，图片的位置一块灰块，等数据回来再原地换成真内容。

它像装修前贴在墙上的家具轮廓贴纸，让你提前知道沙发会摆哪、电视挂哪，心里有个数，不至于空荡荡盯着白屏发呆。

它真正解决的是等待时的焦虑感。同样的两秒，白屏让人觉得卡了，骨架屏让人觉得正在加载，甚至有种内容马上要长出来的感觉，用户就愿意多等一会儿。

什么时候会遇到

• 看设计稿时除了正常页面，还附了一张全是灰色方块的版本，标题写着加载态。
• 产品说首屏白屏太久，让你先放个骨架屏撑住观感。
• 发现骨架屏飘了一下就消失，数据其实秒回，反而闪得更难看。
• 骨架块的样子和真内容对不上，数据回来后整页乱跳，位置全变了。
• 跟 Agent 沟通时你说数据来之前先放灰色方块，对方要确认是骨架屏还是加载转圈。

可以直接对 Agent 说

「列表第一次加载时先显示骨架屏，每行左边一个圆形灰块当头像，右边两条长短不一的灰条当文字，等接口返回再替换成真实内容。」

「骨架屏的形状要和真内容完全对齐，数据回来的时候不能出现跳动或者高度突然变化，避免页面闪一下。」

「如果接口三百毫秒内就返回了，就不要显示骨架屏了，省得闪一下，超过这个时间才把它显示出来。」