放置在不同图层中的光照和阴影效果，在相互作用时，可以产生有趣的现象。例如，在前景元素上使用长阴影，并在遮盖区域内移动时，可以产生出很好玩的视觉效果。类似地，光照效果可以放置在前景图层中，而不是被固定到背景中。例如，“高光” 层可以放置在前景中，以模拟光源。将其放置在前景中，意味着它在运动时将在背景层上播放，并以不同的速率向它移动。

请当心，不要创建没有意义的效果。例如，从前景元素中分离出来的阴影，或是在背景元素后移动的阴影。还要记住，许多图标可能会一起被看到，所以请保守地定制光照效果，并时刻遵循 Material Design 中对图标光影的设计要求。

迟滞效果

您可以将元素放置在背景图层中，这时它们会被前景层完全遮蔽，仅在动效下显示。

资源和工具

Sketch 源文件（请注意里面的关键元素都符号化了，必要的时候请断开符号和副本的依赖关系）：

https://github.com/nickbutcher/AdaptiveIconPlayground/raw/master/art/ic_launcher.sketch

Illustrator 源文件：

https://github.com/nickbutcher/AdaptiveIconPlayground/raw/master/art/adaptive-icon.ai

自适应图标 Playground

在开发自适应图标时，我们已经明白，在运用动效时，许多细微之处来自前景和背景元素的相互作用。这仍然是一个开放的问题，因为我们尚未看到设备和启动器制造商将如何实现这一点。为了提前让大家能预览一下 “实机” 效果，我们创建了一个小型测试应用，以帮助您对它进行评估，同时创建您的图标：

该应用使用自适应图标显示设备上安装的所有应用。滚动网格会对图标应用视差效果，触摸图标则会应用缩放效果。您可以配置效果的强度，并更改适用于所有图标的遮罩形状。希望此工具能够帮助您感知您的图标将会如何被显示出来，在不同的设备上将会如何移动。

Github 地址:

https://github.com/nickbutcher/AdaptiveIconPlayground

尽管去适应吧

希望这篇文章能够为您提供一些信息和灵感，从而帮助您为应用设计出很棒的自适应图标。大家也可以看到我们虽然提供了一些思路，但更多只是在抛砖引玉。我们期待着大家的作品。返回搜狐，查看更多