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

交互篇

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

手势

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

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

图6（来自网络）
6

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

大家可以使用手机扫描下面这个二维码，查看360图片搜索的的案例：
360so_image_example_qrcode

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

触屏事件

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

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

图7（来自网络）
7

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

图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开发中，应用非常广泛，如：

图9
9

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

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

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

瀑布流

由于移动设备的屏幕和手势的缘故，瀑布流将会是一种主要的信息展示的方式，如下：

图10，默认状态
10

图11，当页面滚动到底部或点击“加载更多”按钮，加载下一页数据
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（来自网络）
12

小结

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

posted @ 2015-12-29 18:45  创业男生  阅读(2274)  评论(0)  编辑  收藏  举报