1. 简介
上次更新日期：2022 年 4 月 8 日
从 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 启动器模板”。点击右上角的 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 文件。
- 在该文件中，找到自适应颜色框架。在左侧的“图层”面板中，依次找到“自适应颜色”>“组件”>“素材资源”>“图标素材资源区域”> 主题化图标素材资源 < 添加您的图标。如果您已准备好单标，请将其复制到此处以替换示例 bugdroid 图标，然后跳至第 6 步。
- 如果您没有单标，请先使用与应用相关的徽标或图标。然后，按照设计提示更新图标。首先是简化并避免复杂的形状。例如，以下应用内插图简化了叶子形状，使其不那么复杂。使用留白模拟阴影和线条细节。
- 现在，使用框线网格更新尺寸。在此示例中，我们将调整大小设置为缩放，并确保图片位于前景安全区域内。模板已设置为以 4 倍大小显示图片，并会在导出时自动调整大小，因此您可以按较大比例设计图标。
- 该文件已设置为可与 Material Theme Builder 搭配使用，以帮助预览动态颜色。将前台图标颜色样式与 On-surface-variant 相关联。
- 现在，从插件面板打开 Material Theme Builder 后，您可以随机调整源颜色，也可以添加图片以使用提取的源颜色更新颜色。
- 在不同分辨率下或在主屏幕上，此图片会是什么样子？该模板已设置完毕，因此放置在图片框内的图片会显示在各种预览情境中。
- 系统会使用单标作为通知，并在预览中以单色显示。
6. 自适应形状和旧版图标
现在，我们将创建自适应形状和旧版图标，以确保图标得到广泛支持。
- 在该文件中，找到 Shape 框架。在左侧的图层面板中，找到图标背景 < 添加您的图标*。如果您已准备好图标，请将其复制到此处以替换示例 bugdroid 图标，然后跳至第 5 步。*如果您没有图标，请先使用与您的应用相关的徽标或图标，或重复使用单标。
- 更新前景图标，同时牢记图标最佳实践。在此示例中，我恢复了原始插图的颜色，但保留了最少的细节。
- 现在，使用框线网格更新尺寸。在此示例中，我们将调整大小设置为 Scale，并确保图片位于前景安全区域内。
- 自适应形状应用图标还可以具有独特的背景。这样一来，图标的图层就可以安全地裁剪，并在互动时提供细微的动态效果。您还可以在 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 会提示您选择开始新项目或选择现有项目。
- 暂时选择一个新项目。以下界面将引导您完成新项目的设置。
- 从起始模板中选择任意模板，因为我们只会查看启动图标。
- 然后，为新项目命名，并选择完成。创建新项目需要一些时间。
使用 Image Asset Studio
现在，我们可以使用实用工具 Asset Studio 将图标添加到项目中。
- 如需访问此工具，请依次选择“文件”菜单 >“新建”>“图片资源”。
- 打开 Image Asset Studio 后，选择路径中的文件夹图标，添加前景层。选择导出的 SVG 文件作为 drawable-anydpi/ic_launcher.svg
- 选择背景层标签页，然后以类似方式选择导出的背景层。或者，您也可以选择“资源类型：颜色”，以使用纯色启动器背景。
- 返回到前景层，然后仔细检查图片是否位于安全区域内。将图标调整为视觉效果最佳的大小。
- 完成后，点击下一步，系统会询问图标应放置在项目中的哪个位置（保留默认设置或切换到“主”）。然后点击完成。您可以在 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，了解更多设计内容和教程