触摸手势的网络原型

许多网页设计师的工作过程都涉及使用线框，线框是页面布局的静态轮廓，可以填充设计元素，也许是从Photshop组件中绘制的。

但是，开发人员需要构建静态线框中不可用的功能。 Web原型更像是一种工作模型，它使开发人员可以试验事物在Web上的工作方式。

在本文中，您将学习如何使用简单的HTML，CSS和jQuery创建带有触摸手势的Web原型。

触控原型

对于最近的项目，我想合并一种工具，以允许适当的屏幕响应触摸手势。 我设计了一个静态线框，然后考虑构建一个可以在平板电脑设备上运行的富Web原型，以演示给利益相关者。

考虑到这只是一个原型，不会用于实际开发，并且鉴于我对编程的了解有限（对于设计人员来说是一个普遍的问题），因此我正在寻找一个简单的JavaScript框架来允许滑动手势在移动浏览器（尤其是平板电脑和iPad）上工作。

主要要求是当用户从左向右滑动手指时，用滑动动画显示主导航栏。 我开始使用Google搜索，并尝试了从jQuery mobile到Hammer.js的各种框架。 我尝试过的所有框架要么太复杂以至于无法使用，要么在移动浏览器上反应迟钝。

最后，我尝试了另一个名为wipetouch.js的框架，它可以按我想要的方式工作。 它非常简单易用，并且在iOS和Android等平台上滑动手势的响应速度非常快。

注意：该演示主要是为iPad和平板电脑制作的，但在桌面浏览器上也能很好地运行。 对于台式机，用户可以滑动鼠标指针来代替滑动。 要查看结果，请打开iPad或Android平板电脑上的链接，然后从左向右，从右向左和从上至下滑动手指。

观看演示

用于此练习的文件

• 用于HTML的index.html
• 用于样式的style.css
• JavaScript的common.js
• jquery.wipetouch.js –用于滑动手势的框架
• 并链接到jQuery文件

本练习中使用的图像

从左向右滑动：
显示带有滑动动画的左侧菜单栏

从右向左滑动：
显示带有滑动动画的右栏

从上到下滑动：
在此示例中，我想使用向下滑动手势来添加产品而不点击+图标，因为滑动比点击小图标更容易，更快捷。

但是，由于该触摸手势存在可发现性的问题，因此如果用户不知道该手势，则会在其中添加产品的图标。

入门

注意：为了使本文更容易理解，我将仅说明在从左向右滑动时滑动左菜单的代码。 对于右侧和顶部菜单，代码几乎相同（并在实际的演示源文件中提供）。

第1步–链接JavaScript和jQuery文件

首先，我们将在HTML页面中链接此原型所需的jQuery文件和wipetouch.js框架。 我们将使用jQuery显示滑动动画，并使用wipetouch.js进行滑动手势。 Common.js是用于此分配的JavaScript文件。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script src="jquery.wipetouch.js"></script>

<script src="common.js"></script>

文件名– index.html

下载wipetouch.js

第2步–添加图片

在HTML中，我们将添加left_menu.png图片并为其指定ID。 我们将在CSS和JS文件中使用此ID。

<img src="images/left_menu.png" width="262" height="600" id="menuLeft">

文件名– index.html

第3步-CSS代码

在CSS中，我们将图像放置在页面上我们希望滑动动画开始的位置。

/* Set Position of Left bar */
#menuLeft {
    position:absolute;
    left:0;
    top:0px;
    z-index:99;
}

文件名– style.css

步骤4 –在页面加载时隐藏#menuLeft

$("#menuLeft").hide();

文件名– common.js

这里menuLeft是应用于left_menu.png的ID。

步骤5 –当用户从左向右滑动时，以滑动动画显示导航栏

wipeRight: function(result) {
    $("#menuLeft").show("slide", { direction: "left" }, 1000);
}

文件名– common.js

这里的wipeRight是wipeRight中的函数，当用户从左向右滑动手指时触发。

在此滑动动作中，我们显示menuLeft图像以及从左侧滑动的动画。

步骤6 –轻按滑回图片

现在，我们需要在用户点击图像时将同一图像向后滑动。

$("#menuLeft").click(function () {
    $("#menuLeft").hide("slide", { direction: "left" }, 1000);
});

点击图像时，它会滑回隐藏状态。

注意：为了使本文更容易理解，我仅说明了用于从左向右滑动的左侧菜单的代码。 对于从右向左滑动和从上至下滑动，代码几乎相同，并在实际的演示源文件中给出。

下载演示源文件

结论

毫无疑问，可用的原型制作工具很快就会涵盖触摸手势，但是现在这种解决方案可以解决问题。 我希望该演示为您提供一个良好的基础，以便您使用简单的代码构建原型来在触摸设备上显示触摸手势和基本动画。

如果您有任何改进建议，请告诉我。 请在下面的评论部分中分享您的想法，意见和想法。

进一步阅读

http://www.netcu.de/jquery-touchwipe-iphone-ipad-library
使用touchwipe.js创建的另一个不错的演示，可在滑动时进行幻灯片放映

http://eightmedia.github.com/hammer.js/
另一个非常流行的移动设备JS框架

http://www.appliness.com/multitouch-with-hammer-js/
使用Hammer.js创建的一个不错的演示，以显示拖放

From: https://www.sitepoint.com/web-prototyping-for-touch-gestures/