58 lines
3.0 KiB
Markdown
58 lines
3.0 KiB
Markdown
# 品牌 UI 资源交付规范
|
||
|
||
本文档面向 UI 设计师，说明了在使用 `web_android_shell` 框架生成各品牌 Android 壳应用时，需要提供的图片素材规格。
|
||
|
||
**文件存放路径**：`flavors/<品牌名>/`
|
||
|
||
---
|
||
|
||
## 1. 交付总览
|
||
|
||
| 资源名称 | 文件名 | 格式要求 | 尺寸 (px) | 核心要求 |
|
||
|---|---|---|---|---|
|
||
| **应用图标** | `icon.png` | PNG *(不透明)* | 1024 × 1024 | 正方形铺满（用于老版本系统图标）。 |
|
||
| **自适应前景** | `icon_foreground.png` | **PNG (背景透明)** | 1024 × 1024 | 主体图形居中。四周必须保留 **33% 的透明安全区**。 |
|
||
| **启动页图像** | `splash.png` | PNG *(含透明或实色)* | 1152 × 1152 | 核心 Logo 必须完全置于正中心的 **768×768 直径圆形**范围内。 |
|
||
| **单色前景** *(可选)* | `icon_monochrome.png` | **PNG (背景透明)** | 1024 × 1024 | 专为 Android 13+ 提供。必须是纯黑色或纯白色（无渐变），靠透明度展现轮廓。 |
|
||
|
||
---
|
||
|
||
## 2. 详细规格说明与示意图
|
||
|
||
### 2.1 应用图标 (`icon.png`)
|
||
|
||
这是最基础的图标，用于向后兼容较老版本的 Android 系统。
|
||
|
||
* **尺寸**：1024 × 1024 像素（也可提供最低 512 × 512 的设计底线）。
|
||
* **要求**：不需要圆角或圆形裁切（系统会自动裁切），直接提交带有背景颜色的**纯正方向**图形。
|
||
|
||
|
||
|
||
---
|
||
|
||
### 2.2 自适应图标前景 (`icon_foreground.png`)
|
||
|
||
自 Android 8.0 起，系统采用了由「背景层」+「前景层」自由组合实现动态效果的自适应图标（Adaptive Icon）。该图即为此时使用的「前景层」。
|
||
|
||
* **格式**：**必须是带透明背景的 PNG (PNG-24/32)**，不能使用 JPEG，否则其白色底会遮盖住背景颜色。
|
||
* **安全区设计**：
|
||
* 画布总尺寸保持 1024 × 1024。
|
||
* **主体内容必须集中在中央的 682 × 682 的圆形安全区内**。
|
||
* 外围的透明留白（约占据画布边长的 33%）将被系统底层用于视差动画和异形遮罩裁切。超出中央安全圈的内容**将被无情裁掉**。
|
||
|
||
|
||
|
||
---
|
||
|
||
### 2.3 启动页图片 (`splash.png`)
|
||
|
||
自 Android 12 开始，系统强制接管开屏动画（SplashScreen API），对核心图像的位置和大小有极其严苛的要求，否则在 2K/4K 等高清分辨率平板上会造成拉伸模糊或主体被截断。
|
||
|
||
* **画布尺寸**：**绝对正中心对其的 1152 × 1152 像素**。
|
||
* **排版留白**：
|
||
* 核心 Logo 及其相关文字，必须完全置于中心一个 **直径为 768 px 的虚拟圆圈** 内。
|
||
* 中心圆之外的区域，将根据不同机型屏幕分辨率被裁掉。
|
||
* **背景机制**：通常启动页背景色是实色（在 `flavors/xxx.yaml` 配置的 `splash_color`），因此该图建议为透明背景（Logo 独占）；如果该图自带实色背景也没有关系，只要确保主体内容满足 768 圆圈即可。
|
||
|
||
|