web_shell_flutter/doc/品牌资源规范.md

46 lines
2.4 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 品牌 UI 资源交付规范
本文档面向 UI 设计师,说明了在使用 `web_android_shell` 框架生成各品牌 Android 壳应用时,需要提供的图片素材规格。
**文件存放路径**`flavors/<品牌名>/`
---
## 1. 交付总览
| 资源名称 | 文件名 | 格式要求 | 尺寸 (px) | 核心要求 |
|---|---|---|---|---|
| **应用图标** | `icon.png` | PNG *(不透明)* | 1024 × 1024 | 同时用于老版本系统图标与 Android 自适应图标前景。 |
| **启动页图像** | `splash.png` | PNG *(含透明或实色)* | 1152 × 1152 | 核心 Logo 必须完全置于正中心的 **768×768 直径圆形**范围内。 |
| **单色前景** *(可选)* | `icon_monochrome.png` | **PNG (背景透明)** | 1024 × 1024 | 专为 Android 13+ 提供。必须是纯黑色或纯白色(无渐变),靠透明度展现轮廓。 |
---
## 2. 详细规格说明与示意图
### 2.1 应用图标 (`icon.png`)
这是最基础的图标,同时用于向后兼容较老版本的 Android 系统,以及生成 Android 自适应图标前景。
* **尺寸**1024 × 1024 像素(也可提供最低 512 × 512 的设计底线)。
* **要求**:不需要圆角或圆形裁切(系统会自动裁切),直接提交带有背景颜色的**纯正方向**图形。
* **自适应图标兼容建议**
* 主体内容尽量集中在中央安全区,避免过分贴边。
* 如图标本身包含文字或复杂形状,建议四周保留适当留白,避免被系统遮罩裁切。
![应用图标规范](images/icon_spec.png)
---
### 2.2 启动页图片 (`splash.png`)
自 Android 12 开始系统强制接管开屏动画SplashScreen API对核心图像的位置和大小有极其严苛的要求否则在 2K/4K 等高清分辨率平板上会造成拉伸模糊或主体被截断。
* **画布尺寸****绝对正中心对其的 1152 × 1152 像素**。
* **排版留白**
* 核心 Logo 及其相关文字,必须完全置于中心一个 **直径为 768 px 的虚拟圆圈** 内。
* 中心圆之外的区域,将根据不同机型屏幕分辨率被裁掉。
* **背景机制**:通常启动页背景色是实色(在 `flavors/xxx.yaml` 配置的 `splash_color`因此该图建议为透明背景Logo 独占);如果该图自带实色背景也没有关系,只要确保主体内容满足 768 圆圈即可。
![启动页规范](images/splash_spec.png)