Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
73227f8c
D
Docs
项目概览
OpenHarmony
/
Docs
1 年多 前同步成功
通知
159
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
未验证
提交
73227f8c
编写于
9月 06, 2023
作者:
O
openharmony_ci
提交者:
Gitee
9月 06, 2023
浏览文件
操作
浏览文件
下载
差异文件
!23973 【轻量级 PR】:update zh-cn/design/ux-design
Merge pull request !23973 from lee/master
上级
74e05859
6038037e
变更
11
隐藏空白更改
内联
并排
Showing
11 changed file
with
144 addition
and
36 deletion
+144
-36
.gitattributes
.gitattributes
+1
-0
zh-cn/design/ux-design/design-resources.md
zh-cn/design/ux-design/design-resources.md
+2
-2
zh-cn/design/ux-design/figures/OpenHarmony_天气应用UX设计交付件_V1.0.zip
...design/ux-design/figures/OpenHarmony_天气应用UX设计交付件_V1.0.zip
+3
-0
zh-cn/design/ux-design/figures/OpenHarmony_系统资源分层设计表_V1.0.xlsm
.../design/ux-design/figures/OpenHarmony_系统资源分层设计表_V1.0.xlsm
+0
-0
zh-cn/design/ux-design/figures/fling.png
zh-cn/design/ux-design/figures/fling.png
+0
-0
zh-cn/design/ux-design/figures/longpress.jpg
zh-cn/design/ux-design/figures/longpress.jpg
+0
-0
zh-cn/design/ux-design/figures/scroll.jpg
zh-cn/design/ux-design/figures/scroll.jpg
+0
-0
zh-cn/design/ux-design/figures/zh-cn_image_0000001268533753.jpg
...design/ux-design/figures/zh-cn_image_0000001268533753.jpg
+0
-0
zh-cn/design/ux-design/figures/zh-cn_image_0000001268653953.png
...design/ux-design/figures/zh-cn_image_0000001268653953.png
+0
-0
zh-cn/design/ux-design/figures/zoom.png
zh-cn/design/ux-design/figures/zoom.png
+0
-0
zh-cn/design/ux-design/unified-interaction-events.md
zh-cn/design/ux-design/unified-interaction-events.md
+138
-34
未找到文件。
.gitattributes
浏览文件 @
73227f8c
...
...
@@ -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
zh-cn/design/ux-design/design-resources.md
浏览文件 @
73227f8c
...
...
@@ -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
)
...
...
zh-cn/design/ux-design/figures/OpenHarmony_天气应用UX设计交付件_V1.0.zip
0 → 100644
LFS
浏览文件 @
73227f8c
文件已添加
zh-cn/design/ux-design/figures/OpenHarmony_系统资源分层设计表_V1.0.xlsm
0 → 100644
浏览文件 @
73227f8c
文件已添加
zh-cn/design/ux-design/figures/fling.png
0 → 100644
浏览文件 @
73227f8c
11.3 KB
zh-cn/design/ux-design/figures/longpress.jpg
0 → 100644
浏览文件 @
73227f8c
8.9 KB
zh-cn/design/ux-design/figures/scroll.jpg
0 → 100644
浏览文件 @
73227f8c
9.3 KB
zh-cn/design/ux-design/figures/zh-cn_image_0000001268533753.jpg
0 → 100644
浏览文件 @
73227f8c
9.2 KB
zh-cn/design/ux-design/figures/zh-cn_image_0000001268653953.png
0 → 100644
浏览文件 @
73227f8c
18.4 KB
zh-cn/design/ux-design/figures/zoom.png
0 → 100644
浏览文件 @
73227f8c
6.8 KB
zh-cn/design/ux-design/unified-interaction-events.md
浏览文件 @
73227f8c
# 交互事件归一
本章节描述了在多种交互任务或场景下,应用在
触屏上和其它常用的输入方式(例如鼠标、触摸板、键盘)上分别对应的正确的交互规则。
**设计师和开发者应保证在当前输入方式
下应用能够以正确的、符合用户习惯的交互规则进行响应。**
本章节描述了在多种交互任务或场景下,应用在
常用的输入设备(例如触控屏、手写笔、鼠标、触控板、键盘)上分别对应的正确的交互规则。
**设计师和开发者应保证在当前输入方式(设备)
下应用能够以正确的、符合用户习惯的交互规则进行响应。**
![
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
)
|
一般地,触屏手指的按下/抬起行为对应于光标的按下/抬起行为。
在一些特殊场景,可能会存在使用鼠标/触摸板双击打开对象的交互方案,例如电脑模式下打开桌面应用或文件。此类情况需由应用单独特殊处理,且同一功能不能同时支持单击和双击两种交互方式。
## 显示菜单
## 悬浮
应用场景
<br>
用户通过在某个元素上悬浮可以预览到更多信息或功能。
|
**输入设备/方式**
|
**交互行为**
|
| -------- | -------- |
| 触屏 | N/A |
| 手写笔 | 笔尖靠近屏幕悬浮。|
| 鼠标 | 光标移动到物体上。 |
| 触摸板 | 光标移动到物体上。 |
| 键盘 | N/A |
手写笔的悬浮交互需要手写笔硬件支持悬浮能力。
## 单击
应用场景
<br>
用户通过点击某些元素激活控件、访问新页面、或改变自身状态。
|
**输入设备/方式**
|
**交互行为**
|
| -------- | -------- |
| 触屏 | 单指单击。 |
| 手写笔 | 笔尖单击屏幕。 |
| 鼠标 | 按压鼠标左键。 |
| 触摸板 | 单指轻点/单指按压。 |
| 键盘 | 走焦状态下,移动焦点到对象上后按下空格键。 |
一般地,触屏手指的按下/抬起行为对应光标的按下/抬起行为。
<br>
在一些特殊场景,可能会存在使用鼠标/触摸双击打开对象的交互方案,例如电脑模式下打开桌面应用或文件。此类情况需由应用单独特殊处理,且同一功能不能同时支持单击和双击两种交互方式。
## 双击
应用场景
<br>
用户通过双击进行某些快捷操作,如快速放大图片、点赞等。
|
**输入设备/方式**
|
**交互行为**
|
| -------- | -------- |
| 触屏 | 单指点击两下。 |
| 手写笔 | 笔尖双击屏幕。 |
| 鼠标 | 快速点击鼠标左键两下。 |
| 触摸板 | 单指轻点两下/单指按压两下。 |
| 键盘 | 走焦状态下,移动焦点到对象上后按压两次空格键。 |
## 长按
应用场景
<br>
用户通过长按进行某些快捷操作,如长按视频倍速播放等。
![
longpress
](
figures/longpress.jpg
)
|
**输入设备/方式**
|
**交互行为**
|
| -------- | -------- |
| 触屏 | 单指长按。 |
| 手写笔 | 笔尖长时间接触屏幕。 |
| 鼠标 | 长按左键。 |
| 触摸板 | 单指长按。 |
| 键盘 | 走焦状态下,移动到对象上长按空格。 |
## 上下文菜单
应用场景
<br>
某个元素上显示弹出菜单或快捷方式菜单。
![
zh-cn_image_0000001
568293165
](
figures/zh-cn_image_0000001568293165
.jpg
)
![
zh-cn_image_0000001
268533753
](
figures/zh-cn_image_0000001268533753
.jpg
)
|
**输入方式**
|
**交互行为**
|
|
**输入设备/方式**
|
**交互行为**
|
| -------- | -------- |
| 触屏 | 单指长按 |
| 鼠标 | 右键单击(与PC一致)/
左键长按(保留触屏习惯) |
| 触摸板 | 双指轻单击/重单击(与PC一致)/
单指重长按(保留触屏习惯) |
| 键盘 | (无通用操作) |
| 触屏 | 单指长按 |
| 手写笔 | 笔尖长时间触控屏幕。 |
| 鼠标 | 右键单击 |
| 触摸板 | 双指轻点/按压(与PC一致),
<br>
单击/单指长按(保留触屏习惯)。 |
| 键盘 | shift+F10 或 LOGO+M。 |
这里的菜单指的是广义的菜单,即用于展示用户可执行的操作的临时性弹出窗口。
凡是在触屏上通过长按显示的菜单,都需要支持鼠标右键单击和触摸板双指单击的触发方式。
## 拖拽
## 拖拽对象
直接指向某个元素并移动到界面其他位置
应用场景
<br>
移动某个元素位置或者移动某个元素用于发送等。
![
zh-cn_image_0000001
568412901
](
figures/zh-cn_image_0000001568412901
.png
)
![
zh-cn_image_0000001
268653953
](
figures/zh-cn_image_0000001268653953
.png
)
|
**输入方式**
|
**交互行为**
|
|
**输入
设备/
方式**
|
**交互行为**
|
| -------- | -------- |
| 触屏 | 长按某对象后触发可拖拽状态,然后移动手指改变对象位置。 |
| 鼠标
/
触摸板 | 鼠标左键或触摸板单指按下即可拖拽对象(无需长按等待)。 |
| 键盘 | (无通用操作) |
| 触屏 | 长按并移动。 |
| 手写笔 | 笔尖长时间接触屏幕后滑动。 |
| 鼠标| 按压左键并移动鼠标(无需长按等待)。 |
| 触摸板 | 按压左键并移动。 |
| 键盘 | N/A |
## 滚动/平移
应用场景
<br>
滚动列表或页面。
![
scroll
](
figures/scroll.jpg
)
|
**输入设备/方式**
|
**交互行为**
|
| -------- | -------- |
| 触屏 | 单指接触屏幕后滑动。 |
| 手写笔 | 笔尖屏幕滑动。 |
| 鼠标 | 上下滚动滚轮/shift+上下滚动滚轮可以实现上下/左右滚动,指针不动。
<br>
有上下滚动时,通过shift+滚轮左右滚动。无上下滚动时,滚轮可响应左右滚动。
<br>
自然滚动时,
<br>
滚轮向上滚动,页面向上滚动。
<br>
滚轮向下滚动,页面向下滚动。
<br>
滚轮每滚动1个刻痕,页面相应滚动一段距离,默认为64vp,应用也可自行设定。|
| 触摸板 | 自然滚动时,触摸板上双指滑动行为与触屏上单指滑动行为一致。
<br>
双指向上滑动,页面向下滚动。
<br>
双指向下滑动,页面向上滚动。
<br>
双指滑动时,页面进行精细、连续的滚动;当双指离开触摸板时,页面根据离手速度继续进行减速滑动直到停止。
<br>
若列表是横向列表,则双指向左滑动,页面向右滚动;双指向右滑动,页面向左滚动。 |
| 键盘 | N/A |
在鼠标、触控板滚动过程中,仅页面元素发生变化,光标不发生移动。
## 轻扫
应用场景
<br>
将一个页面切换至下一个页面或快速滚动页面。
![
fling
](
figures/fling.png
)
|
**输入设备/方式**
|
**交互行为**
|
| -------- | -------- |
| 触屏 | 单指快速滑动。 |
| 手写笔 | 笔尖屏幕快速滑动。 |
| 鼠标 | 滚动一格或快速滚动后停止。 |
| 触摸板 | 双指快速移动。 |
| 键盘 | N/A|
在鼠标、触控板轻扫过程中,仅页面元素发生变化,光标不发生移动。
## 缩放对象
应用场景
<br>
查看图片或浏览页面时调整对象大小。
![
zoom
](
figures/zoom.png
)
|
**输入设备/方式**
|
**交互行为**
|
| -------- | -------- |
| 触屏 | 双指张开为放大,双指捏合为缩小。 |
| 手写笔 | N/A |
| 鼠标 | 按下 Ctrl 键同时滚动鼠标滚轮,可按照光标位置放大或缩小内容。
<br>
- 鼠标滚轮上滚,每滚动1个刻痕,以光标位置作为中心对象放大N%。
<br>
- 鼠标滚轮下滚,每滚动1个刻痕,对象缩小N%。 |
| 触摸板 | 触摸板上双指捏合行为与触屏上双指捏合行为一致,当光标移动到对象上后:
<br>
- 触摸板双指向外扩展以放大内容。
<br>
- 触摸板双指向内收拢以缩小内容。
<br>
优化显控比,以使用户能够轻松、快速、准确地调节到目标尺寸。 |
| 键盘 |Ctrl+加号键:以对象的中心点使对象放大N%。
<br>
Ctrl+减号键:以对象的中心点使对象缩N%。|
## 旋转对象
应用场景
<br>
编辑图片时旋转图片。
|
**输入设备/方式**
|
**交互行为**
|
| -------- | -------- |
| 触屏 | 两个手指在屏幕旋转,对象跟随旋转。 |
| 手写笔 | N/A |
| 鼠标 | N/A |
| 触摸板 | 触摸板上双指旋转行为与触屏上双指旋转行为一致,当光标移动到对象上后:
<br>
- 触摸板双顺时针旋转,对象跟手顺时针旋转。
<br>
- 触摸板双逆时针旋转,对象跟手逆时针旋转。 |
| 键盘 | N/A|
有些场景中触屏上双指可以同时进行缩放和旋转操作(如图片/地图浏览),触摸板应同步支持。
## 交互事件归一接口
为了保障用户在不同交互设备上的交互体验一致,同时又尽量减少不同输出设备适配工作,建议使用交互事件归一接口。该接口涵盖用户基础的交互任务,并遵循了用户在触控、鼠标、触控板等设备的交互习惯。详见事件归一开发文档。
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录