移动Web应用开发入门指南——交互篇

时间 2019-11-20

标签移动 web 应用开发入门指南交互栏目无线繁體版

原文原文链接

交互篇

从PC到移动端，视觉和交互是用户能直接感觉到的差别。在视觉篇中已经提到，移动设备的物理属性一部分影响到视觉，另一些部分将影响到交互。那么，移动设备影响交互的物理属性都有哪些变化呢？对于这个问题，相信你们都早有答案。传统PC的输入设备相对单一，通常状况下只有鼠标和键盘，而移动设备的硬件就变得很是丰富，触屏、触控笔、麦克风、陀螺仪和GPS等包罗万象。下面我们就聊聊在移动Web开发中有关交互的一些问题。javascript

手势

手势是移动Web与PC Web开发在用户接口上最大的一个差别，PC端主要考虑的是鼠标操做，鼠标的运行轨迹就比较简单，jQuery对鼠标事件的支持也只有11个，基本上已经算最全的鼠标事件库，这里我就不细说，能够自行查看API jQuery Mouse Event。html

下面这幅图展现了基本的手势图例：html5

图6（来自网络）
java

就目前来讲，大多数的移动Web应用场景，使用的手势相对比较简单，主要仍是单指手势tap、long tap或double tap。我遇到的案例中，使用手势相对复杂的应用应当是组图产品。360搜索移动版的图库手势实现，是我认为目前移动端组图展现的一个最佳实践。在这个案例中手势已经具有必定的复杂程度，使用到了单指和双指手势，包括：double tap、swipe、scale，而且使用的手势与很是贴近组图产品的实际需求，因此，360图片搜索对于如何正确应用触屏手势来讲很是具备参考意义。jquery

你们可使用手机扫描下面这个二维码，查看360图片搜索的的案例：
ios

使用手势的技术并不复杂，如何在Web应用中选择一个合适的手势交互才是值得深思的问题。Touch Gesture Guide这份PDF很是全面的分解了全部触屏手势，以及手势动做的含义，同时，还能够参考腾讯CDC团队在早期的一篇文章《移动设备手势设计初探》。git

触屏事件

触屏事件是一个较为技术性的话题，可是在这篇文章中又不得不提到，由于它过重要了。全部的手势都是使用触屏事件的技术实现，如今在iOS和Android下通用的是Touch事件模型，Touch事件模型能够参见Apple开发者文档《Handling Events》的这篇文章，在iOS下还有一个特有的Gesture事件模型，在那篇文章中都有详细的介绍。github

在触屏事件模型中，传统的click、mouse事件都是被模拟出来的，理论上应该是在touchend事件以后被触发，如图7：web

图7（来自网络）
api

在Touch事件模型中有一个必须注意的问题，click事件是在touchend以后延迟300ms触发，如图8：

图8（来自网络）

而就是这个延迟300ms，致使了移动Web开发很是著名的点击穿透问题，《【初窥javascript奥秘之事件机制】论“点透”与“鬼点击”》这篇文章举的例子比较好，一看就能明白什么是点透问题。关于点透问题也有不少已经出现了不少解决方案，如FastClick。

上面没有提到Windows Phone，由于微软为移动设备专研发了PointerEvent事件模型，目前只有IE10+才支持，因此Web应用在Windows Phone下运行，要作PointerEvent兼容。在文章《浏览器的统一指针事件：Pointer Event》中讲述了它的一些历史和原理，并附了一些实例文章。

局部区域滚动

我先说明下我对它的定义，以避免有人和我理解不一样。局部区域滚动就是给块级元素赋予高宽和overflow:scroll，代码以下：

div {
    width: 320px;
    height: 500px;
    overflow: scroll;
}

这么作在PC浏览器下当然没有任何问题，可是移动端浏览器因为输入设备（也就是上面说的手势）的差别，致使局部区域与<body>全局滚动相冲突。当手指停留在局部区域时，浏览器须要识别你当前滚动的是全局仍是局部，这样就显得局部区域滚动的交互至关不协调。在早期的Android系统就不支持局部区域滚动，一直到Android 4才支持的比较不错。

局部区域滚动在移动Web开发中，应用很是普遍，如：

单页Web应用开发，能够参见个人另外一篇文章《移动Web单页应用开发实践——页面结构化》
页面中须要滚动块级元素，好比百度百科中的表格，图9

图9

目前主要有三种方法来解决局部区域滚动的问题：

使用-webkit-overflow-scrolling: touch，有兼容问题，低版本系统不支持这个特性，并且交互冲突的问题依然存在；
使用IScroll组件，IScroll是依赖Touch事件来模拟局部滚动，因此性能上有很突出的问题，在Android手机上表现不佳；
在有限的应用场景使用position: fixed，主要适用于单页Web应用开发，能够参见jQuery Mobile的视图模型以及视图切换的例子；

IScroll组件存在的意义，对与单页Web应用来讲是不言而喻，它要解决的不只仅是多视图共存的问题，还包括数据展现与交互的问题，这在我那篇页面结构化的文章中都有详细的说明。

瀑布流

因为移动设备的屏幕和手势的缘故，瀑布流将会是一种主要的信息展现的方式，以下：

图10，默认状态

图11，当页面滚动到底部或点击“加载更多”按钮，加载下一页数据

对于瀑布流这种信息展示形式，会有两种常见的交互方式：

Pull up to load more，向上拉加载更多
Pull down to refresh，向下拉刷新

上拉操做能够监听scroll事件来实现，这在不少产品中都能找到例子。可是，下拉操做在全局滚动下不管如何都是没法实现的，因此就须要借助于IScroll这样的组件，能够参见我写的例子Views with IScroll

点击反馈

因为事件模型的变化致使另外一个常见问题就是点击反馈，在PC端完成“可点击区域”的交互可使用:hover、:visited这样的伪类来实现各类状态效果，但这样的经常使用作法在移动开发下失效了。主要是由于以下几个缘由：

:hover在Touch事件模型下失效；
手指的触摸面积比较大，若是可点击区域的size过小，就很难引发用户注意；
移动端很难失焦，必须点击另外一个可点击元素才能失焦；

因为这样的交互变化，就须要咱们很是当心的去处理这些问题。具体的一些解决方案，能够到mobileTech中查找。

对于focus和blur动做，尤为须要注意文本框的一些问题，文本框得到焦点以后，会弹出软键盘，这就致使各类问题，好比：

在一些Android系统下，文本框组件独占显示，致使遮挡了一些正常显示的元素；
软键盘弹出后，窗体size没有重置，致使遮挡内容；
在iOS下position: fixed元素中嵌入文本框的一些问题，能够参见《移动端web页面使用position:fixed问题总结》

和你们分享一个小技巧，在软件盘弹出以后，若是想点击一个按钮又不但愿软键盘收起，能够在touch事件中调用e.preventDefault()防止软键盘被收起。这个例子可参见百度移动搜索首页的文本框，输入内容以后，点击右侧的“X”按钮清空输入，但软键盘不会收起。

传感设备

就目前来讲，HTML5可用的传感设备接口很是优先，比较成熟的只有两个：Geolocation和DeviceOrientation。使用Geolocation能够实现GPS定位、计算距离等，使用DeviceOrientation能够实现摇一摇、指南针等功能，具体能够参见下面的文章：

屏幕翻转事件orientationchange实际也就是DeviceOrientation的一种实现。

另外，软件盘中的语音输入和<input type="file">也是在产品中常常会使用到的两个功能，尤为是<input type="file">，它能够用来拍照上传图片。

图12（来自网络）

小结

在交互篇中，都是与手势交互相关的开发注意事项，这些是产品中最多见和最经常使用的交互，会有不全的地方，目的只是想带入门新手熟悉移动Web开发中的交互变化