diff --git a/zh-cn/design/ux-design/Readme-CN.md b/zh-cn/design/ux-design/Readme-CN.md index eb61a0360dc2fbf21bf100e309b61a883dd96546..430594d962e4dad6d84b01458ff6685c482e4531 100644 --- a/zh-cn/design/ux-design/Readme-CN.md +++ b/zh-cn/design/ux-design/Readme-CN.md @@ -20,6 +20,7 @@ - [色彩](visual-colors.md) - [字体](visual-fonts.md) - [图标](visual-icons.md) + - [应用图标](visual-app-icons.md) - 动效 - [概述](animation-overview.md) - [设计原则](animation-design-principles.md) diff --git a/zh-cn/design/ux-design/design-resources.md b/zh-cn/design/ux-design/design-resources.md index 4391b18f45267150435a63ca4326ada65a4a521b..052773fa9ae8e52e304c73b14d9f39563ec1c4b1 100644 --- a/zh-cn/design/ux-design/design-resources.md +++ b/zh-cn/design/ux-design/design-resources.md @@ -9,7 +9,7 @@ - OpenHarmony[图标](visual-icons.md)资源，[OpenHarmony_Icons.zip](figures/OpenHarmony_Icons.zip) -- OpenHarmony应用图标设计模板，OpenHarmony应用图标模版.zip +- OpenHarmony[应用图标](visual-app-icons.md)设计模板，OpenHarmony应用图标模版.zip 系统资源分层设计表列出了当前OpenHarmony中可用系统资源id及其在不同类型设备上的取值，它由六张子表组成，各个子表的含义如下所示。 diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001600905394.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001600905394.png new file mode 100644 index 0000000000000000000000000000000000000000..83b11cc5f8b377fc299a56009c73a3777254460d Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001600905394.png differ diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001650467121.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001650467121.png new file mode 100644 index 0000000000000000000000000000000000000000..ca1bc68e52048be791d720aecd33e0d38f61c68e Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001650467121.png differ diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001650549569.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001650549569.png new file mode 100644 index 0000000000000000000000000000000000000000..650dbf3450d41cf74b0d563f5cefa8f20bb79aa2 Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001650549569.png differ diff --git "a/zh-cn/design/ux-design/figures/\345\210\206\345\261\202\345\233\276\346\240\207.png" "b/zh-cn/design/ux-design/figures/\345\210\206\345\261\202\345\233\276\346\240\207.png" new file mode 100644 index 0000000000000000000000000000000000000000..56640aaa61f153c3d03cb6b4e3ba394695928c56 Binary files /dev/null and "b/zh-cn/design/ux-design/figures/\345\210\206\345\261\202\345\233\276\346\240\207.png" differ diff --git "a/zh-cn/design/ux-design/figures/\346\203\205\346\204\237\350\241\250\350\276\276.png" "b/zh-cn/design/ux-design/figures/\346\203\205\346\204\237\350\241\250\350\276\276.png" new file mode 100644 index 0000000000000000000000000000000000000000..1f108c413f02e2ab9181c5fb7bd8b7316bfb6f6f Binary files /dev/null and "b/zh-cn/design/ux-design/figures/\346\203\205\346\204\237\350\241\250\350\276\276.png" differ diff --git "a/zh-cn/design/ux-design/figures/\346\236\201\351\200\237\350\276\276\346\204\217.png" "b/zh-cn/design/ux-design/figures/\346\236\201\351\200\237\350\276\276\346\204\217.png" new file mode 100644 index 0000000000000000000000000000000000000000..17758d3dcc36d23af5438d57be514f49ee814dba Binary files /dev/null and "b/zh-cn/design/ux-design/figures/\346\236\201\351\200\237\350\276\276\346\204\217.png" differ diff --git "a/zh-cn/design/ux-design/figures/\347\224\273\346\235\27701xhdpi.png" "b/zh-cn/design/ux-design/figures/\347\224\273\346\235\27701xhdpi.png" new file mode 100644 index 0000000000000000000000000000000000000000..c3e6301d57208d4867ee188de30d50d101071cad Binary files /dev/null and "b/zh-cn/design/ux-design/figures/\347\224\273\346\235\27701xhdpi.png" differ diff --git "a/zh-cn/design/ux-design/figures/\347\224\273\346\235\27702xhdpi.png" "b/zh-cn/design/ux-design/figures/\347\224\273\346\235\27702xhdpi.png" new file mode 100644 index 0000000000000000000000000000000000000000..cfd68c25365862a5400e116083b7c1bdc1aa49b2 Binary files /dev/null and "b/zh-cn/design/ux-design/figures/\347\224\273\346\235\27702xhdpi.png" differ diff --git "a/zh-cn/design/ux-design/figures/\347\224\273\346\235\277xhdpi.png" "b/zh-cn/design/ux-design/figures/\347\224\273\346\235\277xhdpi.png" new file mode 100644 index 0000000000000000000000000000000000000000..4743d1086edd2eca54ab82e995ca03593cd17436 Binary files /dev/null and "b/zh-cn/design/ux-design/figures/\347\224\273\346\235\277xhdpi.png" differ diff --git "a/zh-cn/design/ux-design/figures/\347\256\200\346\264\201\344\274\230\351\233\205@2x.png" "b/zh-cn/design/ux-design/figures/\347\256\200\346\264\201\344\274\230\351\233\205@2x.png" new file mode 100644 index 0000000000000000000000000000000000000000..c657f111494b2466f829a9f9aeae2cdc7d78de1e Binary files /dev/null and "b/zh-cn/design/ux-design/figures/\347\256\200\346\264\201\344\274\230\351\233\205@2x.png" differ diff --git "a/zh-cn/design/ux-design/figures/\351\273\204\351\207\221\345\210\206\345\211\262\346\257\224.png" "b/zh-cn/design/ux-design/figures/\351\273\204\351\207\221\345\210\206\345\211\262\346\257\224.png" new file mode 100644 index 0000000000000000000000000000000000000000..eb461ed4d89e446624944c3bf2b1cc807096bedc Binary files /dev/null and "b/zh-cn/design/ux-design/figures/\351\273\204\351\207\221\345\210\206\345\211\262\346\257\224.png" differ diff --git a/zh-cn/design/ux-design/visual-app-icons.md b/zh-cn/design/ux-design/visual-app-icons.md new file mode 100644 index 0000000000000000000000000000000000000000..7c95c7e4b3b9aadc77e2697ece32db6f8735d18b --- /dev/null +++ b/zh-cn/design/ux-design/visual-app-icons.md @@ -0,0 +1,86 @@ +# 应用图标 + +OpenHarmony应用图标设计旨在通过现代化的语义表达，准确传达功能、服务和品牌。 + +![画板xhdpi](figures/画板xhdpi.png) +OpenHarmony图标示例 + + + +## 设计原则 + +OpenHarmony应用图标设计应遵循以下原则： + + |![简洁优雅@2x](figures/简洁优雅@2x.png) |![极速达意](figures/极速达意.png) | ![情感表达](figures/情感表达.png) | +| -------- | -------- | -------- | +| **简洁优雅**
元素图标简洁，线条表现优雅，传递设计美学。 | **极速达意**
图标图形准确传达其功能、服务和品牌。具有易读性和识别性。| **情感表达**
通过图形和色彩概括表达情感，传达品牌视觉形象。 | + + + +## 图形设计 + +遵循基本原则和设计方法。 + + +### 基本原则 + +图标的主体应该是一个完整的元素，其图形能够隐喻并涵盖该应用的功能或业务。整体图形线条过渡平滑，比例自然和谐，色彩运用恰当。 + +![画板01xhdpi](figures/画板01xhdpi.png) + + +### 设计方法 + +OpenHarmony官方主题图标在设计方法上主要引入了黄金分割比例，以确保图标图形的一致性与和谐性。 + + +#### 黄金分割比例的推导 + +![黄金分割比](figures/黄金分割比.png) + + +#### 黄金分割比例的运用 + +下图是黄金分割比在应用图标图形设计中的运用： + +![画板02xhdpi](figures/画板02xhdpi.png) + + +## 图标交付 + +OpenHarmony应用图标都采用Adaptive Icon进行实现交付，所以需要提供的图标交付件具体内容如下： + + | 属性 | 要求 | +| -------- | -------- | +| 格式 | png | +| 尺寸 | 288px\*288px | +| 内容 | 一张前景层+一张背景层 | + +请提供正方形图片资源，需要提供的具体内容，如下图所示： + +![adaptive icon](figures/zh-cn_image_0000001600905394.png) + + +### Adaptive Icon实现过程 + +提供正确的图片资源后，系统会应用自适应遮罩对图标进行统一处理，确保所有图标在桌面显示的一致性。如下图所示： + +![分层图标](figures/分层图标.png) + +- 可见区域：前景层和背景层叠加后，取中间2/3区域显示，尺寸为 192px\*192px + +- Mask遮罩：取Mask区域进行遮罩 + +为了确保图标在任何使用场景下能够保持最佳显示结果，请参考以下尺寸测试图标显示效果。 + + | ![zh-cn_image_0000001650549569.png](figures/zh-cn_image_0000001650549569.png) | ![zh-cn_image_0000001650467121.png](figures/zh-cn_image_0000001650467121.png)| +| -------- | -------- | +| 设置界面图标 | 通知界面图标 | + + | 应用界面 | 图标尺寸 | +| -------- | -------- | +| 设置界面 | 40vp\*40vp（120px\*120px） | +| 通知界面 | 16vp\*16vp（48px\*48px） | + + +关于OpenHarmony默认提供的应用图标设计模板，详见[资源](design-resources.md)