手机端&PC端鼠标和手势交互异同辨析（三）

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了手机端&PC端鼠标和手势交互异同辨析（三）相关的知识，希望对你有一定的参考价值。

参考技术A 移动端设备之所有又被称为“移动智能终端”，是因为移动端设备由于嵌入了比PC设备多得多的各种传感器，从而也就能实现比PC端多得多的交互效果，但因为本文主要是要讨论手势交互和鼠标交互的异同，所以对除了屏幕以外的其他传感器交互方式不做进一步的深入讨论。

PC上的鼠标点击会产生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件，但是在移动终端页面触屏时会产生ontouchstart、ontouchmove、ontouchend、ontouchcancel 事件，分别对应了触屏开始、拖拽及完成触屏事件和取消交互。

移动端手势交互和PC端最大的不同是：移动端交互都是以Touch为基础，只有手指接触了屏幕，才能进行后续的所有操作，任何交互都发生在手指Touch屏幕的那一瞬间之后，而PC端鼠标要与界面UI控件之间发生交互，很多时候只需要光标位置悬停在目标控件之上即可完成。

这种根本性的交互差异深刻地影响了两种设备的交互方式。

下面来看下移动端可以实现的交互效果：

Tap，或称为Click或Touch，是移动设备上最常使用的一种手势输入方式，因手指已经替代了智能笔，以牺牲点击的精确度换取了便捷性，因此要求确保可点击的控件最小可点击范围(换算为物理尺寸大致在7mm－9mm之间)，可点击范围太小会影响用户使用体验。

如果控件在点击时和点击后产生的操作之间间隔时间较久，建议控件在点击时能够在表现形式上做出即时反馈，这样可以明确告知用户点击已生效而非系统卡死或没点击到。

滚动是用户在明确操作对象与周围环境阻尼系数较小时通过快速移动操作对象并利用物体的惯性来达到移动较长距离目的的操作方式。与拖拽相反，滚动会尽量利用操作对象移动的惯性，所以要求用户在手指初次点击屏幕到手指离开屏幕的持续时间短且点击点和离开点的坐标位置有较大差异。

双击是在手指界面上快速而连续的两次轻敲，两次轻敲之间间隔时间不能太长否则系统会作为两次单独的点击处理。

双击较多用于地图、图片浏览等场景中，一般会以点击坐标为中心点做一定程度的放大缩小操作。如果界面需要频繁用到单次点击，建议不要加入双击。如果使用了双击，就需要弱化或去除界面对单次点击的反馈。由于双击的可发现性较弱，建议谨慎使用。

长按是指手指在屏幕固定坐标点按压持续一定时长的手势操作，如以PC端的左键点击对应移动设备的点击，则可以长按作为PC端右键点击的对应，一般多用于删除列表项、启动编辑等应用场景，但因为可发现性弱，建议谨慎使用。

在某些场景中，长按激活某控件的编辑状态后，需要再配合点击或拖拽手势完成编辑任务，然后点击“完成”、“结束”按钮或界面上其它位置来恢复到默认状态。

拖拽手势是对现实世界中拖拽物体行为的一种简单映射，用户在拖拽物体时，期望控件落在一个较精确可控的坐标点，如被拖拽物体所在环境对被拖拽物体阻尼系数较大，用户在物体到达目标坐标点后可以快速松开手，如果被拖拽物体所在环境对其阻尼系数较小，用户在物体到达目标坐标点后会持续一小段时间以消除运动惯性，带有限位刻度的，用户会使用快速的拖拽甚至是不精确的点击来实现物体往目标点的移动，这些对用户来说操作和反馈都是与现实世界一致的下意识行为，学习成本极低。

轻扫手势较多用于被操作对象有固定行程且每段行程之间都需要单独的轻扫手势操作的情况，使用此手势操作的用户对于被操作对象的操作方式、操作结果有明确认知。

捏夹手势是两个手指在屏幕上做出捏夹动作，系统根据手指落点坐标和离开坐标判断两指之间的距离是增大还是减小，并对界面进行相应的放大缩小操作。

旋转手势是两个手指对操作对象进行旋转操作，使操作对象也旋转相应角度的操作方式。

其他手势操作

以上就是移动端手势操作的基本交互方式。下篇我们来一起分析移动端手势操作相较于PC端鼠标操作的异同点。

js实现拖拽兼容pc端和手机端

pc端拖动时候用到的三个事件：mousedown、mousemove、mouseup

在移动端与之相对应的分别是：touchstart、touchmove、touchend事件。

还有一点要注意的是在PC端获取当前鼠标的坐标是：event.clientX和event.clientY，

在移动端获取坐标位置则是：event.touches[0].clientX和event.touches[0].clientY

//判断当前是touch还是click
var touch;
if(event.touches) {
    touch = event.touches[0];
} else {
    touch = event;
}

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>适配移动端和pc端的拖动效果</title>
		<style>
			#div2 {
				position: relative;
				top: 0;
				left: 0;
				width: 100px;
				height: 100px;
				background: #bbbbbb;
				touch-action: none;
			}
		</style>
	</head>

	<body>
		<div id="div2"></div>

		<script>
			//是否拖动
			var flag = false;
			//
			var cur = {
				x: 0,
				y: 0
			}
			var nx, ny, dx, dy, x, y;

			function down() {
				flag = true;
				var touch;
				if(event.touches) {
					touch = event.touches[0];
				} else {
					touch = event;
				}
				cur.x = touch.clientX;
				cur.y = touch.clientY;
				dx = div2.offsetLeft;
				dy = div2.offsetTop;
			}

			function move() {
				if(flag) {
					var touch;
					if(event.touches) {
						touch = event.touches[0];
					} else {
						touch = event;
					}
					nx = touch.clientX - cur.x;
					ny = touch.clientY - cur.y;
					x = dx + nx;
					y = dy + ny;
					div2.style.left = x + "px";
					div2.style.top = y + "px";
					//阻止页面的滑动默认事件
					document.addEventListener("touchmove", function() {
						event.preventDefault();
					}, false);
				}
			}
			//鼠标释放时候的函数
			function end() {
				flag = false;
			}
			var div2 = document.getElementById("div2");
			div2.addEventListener("mousedown", function() {
				down();
			}, false);
			div2.addEventListener("touchstart", function() {
				down();
			}, false)
			div2.addEventListener("mousemove", function() {
				move();
			}, false);
			div2.addEventListener("touchmove", function() {
				move();
			}, false)
			document.body.addEventListener("mouseup", function() {
				end();
			}, false);
			div2.addEventListener("touchend", function() {
				end();
			}, false);
		</script>
	</body>

</html>

　　



以上是关于手机端&PC端鼠标和手势交互异同辨析（三）的主要内容，如果未能解决你的问题，请参考以下文章

手机端&PC端鼠标和手势交互异同辨析（二）

手机端&PC端鼠标和手势交互异同辨析（四）

[教你做小游戏] 滑动选中！PC端+移动端适配！完美用户体验！斗地主手牌交互示范

希沃传屏手机端上都有哪些手势操作？

为啥鼠标滑轮可以滚动div里面的内容，手机端手指滑动就不能滑动

js实现拖拽兼容pc端和手机端