无意中在浏览网页和app的时候，发现很多网站和app都把原来的“转菊花”（一种常见的加载动画）的加载方式换成了使用骨架屏（skeleton screens）加载。据说这是因为在告知用户屏幕正在加载的时候，骨架屏相比空白屏幕以及“转菊花”相比，用户感知等待的时间比较短。
例如YouTube
YouTube加载页面
Google drive
Google drive加载页面
以上的设计都采用了常见的视觉设计方法，例如，都在骨架屏中使用了一定的动画，骨架屏采用的都是浅灰色或者偏中性的颜色。像facebook、youtube把骨架屏当成了整个屏幕的加载动画，像Google drive把骨架屏用在加载主要文件夹结构。
骨架屏的设计方案就是在设计加载体验的时候，逐步用实际文本和图像等内容替换骨架占位符。这样的设计可以减轻用户对加载过程的关注，将用户的注意力转移到正在加载的内容上，而不是加载本身。“转菊花”（旋转器）和进度条加载，都使得用户更加专注于加载周期，并且通常都阻止用户交互，直到内容加载出来可以使用为止。而骨架屏灰色或者中性色的填充形状（占位符）在内容调用出来后替换为实际内容，可以给用户创造即时过渡的幻觉，感知时间会更短一些。
此外，如果像Google drive部分使用骨架屏加载，还可以在最大程度上不阻断用户的操作。
一开始显示骨架屏的时候也能够让用户对加载内容有个大致的预期，在弱网络环境下优化了用户体验。
在设计的时候使用骨架屏要注意的是：
（1）动画尽可能平稳而缓慢，不至于引起用户强烈的注意。
（2）使用浅灰色或者中性色显示内容框架，这样内容如果是纯图片网站或者app，可以使用图片底色显示，更显得活泼，并且给用户关于加载内容的更多预期。（pinterest就是这样）
网友评论