Skeleton Screen
スケルトン・スクリーン / 2013– / 技法 / 界面风格
加载时不出旋转图标，而是先把内容进入之前的空画面显示出来，再把信息一点点灌进去的做法。Luke Wroblewski 在2013年以自制应用 Polar 的反思为由，用这个名字介绍了它。它展示的不是让人等待这件事，而是事情正在推进。
快速判断
视觉特征
- 加载过程中不出现旋转图标和进度条
- 正文和图片要落入的位置上，先放着同样尺寸的素面色块
- 内容到达之前版面就已确定，到达后元素也不移动
- 信息不是一次全出，而是按区域依次填满
适用场景
- 列表或时间线首次加载时，想去掉旋转图标以提升体感速度时
- 内容到达瞬间元素就错位的画面，想通过先确定位置和尺寸来修正时
使用这一风格
把简短指引带入项目，或将结构化规格交给AI工具。
详细方法与出处制作规则、真实案例、比较、研究与引用格式
辞典词条
- 字体
- 不放文字。标题和正文要进入的位置上，排入与真实行高和行长一致的素面色块。
- 版面
- 直接沿用正式画面的骨架。先把元素的位置和尺寸定下来，内容进来后也不移动。
- 材料
- 用与底色只差一级的无彩色块。圆角和尺寸都对齐实物，不增加颜色。
- 注意
- 如果排入的色块与实物尺寸不一致，内容到达的瞬间整个画面就会错位，比被它取代的旋转图标还要让人不安。
- 延伸阅读
- why the 2013 article attacked the spinner, and how it defines progress / what change in user reaction it reports for Polar / cases where the dimensions of the blank blocks do not match the actual content
相关词条
- Material Design (マテリアルデザイン)共同感受：Trust / Technique。比较Skeleton Screen与Material Design
- Flat Design / Vector Minimalism (フラットデザイン / ベクターミニマリズム)同属界面风格。比较Skeleton Screen与Flat Design / Vector Minimalism
继续浏览界面风格
从界面风格中按共同感受优先推荐以下词条。
- Solarized (ソラライズド)共同感受：Technique / Calm / Trust。
- Command Palette (コマンドパレット)共同感受：Technique / Calm / Trust。
- Terminal UI (ターミナルUI)共同感受：Technique / Calm。
引用此条目
这部辞典就是用来被链接的。请取用适合你写作场合的那一种形式。
- Link
- https://indexstyle.org/zh/styles/skeleton-screen
- Markdown
- [Skeleton Screen — IndexStyle](https://indexstyle.org/zh/styles/skeleton-screen)
- HTML
- <a href="https://indexstyle.org/zh/styles/skeleton-screen">Skeleton Screen — IndexStyle</a>