1. 简介
上次更新时间： 2022 年 8 月 4 日
从 Android 13 开始，用户可以为自适应启动器图标设置主题。借助此功能，用户可以调节受支持的 Android 启动器中应用图标的色调，以继承所选壁纸和其他主题的配色。
轻松创建 Android 应用所需的所有系统资源，包括新的自适应颜色图标。
学习内容
- 了解不同类型的应用图标，以及设计应用图标的技巧。
- 了解如何使用 Android 启动器 Figma 模板。
- 了解如何使用 Android Studio 资源生成器。
- 了解如何使用 Android Studio 模拟器预览启动器图标。
前提条件
- 具备 Figma 基础知识
- 可选：应用图标图片（前景、背景和单色）
所需条件
- 一个 Figma 账号
- 一个 Figma Designlab 文件
- 可选：安装了 Android Studio 的 PC
2. 开始
设置
如需开始，您需要访问 Android 应用图标 Figma 文件。
首先， 登录 Figma 或创建一个账号。
从 Figma 社区复制
找到 Android 启动器模板 文件，或在 Figma 社区 中搜索“Android Adaptive icons fonts”（Android 自适应图标字体）。点击右上角的 Get a Copy （获取副本），将该文件复制到您的文件中。
使用模板
Android 图标模板包含两个页面：
- 封面页 简要介绍了相关概念以及如何使用模板。
- 模板页 包含创建所需资源所需的一切内容，分为三个框架（颜色、形状、Play 商店）。
注意： 在左侧的“图层”面板中，大多数图层和组都处于锁定状态；这些图层和组应保持锁定状态。（您可以在解锁的图片组中放置图片。）
不过，在开始创建资源之前，我们先来看看要创建的内容…
3. Android 系统图标
启动器图标
启动器图标（或应用图标）是应用启动体验的重要组成部分，启动器图标会显示在主屏幕上，作为应用的入口点。
自适应形状
自适应图标（或 AdaptiveIconDrawable）会根据各个设备的功能和用户设置的主题显示不同效果，自适应图标主要用于主屏幕启动器，也可以用于快捷方式、“设置”应用、分享对话框和概览屏幕。
自适应图标可在不同型号的设备上显示各种形状。例如，在一台原始设备制造商 (OEM) 设备上，自适应启动器图标可显示为圆形，而在其他设备上则可显示为方圆形。每个设备的原始设备制造商(OEM)都必须提供一个蒙版，系统使用该蒙版渲染所有具有相同形状的自适应图标。
自适应形状功能还允许系统通过用户互动应用各种动画效果。
自适应颜色
自适应图标现在可以使用动态颜色，以实现个性化的带主题的应用图标。
如果用户启用了带主题的应用图标（换句话说，在系统设置中开启了带主题的图标切换开关），而启动器支持此功能，则系统将使用用户选择的壁纸和主题来确定色调颜色。
与自适应形状图标非常相似，自适应颜色图标由前景和背景组成，只需要提供单色前景图标资源，系统将使用提取的配色方案处理背景和颜色。
您还可以将同一单标用作通知图标。
旧版
应包含旧版图标，以支持运行旧版 Android 版本或不支持自适应功能的设备（8.0 之前的版本）。
它们没有前台和后台资源，并且可以采用自由形状。如果您使用的是提供的模板，最终的自适应形状图片将以旧版图标所需的尺寸导出。
通知图标
通知是指 Android 在应用的界面之外显示的消息，旨在向用户提供提醒、来自他人的通信信息或应用中的其他实时信息。系统会在不同的位置以不同的格式显示通知，例如，状态栏中的图标、抽屉式通知栏中比较详细的条目、应用图标上的标记，以及在配对的穿戴式设备上自动显示。
商店图片
您可以使用置顶大图、屏幕截图、简短说明和视频在 Google Play 和其他 Google 推广渠道中着重展示和推广您的应用。
应用图标不会取代应用的启动器图标，但应具有较高的保真度和分辨率。
与启动器图标类似，您可以用图片填充整个资源空间，也可以设计徽标等图片元素并放置到框线网格上。
若要发布商品详情，您必须提供 512x512 像素的方形应用图标。如果您使用的是 Android 应用图标模板，则在使用自适应形状图片导出时会提供此图标。
4. 设计最佳实践
启动器图标用于启动应用。作为应用的入口，它们必须易于识别和阅读。以下是一些最佳实践，可确保启动器图标具有这些特性。
保持图片简洁。避免使用多个图层、多种效果和文字。这些细节在小尺寸下会丢失或难以看清。 
避免使用复杂的形状。包括徽标。尽可能使用简化的徽标，或考虑使用用户与您的应用相关联的符号。易于阅读且独特的形状有助于用户在不同情境（自适应颜色和通知）下轻松识别您的应用，从而实现统一性。 
使用网格。利用网格或框线，确保前景图片在裁剪后能够正常显示，包括全幅插画图片。 
考虑对比度 。对于自适应形状和旧版图标，请确保图标前景和背景具有清晰的对比度。避免使用较重的阴影，以免与系统阴影混淆。 
将图片置于安全区内。将前景资源置于 72x72 像素 内（除非您要使用全幅）。将背景置于 108x108 像素 内。注意： 图标模板图片框架大于 72x72 像素，以便您构建图标图片。系统会自动调整资源大小以符合规范。
矢量格式。尽量使用矢量格式（例如 SVG、AI、PDF 和 EPS 文件）的图片，而不是光栅格式（例如 PNG、JPG 和 GIF
文件）。这样可确保您的图片与新功能兼容，并且更易于编辑。 
5. 自适应颜色和通知图标
现在，轮到您创建自己的 Android 系统图标了。
- 找到 Android 应用图标 Figma 文件 。
- 在该文件中，找到 Adaptive color （自适应颜色）框架。在左侧的“图层”面板中，找到“Adaptive color”（自适应颜色）>“Components”（组件）>“art”（图片）>“Icon artwork area”（图标图片区域）> Themed Icon art < add your icon （带主题的图标图片 < 添加您的图标）。如果您已准备好单标，请将其复制到此处以替换示例 bugdroid 图标，然后跳到第 6 步。
- 如果您没有单标，请从与您的应用相关的徽标或图标开始。按照设计提示更新图标。首先简化图标并避免使用复杂的形状。例如，此处简化了应用内使用的插画，并使用了不太复杂的叶子形状。阴影和线条细节使用空白进行模拟。
- 现在，使用框线网格 更新尺寸。此处，我们将调整大小设置为“缩放”，并确保图片位于前景安全区内。 模板设置为 4 倍大小的图片，并自动调整大小以进行导出，因此您可以按更大的比例设计图标。
- 该文件设置为与 Material Theme Builder 搭配使用，以帮助预览动态颜色。将前景图标颜色样式连接到“On-surface-variant”。
- 现在，从 Plugin Panel（插件面板）打开 Material Theme Builder 后，您可以随机调整源颜色，也可以添加图片以使用提取的源颜色更新颜色。
- 在不同的分辨率下或在主屏幕上，图标会是什么样子？模板已设置好，因此放置在图片框架内的图片会显示在各种预览情境中。
- 系统会将单标用作通知，并在预览中显示为单标。
6. 自适应形状和旧版图标
现在，我们将创建自适应形状和旧版图标，以确保对图标的广泛支持。
- 在该文件中，找到 Shape （形状）框架。在左侧的“图层”面板中，找到 Icon background < add your icon （图标背景 < 添加您的图标）*。如果您已准备好图标，请将其复制到此处以替换示例 bugdroid 图标，然后跳到第 5 步。*如果您没有图标，请从与您的应用相关的徽标或图标开始，或重复使用单标。
- 更新前景图标，同时牢记图标最佳实践。此处，我恢复了原始插画颜色，但保留了最少的细节。
- 现在，使用框线网格 更新尺寸。此处，我们将调整大小设置为 缩放，并确保图片位于前景安全区内。
- 自适应形状应用图标还可以具有不同的背景。这样可以安全地裁剪图标的图层，并在互动时提供细微的移动效果。您还可以在 Android Studio 中使用和定义纯色背景。
- 预览会更新，以显示前台和背景在主屏幕上、不同的剪裁形状以及作为旧版图标时的外观。
您可以在主屏幕预览中选择图标并更改形状变体选项，从而更新用于剪裁的形状。
7. 导出
太棒了，您现在已使用应用图标更新了模板！接下来，我们将导出这些图标以进行实现。
- 确保画布上未选择任何内容。
- 依次前往 Figma 菜单 >“文件”> 导出 （Shift + Cmd + E ）。
- 在导出菜单中，确认导出。系统会从模板中下载资源。
导出内容是什么？
导出的资源包含实现应用图标所需的所有必要文件，如下所示
- Figma 会将自适应颜色的单色前景图标导出为 SVG 文件，同时导出自适应形状图标的前景和背景。
- Figma 还提供旧版图标，这些图标位于按分辨率整理的不同 mipmap 目录中。
大功告成！您的图标已准备好发送给开发者。
或者，如果您想在 Android Studio 中预览图标并将这些 SVG 转换为最终资源格式，请继续执行下一步。
8. 使用 Image Asset Studio
Android Studio 使用入门
- 下载并安装 Android Studio。
- 启动 Android Studio。
Android Studio 会提示您选择启动新项目或选择现有项目。
- 现在，选择一个新项目。以下屏幕将引导您完成新项目的设置。
- 从起始模板中选择任意模板，因为我们只会查看启动图标。
- 然后，为新项目命名并选择 Finish （完成）。创建新项目需要一些时间。
使用 Image Asset Studio
现在，我们可以使用实用工具 Asset Studio 将图标添加到项目中。
- 如需访问此工具，请依次选择 File menu > New > Image Asset（文件菜单 > 新建 > 图片资源）。
- 打开 Image Asset Studio 后，在 Path （路径）中选择文件夹图标，以添加前景图层。选择导出的 SVG 文件作为 drawable-anydpi/ic_launcher.svg
- 选择 Background Layer （背景图层）标签页，并以类似的方式选择导出的背景图层。或者，选择“Asset Type”（资源类型）：Color（颜色），以改为使用纯色启动器背景。
- 返回到前景图层，并仔细检查图片是否位于安全区内。将图标调整为视觉效果最佳的大小。
- 完成后，点击 Next （下一步），系统会询问图标在项目中的位置（保留默认设置或切换到 Main）。然后点击 Finish （完成）。您可以在 res > drawable 下找到启动器资源。双击即可打开最终矢量可绘制对象的预览。
- 手动将单层资源复制粘贴到 res/drawable 或 res/drawable-v24 中，或者通过右键点击 res 文件夹并依次选择 New > Vector Asset （新建 > 矢量资源）来手动导入单层。
- 在 res/mipmap-anydpi-v26/ic_launcher.xml 和 res/mipmap-anydpi-v26/ic_launcher_round.xml 中，添加或更改现有的 android:monochrome="path/to/monochrome/asset 以指向正确的单色资源。
9. 预览和资源
在模拟器中预览
我们已将图标添加到应用项目中，以便在真实设备或模拟器上预览！让我们看看图标的实际效果。
您应该默认设置了模拟器，但如果没有，请 创建 Android 虚拟设备。点击绿色播放按钮 。系统会构建项目并打开模拟器。
最终资源
太棒了，您已能够使用模拟器查看启动器图标在设备上的外观，并将其添加到应用项目中。这样做已将它们转换为最终的生产形式！但它们在哪里呢？
资源作为 Android 应用的资源存在，您可以通过打开资源面板 （通常位于左侧）找到它们。深入了解应用，然后找到 Res 文件夹。右键点击以打开菜单，然后选择 Open in Finder （在 Mac 上），系统会打开 Finder 窗口。（可选）您可以使用类似的过程转换和测试应用的其他资源，从而节省一些开发和质量保证时间。如果您已转换应用的其他资源，则可以将此文件夹与开发者共享。
10. 恭喜
太棒了，您已了解构建 Android 应用所需的 Android 系统图标、设计自己的图标、浏览图标模板资源，甚至可能更进一步，深入了解 Android Studio 以预览和转换资源以进行生产！
如果您有任何疑问，请随时通过 Twitter 上的 @MaterialDesign 向我们咨询。
敬请关注 youtube.com/MaterialDesign，了解更多设计内容和教程