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

3.0 KiB
Raw Blame History

品牌 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 圆圈即可。

启动页规范