1951人阅读
大前端（66）
一丶概述&&& & 如今移动端设备大行其道，前端也走进了移动的领域。在写移动端页面的交互效果的时候，我么难免要接触一些复杂的手势，而不仅仅像pc端那样简单的鼠标事件。手势实际上是一种输入模式。我们现在在直观意义上理解的人机交互是指人与机器之间的互动方式，这种互动方式经历了鼠标、物理硬件、屏幕触控、远距离的体感操作的逐步发展的过程。二丶移动端手势事件&&& & 在浏览器中，为我们提供的手势并不算多，主要有：
& && &&&touchstart&当手指触摸屏幕时触发
& && &&&touchmove&当手指在屏幕滑动时不断的触发
& && &&&touchend&当手指从屏幕上移开时触发
& && &&&touchcancel&当系统停止跟踪触摸时触发
& & 是不是感觉很少，safari还为我们提供了三个独有的手势事件(用于复杂的手势)，然而也仅仅只能在safari中使用&&
& && &&&gesturestart&当一个手指已经按在屏幕上，另一个手指也按上时触发
& && &&&gesturechange&当触摸屏幕上任何一个手指发生变化时触发
& && &&&gestureend&当任何一个手指从屏幕上移开时触发
&&&&& & 最后呢，让我们看看移动设备上究竟有哪儿手势需要我们使用&&&&三丶让JS支持这些手势&&& & 目前看来，我们能用的也就只有touchstart，touchmove, touchend, touchcancel这四个手势，那么如何才能利用这四个手势支持众多的交互效果呢？首先我们从最简单的手势开始。简单的手势也就是说是单点触控，我们主要来实现如下几个手势：
& && &&tap&轻触
& && &&doubletap&连续两次轻触
& && &&press&长按
& && &&pan&平移
& && &&flick&轻拂
&&& & 首先我们要解决如何触发自定义事件(已经了解自定事件的可以跳过)：&&& &
//自定义一个事件document.body.addEventListener("tap", function(event) {
console.log("tap事件触发")}, false)
//触发自定义事件
function fireEvent(element, type, extra) {
var event = doc.createEvent('HTMLEvents');
event.initEvent(type, true, true);
if (typeof extra === 'object') {
Util.extends(event, extra);
element.dispatchEvent(event);}fireEvent(document.body, "tap", {});
//触发tap事件
我们在整个事件模拟中定义一个中间状态&evet.status&来表示当前的触摸状态，接下来我们就利用touchstart，touchmove，touchend来可以实现自己的触摸事件了& && &&tap事件：当touchstart触发时，我们将event.status状态改为 tapping。在touchend触发时，如果event.status依然为tapping则，触发tap事件。&&& &&doubletap事件：在触发tap事件的时候，我们用一个变量lastTime记录当前时间。下一次触发tap时，用当前时间和lastTime做对比，如果小于300ms则触发doubletap事件&&& &&pess事件：当touchstart触发时，我们定义一个setTimeout的函数(500ms)，如果500ms后仍然没有touchend触发，则定时函数将event.staus状态改为pressing。当touchend触发时，检测到状态为pressing则触发press事件。&&& &&pan事件：我们在touchmove中检测当前状态是tapping和pressing时，并且手指移动距离大于10px则，触发pan平移事件。这个移动距离用event.touches[0].clientX - lastTouch.clientY 来检测就好(利用lastTouch记录，起始手指的event对象)。&&& &&flick事件：这个事件就是"刷~刷"的划过屏幕的交互效果，在touchend时通过pan事件的移动距离和移动事件算出速度(注意是X和Y轴的合速度)，如果速度大于0.5，并且整个触摸过程时间小于100ms，则触发flick事件。&&& &&&是不是很简单的用最原始的浏览器事件就能实现这些内容。&&& &&&接下来让我们看看两个手指的事件如果实现。&&四丶实现多指触控&& & 在实现多指触控的时候，我们需要了解一下触摸过程中event用来保存多个手指信息的三个属性：
& && &&touches当前屏幕上所有触摸点的集合列表
& && &&targetTouches绑定事件的那个结点上的触摸点的集合列表
& && &&changedTouches触发事件时改变的触摸点的集合
&&& &&&这三个有什么区别？举例来说，比如div1, div2只有div2绑定了touchstart事件，第一次放下一个手指在div2上，触发了touchstart事件，这个时候，三个集合的内容是一样的，都包含这个手指的touch，然后，再放下两个手指一个在div1上，一个在div2上，这个时候又会触发事件，但changedTouches里面只包含第二个第三个手指的信息，因为第一个没有发生变化，而targetTouches包含的是在第一个手指和第三个在div2上的手指集合，touches包含屏幕上所有手指的信息，也就是三个手指。这样是不是就很很清楚了。下面我们要根据上面的内容，继续解决一个问题：当两个手指作用在不同的节点上应该触发哪个节点的事件呢？& & 这里我们规定，如果触发在了两个不同节点上，我们去两个节点公有的最近父节点，作为触发的目标。寻找共有最小父节点代码如下：
//判断节点ele1是否包含ele2function contains(ele1, ele2) {
return ele1.contains ? ele1 != ele2 && ele1.contains(ele2) : !!(pareDocumentPosition(ele2) & 16);}//获得共有最近的父节点function getCommonRootNode(ele1, ele2) {
while (ele1) {
if (contains(ele1, ele2) || ele1 === ele2) {
return ele1;
ele1 = ele1.parentN
这样我们解决了，如何找到多个手指信息和触发哪个节点的问题。最后一个问题，当给了我们这些信息我们怎么能用？比如计算旋转手势，缩放手势啊什么的。&&& & 这里我们仅考虑两个手指的多点触控。我们设touchstart阶段的两个手指坐标为 A(x1, y1)& &B(x2, y2)。touchmove过程中的两个手指的坐标为 C(x3, y3) D(x4, y4)。& &&rotate旋转：计算AB，CD线段与坐标轴的夹角，对角度相减即得到旋转角度。&&& &&scale&缩放：计算AB线段长度和CD线段长度(勾股定理)，两条线段做比值就好。&&& &&translate平移： 平移的话我们只计算A点到C点的x坐标变化量。&& & 具体代码如下：
function calcAction(x1, y1, x2, y2, x3, y3, x4, y4) {
let rotate = Math.atan2(y4 - y3, x4 - x3) - Math.atan2(y2 - y1, x2 - x1),
scale = Math.sqrt((Math.pow(y4 - y3, 2) + Math.pow(x4 - x3, 2)) / (Math.pow(y2 - y1, 2) + Math.pow(x2 - x1, 2))),
translate = [x3 - scale * x1 * Math.cos(rotate) + scale * y1 * Math.sin(rotate), y3 - scale * y1 * Math.cos(rotate) - scale * x1 * Math.sin(rotate)];
rotate: rotate,
scale: scale,
translate: translate,
* |ax + cy + e|
* |bx + dy + f|
martrix: [
[scale * Math.cos(rotate), -scale * Math.sin(rotate), translate[0]],
[scale * Math.sin(rotate), scale * Math.cos(rotate), translate[1]],
了解这些内容，你就可以在touchmove过程中完成对两个手指的旋转缩放平移等交互效果进行封装了。是不是很简单呢！&&& &&&当然完整的事件过程要分start，move，end这三种情况，在实现的时候要分别给予对应的实现就可以了。都逃不开对touchstart，touchmove，touchend的利用。&&五丶实现案例& & 基于上面的方案，我实现了一个对移动端手势的封装库，包含以上所有的手势。犹豫这里代码运行不能模拟手机环境，我就不贴代码了。&&& & 感兴趣的同学可以访问：&&上面有具体的使用方法和带有详细注释的源码哦，欢迎start。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：677243次
积分：12906
积分：12906
排名：第1084名
原创：658篇
转载：715篇
评论：32条
(66)(119)(136)(80)(30)(57)(17)(106)(99)(119)(56)(260)(3)(84)(19)(37)(60)(28)
(window.slotbydup = window.slotbydup || []).push({
id: '4740881',
container: s,
size: '200,200',
display: 'inlay-fix'APP设计必知的五种常用APP单手操作用法 – 25学堂
我的图书馆
APP设计必知的五种常用APP单手操作用法 – 25学堂
当我们玩转很多有趣的APP之后，发现很多APP很多单手操作功能基本都是一样的。因为这些单手操作交互效果都是通用的，也是移动端固有的操作方式。
今天25学堂跟大家来回顾下五种常用APP单手操作用法。
在目前APP的设计当中，多层级、多页面切换是最频繁的操作，如果仅仅依靠大多数应用左上角的back键来返回或是点击后才能切换tab，使用起来将非常不方便，因此APP单手操作最常见的应用场景则是利用左右滑手势来穿行于各层级页面间。
第一种APP单手操作用法：页面切换（包括TAB切图效果）
如Tab切换。在这个手势操作中有两个关键因素影响使用体验：
1、滑动过程中页面要跟随手指，这样能让用户形成对产品的控制感和更明确的层级感；
2、需要有“路标”作用的页面元素作为指引。
下图（1）是网易云阅读和iOS设置中的右滑操作示意。网易云阅读中，在页面任何位置轻轻右滑即可返回，iOS的返回操作手势热区在屏幕边缘。这两者的区别是，云阅读中的返回设计更多是利用用户的下意识行为，操作成本低，但同时增加了误操作的风险。iOS中用户的操作多是有意识的行为，误操作几率小，同时操作成本也增加了。
这两种方式各有利弊，因此在设计中应更具实际场景定义好对手指滑动的感应范围和角度。
图（1）iPhone和网易云阅读的右滑手势热区
下图（2）为网易云阅读和网易新闻的文章正文页，都能通过左滑返回，后滑进入评论页。相比之下用网易新闻显得更自然，初次用网易云阅读的用户会更容易对右滑进入评论页产生迷惑。究其原因，网易新闻在标题栏两边分别放置了“返回”和“跟帖”的页面元素，就像是分叉口的两个路标，让用户对前方的路形成心理预期。相比之下，网易云阅读的返回和评论同处于页面底部的左边，引导性不太明确。
图（2）手势切换时的页面引导
第二种APP单手操作用法：多维度的切换
举例说明日历的设计。日期的可拆分维度有年、月、季度、周等，不同的使用场景需要切换时间粒度，Cal利用手势上下滑动方便地切换周历和日历，利用左右滑切换日期。数读首屏，默认显示文章概要，上滑即可浏览文章详情，由此利用手势的上下左右滑动可以针对文章展开4个维度的浏览：概要，详情，上一篇，下一篇。此外，相似的手势运用还是墨迹天气等。
图（3）Cal的周历、日历切换
图（4）数读的文章概要和详情切换
第三种APP单手操作用法：将相关功能隐藏在对内容的手势操作中，扩充屏幕内容展示空间。
最常用的ios 像左滑或者右滑代表删除。android就是长按删除。
资讯阅读软件Digg和追剧神奇TeeVee则采用了如图（5）和图（6）所示的操作方式。Digg通过右滑手势后，可对该资讯模块进行赞、添加书签、分享等操作。TeeVee中，左滑是最常见的删除操作，右滑可查看更详细的剧目更新信息和提醒设置。这种直接操作内容的自然人机交互方式，不仅符合用户的感知习惯，也能很好地节约屏幕空间，创造沉浸式的阅读体验，这点和Windows UI的设计理念非常契合。只要对新手用户做好引导，之后的操作就非常得心应手。
图（5）Digg将添加标签等内容相关操作隐藏在左滑手势之后
图（6）TeeVee的手势操作
除此之外iOS自带的邮件、信息，和小清新壁纸应用拾光都有类似手势应用。
第四种APP单手操作用法：提炼重要功能，利用手势呼出操作
iOS的多指触控自不必说，可是需要额外的记忆成本[3]。上文提到过，在使用时最常用的手势是滑动和点击，运用得当也可以达到惊艳的效果。刷新浪微博时大家最常用的操作莫过于看和写，新浪微博将写微博的操作放在了左上角很明显的位置，但是单手难以操作，而Fuubo通过点按屏幕底部的首页键然后顺势上滑，即可触发写微博的操作，更简洁快速。如图（7）是新浪微博和Fuubo的界面功能布局对比。
图（7）新浪微博和Fuubo的写微博功能呼出方式
在优酷的播放界面任何地方左右滑动可控制播放进度，上下滑动控制音量，将手指从界面众多功能中解放出来。
图（8）优酷的手势运用
除此之外，Clear，Any.Do等to do应用利用下拉手势直接调出最常用的编辑新条目功能；易信双击呼出语音；多看阅读下拉书籍正文直接添加书签；Readmill在文章阅读时上下滑直接调节亮度；Solar利用上下滑手势查看不同时间点的天气。
第五种APP单手操作用法：往上滑实现一些交互功能。
比如ios当中，向上滑可以滑出系统正在运行的APP应用。但是很多APP应用也采用这一的app单手操作功能。腾讯视频APP在看视频的时候，向上滑动代表是 音量得的增加或者减少。左右代表快进和倒退。
所以，我们在设计APP的时候，要充分利用简单的上下滑和点击手势呼出APP使用时最常用、触发频率最高的功能，提高使用效率。但哪些功能优先级比较高，是否容易误操作，误操作后果如何是需要慎重考虑的问题。如优酷的上下滑调节音量功能的优先级是否如此之高，在某些场合是否会令用户误操作而尴尬，这些都是需要结合使用场景去仔细斟酌的。
您可能也喜欢：
TA的最新馆藏
喜欢该文的人也喜欢为什么智能触屏手机出现这么多年手势操作一直没有太大的变化？产品交互的手势是如何设计的？ - 知乎157被浏览21063分享邀请回答415 条评论分享收藏感谢收起51 条评论分享收藏感谢收起查看更多回答1 个回答被折叠（）附录 使用光标 在辅助菜单上，点击光标。可以在触摸区域上使用手指来控制屏幕。在触摸区域上 拖动手指以移动光标。此外，点击屏幕以选择光标下的项目。 使用以下选项： · / ：选择项目或在屏幕上向左或向右滑动。 · / ：向上或向下滑动屏幕。 · ：放大光标所在的区域。 · ：将触控区域移至另一位置。 · ：关闭触控区域。 如欲更改光标设定，打开主屏幕，点击设定 → 辅助功能 → 敏捷度和互动 → 助理 菜单。然后，自定义触控板和光标设置中的设定。 使用增强的辅助菜单 设置设备以显示选定应用程序的增强型辅助菜单。 在主屏幕上，点击设定 → 辅助功能 → 敏捷度和互动 → 助理菜单 → 助理加强 版，点击开关以将其启动，然后选择应用程序。 用唤醒手势功能打开屏幕 使用唤醒手势功能以通过在设备顶部的传感器上方移动您的手来打开屏幕。可以在 不按下按键的情况下打开屏幕。使用此功能时，使屏幕朝上将设备放在平整的表面 或拿稳设备以防止其移动。 在主屏幕上，点击设定 → 辅助功能 → 敏捷度和互动 → 唤醒手势，然后点击开关 以将其启动。 设置点住延时选项 设置点住屏幕的识别时间。 在主屏幕上，点击设定 → 辅助功能 → 敏捷度和互动 → 按住延迟，然后选择选 项。 155
在辅助菜单上
点击光标。可以在触摸区域上使用手指来控制屏幕。在触摸区域上
拖动手指以移动光标。此外
点击屏幕以选择光标下的项目。
使用以下选项
选择项目或在屏幕上向左或向右滑动。
向上或向下滑动屏幕。
放大光标所在的区域。
将触控区域移至另一位置。
关闭触控区域。
如欲更改光标设定
打开主屏幕
敏捷度和互动
菜单。然后
自定义触控板和光标设置中的设定。
使用增强的辅助菜单
设置设备以显示选定应用程序的增强型辅助菜单。
在主屏幕上
敏捷度和互动
点击开关以将其启动
然后选择应用程序。
用唤醒手势功能打开屏幕
使用唤醒手势功能以通过在设备顶部的传感器上方移动您的手来打开屏幕。可以在
不按下按键的情况下打开屏幕。使用此功能时
使屏幕朝上将设备放在平整的表面
或拿稳设备以防止其移动。
在主屏幕上
敏捷度和互动
然后点击开关
以将其启动。
设置点住延时选项
设置点住屏幕的识别时间。
在主屏幕上
敏捷度和互动
然后选择选
匿名用户上传于：
&2016 蟹腿&&&&粤ICP备号-2
(┯_┯)广告君被屏蔽了~~~
感谢您的支持，请按照如下步骤取消屏蔽ABBAO的广告()：
我取消屏蔽了