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