mirror of https://gitee.com/openkylin/docs.git
新增UKUI相关"触控_触摸手势.md"文档
This commit is contained in:
parent
5b07f2ec13
commit
5814a06e8a
Binary file not shown.
|
After Width: | Height: | Size: 188 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 223 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 223 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 685 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 201 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 188 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 189 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
|
|
@ -0,0 +1,321 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>触控&触摸手势</title>
|
||||
<style>
|
||||
/* From extension vscode.github */
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
.vscode-dark img[src$=\#gh-light-mode-only],
|
||||
.vscode-light img[src$=\#gh-dark-mode-only],
|
||||
.vscode-high-contrast:not(.vscode-high-contrast-light) img[src$=\#gh-light-mode-only],
|
||||
.vscode-high-contrast-light img[src$=\#gh-dark-mode-only] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/markdown.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/highlight.css">
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, 'Ubuntu', 'Droid Sans', sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.task-list-item {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.task-list-item-checkbox {
|
||||
margin-left: -20px;
|
||||
vertical-align: middle;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
:root {
|
||||
--color-note: #0969da;
|
||||
--color-tip: #1a7f37;
|
||||
--color-warning: #9a6700;
|
||||
--color-severe: #bc4c00;
|
||||
--color-caution: #d1242f;
|
||||
--color-important: #8250df;
|
||||
}
|
||||
|
||||
</style>
|
||||
<style>
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-note: #2f81f7;
|
||||
--color-tip: #3fb950;
|
||||
--color-warning: #d29922;
|
||||
--color-severe: #db6d28;
|
||||
--color-caution: #f85149;
|
||||
--color-important: #a371f7;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<style>
|
||||
.markdown-alert {
|
||||
padding: 0.5rem 1rem;
|
||||
margin-bottom: 16px;
|
||||
color: inherit;
|
||||
border-left: .25em solid #888;
|
||||
}
|
||||
|
||||
.markdown-alert>:first-child {
|
||||
margin-top: 0
|
||||
}
|
||||
|
||||
.markdown-alert>:last-child {
|
||||
margin-bottom: 0
|
||||
}
|
||||
|
||||
.markdown-alert .markdown-alert-title {
|
||||
display: flex;
|
||||
font-weight: 500;
|
||||
align-items: center;
|
||||
line-height: 1
|
||||
}
|
||||
|
||||
.markdown-alert .markdown-alert-title .octicon {
|
||||
margin-right: 0.5rem;
|
||||
display: inline-block;
|
||||
overflow: visible !important;
|
||||
vertical-align: text-bottom;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.markdown-alert.markdown-alert-note {
|
||||
border-left-color: var(--color-note);
|
||||
}
|
||||
|
||||
.markdown-alert.markdown-alert-note .markdown-alert-title {
|
||||
color: var(--color-note);
|
||||
}
|
||||
|
||||
.markdown-alert.markdown-alert-important {
|
||||
border-left-color: var(--color-important);
|
||||
}
|
||||
|
||||
.markdown-alert.markdown-alert-important .markdown-alert-title {
|
||||
color: var(--color-important);
|
||||
}
|
||||
|
||||
.markdown-alert.markdown-alert-warning {
|
||||
border-left-color: var(--color-warning);
|
||||
}
|
||||
|
||||
.markdown-alert.markdown-alert-warning .markdown-alert-title {
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.markdown-alert.markdown-alert-tip {
|
||||
border-left-color: var(--color-tip);
|
||||
}
|
||||
|
||||
.markdown-alert.markdown-alert-tip .markdown-alert-title {
|
||||
color: var(--color-tip);
|
||||
}
|
||||
|
||||
.markdown-alert.markdown-alert-caution {
|
||||
border-left-color: var(--color-caution);
|
||||
}
|
||||
|
||||
.markdown-alert.markdown-alert-caution .markdown-alert-title {
|
||||
color: var(--color-caution);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body class="vscode-body vscode-light">
|
||||
<hr>
|
||||
<h2 id="title-触控触摸手势descriptionpublished-truetagseditor-markdown">title: 触控&触摸手势
|
||||
description:
|
||||
published: true
|
||||
tags:
|
||||
editor: markdown</h2>
|
||||
<h1 id="触控触摸手势">触控&触摸手势</h1>
|
||||
<p>为了保障标准化触控板&触摸屏手势体验，保障跨平台应用手势体验一致性、生态系统互通性、减少用户误触的几率、提高开发效率、确保品牌的一致性，特制定本规范文档。</p>
|
||||
<h2 id="基本手势">基本手势</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>图示</th>
|
||||
<th>功能描述</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>单击</td>
|
||||
<td><img src="file:///g:\idea\project\docs\07_关于社区\社区产品\UKUI\设计指南\assets\%E8%A7%A6%E6%8E%A7_%E8%A7%A6%E6%91%B8%E6%89%8B%E5%8A%BF\%E8%BD%BB%E7%82%B9%E5%B1%8F%E5%B9%95.png" alt="image.png"></td>
|
||||
<td>手指轻点触控板&触摸屏触发功能，例如：打开应用、选择对象、打开菜单栏、执行按钮命令等<br>规则：快速点击，时间小于等于600ms，松开后，执行点击行为</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>双指点击</td>
|
||||
<td><img src="file:///g:\idea\project\docs\07_关于社区\社区产品\UKUI\设计指南\assets\%E8%A7%A6%E6%8E%A7_%E8%A7%A6%E6%91%B8%E6%89%8B%E5%8A%BF\%E5%8F%8C%E6%8C%87%E7%82%B9%E5%87%BB.png" alt="image.png"></td>
|
||||
<td>双指轻点触控板&触摸屏触发功能，例如：打开右键菜单</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>双击</td>
|
||||
<td><img src="file:///g:\idea\project\docs\07_关于社区\社区产品\UKUI\设计指南\assets\%E8%A7%A6%E6%8E%A7_%E8%A7%A6%E6%91%B8%E6%89%8B%E5%8A%BF\%E5%8F%8C%E5%87%BB%E5%B1%8F%E5%B9%95.png" alt="image.png"></td>
|
||||
<td>手指快速点击两次触控板&触摸屏触发功能，例如：打开桌面应用、文件&文件夹、选择文字等</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>长按</td>
|
||||
<td><img src="file:///g:\idea\project\docs\07_关于社区\社区产品\UKUI\设计指南\assets\%E8%A7%A6%E6%8E%A7_%E8%A7%A6%E6%91%B8%E6%89%8B%E5%8A%BF\%E9%95%BF%E6%8C%89%E5%B1%8F%E5%B9%95.png" alt="image.png"></td>
|
||||
<td>手指长按某个元素触发功能，例如：弹出菜单、右键菜单、多选、选择文字等 <br> 规则：按下，持续时间大于等于600ms，松开后，执行长按行为。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>滑动</td>
|
||||
<td><img src="file:///g:\idea\project\docs\07_关于社区\社区产品\UKUI\设计指南\assets\%E8%A7%A6%E6%8E%A7_%E8%A7%A6%E6%91%B8%E6%89%8B%E5%8A%BF\%E6%BB%91%E5%8A%A8.png" alt="image.png"></td>
|
||||
<td>滑动触控板&触摸屏以连续滚动列表和页面，切换对象，操作主体在松开的瞬间沿着某个方向还有一定的移动速度，则被控对象沿着该方向继续滑动一段距离, 同时滑动速度逐渐减小, 直到最终停止。 判定手指位移和释放速度满足任意一个即可</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>轻扫</td>
|
||||
<td><img src="file:///g:\idea\project\docs\07_关于社区\社区产品\UKUI\设计指南\assets\%E8%A7%A6%E6%8E%A7_%E8%A7%A6%E6%91%B8%E6%89%8B%E5%8A%BF\%E8%BD%BB%E6%89%AB.png" alt="image.png"></td>
|
||||
<td>手指沿着某个方向移动一段距离，被控对象同时沿着相应的方向移动相应的距离。松开后，被控对象会根据松开时所处的位置、移动速度以及稳定状态之间的界线，共同决定自动回到某个提前规定好的稳定状态</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>拖放</td>
|
||||
<td><img src="file:///g:\idea\project\docs\07_关于社区\社区产品\UKUI\设计指南\assets\%E8%A7%A6%E6%8E%A7_%E8%A7%A6%E6%91%B8%E6%89%8B%E5%8A%BF\%E8%BD%BB%E6%89%AB.png" alt="image.png"></td>
|
||||
<td>拖动对象移动其位置，例如：移动窗口、移动文件/图标位置、拖动进行批量操作，例如：框选文字等内容、框选图标、刷新页面、滑动以调节滑动条数值</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>捏合</td>
|
||||
<td><img src="file:///g:\idea\project\docs\07_关于社区\社区产品\UKUI\设计指南\assets\%E8%A7%A6%E6%8E%A7_%E8%A7%A6%E6%91%B8%E6%89%8B%E5%8A%BF\%E6%8D%8F%E5%90%88.png" alt="image.png"></td>
|
||||
<td>两个手指按住触控板&触摸屏向外展开以放大内容，向内收拢以缩小内容，例如：网页、图片</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>多点旋转</td>
|
||||
<td><img src="file:///g:\idea\project\docs\07_关于社区\社区产品\UKUI\设计指南\assets\%E8%A7%A6%E6%8E%A7_%E8%A7%A6%E6%91%B8%E6%89%8B%E5%8A%BF\%E5%A4%9A%E7%82%B9%E6%97%8B%E8%BD%AC.png" alt="image.png"></td>
|
||||
<td>当双指都触碰到触控板&触摸屏后, 两个触点之间连线的角度被用来控制诸如照片, 地图等被控对象的旋转角度</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2 id="单击与长按规则">单击与长按规则</h2>
|
||||
<p>单击：快速点击，时间小于等于600ms，松开后，执行点击行为
|
||||
长按：按下，持续时间大于等于600ms，松开后，执行长按行为。注意，单击与长按行为互不干扰，执行长按操作时不执行其操作时间内的单击行为。</p>
|
||||
<h2 id="双击文件重命名">双击文件重命名</h2>
|
||||
<p>双击重命名文件，实则为两次单击触发重命名，若在<400ms（双击默认值）内完成双击操作，则判定为双击事件。若在400ms外完成第二次点击，则判定为两次单击操作。</p>
|
||||
<h2 id="自定义手势">自定义手势</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>图示</th>
|
||||
<th></th>
|
||||
<th>功能描述</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>单指向上轻扫</td>
|
||||
<td></td>
|
||||
<td>触摸屏</td>
|
||||
<td>打开多任务视图 <br> 绝对控制，手指释放后稳定化</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>单指向下轻扫</td>
|
||||
<td></td>
|
||||
<td>触摸屏</td>
|
||||
<td>显示桌面 <br> 相对控制，手指释放后稳定化</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>单指屏幕右侧向左轻扫</td>
|
||||
<td></td>
|
||||
<td>触摸屏</td>
|
||||
<td>呼出侧边栏 <br> 绝对控制</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>双指左右滑动</td>
|
||||
<td><img src="file:///g:\idea\project\docs\07_关于社区\社区产品\UKUI\设计指南\assets\%E8%A7%A6%E6%8E%A7_%E8%A7%A6%E6%91%B8%E6%89%8B%E5%8A%BF\%E5%8F%8C%E6%8C%87%E5%B7%A6%E5%8F%B3%E6%BB%91%E5%8A%A8.png" alt="双指左右滑动.png"></td>
|
||||
<td>触控板 <br> 触摸屏</td>
|
||||
<td>调节滑动条，亮度&音量</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>三指上下轻扫</td>
|
||||
<td><img src="file:///g:\idea\project\docs\07_关于社区\社区产品\UKUI\设计指南\assets\%E8%A7%A6%E6%8E%A7_%E8%A7%A6%E6%91%B8%E6%89%8B%E5%8A%BF\%E5%8F%8C%E6%8C%87%E5%B7%A6%E5%8F%B3%E6%BB%91%E5%8A%A8.png" alt="三指上下轻扫.png"></td>
|
||||
<td>触控板</td>
|
||||
<td>· 打开多任务视图&关闭多任务视图 <br> ·显示桌面&显示打开的应用 <br> 相对控制，手指释放后稳定化</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>三指左右轻扫</td>
|
||||
<td><img src="file:///g:\idea\project\docs\07_关于社区\社区产品\UKUI\设计指南\assets\%E8%A7%A6%E6%8E%A7_%E8%A7%A6%E6%91%B8%E6%89%8B%E5%8A%BF\%E4%B8%89%E6%8C%87%E5%B7%A6%E5%8F%B3%E8%BD%BB%E6%89%AB.png" alt="三指左右轻扫.png"></td>
|
||||
<td>触控板</td>
|
||||
<td>切换应用窗口 <br> 绝对控制，手指释放后稳定化</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>三指点击</td>
|
||||
<td><img src="file:///g:\idea\project\docs\07_关于社区\社区产品\UKUI\设计指南\assets\%E8%A7%A6%E6%8E%A7_%E8%A7%A6%E6%91%B8%E6%89%8B%E5%8A%BF\%E4%B8%89%E6%8C%87%E5%B7%A6%E5%8F%B3%E8%BD%BB%E6%89%AB.png" alt="三指点击.png"></td>
|
||||
<td>触控板</td>
|
||||
<td>唤起全局搜索&关闭全局搜索</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>四指点击</td>
|
||||
<td></td>
|
||||
<td>触控板</td>
|
||||
<td>呼出侧边栏&关闭侧边栏</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>四指左右轻扫</td>
|
||||
<td><img src="file:///g:\idea\project\docs\07_关于社区\社区产品\UKUI\设计指南\assets\%E8%A7%A6%E6%8E%A7_%E8%A7%A6%E6%91%B8%E6%89%8B%E5%8A%BF\%E5%9B%9B%E6%8C%87%E5%B7%A6%E5%8F%B3%E8%BD%BB%E6%89%AB.png" alt="四指左右轻扫.png"></td>
|
||||
<td>触控板 <br> 触摸屏</td>
|
||||
<td>切换虚拟桌面 <br> 相对控制，手指释放后稳定化</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>四指任意位置向下滑动</td>
|
||||
<td><img src="file:///g:\idea\project\docs\07_关于社区\社区产品\UKUI\设计指南\assets\%E8%A7%A6%E6%8E%A7_%E8%A7%A6%E6%91%B8%E6%89%8B%E5%8A%BF\%E5%9B%9B%E6%8C%87%E4%BB%BB%E6%84%8F%E4%BD%8D%E7%BD%AE%E5%90%91%E4%B8%8B%E6%BB%91%E5%8A%A8.png" alt="四指任意位置向下滑动.png"></td>
|
||||
<td>触控板</td>
|
||||
<td>唤起全局搜索</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2 id="控制方式">控制方式：</h2>
|
||||
<ol>
|
||||
<li>相对控制：手势仅控制页面是否出现，手指与被控对象位置无对应关系。</li>
|
||||
<li>绝对控制：手指的移动速度和位置变化和视图的位置变化是对应的。</li>
|
||||
<li>稳定化：稳定化效果：当我们使用手势控制某个受控物时，由于手势的某个属性（如手指位移）达到阈值，进而导致受控物的某个属性稳定在了特定状态的效果被称为「稳定化效果」，或者也可以称为「吸附」。稳定化效果能够保持界面的视觉秩序，避免过多的中间状态导致界面的杂乱，进而帮助用户聚焦信息。是否有稳定化效果是区别轻扫与另外两个手势即滑动和拖拽的重要维度，当某个位移类手势有稳定化效果，我们就将其称作轻扫。</li>
|
||||
</ol>
|
||||
<h2 id="触摸屏接触点样式">触摸屏接触点样式</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>图示</th>
|
||||
<th>规范</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>单指点击：<br> 只显示内圈</td>
|
||||
<td><img src="file:///g:\idea\project\docs\07_关于社区\社区产品\UKUI\设计指南\assets\%E8%A7%A6%E6%8E%A7_%E8%A7%A6%E6%91%B8%E6%89%8B%E5%8A%BF\%E5%8D%95%E6%8C%87%E7%82%B9%E5%87%BB.png" alt="单指点击.png"></td>
|
||||
<td>内圈直径：48px <br> 颜色：#E5EFF7，透明度：85%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>单指长按：<br> 进度条转动，内外圈同时出现</td>
|
||||
<td><img src="file:///g:\idea\project\docs\07_关于社区\社区产品\UKUI\设计指南\assets\%E8%A7%A6%E6%8E%A7_%E8%A7%A6%E6%91%B8%E6%89%8B%E5%8A%BF\%E5%8D%95%E6%8C%87%E9%95%BF%E6%8C%89.png" alt="单指长按.png"></td>
|
||||
<td>内圈直径：80px <br> 内圈颜色：#E5EFF7，透明度：65% <br> 外圈颜色：#236CDA，透明度：85% <br> 描边：8px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>单击拖动状态：<br> 只显示拖尾</td>
|
||||
<td><img src="file:///g:\idea\project\docs\07_关于社区\社区产品\UKUI\设计指南\assets\%E8%A7%A6%E6%8E%A7_%E8%A7%A6%E6%91%B8%E6%89%8B%E5%8A%BF\%E5%8D%95%E5%87%BB%E6%8B%96%E5%8A%A8%E7%8A%B6%E6%80%81.png" alt="单击拖动状态.png"></td>
|
||||
<td>颜色：#E0E7F1 <br> 透明度：从左至右50%渐变至100% <br> 高度：5px</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
---
|
||||
title: 触控&触摸手势
|
||||
description:
|
||||
published: true
|
||||
tags:
|
||||
editor: markdown
|
||||
---
|
||||
|
||||
# 触控&触摸手势
|
||||
|
||||
为了保障标准化触控板&触摸屏手势体验，保障跨平台应用手势体验一致性、生态系统互通性、减少用户误触的几率、提高开发效率、确保品牌的一致性，特制定本规范文档。
|
||||
|
||||
## 基本手势
|
||||
| |图示 |功能描述 |
|
||||
| --- | --- | --- |
|
||||
| 单击 |  | 手指轻点触控板&触摸屏触发功能，例如：打开应用、选择对象、打开菜单栏、执行按钮命令等<br>规则：快速点击，时间小于等于600ms，松开后，执行点击行为 |
|
||||
| 双指点击 |  | 双指轻点触控板&触摸屏触发功能，例如：打开右键菜单 |
|
||||
| 双击 |  | 手指快速点击两次触控板&触摸屏触发功能，例如：打开桌面应用、文件&文件夹、选择文字等 |
|
||||
| 长按 |  | 手指长按某个元素触发功能，例如：弹出菜单、右键菜单、多选、选择文字等 <br> 规则：按下，持续时间大于等于600ms，松开后，执行长按行为。 |
|
||||
| 滑动 |  | 滑动触控板&触摸屏以连续滚动列表和页面，切换对象，操作主体在松开的瞬间沿着某个方向还有一定的移动速度，则被控对象沿着该方向继续滑动一段距离, 同时滑动速度逐渐减小, 直到最终停止。 判定手指位移和释放速度满足任意一个即可 |
|
||||
| 轻扫 |  | 手指沿着某个方向移动一段距离，被控对象同时沿着相应的方向移动相应的距离。松开后，被控对象会根据松开时所处的位置、移动速度以及稳定状态之间的界线，共同决定自动回到某个提前规定好的稳定状态 |
|
||||
| 拖放 |  | 拖动对象移动其位置，例如：移动窗口、移动文件/图标位置、拖动进行批量操作，例如：框选文字等内容、框选图标、刷新页面、滑动以调节滑动条数值 |
|
||||
| 捏合 |  | 两个手指按住触控板&触摸屏向外展开以放大内容，向内收拢以缩小内容，例如：网页、图片 |
|
||||
| 多点旋转 |  | 当双指都触碰到触控板&触摸屏后, 两个触点之间连线的角度被用来控制诸如照片, 地图等被控对象的旋转角度 |
|
||||
|
||||
|
||||
## 单击与长按规则
|
||||
单击：快速点击，时间小于等于600ms，松开后，执行点击行为
|
||||
长按：按下，持续时间大于等于600ms，松开后，执行长按行为。注意，单击与长按行为互不干扰，执行长按操作时不执行其操作时间内的单击行为。
|
||||
|
||||
## 双击文件重命名
|
||||
双击重命名文件，实则为两次单击触发重命名，若在<400ms（双击默认值）内完成双击操作，则判定为双击事件。若在400ms外完成第二次点击，则判定为两次单击操作。
|
||||
|
||||
## 自定义手势
|
||||
| | 图示 | |功能描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| 单指向上轻扫 | | 触摸屏 | 打开多任务视图 <br> 绝对控制，手指释放后稳定化 |
|
||||
| 单指向下轻扫 | | 触摸屏 | 显示桌面 <br> 相对控制，手指释放后稳定化 |
|
||||
| 单指屏幕右侧向左轻扫 | | 触摸屏 | 呼出侧边栏 <br> 绝对控制 |
|
||||
| 双指左右滑动|  | 触控板 <br> 触摸屏| 调节滑动条，亮度&音量 |
|
||||
| 三指上下轻扫|  | 触控板 | · 打开多任务视图&关闭多任务视图 <br> ·显示桌面&显示打开的应用 <br> 相对控制，手指释放后稳定化|
|
||||
| 三指左右轻扫|  | 触控板 | 切换应用窗口 <br> 绝对控制，手指释放后稳定化 |
|
||||
| 三指点击|  | 触控板 | 唤起全局搜索&关闭全局搜索 |
|
||||
| 四指点击| | 触控板 | 呼出侧边栏&关闭侧边栏 |
|
||||
| 四指左右轻扫|  | 触控板 <br> 触摸屏 | 切换虚拟桌面 <br> 相对控制，手指释放后稳定化 |
|
||||
| 四指任意位置向下滑动|  | 触控板 | 唤起全局搜索 |
|
||||
|
||||
## 控制方式：
|
||||
1. 相对控制：手势仅控制页面是否出现，手指与被控对象位置无对应关系。
|
||||
2. 绝对控制：手指的移动速度和位置变化和视图的位置变化是对应的。
|
||||
3. 稳定化：稳定化效果：当我们使用手势控制某个受控物时，由于手势的某个属性（如手指位移）达到阈值，进而导致受控物的某个属性稳定在了特定状态的效果被称为「稳定化效果」，或者也可以称为「吸附」。稳定化效果能够保持界面的视觉秩序，避免过多的中间状态导致界面的杂乱，进而帮助用户聚焦信息。是否有稳定化效果是区别轻扫与另外两个手势即滑动和拖拽的重要维度，当某个位移类手势有稳定化效果，我们就将其称作轻扫。
|
||||
|
||||
## 触摸屏接触点样式
|
||||
| | 图示 | 规范 |
|
||||
| --- | --- | --- |
|
||||
| 单指点击：<br> 只显示内圈 |  | 内圈直径：48px <br> 颜色：#E5EFF7，透明度：85% |
|
||||
| 单指长按：<br> 进度条转动，内外圈同时出现 |  | 内圈直径：80px <br> 内圈颜色：#E5EFF7，透明度：65% <br> 外圈颜色：#236CDA，透明度：85% <br> 描边：8px |
|
||||
| 单击拖动状态：<br> 只显示拖尾 |  | 颜色：#E0E7F1 <br> 透明度：从左至右50%渐变至100% <br> 高度：5px |
|
||||
Loading…
Reference in New Issue