diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001559442068.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559442068.png new file mode 100644 index 0000000000000000000000000000000000000000..6e86c4924c5c9abcf0ee1669db059b3156ca65db Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559442068.png differ diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001559442072.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559442072.png new file mode 100644 index 0000000000000000000000000000000000000000..99a10c92c5b85eb9ab20d49be36bf29355f2b529 Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559442072.png differ diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001559601332.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559601332.png new file mode 100644 index 0000000000000000000000000000000000000000..a10f1038384ba22d893a18d2ac17504aa96fc145 Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559601332.png differ diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001559601336.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559601336.png new file mode 100644 index 0000000000000000000000000000000000000000..3a85ff4f04cae724c95790855f1a6c2b3d9b77ec Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559601336.png differ diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001559760964.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559760964.png new file mode 100644 index 0000000000000000000000000000000000000000..56ef6f90bbf869dd319d023c62d5b95517a89317 Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559760964.png differ diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001559760968.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559760968.png new file mode 100644 index 0000000000000000000000000000000000000000..892d790237df80fa9123847fe13d09027f743d0c Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559760968.png differ diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001559920864.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559920864.png new file mode 100644 index 0000000000000000000000000000000000000000..f2cbe4e6cbc4d7957150bd1853cdf264cb224783 Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559920864.png differ diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001559920868.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559920868.png new file mode 100644 index 0000000000000000000000000000000000000000..05b4e2b5b3db3b42534ab5e073f1dc23b8e2b0a2 Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559920868.png differ diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001559920872.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559920872.png new file mode 100644 index 0000000000000000000000000000000000000000..5d82706d9165b4d3cd0afdee675f52522428251a Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559920872.png differ diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001559920876.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559920876.png new file mode 100644 index 0000000000000000000000000000000000000000..154baee05d5100830e96838a8919a858791e0a64 Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001559920876.png differ diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001609961253.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001609961253.png new file mode 100644 index 0000000000000000000000000000000000000000..de84cff642f8c0b5dd75df65ecf1ff979cd8306d Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001609961253.png differ diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001609961257.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001609961257.png new file mode 100644 index 0000000000000000000000000000000000000000..b6d50f7243626a9d6fe36a8e23c5fb1ef6ffadad Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001609961257.png differ diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001609961261.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001609961261.png new file mode 100644 index 0000000000000000000000000000000000000000..11d7c5b30a5a80f76d5b20112997912dfcab6705 Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001609961261.png differ diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001609961265.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001609961265.png new file mode 100644 index 0000000000000000000000000000000000000000..a3b383e9827188b66801de7ac6f79ada5448c912 Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001609961265.png differ diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001610200817.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610200817.png new file mode 100644 index 0000000000000000000000000000000000000000..c3616c13dddad68e8d1eabf5a8b4b10a2a817ff7 Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610200817.png differ diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001610200821.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610200821.png new file mode 100644 index 0000000000000000000000000000000000000000..4108f6160c13e8a52b1046c9ef774bf7bf364c9a Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610200821.png differ diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001610200829.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610200829.png new file mode 100644 index 0000000000000000000000000000000000000000..f9ab024952321da5ebf816f4bc1946607e7824e5 Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610200829.png differ diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001610200833.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610200833.png new file mode 100644 index 0000000000000000000000000000000000000000..f814d1372ba86c053e8046110e9df444ab461e38 Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610200833.png differ diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001610280813.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610280813.png new file mode 100644 index 0000000000000000000000000000000000000000..f767c50a072b4ff025f7a1cfb35ade3b30dc3692 Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610280813.png differ diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001610280817.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610280817.png new file mode 100644 index 0000000000000000000000000000000000000000..3eade7b087f2367f3c99f1b1da202a633c7a339b Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610280817.png differ diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001610280821.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610280821.png new file mode 100644 index 0000000000000000000000000000000000000000..7ac1ca3a83146438120a91d1098da946c16d0a3a Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610280821.png differ diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001610401157.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610401157.png new file mode 100644 index 0000000000000000000000000000000000000000..9bd22b321c3093fbd3369f7c08be85b439574960 Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610401157.png differ diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001610401161.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610401161.png new file mode 100644 index 0000000000000000000000000000000000000000..67449033811558f0e448346ce20fe5e6d155bdb2 Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610401161.png differ diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001610401169.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610401169.png new file mode 100644 index 0000000000000000000000000000000000000000..7cec83ff9c40c405fa85d6ff5f222c37f2e63947 Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001610401169.png differ diff --git "a/zh-cn/design/ux-design/figures/\347\224\273\346\235\277.png" "b/zh-cn/design/ux-design/figures/\347\224\273\346\235\277.png" new file mode 100644 index 0000000000000000000000000000000000000000..4a60dcb19be82b445993d09cc3419ddcf086e293 Binary files /dev/null and "b/zh-cn/design/ux-design/figures/\347\224\273\346\235\277.png" differ diff --git "a/zh-cn/design/ux-design/figures/\347\272\242\350\211\262.png" "b/zh-cn/design/ux-design/figures/\347\272\242\350\211\262.png" new file mode 100644 index 0000000000000000000000000000000000000000..6640bf3c9c403f24eab1d530dd8a2f6d2bfe4a97 Binary files /dev/null and "b/zh-cn/design/ux-design/figures/\347\272\242\350\211\262.png" differ diff --git "a/zh-cn/design/ux-design/figures/\347\273\277\350\211\262.png" "b/zh-cn/design/ux-design/figures/\347\273\277\350\211\262.png" new file mode 100644 index 0000000000000000000000000000000000000000..21b7371000196d65373d49acd83b0fbee29532fd Binary files /dev/null and "b/zh-cn/design/ux-design/figures/\347\273\277\350\211\262.png" differ diff --git a/zh-cn/design/ux-design/visual-icons.md b/zh-cn/design/ux-design/visual-icons.md index ad9891c59e24399515a3a1042836eac896634d9f..6960e2b29c044dd324b01283a8e4846704639982 100644 --- a/zh-cn/design/ux-design/visual-icons.md +++ b/zh-cn/design/ux-design/visual-icons.md @@ -6,4 +6,101 @@ ![zh-cn_image_0000001517612980](figures/zh-cn_image_0000001517612980.jpg) -关于OpenHarmony默认提供的图标库，详见[线上图标库](https://developer.harmonyos.com/cn/design/harmonyos-icon/)。 +## 设计原则 + +OpenHarmony系统图标追求精致简约、独特考究的设计原则，主要运用几何型塑造图形，精简线条的结构，精准把握比例关系。在造型和隐喻上增加年轻化的设计语言，使整体风格更加年轻时尚。避免尖锐直角的使用，在情感表达上给用户传递出亲近、友好的视觉体验。 + +|
精致简约
|
独特考究
| +| -------- | -------- | +| 脱胎于几何形状，精简的线条，精确控制比例和结构位置。 | 运用开口细节交代线条的穿插和叠压关系，所形成的负型巧妙的体现结构产生的阴影和空间感。 | +| ![zh-cn_image_0000001559920864.png](figures/zh-cn_image_0000001559920864.png) | ![zh-cn_image_0000001559601332.png](figures/zh-cn_image_0000001559601332.png) | + +## 图标样式 + +系统图标根据不同场景使用描边图形与填充图形两种样式，两种样式使用同一结构图形，使他们看起来具有一致的视觉体验。
图标根据不同的使用场景，分为单色图标和双色图标，单色图标用于系统界面中辅助表达基础功能。 + | ![zh-cn_image_0000001610200817](figures/zh-cn_image_0000001610200817.png) | ![zh-cn_image_0000001559442068](figures/zh-cn_image_0000001559442068.png) | +| -------- | -------- | + | 描边图形 |填充图形 | + +双色图标是基于填充图形样式做的多彩双色效果，多用于需要突出或强调功能的场景。 + | ![zh-cn_image_0000001610401157](figures/zh-cn_image_0000001610401157.png) | ![zh-cn_image_0000001610280813](figures/zh-cn_image_0000001610280813.png)| +| -------- | -------- | +| 状态图标-关 | 状态图标-开 | +| ![zh-cn_image_0000001609961253](figures/zh-cn_image_0000001609961253.png) | ![zh-cn_image_0000001559760964](figures/zh-cn_image_0000001559760964.png) | +|功能型入口图标 | 运营类入口图标 | + + +## 图形大小布局 + +系统图标设计以 24vp 为标准尺寸，中央 22vp 为图标主要绘制区域，上下左右各留 1vp 作为空隙。 + + | ![zh-cn_image_0000001559920868](figures/zh-cn_image_0000001559920868.png) |![zh-cn_image_0000001559601336](figures/zh-cn_image_0000001559601336.png)| +| -------- | -------- | + |活动区域 Living area |空隙区域 Space area | + +**关键形状** + +关键线的形状是网格的基础。利用这些核心形状做为向导，即可使整个产品相关的图标保持一致的视觉比例及体量。 + + | ![zh-cn_image_0000001610200821](figures/zh-cn_image_0000001610200821.png) | ![zh-cn_image_0000001559442072](figures/zh-cn_image_0000001559442072.png)| +| -------- | -------- | +|正方形
宽高 20vp | 圆形
直径 22vp | +| ![zh-cn_image_0000001610401161](figures/zh-cn_image_0000001610401161.png) | ![zh-cn_image_0000001610280817](figures/zh-cn_image_0000001610280817.png) | +|横长方形
宽 22vp
高 18vp |竖长方形
宽 18vp
高 22vp | + +**额外视觉重量** + +若图标形状特殊，需要添加额外的视觉重量实现整体图标体量平衡，绘制区域可以延伸到空隙区域内，但图标整体仍应保持在24vp大小的范围之内。 + + |![zh-cn_image_0000001609961257](figures/zh-cn_image_0000001609961257.png) | ![zh-cn_image_0000001559760968.png](figures/zh-cn_image_0000001559760968.png) | +| -------- | -------- | + +**图形重心** +找准图标视觉重心，使其在图标区域中心；允许在保证图标重心稳定的情况下，图标部分超出绘制活动范围，延伸至间隙区域内。 + | ![zh-cn_image_0000001559920872](figures/zh-cn_image_0000001559920872.png) |![zh-cn_image_0000001610200829](figures/zh-cn_image_0000001610200829.png) | +| -------- | -------- | +|![绿色](figures/绿色.png)
推荐 |![红色](figures/红色.png)
不推荐 | + +## 图形特征 + +1. 描边粗细：1.5vp + +2. 终点样式：圆头 + +3. 外圆角：4vp，内圆角：2.5vp + +4. 断口宽度：1vp + +![画板](figures/画板.png) + + | | | +| -------- | -------- | +| ![zh-cn_image_0000001610280821](figures/zh-cn_image_0000001610280821.png) | **切断定义**
1. 切断效果，保留上方的切断留白，下方保留连接
2. 断口宽度：1vp
3. 切断面应保持平直的被切效果
4. 斜线从左上至右下，角度为45° | + +**图形叠加** + +两个图形的叠加使用，表示群、组、集的概念。 +图形与图形之间需留出1vp的间隙 + | ![zh-cn_image_0000001609961261](figures/zh-cn_image_0000001609961261.png) | ![zh-cn_image_0000001559920876](figures/zh-cn_image_0000001559920876.png)| +| -------- | -------- | +| ![绿色](figures/绿色.png)
推荐 | ![红色](figures/红色.png)
不推荐 | + + 图形间隙的拐角处同样需要添加3.5vp内圆角 + +| ![zh-cn_image_0000001610200833](figures/zh-cn_image_0000001610200833.png) | ![zh-cn_image_0000001610401169](figures/zh-cn_image_0000001610401169.png) | +| -------- | -------- | +| ![绿色](figures/绿色.png)
推荐 |![红色](figures/红色.png)
不推荐 | + + +## 图标资源命名规则 + +**命名逻辑顺序样例： ic_模块_功能_位置_颜色_状态_数字** + +ic_模块_功能，为必选项；位置_颜色_状态_数字，可根据实际情况选填。 + +注： 资源名要求全部为小写字母，长字段可以尽量用缩写，命名中不能有空格，不同字段之间以“_”分隔。 + +![zh-cn_image_0000001609961265](figures/zh-cn_image_0000001609961265.png) + + +关于OpenHarmony默认提供的图标库，详见：[资源](design-resources.md)