Skip to content

D
Docs

OpenHarmony / Docs
大约 1 年 前同步成功

通知 159
Star 292
Fork 28
D
Docs

体验新版 GitCode，发现更多精彩内容 >>

提交 aac577c1 编写于 作者: F fanzhaonan
浏览文件
操作

check keyword 

Signed-off-by: Nfanzhaonan <fanzhaonan1@huawei.com>
上级 a6f3eb34
隐藏空白更改
内联 并排
Showing with 45 addition and 48 deletion
zh-cn/application-dev/key-features/multi-device-app-dev/case.md
浏览文件 @ aac577c1
......@@ -70,7 +70,7 @@
| 默认设备 | 平板 |
| -------- | -------- |
| ![overview_phone](figures/overview_phone.png) | ![overview_tablet](figures/overview_tablet.png) |
| ![overview_default](figures/overview_default.png) | ![overview_tablet](figures/overview_tablet.png) |
会话详情页面在默认设备和平板上的样式如上图所示，会话详情页面可以划分为三个部分：
......@@ -107,7 +107,7 @@
| 默认设备 | 平板 |
| -------- | -------- |
| ![contact_details_phone](figures/contact_details_phone.png) | ![contact_details_tablet](figures/contact_details_tablet.png) |
| ![contact_details_default](figures/contact_details_default.png) | ![contact_details_tablet](figures/contact_details_tablet.png) |
```
......@@ -127,7 +127,7 @@
| 默认设备 | 平板 |
| -------- | -------- |
| ![top_title_blank_phone](figures/top_title_blank_phone.png) | ![top_title_blank_tablet](figures/top_title_blank_tablet.png) |
| ![top_title_blank_default](figures/top_title_blank_default.png) | ![top_title_blank_tablet](figures/top_title_blank_tablet.png) |
```
......@@ -165,7 +165,7 @@
| 默认设备 | 平板 |
| -------- | -------- |
| ![top_title_done_phone](figures/top_title_done_phone.png) | ![top_title_done_tablet](figures/top_title_done_tablet.png) |
| ![top_title_done_default](figures/top_title_done_default.png) | ![top_title_done_tablet](figures/top_title_done_tablet.png) |
```
......@@ -213,7 +213,7 @@
| 默认设备 | 平板 |
| -------- | -------- |
| ![bottom_input_phone](figures/bottom_input_phone.png) | ![bottom_input_tablet](figures/bottom_input_tablet.png) |
| ![bottom_input_default](figures/bottom_input_default.png) | ![bottom_input_tablet](figures/bottom_input_tablet.png) |
```
......@@ -262,7 +262,7 @@
| 默认设备 | 平板 |
| -------- | -------- |
| ![message_bubble_basic_phone](figures/message_bubble_basic_phone.png) | ![message_bubble_basic_tablet](figures/message_bubble_basic_tablet.png) |
| ![message_bubble_basic_default](figures/message_bubble_basic_default.png) | ![message_bubble_basic_tablet](figures/message_bubble_basic_tablet.png) |
```
......@@ -294,7 +294,7 @@ struct MessageBubble {
| 默认设备 | 平板 |
| -------- | -------- |
| ![message_bubble_radius_phone](figures/message_bubble_radius_phone.png) | ![message_bubble_radius_tablet](figures/message_bubble_radius_tablet.png) |
| ![message_bubble_radius_default](figures/message_bubble_radius_default.png) | ![message_bubble_radius_tablet](figures/message_bubble_radius_tablet.png) |
```
......@@ -332,7 +332,7 @@ struct MessageBubble {
| 默认设备 | 平板 |
| -------- | -------- |
| ![message_bubble_recv_phone](figures/message_bubble_recv_phone.png) | ![message_bubble_recv_tablet](figures/message_bubble_recv_tablet.png) |
| ![message_bubble_recv_default](figures/message_bubble_recv_default.png) | ![message_bubble_recv_tablet](figures/message_bubble_recv_tablet.png) |
```
......@@ -380,7 +380,7 @@ struct MessageBubble {
| 默认设备 | 平板 |
| -------- | -------- |
| ![message_bubble_send_phone](figures/message_bubble_send_phone.png) | ![message_bubble_send_tablet](figures/message_bubble_send_tablet.png) |
| ![message_bubble_send_default](figures/message_bubble_send_default.png) | ![message_bubble_send_tablet](figures/message_bubble_send_tablet.png) |
```
......@@ -473,7 +473,7 @@ const globalMessageList:any[] = [
| 默认设备 | 平板 |
| -------- | -------- |
| ![message_list_phone](figures/message_list_phone.png) | ![message_list_tablet](figures/message_list_tablet.png) |
| ![message_list_default](figures/message_list_default.png) | ![message_list_tablet](figures/message_list_tablet.png) |
```
......@@ -530,7 +530,7 @@ struct Conversation {
| 默认设备 | 平板 |
| -------- | -------- |
| ![overview_phone](figures/overview_phone.png) | ![overview_tablet](figures/overview_tablet.png) |
| ![overview_default](figures/overview_default.png) | ![overview_tablet](figures/overview_tablet.png) |
```
......
zh-cn/application-dev/key-features/multi-device-app-dev/design-interaction-event-normalization.md
浏览文件 @ aac577c1
......@@ -20,7 +20,7 @@
一般地，触屏手指的按下/抬起行为对应于光标的按下/抬起行为。
在一些特殊场景，可能会存在使用鼠标/触摸板双击打开对象的交互方案，例如电脑模式下打开桌面应用或文件。此类情况需由应用单独特殊处理，且同一功能不能同时支持单击和双击两种交互方式。
在一些特殊场景，可能会存在使用鼠标/触摸板双击打开对象的交互方案，例如打开桌面应用或文件。此类情况需由应用单独特殊处理，且同一功能不能同时支持单击和双击两种交互方式。
## 显示菜单
......@@ -29,12 +29,12 @@
![zh-cn_image_0000001268533753](figures/zh-cn_image_0000001268533753.jpg)
| **输入方式** | **交互行为** |
| **输入方式** | **交互行为** |
| -------- | -------- |
| 触屏 | 单指长按 |
| 鼠标 | 右键单击（与PC一致）/&nbsp;左键长按（保留触屏习惯） |
| 触摸板 | 双指轻单击/重单击（与PC一致）/&nbsp;单指重长按（保留触屏习惯） |
| 键盘 | （无通用操作） |
| 触屏 | 单指长按 |
| 鼠标 | 右键单击/左键长按（保留触屏习惯） |
| 触摸板 | 双指轻单击/重单击/单指重长按（保留触屏习惯） |
| 键盘 | （无通用操作） |
这里的菜单指的是广义的菜单，即用于展示用户可执行的操作的临时性弹出窗口。
......
zh-cn/application-dev/key-features/multi-device-app-dev/design-responsive-layout.md
浏览文件 @ aac577c1
......@@ -10,7 +10,7 @@
![删格](figures/删格.png)
栅格断点系统与日常使用的设备屏幕类型有一定的对应关系，例如：超小对应智能穿戴设备，小对应默认设备，中对应平板，大对应智慧屏与PC。设计师可面向希望运行的设备进行所属屏幕类型的适配。
栅格断点系统与日常使用的设备屏幕类型有一定的对应关系，例如：超小对应智能穿戴设备，小对应默认设备，中对应平板竖屏，大对应智慧屏与平板横屏。设计师可面向希望运行的设备进行所属屏幕类型的适配。
随着智能设备种类的增加，越来越多产品在四种屏幕类型上具备不同的交互能力，如支持触摸的运动相机（小）、仅支持遥杆的手持云台（小-中）、不可移动的智能台灯（中-大）等，需结合具体设备交互进行对应设计，不可一概而论。
......
zh-cn/application-dev/key-features/multi-device-app-dev/ide-using.md
浏览文件 @ aac577c1
......@@ -16,7 +16,7 @@ DevEco Studio的基本使用，请参考[DevEco Studio使用指南](../../quick-
如果直接使用如下所示的平级目录进行模块管理，工程逻辑结构较混乱且模块间的依赖关系不够清晰，不利于开发及后期维护。
```
/application
├── common
......@@ -30,7 +30,7 @@ DevEco Studio的基本使用，请参考[DevEco Studio使用指南](../../quick-
更推荐使用本文[部署模型](introduction.md#部署模型)小节中介绍的common、features、product三层工程结构。工程结构示例如下所示：
```
/application
├── common # 公共特性目录
......@@ -58,7 +58,7 @@ DevEco Studio的基本使用，请参考[DevEco Studio使用指南](../../quick-
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> - 在一个工程中同一个设备类型只支持一个Entry类型的模块。
>
> - 当前的DevEco Studio（3.0 Beta3版本）在创建工程时，设备类型仅能选择phone和tablet，默认该模块已经选择了entry类型，那么在创建wearable这个模块，只能选择feature类型。
> - 当前的DevEco Studio（3.0 Beta3版本）在创建工程时，设备类型仅能选择dafault和tablet，默认该模块已经选择了entry类型，那么在创建wearable这个模块，只能选择feature类型。
>
> - 在下一个小节，我们将介绍如何修改Module的配置，包括Module的类型以及其支持的设备类型等。
......@@ -77,7 +77,7 @@ DevEco Studio的基本使用，请参考[DevEco Studio使用指南](../../quick-
通过修改每个模块中的配置文件（module.json5）对模块进行配置，配置文件中各字段含义详见[配置文件说明](../../quick-start/stage-structure.md)。
- 将default模块的deviceTypes配置为["phone", "tablet"]，同时将其type字段配置为entry。
- 将default模块的deviceTypes配置为["default", "tablet"]，同时将其type字段配置为entry。
即default模块编译出的hap包在默认设备和平板上安装和运行。
![zh-cn_image_0000001267914116](figures/zh-cn_image_0000001267914116.png)
......
zh-cn/application-dev/key-features/multi-device-app-dev/interaction-basics.md
浏览文件 @ aac577c1
# 交互基础
在全场景的数字体验中，越来越多类型的智能终端设备分布在用户的日常生活中，可交互的用户界面广泛存在于默认设备、平板、PC、智能穿戴设备、智慧屏、车机、虚拟现实（VR）和增强现实（AR）等设备上。应用可能在多种设备上运行或在单一设备上被用户通过多种输入方式操控，也可能在多种距离上被用户操控。这需要其用户界面能够识别和支持不同的交互场景，以便用户以习惯的、舒适的方法与其进行交互。
在全场景的数字体验中，越来越多类型的智能终端设备分布在用户的日常生活中，可交互的用户界面广泛存在于默认设备、平板、智能穿戴设备、智慧屏、车机、虚拟现实（VR）和增强现实（AR）等设备上。应用可能在多种设备上运行或在单一设备上被用户通过多种输入方式操控，也可能在多种距离上被用户操控。这需要其用户界面能够识别和支持不同的交互场景，以便用户以习惯的、舒适的方法与其进行交互。
![zh-cn_image_0000001224293580](figures/zh-cn_image_0000001224293580.png)
......
zh-cn/application-dev/key-features/multi-device-app-dev/navigation-design.md
浏览文件 @ aac577c1
......@@ -35,7 +35,7 @@
![一多-2-2](figures/一多-2-2.png)
多设备设计：可转化导航类控件到符合设备体验的位置上。默认设备上使用Tab导航，PAD和PC使用侧边Tab导航，智慧屏使用顶部Tab导航。
多设备设计：可转化导航类控件到符合设备体验的位置上。默认设备上使用Tab导航，PAD等大屏设备使用侧边Tab导航，智慧屏使用顶部Tab导航。
![一多-2-3](figures/一多-2-3.png)
......@@ -53,7 +53,7 @@
![一多-2-5](figures/一多-2-5.png)
多设备设计：可以考虑将上下层级的界面在同一界面展示。默认设备和智慧屏上使用上下层级关系。平板和PC使用上分栏的方式展示内容。
多设备设计：可以考虑将上下层级的界面在同一界面展示。默认设备和智慧屏上使用上下层级关系。平板等大屏设备上使用分栏的方式展示内容。
![一多-2-6](figures/一多-2-6.png)
......
zh-cn/application-dev/key-features/multi-device-app-dev/typical-layout-scenario.md
浏览文件 @ aac577c1
......@@ -29,7 +29,7 @@
| sm | md | lg |
| -------- | -------- | -------- |
| 页签在底部<br/>页签的图标和文字垂直布局<br/>页签宽度均分<br/>页签高度固定72vp | 页签在底部<br/>页签的图标和文字水平布局<br/>页签宽度均分<br/>页签高度固定56vp | 页签在左边<br/>页签的图标和文字垂直布局<br/>页签宽度固定96vp<br/>页签高度总占比‘60%’后均分 |
| ![页签布局手机](figures/页签布局手机.png) | ![页签布局折叠屏](figures/页签布局折叠屏.png) | ![页签布局matePadPro](figures/页签布局matePadPro.png) |
| ![页签布局](figures/页签布局sm.png) | ![页签布局](figures/页签布局md.png) | ![页签布局](figures/页签布局lg.png) |
**实现方案**
......@@ -134,13 +134,12 @@ struct Home {
## 运营横幅（Banner）
**布局效果**
| sm | md | lg |
| -------- | -------- | -------- |
| 展示一个内容项 | 展示两个内容项 | 展示三个内容项 |
| ![banner1](figures/banner1.PNG) | ![banner2](figures/banner2.PNG) | ![banner3](figures/banner3.PNG) |
| sm | md | lg |
| -------- | -------- | -------- |
| 展示一个内容项 | 展示两个内容项 | 展示三个内容项 |
| ![banner_sm](figures/banner_sm.png) | ![banner_md](figures/banner_md.png) | ![banner_lg](figures/banner_lg.png) |
**实现方案**
......@@ -194,10 +193,10 @@ export default struct Banner {
**布局效果**
| sm | md | lg |
| sm | md | lg |
| -------- | -------- | -------- |
| 展示两列 | 展示四列 | 展示六列 |
| ![多列列表手机](figures/多列列表手机.png) | ![多列列表折叠屏](figures/多列列表折叠屏.png) | ![多列列表matePadPro](figures/多列列表matePadPro.png) |
| 展示两列 | 展示四列 | 展示六列 |
| ![多列列表sm](figures/多列列表sm.png) | ![多列列表md](figures/多列列表md.png) | ![多列列表lg](figures/多列列表lg.png) |
**实现方案**
......@@ -334,10 +333,10 @@ struct MultiLaneList {
**布局效果**
| sm | md | lg |
| sm | md | lg |
| -------- | -------- | -------- |
| 默认隐藏侧边栏，同时提供侧边栏控制按钮，用户可以通过按钮控制侧边栏显示或隐藏。 | 始终显示侧边栏，不提供控制按钮，用户无法隐藏侧边栏。 | 始终显示侧边栏，不提供控制按钮，用户无法隐藏侧边栏。 |
| ![sm](figures/sm.png) | ![md](figures/md.png) | ![lg](figures/lg.png) |
| 默认隐藏侧边栏，同时提供侧边栏控制按钮，用户可以通过按钮控制侧边栏显示或隐藏。 | 始终显示侧边栏，不提供控制按钮，用户无法隐藏侧边栏。 | 始终显示侧边栏，不提供控制按钮，用户无法隐藏侧边栏。 |
| ![侧边栏sm](typical-layout-scenario.assets/侧边栏sm.png) | ![侧边栏md](figures/侧边栏md.png) | ![侧边栏lg](figures/侧边栏lg.png) |
**实现方案**
......@@ -425,11 +424,10 @@ struct SideBarSample {
**布局效果**
| sm | md | lg |
| sm | md | lg |
| -------- | -------- | -------- |
| 图片长宽比不变，最长边充满全屏 | 图片长宽比不变，最长边充满全屏 | 图片长宽比不变，最长边充满全屏 |
| ![大图浏览手机](figures/大图浏览手机.png) | ![大图浏览折叠屏](figures/大图浏览折叠屏.png) | ![大图浏览matePadPRo](figures/大图浏览matePadPRo.png) |
| 图片长宽比不变，最长边充满全屏 | 图片长宽比不变，最长边充满全屏 | 图片长宽比不变，最长边充满全屏 |
| ![大图浏览sm](figures/大图浏览sm.png) | ![大图浏览md](figures/大图浏览md.png) | ![大图浏览lg](figures/大图浏览lg.png) |
**实现方案**
......@@ -457,10 +455,10 @@ struct BigImage {
**布局效果**
| sm | md | lg |
| sm | md | lg |
| -------- | -------- | -------- |
| 列表项尺寸固定，超出内容可滚动查看 | 列表项尺寸固定，剩余空间均分 | 列表项尺寸固定，剩余空间均分 |
| ![操作入口手机](figures/操作入口手机.png) | ![操作入口折叠屏](figures/操作入口折叠屏.png) | ![操作入口matePadPro](figures/操作入口matePadPro.png) |
| 列表项尺寸固定，超出内容可滚动查看 | 列表项尺寸固定，剩余空间均分 | 列表项尺寸固定，剩余空间均分 |
| ![操作入口sm](figures/操作入口sm.png) | ![操作入口md](figures/操作入口md.png) | ![操作入口lg](figures/操作入口lg.png) |
**实现方案**
......@@ -522,11 +520,10 @@ export default struct OperationEntries {
**布局效果**
| sm | md | lg |
| sm | md | lg |
| -------- | -------- | -------- |
| 标题和搜索框两行显示 | 标题和搜索框一行显示 | 标题和搜索框一行显示 |
| ![顶部布局手机](figures/顶部布局手机.png) | ![顶部布局折叠屏](figures/顶部布局折叠屏.png) | ![顶部布局matePadPro](figures/顶部布局matePadPro.png) |
| 标题和搜索框两行显示 | 标题和搜索框一行显示 | 标题和搜索框一行显示 |
| ![顶部布局sm](figures/顶部布局sm.png) | ![顶部布局md](figures/顶部布局md.png) | ![顶部布局lg](figures/顶部布局lg.png) |
**实现方案**
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或