小米超级岛摘要态和展开态模版需按照已有模版进行选择，模版由多个组件构成，暂不支持自行拼接，请注意各模版所支持的OS版本，新版本模版无法向下兼容旧版本模版（OS3模版OS2无法使用，如需在OS2上展示需选择OS2模版进行单独适配）。为确保体验效果，所有提交方案均需通过设计规范审核，未达标应用将无法获得正式上线权限。

一、OS2/OS3相同模版（适配OS3自动兼容OS2）

1、天气/导航等参考模版

模版1——文本组件1 + 识别图形组件3

OS3示例

OS2示例

Flip外屏示例

文本组件1 + 识别图形组件3

文本组件1：

• 必传内容：主要文本1、次要文本1
• 主要文本：关键信息
• 富文本：支持部分文字变色，可自定义颜色
• 特殊标签：可自定义文本颜色和背景色，需要上传适配深浅模式的两种颜色
• 间隔符号和超长规则见附录-文本组件说明
• 次要文本：前置描述
• 功能图标：正方形图片，建议像素不小于80*80px
• 间隔符号和超长规则见附录-文本组件说明

识别图形组件3：

• 必传内容：图片
• 建议像素不小于224*224px
• 圆角说明：如果图片需要圆角，建议圆角数值取图片尺寸1/4，例如图片为48*48dp，圆角取12dp

2、支付等参考模版

模版2——文本组件2 + 识别图形组件1

OS3示例

OS2示例

Flip外屏示例

文本组件2 + 识别图形组件1

文本组件2：

• 必传内容：主要文本1、次要文本1
• 主要文本：关键信息
• 富文本：支持部分文字变色，可自定义颜色
• 特殊标签：可自定义文本颜色和背景色，需要上传适配深浅模式的两种颜色
• 间隔符号和超长规则见附录-文本组件说明
• 次要文本：前置描述
• 功能图标：正方形图片，建议像素不小于80*80px
• 间隔符号和超长规则见附录-文本组件说明

识别图形组件1：

• 系统默认取桌面图标
• 支持自定义，正方形图片，建议像素不小于96*96px
• 圆角说明：如果图片需要圆角，建议圆角数值取图片尺寸1/4，例如图片为24*24dp，圆角取6dp

3、callkit/视频通话等参考模版

模版3——IM图文组件 + 识别图形组件2

OS3示例

OS2示例

Flip外屏示例

IM图文组件 + 识别图形组件2

IM图文组件：

• 必传内容：头像图、主要文本、次要文本
• 头像图：正方形图片，建议像素不小于224*224px
• 主要文本：关键信息
• 次要文本：补充描述
• 应用图标：
• 系统默认取桌面图标
• 支持自定义，正方形图片，建议像素不小于96*96px

识别图形组件2：

• 必传内容：功能图标
• 正方形图片，建议像素不小于176*176px
• 圆角说明：如果图片需要圆角，建议圆角数值取图片尺寸1/4，例如图片为48*48dp，圆角取12dp

4、打车/外卖等模版参考

模版4——文本组件2 + 识别图形组件1 + 进度组件1

OS3示例

OS2示例

Flip外屏示例

文本组件2 + 识别图形组件1 + 进度组件1

文本组件2：

• 必传内容：主要文本1、次要文本1
• 主要文本：关键信息
• 富文本：支持部分文字变色，可自定义颜色
• 特殊标签：可自定义文本颜色和背景色，需要上传适配深浅模式的两种颜色
• 间隔符号和超长规则见附录-文本组件说明
• 次要文本：前置描述
• 功能图标：正方形图片，建议像素不小于80*80px
• 间隔符号和超长规则见附录-文本组件说明

识别图形组件1

• 系统默认取桌面图标
• 支持自定义，正方形图片，建议像素不小于96*96px
• 圆角说明：如果图片需要圆角，建议圆角数值取图片尺寸1/4，例如图片为24*24dp，圆角取6dp

进度组件1

• 必传内容：当前进度、进度条颜色、前进图形、中间节点、目标点
• 当前进度：已完成进度条在全部进度条上的相对位置
• 进度条颜色：已完成进度的进度条颜色，支持自定义纯色、渐变色，推荐使用应用色
• 前进图形、中间节点、目标点的绘制规范见附录-进度条绘制规范

5、排队/等位等参考模版

模版5——文本组件1 + 识别图形组件1 + 进度组件2

OS3示例

OS2示例

Flip外屏示例

文本组件1 + 识别图形组件1 + 进度组件2

文本组件1：

• 必传内容：主要文本1、次要文本1
• 主要文本：关键信息
• 富文本：支持部分文字变色，可自定义颜色
• 特殊标签：可自定义文本颜色和背景色，需要上传适配深浅模式的两种颜色
• 间隔符号和超长规则见附录-文本组件说明
• 次要文本：前置描述
• 功能图标：正方形图片，建议像素不小于80*80px
• 间隔符号和超长规则见附录-文本组件说明

识别图形组件1

• 系统默认取桌面图标
• 支持自定义，正方形图片，建议像素不小于96*96px
• 圆角说明：如果图片需要圆角，建议圆角数值取图片尺寸1/4，例如图片为24*24dp，圆角取6dp

进度组件2

• 必传内容：当前进度，进度条颜色
• 当前进度：已完成进度条在全部进度条上的相对位置
• 进度条颜色：已完成进度条的颜色，推荐和应用色相近的颜色
• 单色：进度条起始颜色和进度条结束颜色相同
• 渐变色：进度条起始颜色和进度条结束颜色不同，推荐同色系

6、停车计费等参考模版

模版6——文本组件2 + 识别图形组件1 + 进度组件2

OS3示例

OS2示例

Flip外屏示例

文本组件2 + 识别图形组件1 + 进度组件2

文本组件2：

• 必传内容：主要文本1、次要文本1
• 主要文本：关键信息
• 富文本：支持部分文字变色，可自定义颜色
• 特殊标签：可自定义文本颜色和背景色，需要上传适配深浅模式的两种颜色
• 间隔符号和超长规则见附录-文本组件说明
• 次要文本：前置描述
• 功能图标：正方形图片，建议像素不小于80*80px
• 间隔符号和超长规则见附录-文本组件说明

识别图形组件1

• 系统默认取桌面图标
• 支持自定义，正方形图片，建议像素不小于96*96px
• 圆角说明：如果图片需要圆角，建议圆角数值取图片尺寸1/4，例如图片为24*24dp，圆角取6dp

进度组件2

• 必传内容：当前进度，进度条颜色
• 当前进度：已完成进度条在全部进度条上的相对位置
• 进度条颜色：已完成进度条的颜色，推荐和应用色相近的颜色
• 单色：进度条起始颜色和进度条结束颜色相同
• 渐变色：进度条起始颜色和进度条结束颜色不同，推荐同色系

7、文件上传/下载等参考模版

模版7——IM图文组件 +识别图形组件1 + 进度组件2

OS3示例

OS2示例

Flip外屏示例

IM图文组件 +识别图形组件1 + 进度组件2

IM图文组件

• 必传内容：头像图、主要文本、次要文本
• 头像图：正方形图片，建议像素不小于224*224px
• 主要文本：关键信息
• 次要文本：补充描述
• 应用图标：
• 系统默认取桌面图标
• 支持自定义，正方形图片，建议像素不小于96*96px

识别图形组件1

• 系统默认取桌面图标
• 支持自定义，正方形图片，建议像素不小于96*96px
• 圆角说明：如果图片需要圆角，建议圆角数值取图片尺寸1/4，例如图片为24*24dp，圆角取6dp

进度组件2

• 必传内容：当前进度，进度条颜色
• 当前进度：已完成进度条在全部进度条上的相对位置
• 进度条颜色：已完成进度条的颜色，推荐和应用色相近的颜色
• 单色：进度条起始颜色和进度条结束颜色相同
• 渐变色：进度条起始颜色和进度条结束颜色不同，推荐同色系

8、优惠券/红包等参考模版

模版8——IM图文组件 + 识别图形组件1 + 按钮组件3

OS3示例

OS2示例

Flip外屏示例

IM图文组件 + 识别图形组件1 + 按钮组件3

IM图文组件

• 必传内容：头像图、主要文本、次要文本
• 头像图：正方形图片，建议像素不小于224*224px
• 主要文本：关键信息
• 次要文本：补充描述
• 应用图标：
• 系统默认取桌面图标
• 支持自定义，正方形图片，建议像素不小于96*96px

识别图形组件1

• 系统默认取桌面图标
• 支持自定义，正方形图片，建议像素不小于96*96px
• 圆角说明：如果图片需要圆角，建议圆角数值取图片尺寸1/4，例如图片为24*24dp，圆角取6dp

按钮组件3

• 必传内容：主要文本、按钮
• 主要文本：关键信息
• 图标文本按钮：
• 文本：必传，建议不要太长
• 图标：可自定义上传，建议像素不小于96*96px
• 按钮颜色：可自定义，需要上传适配深浅模式的两种颜色
• 图文特殊标签：
• 图标：正方形，建议像素不小于96*96px
• 标签文本：建议不要太长
• 颜色：可自定义文本和标签背景色，需要上传适配深浅模式的两种颜色

9、电影等参考模版

模版9——文本组件2 + 识别图形组件1 + 按钮组件2

OS3示例

OS2示例

Flip外屏示例

文本组件2 + 识别图形组件1 + 按钮组件2

文本组件2：

• 必传内容：主要文本1、次要文本1
• 主要文本：关键信息
• 富文本：支持部分文字变色，可自定义颜色
• 特殊标签：可自定义文本颜色和背景色，需要上传适配深浅模式的两种颜色
• 间隔符号和超长规则见附录-文本组件说明
• 次要文本：前置描述
• 功能图标：正方形图片，建议像素不小于80*80px
• 间隔符号和超长规则见附录-文本组件说明

识别图形组件1

• 系统默认取桌面图标
• 支持自定义，正方形图片，建议像素不小于96*96px
• 圆角说明：如果图片需要圆角，建议圆角数值取图片尺寸1/4，例如图片为24*24dp，圆角取6dp

按钮组件2

• 必传内容：前置文本1，主要小文本1，按钮文本
• 前置文本：补充描述
• 主要小文本：关键信息，支持计时器
• 图标文本按钮：
• 文本：必传，建议不要太长
• 图标：可自定义上传，建议像素不小于96*96px
• 按钮颜色：可自定义

10、快递/物流等参考模版

模版10——文本组件2 + 识别图形组件1 + 按钮组件3

OS3示例

OS2示例

Flip外屏示例

文本组件2 + 识别图形组件1 + 按钮组件3

文本组件2：

• 必传内容：主要文本1、次要文本1
• 主要文本：关键信息
• 富文本：支持部分文字变色，可自定义颜色
• 特殊标签：可自定义文本颜色和背景色，需要上传适配深浅模式的两种颜色
• 间隔符号和超长规则见附录-文本组件说明
• 次要文本：前置描述
• 功能图标：正方形图片，建议像素不小于80*80px
• 间隔符号和超长规则见附录-文本组件说明

识别图形组件1

• 系统默认取桌面图标
• 支持自定义，正方形图片，建议像素不小于96*96px
• 圆角说明：如果图片需要圆角，建议圆角数值取图片尺寸1/4，例如图片为24*24dp，圆角取6dp

按钮组件3

• 必传内容：主要文本、按钮
• 主要文本：关键信息
• 图标文本按钮：
• 文本：必传，建议不要太长
• 图标：可自定义上传，建议像素不小于96*96px
• 按钮颜色：可自定义
• 图文特殊标签：
• 图标：正方形，建议像素不小于96*96px
• 标签文本：建议不要太长
• 颜色：可自定义文本和标签背景色，需要上传适配深浅模式的两种颜色

11、运动健康等参考模版

模版11——强调图文组件 + 识别图形组件1 + 按钮组件2

OS3示例

OS2示例

Flip外屏示例

强调图文组件 + 识别图形组件1 + 按钮组件2

强调图文组件

• 必传内容：强调文本、功能图标
• 强调文本：需要强调的数据或内容，支持计时器
• 功能图标：正方形，建议像素不小于96*96px
• 辅助文本：补充描述

识别图形组件1

• 系统默认取桌面图标
• 支持自定义，正方形图片，建议像素不小于96*96px
• 圆角说明：如果图片需要圆角，建议圆角数值取图片尺寸1/4，例如图片为24*24dp，圆角取6dp

按钮组件2

• 必传内容：前置文本1，主要小文本1，按钮文本
• 前置文本：补充描述
• 主要小文本：关键信息，支持计时器
• 图标文本按钮：
• 文本：必传，建议不要太长
• 图标：可自定义上传，建议像素不小于96*96px
• 按钮颜色：可自定义

二、OS2/OS3基本相同，OS3支持更多能力（适配OS3自动兼容OS2）

1、电话/视频等参考模版

模版12——IM图文组件 + 按钮组件1

OS3示例

OS2示例

Flip外屏示例

IM图文组件 + 按钮组件1

IM图文组件

• 必传内容：头像图、主要文本、次要文本
• 头像图：正方形图片，建议像素不小于224*224px
• 圆角说明：如果图片需要圆角，建议圆角数值取图片尺寸1/4，例如图片为48*48dp，圆角取12dp
• 主要文本：关键信息
• 次要文本：补充描述
• 应用图标：
• 系统默认取桌面图标
• 支持自定义，正方形图片，建议像素不小于96*96px
• 圆角说明：如果图片需要圆角，建议圆角数值取图片尺寸1/4，例如图片为24*24dp，圆角取6dp

按钮组件1

• 支持3种类型
• 普通按钮：
• 支持1-3个
• 可自定义按钮图形，需要注意适配深浅模式
• 进度按钮：
• 支持1-3个
• 可自定义进度条颜色、背景色
• 文字按钮：
• 支持1个
• 不能和其他按钮同时使用

OS2差异：

OS2仅支持普通按钮，不支持进度、文字按钮

2、录音等参考模版

模版13——强调图文组件 + 按钮组件1

OS3示例

OS2示例

Flip外屏示例

强调图文组件 + 按钮组件1

强调图文组件

• 必传内容：强调文本、功能图标
• 强调文本：需要强调的数据或内容，支持计时器
• 功能图标：正方形，建议像素不小于96*96px
• 圆角说明：如果图片需要圆角，建议圆角数值取图片尺寸1/4，例如图片为24*24dp，圆角取6dp
• 辅助文本：补充描述

按钮组件1

• 支持3种类型
• 普通按钮：
• 支持1-3个
• 可自定义按钮图形，需要注意适配深浅模式
• 进度按钮：
• 支持1-3个
• 可自定义进度条颜色、背景色
• 文字按钮：
• 支持1个
• 不能和其他按钮同时使用

OS2差异点

OS2仅支持普通按钮，不支持进度、文字按钮

三、OS3新增模版（仅适配OS3，OS2需选取OS2可适配模版）

1、导航等参考模版

模版14-1——新图文组件/新图文组件+倒计时带图组件OS3示例

Flip外屏示例

新图文组件

新图文组件

• 图片，主要文本、次要文本1
• 图片：正方形图片，建议像素不小于224*224px
• 圆角说明：如果图片需要圆角，建议圆角数值取图片尺寸1/4，例如图片为48*48dp，圆角取12dp
• 主要文本：关键信息
• 次要文本：补充描述

序号14-2——模版结构

OS3示例

Flip外屏示例

新图文组件+倒计时带图组件

新图文组件

• 必传内容：图片、主要文本、次要文本1
• 图片：正方形图片，建议像素不小于224*224px
• 圆角说明：如果图片需要圆角，建议圆角数值取图片尺寸1/4，例如图片为48*48dp，圆角取12dp
• 主要文本：关键信息
• 次要文本：补充描述

倒计时带图组件

• 必传内容：图片、文本、文本颜色
• 图片：建议像素不小于96*96px，需要上传深浅模式两套图片
• 文本：倒计时或其他关键信息
• 文本颜色：可自定义

2、验证码等参考模版

模版16——新图文组件 + 按钮组件1

OS3示例

Flip外屏示例

新图文组件 + 按钮组件1

新图文组件

• 必传内容：图片、主要文本、次要文本1
• 图片：正方形图片，建议像素不小于224*224px
• 圆角说明：如果图片需要圆角，建议圆角数值取图片尺寸1/4，例如图片为48*48dp，圆角取12dp
• 主要文本：关键信息
• 次要文本：补充描述

按钮组件1

• 支持3种类型
• 普通按钮：
• 支持1-3个
• 可自定义按钮图形，需要注意适配深浅模式
• 进度按钮：
• 支持1-3个
• 可自定义进度条颜色、背景色
• 文字按钮：
• 支持1个
• 不能和其他按钮同时使用

3、订单待支付等参考模版

模版17——新图文组件 + 识别图形组件1 + 按钮组件5

OS3示例

Flip外屏示例

新图文组件 + 识别图形组件1 + 按钮组件5

新图文组件

• 必传内容：图片、主要文本、次要文本1
• 图片：正方形图片，建议像素不小于224*224px
• 圆角说明：如果图片需要圆角，建议圆角数值取图片尺寸1/4，例如图片为48*48dp，圆角取12dp
• 主要文本：关键信息
• 次要文本：补充描述

识别图形组件1

• 系统默认取桌面图标
• 支持自定义，正方形图片，建议像素不小于96*96px
• 圆角说明：如果图片需要圆角，建议圆角数值取图片尺寸1/4，例如图片为24*24dp，圆角取6dp

按钮组件5

• 必传内容：高亮文本、图标文本按钮
• 高亮文本：可自定义颜色
• 图标文本按钮：
• 文本：必传，建议不要太长
• 图标：可自定义上传，建议像素不小于96*96px
• 按钮颜色：可自定义

4、文件互传/分享等参考模版

模版18——新图文组件 + 识别图形组件 + 按钮组件4

OS3示例

Flip外屏示例

新图文组件 + 识别图形组件 + 按钮组件4

新图文组件

• 必传内容：图片、主要文本、次要文本1
• 图片：正方形图片，建议像素不小于224*224px
• 圆角说明：如果图片需要圆角，建议圆角数值取图片尺寸1/4，例如图片为48*48dp，圆角取12dp
• 主要文本：关键信息
• 次要文本：补充描述

识别图形组件1

• 系统默认取桌面图标
• 支持自定义，正方形图片，建议像素不小于96*96px
• 圆角说明：如果图片需要圆角，建议圆角数值取图片尺寸1/4，例如图片为24*24dp，圆角取6dp

按钮组件4

• 支持1-2个按钮

5、抢票/预约等参考模版

模版19——封面组件 + 识别图形组件1 + 按钮组件5

OS3示例

Flip外屏示例

封面组件 + 识别图形组件1 + 按钮组件5

封面组件

• 必传内容：封面图片、主要文本、次要文本1、次要文本2
• 封面图片：建议像素不小于224*288px
• 圆角说明：如果图片需要圆角，建议圆角数值取短边尺寸1/4，例如图片为48*64dp，圆角取12dp
• 主要文本：关键信息
• 次要文本：补充信息

识别图形组件1

• 系统默认取桌面图标
• 支持自定义，正方形图片，建议像素不小于96*96px
• 圆角说明：如果图片需要圆角，建议圆角数值取图片尺寸1/4，例如图片为24*24dp，圆角取6dp

按钮组件5

• 必传内容：高亮文本、图标文本按钮
• 高亮文本：可自定义颜色
• 图标文本按钮：
• 文本：必传，建议不要太长
• 图标：可自定义上传，建议像素不小于96*96px
• 按钮颜色：可自定义

6、套餐/流量余额等参考模版

模版20——文本组件2 + 识别图形组件1 + 进度组件3

OS3示例

Flip外屏示例

文本组件2 + 识别图形组件1 + 进度组件3

文本组件2：

• 必传内容：主要文本1、次要文本1
• 主要文本：关键信息
• 富文本：支持部分文字变色，可自定义颜色
• 特殊标签：可自定义文本颜色和背景色，需要上传适配深浅模式的两种颜色
• 间隔符号和超长规则见附录-文本组件说明
• 次要文本：前置描述
• 功能图标：正方形图片，建议像素不小于80*80px
• 间隔符号和超长规则见附录-文本组件说明

识别图形组件1

• 系统默认取桌面图标
• 支持自定义，正方形图片，建议像素不小于96*96px
• 圆角说明：如果图片需要圆角，建议圆角数值取图片尺寸1/4，例如图片为24*24dp，圆角取6dp

进度组件3

• 必传内容：描述文本，当前进度
• 描述文本：描述信息
• 当前进度：已完成进度条在全部进度条上的相对位置
• 进度条颜色：可自定义颜色
• 节点：支持0-4个节点，起点无节点，进度条将被均分

7、游戏/应用下载等参考模版

模版21——IM图文组件 + 进度组件2

OS3示例

Flip外屏示例

IM图文组件 + 进度组件2

IM图文组件

• 必传内容：头像图、主要文本、次要文本
• 头像图：正方形图片，建议像素不小于224*224px
• 圆角说明：如果图片需要圆角，建议圆角数值取图片尺寸1/4，例如图片为48*48dp，圆角取12dp
• 主要文本：关键信息
• 次要文本：补充描述
• 应用图标：
• 系统默认取桌面图标
• 支持自定义，正方形图片，建议像素不小于96*96px
• 圆角说明：如果图片需要圆角，建议圆角数值取图片尺寸1/4，例如图片为24*24dp，圆角取6dp

进度组件2

• 必传内容：当前进度，进度条颜色
• 当前进度：已完成进度条在全部进度条上的相对位置
• 进度条颜色：已完成进度条的颜色，推荐和应用色相近的颜色
• 单色：进度条起始颜色和进度条结束颜色相同
• 渐变色：进度条起始颜色和进度条结束颜色不同，推荐同色系

8、任务/家居进程等参考模版

模版22——新图文组件 + 识别图文组件1 + 进度组件3

OS3示例

Flip外屏示例

新图文组件 + 识别图文组件1 + 进度组件3

新图文组件

• 必传内容：图片、主要文本、次要文本1
• 图片：正方形图片，建议像素不小于224*224px
• 圆角说明：如果图片需要圆角，建议圆角数值取图片尺寸1/4，例如图片为48*48dp，圆角取12dp
• 主要文本：关键信息
• 次要文本：补充描述

识别图形组件1

• 系统默认取桌面图标
• 支持自定义，正方形图片，建议像素不小于96*96px
• 圆角说明：如果图片需要圆角，建议圆角数值取图片尺寸1/4，例如图片为24*24dp，圆角取6dp

进度组件3

• 必传内容：描述文本，当前进度
• 描述文本：描述信息
• 当前进度：已完成进度条在全部进度条上的相对位置
• 进度条颜色：可自定义颜色
• 节点：支持0-4个节点，起点无节点，进度条将被均分

9、附录1-文本组件说明

（1）间隔符号：主要文本和次要文本都具有的能力，用于在视觉上增强区分，可以控制间隔符号的显隐

（2）超长规则：

• 主要文本：超长时会截断显示为“...”，截断顺序依次为补充文本➡️主要文本1和主要文本2➡️特殊标签，注意合理使用文本数量和控制字数
• 次要文本：超长时会截断显示为“...”，截断顺序依次次要文本1和次要文本2➡️功能图标，注意合理使用文本数量和控制字数

10、附录2-文本组件说明

前进图形规则描述

• 素材尺寸60*47dp（红色范围）
• 为保证清晰度，导出尺寸不小于4x（即240*188px）
• 图片大小小于100kb
• 图形主体推荐放置区域（绿色范围），放置区域尺寸44*39dp，图形主体横向居中放置，竖向与绿色区域底边对齐
• 前进图形图示：

中间节点&目标节点规则描述：

• 素材尺寸30*47dp（红色范围）
• 为保证清晰度，导出尺寸不小于4x（即120*188px）
• 图片大小小于100kb
• 图形主体推荐放置区域（绿色范围）
• 节点到达前：
• 推荐使用灰色，使用大气泡，直接与进度条接触
• 气泡可添加阴影等效果提升质感
• 节点到达后：
• 推荐使用主题色，使用小气泡并上移，下方添加节点圆点
• 气泡避让开进度条区域，防止与进度条相同颜色导致看不清边界
• 中间节点图示：

• 目标节点图示：