图标

图标是为用户提供信息指引的特定图形。Zepp OS 提供多种类型的图标元素，以适合不同场景下的应用。本规范列出了使用场景、图标构成、图形造型、图标尺寸、资源输出等规则，以指导图标元素的使用。

设计原则

Zepp OS 的图标遵循「轻量」与「友好」的设计理念。在造型上使用简洁的几何构形，精简冗余细节，保证识别度，清晰明确地传达其含义；在细节上避免锐利边角，通过连续曲率的线条传达自然美感。

图标类型

• 应用程序图标
• 通用功能图标
• 按钮图标

应用程序图标

应用程序图标应清晰明确地传达其功能/品牌/服务信息，设计风格应跟随 Zepp OS 的系统应用图标，并按照规范要求提供多个尺寸资源，以适合设备端、手机端应用程序商店等不同使用场景。

• 应用程序图标整体为圆形，尺寸为 124*124px，内部需预留空白透明的安全区域（上下左右各 2px）。

① 应用图标内容尺寸

② 透明安全区域

③ 应用图标最终尺寸

• 应用图标由主体图形与背板组成。

① 主体图形

② 背板

• 应用图标的主体图形大小为80*80px，其中绘制区域一般应保持在 70*70px。如图形需要添加额外视觉重量，以保证与其他图标的一致性，则绘制区域可以延伸至保留区域内（注意：任何情况下，图形均应保持在 80*80px 范围内）。

① 图标主体的基础绘制区域

② 图标主体的保留区域

③ 图标主体的实际尺寸

① 图标主体内容尺寸不要超过80*80px

• 图标背板为圆形，尺寸为 124*124px，内部需预留空白透明的安全区域（上下左右各 2px）。

① 图标背板尺寸

② 透明安全区域

③ 图标背板实际尺寸示例

• 不要使用非圆形的背板。

① 不要使用非圆形的背板

• 避免使用纯黑色背板，避免包含透明区域，避免带有透明度。

① 不要使用纯黑色背板

② 背板不要包含透明区域

③ 不要带有透明度

• 应用列表图标的主体图形不要超出背板区域。

① 主体图形不要超出背板区域

• 图标资源应输出包含空白透明安全区域的PNG格式图片。

① 背板四周应该包含2px空白透明的安全区域

② 背板应该为圆形，避免使用其他形状

③ 非图标区域应保持空白透明

• 设计示例

① 图标主体图形 80*80px

② 图标背板 124*124px（包含四周各2px空白透明的安全区域）

③ 应用图标最终效果

• 实际使用效果示例

① 「网易云音乐」应用程序图标

② ③ 应用列表中的「网易云音乐」应用程序图标

图标资源输出

• 尺寸对照表：

设备分辨率	圆屏 480×480px	圆屏 466×466px	圆屏 454×454px	矩形屏 390×450px
应用程序图标	124×124px
应用商店图标	240×240px
注意：图标尺寸需包含空白透明的安全区域（上下左右各 2px）。

• 格式：PNG 格式，四周空白区域透明。

通用功能图标

功能图标主要用于系统或功能的信息传达及状态指示。通用功能图标包括常规尺寸、中等尺寸、超小尺寸。

使用示例:

①设置页面：列表图标（常规尺寸）

②温度页面：温度计图标（常规尺寸）

① 太阳与月亮页面：月升/日落时间图标（中等尺寸）

② 运动前页面：心率图标（中等尺寸）

① 通话记录卡片：去电图标（超小尺寸）

② 事项提醒卡片：位置图标（超小尺寸）

图标资源输出：

• 尺寸对照表：

设备分辨率	圆屏 480×480px	圆屏 466×466px	圆屏 454×454px	矩形屏 390×450px
常规尺寸	64×64px	63×63px	61×61px	64×64px
中等尺寸	52×52px	51×51px	50×50px	52×52px
超小尺寸	32×32px	32×32px	31×31px	32×32px
注意：图标尺寸需包含空白透明的安全区域（上下左右各 2px）。

• 格式：PNG 格式，四周空白区域透明。

按钮图标

按钮图标用于表示特定操作按钮的动作、导向。按钮图标包括常规尺寸、中等尺寸、小尺寸和超小尺寸。

使用示例:

① 刷新按钮图标（常规尺寸）

② 确认按钮图标（常规尺寸）

③ 退格按钮图标（常规尺寸）

① 删除按钮图标（常规尺寸）

② 挂断按钮图标（常规尺寸）

① 列表右侧添加按钮图标（中等尺寸）

② 下载按钮（中等尺寸）

① 刷新按钮图标（中等尺寸）

② 确认按钮图标（中等尺寸）

③ 退格按钮图标（中等尺寸）

① 表盘编辑按钮图标（小尺寸）

② 页面底部解释说明按钮图标（小尺寸）

① 文字信息后的解释说明按钮图标（超小尺寸）

图标资源输出：

• 尺寸对照表：

设备分辨率	圆屏 480×480px	圆屏 466×466px	圆屏 454×454px	矩形屏 390×450px
常规尺寸	64×64px	63×63px	61×61px	64×64px
中等尺寸	52×52px	51×51px	50×50px	52×52px
小尺寸	40×40px	39×39px	38×38px	40×40px
超小尺寸	32×32px	32×32px	31×31px	32×32px
注意：图标尺寸需包含空白透明的安全区域（上下左右各 2px）。

• 格式：PNG 格式，四周空白区域透明。