diff --git a/zh-cn/design/ux-design/Readme-CN.md b/zh-cn/design/ux-design/Readme-CN.md index 606a21d744e09a9ccfd76d4873f88a1c56544b0b..eb61a0360dc2fbf21bf100e309b61a883dd96546 100644 --- a/zh-cn/design/ux-design/Readme-CN.md +++ b/zh-cn/design/ux-design/Readme-CN.md @@ -1,6 +1,6 @@ -# OpenHarmony应用UX设计规范发布版 +# OpenHarmony应用UX设计规范 -- [应用UX设计](app-ux-design.md) +- [应用UX设计原则](app-ux-design.md) - 应用架构设计 - [应用导航结构设计要求](app-navigation-structure-design.md) - [应用页面结构设计](app-page-structure-design.md) @@ -20,8 +20,6 @@ - [色彩](visual-colors.md) - [字体](visual-fonts.md) - [图标](visual-icons.md) - - [卡片化](visual-widgets.md) - - [光影材质](visual-shade-shadow.md) - 动效 - [概述](animation-overview.md) - [设计原则](animation-design-principles.md) diff --git a/zh-cn/design/ux-design/app-ux-design.md b/zh-cn/design/ux-design/app-ux-design.md index 222ee35163b8d7c0cb695a4710465379827f3207..f371b42d5dcdb6d11e397808a3a94b22be41b6a5 100644 --- a/zh-cn/design/ux-design/app-ux-design.md +++ b/zh-cn/design/ux-design/app-ux-design.md @@ -1,4 +1,4 @@ -# 应用UX设计 +# 应用UX设计原则 ## 设计原则 diff --git a/zh-cn/design/ux-design/design-resources.md b/zh-cn/design/ux-design/design-resources.md index cd4cb414a2daada870ceb233e6522cde2f6800e4..f4aa59ec203ed195c2d32de3c339ae1378b1bc21 100644 --- a/zh-cn/design/ux-design/design-resources.md +++ b/zh-cn/design/ux-design/design-resources.md @@ -7,6 +7,8 @@ - 符合规范的[设计交付件](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/key-features/multi-device-app-dev/design-delivery.md)样例，[OpenHarmony天气应用UX设计交付件V1.0.zip](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/key-features/multi-device-app-dev/OpenHarmony_%E5%A4%A9%E6%B0%94%E5%BA%94%E7%94%A8UX%E8%AE%BE%E8%AE%A1%E4%BA%A4%E4%BB%98%E4%BB%B6_V1.0.zip) +- OpenHarmony[图标](visual-icons.md)资源，[OpenHarmony_Icons.zip](figures/OpenHarmony_Icons.zip) + 系统资源分层设计表列出了当前OpenHarmony中可用系统资源id及其在不同类型设备上的取值，它由六张子表组成，各个子表的含义如下所示。 diff --git a/zh-cn/design/ux-design/figures/OpenHarmony_Icons.zip b/zh-cn/design/ux-design/figures/OpenHarmony_Icons.zip new file mode 100644 index 0000000000000000000000000000000000000000..9ca5302383b0bc9b3ff44c9e05b6a36aa7de6f0e --- /dev/null +++ b/zh-cn/design/ux-design/figures/OpenHarmony_Icons.zip @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f8e20ce53c7d2875ffb3294522c643e18f1e1a177d0b6f771f66792a6049b403 +size 1294306 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/multimodal-component-overview.md b/zh-cn/design/ux-design/multimodal-component-overview.md index a7c4d3ea99977106cc14f208562dd2fdac5488ea..5b892346168ff6bd1efd0aff956a2ecba3505316 100644 --- a/zh-cn/design/ux-design/multimodal-component-overview.md +++ b/zh-cn/design/ux-design/multimodal-component-overview.md @@ -33,7 +33,7 @@ |![底部页签](figures/底部页签.png) | ![子页签超出屏幕](figures/子页签超出屏幕.png) | ![标题栏-普通](figures/标题栏-普通.png) | | -------- | -------- | -------- | -|底部[页签](multimodal-bottom-tab.md) | [子页签](multimodal-subtab.md) | [标题栏](multimodal-title-bar.md) | +|[底部页签](multimodal-bottom-tab.md) | [子页签](multimodal-subtab.md) | [标题栏](multimodal-title-bar.md) | | ![标题栏-普通备份](figures/标题栏-普通备份.png)| ![步骤导航器-默认](figures/步骤导航器-默认.png) | ![2_zh-cn_image_0000001568412869.png](figures/2_zh-cn_image_0000001568412869.png) | |[侧边导航栏](multimodal-sidebar.md) | [导航点](multimodal-swiper.md) | [步骤导航器](multimodal-stepper.md) | @@ -60,13 +60,13 @@ |[菜单](multimodal-menu.md) | | | -输入类 +## 输入类 |![1_zh-cn_image_0000001517452972.png](figures/1_zh-cn_image_0000001517452972.png) | ![1_zh-cn_image_0000001568093217.png](figures/1_zh-cn_image_0000001568093217.png) | | -------- | -------- | |[文本框](multimodal-text-box.md) |[搜索框](multimodal-search-box.md) | | -选择类 +## 选择类 |![1_zh-cn_image_0000001517133818.png](figures/1_zh-cn_image_0000001517133818.png) |![1_zh-cn_image_0000001517293384.png](figures/1_zh-cn_image_0000001517293384.png) |![1_zh-cn_image_0000001568093265.png](figures/1_zh-cn_image_0000001568093265.png) | | -------- | -------- | -------- | 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)