1# 应用图标
2
3OpenHarmony应用图标设计旨在通过现代化的语义表达，准确传达功能、服务和品牌。
4
5![画板xhdpi](figures/画板xhdpi.png)
6OpenHarmony图标示例
7
8
9
10## 设计原则
11
12OpenHarmony应用图标设计应遵循以下原则：
13
14  |![简洁优雅@2x](figures/简洁优雅@2x.png) |![极速达意](figures/极速达意.png) | ![情感表达](figures/情感表达.png) |
15| -------- | -------- | -------- |
16| **简洁优雅**<br>元素图标简洁，线条表现优雅，传递设计美学。 | **极速达意** <br>图标图形准确传达其功能、服务和品牌。具有易读性和识别性。| **情感表达**<br>通过图形和色彩概括表达情感，传达品牌视觉形象。  |
17
18
19
20## 图形设计
21
22遵循基本原则和设计方法。
23
24
25### 基本原则
26
27图标的主体应该是一个完整的元素，其图形能够隐喻并涵盖该应用的功能或业务。整体图形线条过渡平滑，比例自然和谐，色彩运用恰当。
28
29![画板01xhdpi](figures/画板01xhdpi.png)
30
31
32### 设计方法
33
34OpenHarmony官方主题图标在设计方法上主要引入了黄金分割比例，以确保图标图形的一致性与和谐性。
35
36
37#### 黄金分割比例的推导
38
39![黄金分割比](figures/黄金分割比.png)
40
41
42#### 黄金分割比例的运用
43
44下图是黄金分割比在应用图标图形设计中的运用：
45
46![画板02xhdpi](figures/画板02xhdpi.png)
47
48
49## 图标交付
50
51OpenHarmony应用图标都采用Adaptive Icon进行实现交付，所以需要提供的图标交付件具体内容如下：
52
53  | 属性 | 要求 |
54| -------- | -------- |
55| 格式 | png |
56| 尺寸 | 288px\*288px |
57| 内容 | 一张前景层+一张背景层 |
58
59请提供正方形图片资源，需要提供的具体内容，如下图所示：
60
61![adaptive icon](figures/zh-cn_image_0000001600905394.png)
62
63
64### Adaptive Icon实现过程
65
66提供正确的图片资源后，系统会应用自适应遮罩对图标进行统一处理，确保所有图标在桌面显示的一致性。如下图所示：
67
68![分层图标](figures/分层图标.png)
69
70- 可见区域：前景层和背景层叠加后，取中间2/3区域显示，尺寸为   192px\*192px
71
72- Mask遮罩：取Mask区域进行遮罩
73
74为了确保图标在任何使用场景下能够保持最佳显示结果，请参考以下尺寸测试图标显示效果。
75
76  | ![zh-cn_image_0000001650549569.png](figures/zh-cn_image_0000001650549569.png) | ![zh-cn_image_0000001650467121.png](figures/zh-cn_image_0000001650467121.png)|
77| -------- | -------- |
78| 设置界面图标 | 通知界面图标 |
79
80  | 应用界面 | 图标尺寸 |
81| -------- | -------- |
82| 设置界面 | 40vp\*40vp（120px\*120px） |
83| 通知界面 | 16vp\*16vp（48px\*48px） |
84
85
86关于OpenHarmony默认提供的应用图标设计模板，详见[资源](design-resources.md)
87