加载中的那两秒，骨架屏能救回多少耐心

点开一个产品列表，屏幕先是一片白，过一会儿整页内容突然砸下来。这两秒里，用户不知道是在加载、还是点错了、还是网站坏了。多数人不会等，返回上一页的动作比想象中快。

骨架屏救的是感知，不是速度

骨架屏的做法，是在内容到位之前先画出页面的基本轮廓：一行标题的灰条、几张卡片的方框、一段文字的短横线。它不减少任何一个字节，只是把等待变得更可解释。用户看到轮廓在动，会判断内容正在来，愿意多等一会儿。

指标上的账要算清

骨架块不是真实内容，性能统计里衡量的是真实文字与图片出现的时间。也就是说，骨架屏做得再好，页面该慢还是慢，该扣的分照扣。它属于体验优化，不能拿来替代服务器响应、图片压缩和资源精简这些硬功夫。

结构要贴近真内容

骨架的形状应当和最终内容一致：卡片是方形就别画成圆形，标题占一行就别画三行。差得越多，内容出现时的跳变越明显。尺寸、间距、圆角都按真实组件量一遍，切换时才不会出现整体位移。

别做假进度条

一个走到百分之九十就停住的进度条，比没有更让人焦虑。骨架屏也不要配会结束的动画循环，用低对比度的呼吸式渐变即可。系统设置了减少动态效果的用户，应当直接给静态灰块。

首屏之外谨慎使用

列表滚动加载时给后续项目加骨架，是有意义的；但如果用户根本滚不到那里，提前渲染一堆占位块只是浪费。更常见的问题是占位块的高度与实际内容不符，滚动条位置一跳，用户就找不到刚才看的位置。

留一条兜底路径

网络极差或接口出错时，骨架会一直闪下去，用户永远等不到内容。设定一个超时，比如几秒后仍无数据，就把骨架换成一句说明加一个重试按钮。让用户知道发生了什么，比让他继续猜要好。

什么时候用文字占位

正文详情页、帮助文档这类以文字为主的页面，用骨架的意义不大。直接在模板里输出标题和首段的静态文字，反而更快也更稳。骨架更适合结构固定、条目较多的卡片型列表。

小结

骨架屏是一种沟通方式：告诉用户内容正在路上。结构准、动画轻、有兜底，三件事做到就不会帮倒忙。冉冉科技在列表型页面开发中，会把加载态纳入验收项。

关于冉冉科技

江苏冉冉信息科技有限公司（品牌“冉冉科技”）成立于2017年，位于江苏省常州市新北区，是一家从事互联网信息服务、电子商务应用与企业应用系统开发的技术服务企业。公司业务涵盖网站建设、网页设计、SEO优化、竞价包年、域名注册、虚拟主机、企业邮箱、整合营销及企业形象策划等，以“只做有效果的网络营销”为服务主张，累计完成三千余起网站建设与服务。