diff --git a/.gitattributes b/.gitattributes index f17b2bee513f3dc8a111965f4c58346eaede9b0b..960cfafec9f7bc1b9e713a13c108ee24e26c227e 100644 --- a/.gitattributes +++ b/.gitattributes @@ -17,3 +17,4 @@ OpenHarmony_Icons.zip filter=lfs diff=lfs merge=lfs -text zip filter=lfs diff=lfs merge=lfs -text figures/OpenHarmony_Icons.zip filter=lfs diff=lfs merge=lfs -text figures/OpenHarmony应用图标模版.zip filter=lfs diff=lfs merge=lfs -text +figures/OpenHarmony_天气应用UX设计交付件_V1.0.zip filter=lfs diff=lfs merge=lfs -text diff --git a/zh-cn/design/ux-design/design-resources.md b/zh-cn/design/ux-design/design-resources.md index 6406f9d45cf265904056a4ab112674a2d07ab407..e975e8d6c6d0382a37b7b7a5119b86c2da1d5cd9 100644 --- a/zh-cn/design/ux-design/design-resources.md +++ b/zh-cn/design/ux-design/design-resources.md @@ -3,9 +3,9 @@ 为方便UX设计师以及开发者参考使用，本文特提供： -- [分层参数](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/key-features/multi-device-app-dev/visual-basics.md)的场景、id、参数详细对照表，[OpenHarmony系统资源分层设计表V1.0.xlsm](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/key-features/multi-device-app-dev/OpenHarmony_%E7%B3%BB%E7%BB%9F%E8%B5%84%E6%BA%90%E5%88%86%E5%B1%82%E8%AE%BE%E8%AE%A1%E8%A1%A8_V1.0.xlsm) +- 分层参数的场景、id、参数详细对照表，[OpenHarmony系统资源分层设计表V1.0.xlsm](figures/OpenHarmony_系统资源分层设计表_V1.0.xlsm) -- 符合规范的[设计交付件](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天气应用UX设计交付件V1.0.zip](figures/OpenHarmony_天气应用UX设计交付件_V1.0.zip) - OpenHarmony[图标](visual-icons.md)资源，[OpenHarmony_Icons.zip](figures/OpenHarmony_Icons.zip) diff --git "a/zh-cn/design/ux-design/figures/OpenHarmony_\345\244\251\346\260\224\345\272\224\347\224\250UX\350\256\276\350\256\241\344\272\244\344\273\230\344\273\266_V1.0.zip" "b/zh-cn/design/ux-design/figures/OpenHarmony_\345\244\251\346\260\224\345\272\224\347\224\250UX\350\256\276\350\256\241\344\272\244\344\273\230\344\273\266_V1.0.zip" new file mode 100644 index 0000000000000000000000000000000000000000..865d30b89e6646c00f44479346cc74362ac3c33e --- /dev/null +++ "b/zh-cn/design/ux-design/figures/OpenHarmony_\345\244\251\346\260\224\345\272\224\347\224\250UX\350\256\276\350\256\241\344\272\244\344\273\230\344\273\266_V1.0.zip" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:15bcc1b49648e188dcfa20cfd278b7a81148521095d26cd32899e31114a653c6 +size 15173412 diff --git "a/zh-cn/design/ux-design/figures/OpenHarmony_\347\263\273\347\273\237\350\265\204\346\272\220\345\210\206\345\261\202\350\256\276\350\256\241\350\241\250_V1.0.xlsm" "b/zh-cn/design/ux-design/figures/OpenHarmony_\347\263\273\347\273\237\350\265\204\346\272\220\345\210\206\345\261\202\350\256\276\350\256\241\350\241\250_V1.0.xlsm" new file mode 100644 index 0000000000000000000000000000000000000000..03738d581e8e06c23e4a8fde40227bffb86d3764 Binary files /dev/null and "b/zh-cn/design/ux-design/figures/OpenHarmony_\347\263\273\347\273\237\350\265\204\346\272\220\345\210\206\345\261\202\350\256\276\350\256\241\350\241\250_V1.0.xlsm" differ diff --git a/zh-cn/design/ux-design/figures/fling.png b/zh-cn/design/ux-design/figures/fling.png new file mode 100644 index 0000000000000000000000000000000000000000..8fa22a265f1eea4f118bfa8f5ce1b72ee73001a0 Binary files /dev/null and b/zh-cn/design/ux-design/figures/fling.png differ diff --git a/zh-cn/design/ux-design/figures/longpress.jpg b/zh-cn/design/ux-design/figures/longpress.jpg new file mode 100644 index 0000000000000000000000000000000000000000..d45d5f56a553316bd8876a61bdf7fd5639ab1125 Binary files /dev/null and b/zh-cn/design/ux-design/figures/longpress.jpg differ diff --git a/zh-cn/design/ux-design/figures/scroll.jpg b/zh-cn/design/ux-design/figures/scroll.jpg new file mode 100644 index 0000000000000000000000000000000000000000..5ce1c496ddbdd2f4efebc1a196a02b3eb365e70b Binary files /dev/null and b/zh-cn/design/ux-design/figures/scroll.jpg differ diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001268533753.jpg b/zh-cn/design/ux-design/figures/zh-cn_image_0000001268533753.jpg new file mode 100644 index 0000000000000000000000000000000000000000..982f8b1a46648eb89fd7b156d0ce132bb10c9b57 Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001268533753.jpg differ diff --git a/zh-cn/design/ux-design/figures/zh-cn_image_0000001268653953.png b/zh-cn/design/ux-design/figures/zh-cn_image_0000001268653953.png new file mode 100644 index 0000000000000000000000000000000000000000..39d3060b623a1a68ea76fcf148e503de8c68254e Binary files /dev/null and b/zh-cn/design/ux-design/figures/zh-cn_image_0000001268653953.png differ diff --git a/zh-cn/design/ux-design/figures/zoom.png b/zh-cn/design/ux-design/figures/zoom.png new file mode 100644 index 0000000000000000000000000000000000000000..b60e93e5fc35cb31b9b0b2b05cfaec5c7a37b8b7 Binary files /dev/null and b/zh-cn/design/ux-design/figures/zoom.png differ diff --git a/zh-cn/design/ux-design/unified-interaction-events.md b/zh-cn/design/ux-design/unified-interaction-events.md index 0a431eb5c84af0b72447f8f8ea7e7c4578392d69..8977e2bda9845a4a41e57357ddbeb3a7101bd323 100644 --- a/zh-cn/design/ux-design/unified-interaction-events.md +++ b/zh-cn/design/ux-design/unified-interaction-events.md @@ -1,53 +1,157 @@ # 交互事件归一 -本章节描述了在多种交互任务或场景下，应用在触屏上和其它常用的输入方式（例如鼠标、触摸板、键盘）上分别对应的正确的交互规则。**设计师和开发者应保证在当前输入方式下应用能够以正确的、符合用户习惯的交互规则进行响应。** +本章节描述了在多种交互任务或场景下，应用在常用的输入设备（例如触控屏、手写笔、鼠标、触控板、键盘）上分别对应的正确的交互规则。**设计师和开发者应保证在当前输入方式（设备）下应用能够以正确的、符合用户习惯的交互规则进行响应。** ![zh-cn_image_0000001568093289](figures/zh-cn_image_0000001568093289.png) - -## 打开/切换对象 - -用户通过点击某个元素触发功能、访问新页面、或改变自身状态。 - - | **输入方式** | **交互行为** | **示意** | -| -------- | -------- | -------- | -| 触屏 | 单指单击 | ![zh-cn_image_0000001568093285](figures/zh-cn_image_0000001568093285.png) | -| 鼠标 | 左键单击 / 左键双击 | ![zh-cn_image_0000001517612968](figures/zh-cn_image_0000001517612968.png) | -| 触摸板 | 单指单击 / 单指双击 | ![zh-cn_image_0000001568212997](figures/zh-cn_image_0000001568212997.png) | -| 键盘 | 移动焦点到对象上后按下Enter键 | ![zh-cn_image_0000001517453012](figures/zh-cn_image_0000001517453012.png) | - -一般地，触屏手指的按下/抬起行为对应于光标的按下/抬起行为。 - -在一些特殊场景，可能会存在使用鼠标/触摸板双击打开对象的交互方案，例如电脑模式下打开桌面应用或文件。此类情况需由应用单独特殊处理，且同一功能不能同时支持单击和双击两种交互方式。 - - -## 显示菜单 - +## 悬浮 + +应用场景
+用户通过在某个元素上悬浮可以预览到更多信息或功能。 + +| **输入设备/方式** | **交互行为** | +| -------- | -------- | +| 触屏 | N/A | +| 手写笔 | 笔尖靠近屏幕悬浮。| +| 鼠标 | 光标移动到物体上。 | +| 触摸板 | 光标移动到物体上。 | +| 键盘 | N/A | + +手写笔的悬浮交互需要手写笔硬件支持悬浮能力。 +## 单击 + +应用场景
+用户通过点击某些元素激活控件、访问新页面、或改变自身状态。 + +| **输入设备/方式** | **交互行为** | +| -------- | -------- | +| 触屏 | 单指单击。 | +| 手写笔 | 笔尖单击屏幕。 | +| 鼠标 | 按压鼠标左键。 | +| 触摸板 | 单指轻点/单指按压。 | +| 键盘 | 走焦状态下，移动焦点到对象上后按下空格键。 | + +一般地，触屏手指的按下/抬起行为对应光标的按下/抬起行为。
+在一些特殊场景，可能会存在使用鼠标/触摸双击打开对象的交互方案，例如电脑模式下打开桌面应用或文件。此类情况需由应用单独特殊处理，且同一功能不能同时支持单击和双击两种交互方式。 +## 双击 + +应用场景
+用户通过双击进行某些快捷操作，如快速放大图片、点赞等。 + +| **输入设备/方式** | **交互行为** | +| -------- | -------- | +| 触屏 | 单指点击两下。 | +| 手写笔 | 笔尖双击屏幕。 | +| 鼠标 | 快速点击鼠标左键两下。 | +| 触摸板 | 单指轻点两下/单指按压两下。 | +| 键盘 | 走焦状态下，移动焦点到对象上后按压两次空格键。 | + +## 长按 +应用场景
+用户通过长按进行某些快捷操作，如长按视频倍速播放等。 + +![ longpress ](figures/longpress.jpg) + +| **输入设备/方式** | **交互行为** | +| -------- | -------- | +| 触屏 | 单指长按。 | +| 手写笔 | 笔尖长时间接触屏幕。 | +| 鼠标 | 长按左键。 | +| 触摸板 | 单指长按。 | +| 键盘 | 走焦状态下，移动到对象上长按空格。 | + +## 上下文菜单 +应用场景
某个元素上显示弹出菜单或快捷方式菜单。 -![zh-cn_image_0000001568293165](figures/zh-cn_image_0000001568293165.jpg) +![zh-cn_image_0000001268533753](figures/zh-cn_image_0000001268533753.jpg) - | **输入方式** | **交互行为** | +| **输入设备/方式** | **交互行为** | | -------- | -------- | -| 触屏 | 单指长按 | -| 鼠标 | 右键单击（与PC一致）/ 左键长按（保留触屏习惯） | -| 触摸板 | 双指轻单击/重单击（与PC一致）/ 单指重长按（保留触屏习惯） | -| 键盘 | （无通用操作） | +| 触屏 | 单指长按 | +| 手写笔 | 笔尖长时间触控屏幕。 | +| 鼠标 | 右键单击 | +| 触摸板 | 双指轻点/按压（与PC一致）,
单击/单指长按（保留触屏习惯）。 | +| 键盘 | shift+F10 或 LOGO+M。 | 这里的菜单指的是广义的菜单，即用于展示用户可执行的操作的临时性弹出窗口。 凡是在触屏上通过长按显示的菜单，都需要支持鼠标右键单击和触摸板双指单击的触发方式。 +## 拖拽 -## 拖拽对象 - -直接指向某个元素并移动到界面其他位置 +应用场景
+移动某个元素位置或者移动某个元素用于发送等。 -![zh-cn_image_0000001568412901](figures/zh-cn_image_0000001568412901.png) +![zh-cn_image_0000001268653953](figures/zh-cn_image_0000001268653953.png) - | **输入方式** | **交互行为** | + | **输入设备/方式** | **交互行为** | | -------- | -------- | -| 触屏 | 长按某对象后触发可拖拽状态，然后移动手指改变对象位置。 | -| 鼠标 / 触摸板 | 鼠标左键或触摸板单指按下即可拖拽对象（无需长按等待）。 | -| 键盘 | （无通用操作） | +| 触屏 | 长按并移动。 | +| 手写笔 | 笔尖长时间接触屏幕后滑动。 | +| 鼠标| 按压左键并移动鼠标（无需长按等待）。 | +| 触摸板 | 按压左键并移动。 | +| 键盘 | N/A | + +## 滚动/平移 +应用场景
+滚动列表或页面。 + +![scroll](figures/scroll.jpg) + +| **输入设备/方式** | **交互行为** | +| -------- | -------- | +| 触屏 | 单指接触屏幕后滑动。 | +| 手写笔 | 笔尖屏幕滑动。 | +| 鼠标 | 上下滚动滚轮/shift+上下滚动滚轮可以实现上下/左右滚动，指针不动。
有上下滚动时，通过shift+滚轮左右滚动。无上下滚动时，滚轮可响应左右滚动。
自然滚动时，
滚轮向上滚动，页面向上滚动。
滚轮向下滚动，页面向下滚动。
滚轮每滚动1个刻痕，页面相应滚动一段距离，默认为64vp，应用也可自行设定。| +| 触摸板 | 自然滚动时，触摸板上双指滑动行为与触屏上单指滑动行为一致。
双指向上滑动，页面向下滚动。
双指向下滑动，页面向上滚动。
双指滑动时，页面进行精细、连续的滚动；当双指离开触摸板时，页面根据离手速度继续进行减速滑动直到停止。
若列表是横向列表，则双指向左滑动，页面向右滚动；双指向右滑动，页面向左滚动。 | +| 键盘 | N/A | + +在鼠标、触控板滚动过程中，仅页面元素发生变化，光标不发生移动。 + +## 轻扫 +应用场景
+将一个页面切换至下一个页面或快速滚动页面。 + +![ fling ](figures/fling.png) + +| **输入设备/方式** | **交互行为** | +| -------- | -------- | +| 触屏 | 单指快速滑动。 | +| 手写笔 | 笔尖屏幕快速滑动。 | +| 鼠标 | 滚动一格或快速滚动后停止。 | +| 触摸板 | 双指快速移动。 | +| 键盘 | N/A| + +在鼠标、触控板轻扫过程中，仅页面元素发生变化，光标不发生移动。 +## 缩放对象 +应用场景
+查看图片或浏览页面时调整对象大小。 + +![zoom](figures/zoom.png) + +| **输入设备/方式** | **交互行为** | +| -------- | -------- | +| 触屏 | 双指张开为放大，双指捏合为缩小。 | +| 手写笔 | N/A | +| 鼠标 | 按下 Ctrl 键同时滚动鼠标滚轮，可按照光标位置放大或缩小内容。
- 鼠标滚轮上滚，每滚动1个刻痕，以光标位置作为中心对象放大N%。
- 鼠标滚轮下滚，每滚动1个刻痕，对象缩小N%。 | +| 触摸板 | 触摸板上双指捏合行为与触屏上双指捏合行为一致，当光标移动到对象上后：
- 触摸板双指向外扩展以放大内容。
- 触摸板双指向内收拢以缩小内容。
优化显控比，以使用户能够轻松、快速、准确地调节到目标尺寸。 | +| 键盘 |Ctrl+加号键：以对象的中心点使对象放大N%。
Ctrl+减号键：以对象的中心点使对象缩N%。| + +## 旋转对象 +应用场景
+编辑图片时旋转图片。 + +| **输入设备/方式** | **交互行为** | +| -------- | -------- | +| 触屏 | 两个手指在屏幕旋转，对象跟随旋转。 | +| 手写笔 | N/A | +| 鼠标 | N/A | +| 触摸板 | 触摸板上双指旋转行为与触屏上双指旋转行为一致，当光标移动到对象上后：
- 触摸板双顺时针旋转，对象跟手顺时针旋转。
- 触摸板双逆时针旋转，对象跟手逆时针旋转。 | +| 键盘 | N/A| + +有些场景中触屏上双指可以同时进行缩放和旋转操作（如图片/地图浏览），触摸板应同步支持。 + +## 交互事件归一接口 +为了保障用户在不同交互设备上的交互体验一致，同时又尽量减少不同输出设备适配工作，建议使用交互事件归一接口。该接口涵盖用户基础的交互任务，并遵循了用户在触控、鼠标、触控板等设备的交互习惯。详见事件归一开发文档。