模式 图片加载

图片加载

图片,包括插图和照片,可分三个阶段加载。

插图和照片会通过不透明度、曝光和饱和度三个错开的阶段来加载和过渡。

行为

逐渐淡入
持续时间
动画

持续时间

加载图片使用较长的持续时间,而过渡使用较短的持续时间。

Material Design 中的图片分阶段加载与过渡

用法 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

插图和照片可以在错开的时长内在三个阶段之间加载和过渡,而不是单独依赖于不透明度的变化。你可以结合图片不透明度、曝光和饱和度变化来满足你的需求。

曝光调整

图片应该从低对比度和低饱和度开始加载。一旦图片的不透明度达到100%,就以完整的饱和度显示图片。

Material Design 中的推荐不透明度、曝光与饱和度

加载图片时推荐使用的不透明度、曝光和饱和度

不透明度:0% 开始,100% 结束
曝光:Gamma,Black output(针对暗色图片)
饱和度:0 或 20% 开始,100% 结束

Material Design 中的完全不透明和曝光

完全不透明和曝光

Material Design 中的色彩饱和度

色彩饱和度

更大的屏幕

此过程适合更大的屏幕,例如加载 Chrome OS 的系统壁纸。

动画显示在更大的屏幕上加载 Chrome OS 的系统壁纸

行为 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

逐渐淡入

将图片的淡入可视化,就像照片显影过程中图像逐渐显现一样。

不要以会让亮部过曝的方式调整这些级别。

Material Design 中的逐渐淡入效果示例

推荐做法

Material Design 中的逐渐淡入效果示例

不推荐做法

持续时间

推荐使用较长的持续时间来加载图片,而切换时则使用较短的持续时间。

加载和过渡动画

动画

加载图片时可添加微小的位置偏移。此处账户切换器中的背景图会水平滑入。

视频显示了切换账户时的动画