文章目录
- 快速导航
Android 自适应图标尺寸与安全区：108dp / 66dp 导出指南
为什么桌面图标「缺一块」
安卓 8 起的自适应图标（Adaptive Icon）把图标拆成前景层 + 背景层（还可有单色层等），由各厂商桌面用圆形、圆角方形等遮罩裁切，并支持视差动效。你若把关键 Logo 画到四角，换一台圆遮罩手机就会被切掉——这就是「安全区」要解决的问题。
本文给上架与设计导出用的尺寸与安全区清单。双平台总表见 iOS / Android 图标规范；鸿蒙分层见 鸿蒙分层图标。
核心数字（先记这三组）
| 概念 | 数值 | 含义 |
|---|---|---|
| 图层画布 | 108 × 108 dp | 前景、背景各自的完整图层大小 |
| 安全区 | 居中约 66 × 66 dp | 关键图形应落在此区域内，遮罩外圈可能被裁 |
| 遮罩边距 | 四周约 18 dp | 108 与 66 之差的一半，留给各形遮罩 |
设计稿常用栅格导出（按 4×）：
| 资源 | 常见像素 | 说明 |
|---|---|---|
| 前景 / 背景图层 | 432 × 432 px | 108dp × 4 |
| 安全区示意 | 约 264 × 264 px | 66dp × 4 |
| Google Play 商店图标 | 512 × 512 px | 另一套：32 位 PNG、全正方形，由 Play 加圆角与阴影，勿与自适应图层混用 |
前景层 vs 背景层怎么画
| 层 | 建议 | 忌讳 |
|---|---|---|
| 背景层 | 铺满 108dp 的纯色、微渐变或简单纹理 | 把品牌字写到四角；复杂照片难遮罩 |
| 前景层 | Logo / 关键图形居中，落在 66dp 安全区 | 细线贴边；依赖四角才能认出来的图形 |
| 透明 | 前景透明处露出背景层 | 前景「挖空」后背景空洞导致遮罩异色 |
视觉动效下，前景可能相对背景轻微位移，所以更不要贴边。
和 Google Play 512 图标的分工
| 用途 | 规格 | 圆角 |
|---|---|---|
| 桌面自适应图标 | 前景+背景 108dp 图层 | 系统 / 桌面遮罩 |
| Play 商店列表图标 | 512×512、≤1024KB、sRGB | 你不要自绘圆角；Play 动态加遮罩与阴影 |
常见错误：把已经切成圆形的 512 图再塞进自适应前景，或把带透明圆角的自适应导出当商店图标——叠遮罩后边缘发脏。Play 截图透明规则与图标规则也不同，截图见 透明层被拒排查。
导出与工程侧注意
- 在 Figma / Illustrator 建 108dp（或 432px） 双图层模板，画安全区参考框（导出前隐藏）。
- 前景透明 PNG；背景可实心。
- 用 Android Studio Image Asset / 矢量工具生成
mipmap-anydpi-v26的adaptive-iconXML，核对foreground/background引用。 - 在多款桌面（Pixel 圆、三星圆角方、部分异形）上各装一次看裁切。
- 单色图层（若支持）单独准备，保证通知等场景可辨。
自检清单
- 关键图形落在约 66dp 安全区内
- 前景、背景均为 108dp 逻辑尺寸（或等价 432px）
- 未在自适应图层上烤死某一家的圆形遮罩
- Play 512 为直角满版，无自绘圆角与阴影
- 小尺寸（通知、设置）仍可识别
- 未把 iOS 圆角预览半径套到安卓前景上（见 iOS 圆角遮罩指南）
和 iOS 交付的差异（避免混用模板）
| 项目 | iOS | Android 自适应 |
|---|---|---|
| 图层 | 多为单张母版（或 Icon Composer 分层） | 前景 + 背景（必需思路） |
| 圆角 | 系统遮罩，母版直角 | 各桌面遮罩，靠安全区 |
| 商店图标 | 走 ASC / Xcode 槽位 | Play 另要 512 正方形 |
| 预览半径 | 民间 22% 仅预览 | 用 66dp 框预览，勿套 iOS 半径 |
团队若共用一套 Figma「图标」页面，请拆成 ios-master、android-adaptive-fg/bg、play-512 三个导出帧，CI 里分别校验尺寸，比靠设计师记忆更少翻车。
实战：从一张 Logo 拆三套交付
很多团队只有一枚中心 Logo，却要同时喂给桌面、Play 商店和通知栏。可以按下面拆：
- 先定安全区构图：在 108dp 画布上用 66dp 框摆 Logo，确认圆形裁切下仍完整。
- 背景层单独设计：不要把背景纹样画进前景；否则视差时会「撕裂」。
- 从自适应前景「放大居中」生成 Play 512：再检查 Play 是否需要更满的出血（仍保持直角）。
- 导出通知/快捷方式用的扁平小图：验证单色或缩小后是否只剩色块。
联调时让测试同学用至少两家国产桌面 + Pixel 装包截图，把裁切失败的案例直接贴回设计稿安全区，比口头说「再往里收一点」高效。
常见驳回与工程报错对照
| 现象 | 可能原因 | 处理 |
|---|---|---|
| 桌面图标四周透明一圈 | 前景未铺满、或错误使用了带大面积透明的背景 | 背景铺满；前景透明仅留 Logo 外 |
| 圆角外露白边 | 把已切圆的图当图层 | 重导直角图层 |
| Play 图标发灰/发脏 | 自带阴影 + Play 再投影 | 去掉自绘阴影 |
| 自适应 XML 无效 | anydpi-v26 配置或命名错误 | 用 Image Asset 向导重生成后 diff |
小结
Android 自适应图标的关键不是「再画一个圆」，而是 108dp 双图层 + 66dp 安全区，再单独准备 Play 的 512 商店图。安全区留够，换桌面遮罩也不会「缺一块」；商店图与桌面图层职责分开，审核和观感都会干净很多。