模式 图片加载

图片加载

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

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

行为

逐渐淡入
转换时长
动画

转换时长

加载图片时稍长,切换图片时稍短。

用法 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

插画和照片在加载和过度时使用三段加载,要好过只使用不透明度变化。你根据需求可以组合图像的不透明度、曝光和饱和度变化。

曝光调整

图片加载初期应当使用低对比度和低饱和度。当图像的不透明度达到 100% 时,再展示图片的完整饱和度。

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

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

完全不透明和曝光

色彩饱和度

大屏幕

这种进程用于更大的屏幕,例如 Chrome OS 的壁纸。

大屏幕 Chrome OS 壁纸的加载动画

行为 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

逐渐淡入

将图像的淡入可视化,就像打印照片的过程那样。

不要让图片过度曝光。

转换时长

加载图片时推荐使用较长的转换时间,切换图片时推荐使用较短的转换时间。

加载和切换图片动画

动画

加载图片时可以加入细微的位移。背景图片切换时会根着账户切换动画水平移动。

加载图片时加入了动画