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

Posted 2023-04-17

参考技术A 看过了PC端鼠标和界面元素的主要交互方式，下面让我们来总结一下PC端鼠标交互的最显著的一些特性：

熟悉CSS的朋友可能知道页面层级有一个z-index的属性，它标示了指定页面元素在页面层级中的深度，数值越大，越是处于更上层的层级，数值越小，越是处于更下层的层级。但不论是应用内的元素，还是应用本身，包括系统桌面元素，都不能超越鼠标指针所在层级。鼠标指针所在层级理论上是正∞。

不管用户是否在使用鼠标操控屏幕元素，只要是添加了鼠标外设且支持鼠标操作的PC设备，从始至终都会有一个鼠标指针永远停留在屏幕的某处，你用或不用，它就在那里。

虽然鼠标投影于二维屏幕坐标系内的点和几何意义上的点一致，即这个点没有面积，仅是数学意义上的点，但屏幕二维坐标可以粗略定义这个点的位置。

我们看到的“箭头”、“手型”、“工字梁”、“移动”显示样式是真正意义上的鼠标指针的化身，鼠标指针的样式会根据所处元素的属性而改变。

PC端鼠标的这个特性深刻影响了PC端鼠标的交互行为，也是它和移动端手势交互的重要区别。

在PC端，鼠标操作想要跟某个控件交互，首先要把鼠标指针从当前所在的点移动到目标控件显示区域，轨迹球和光电鼠标都是用鼠标在桌面上移动方向和轨迹来映射光标移动方向和轨迹，所以鼠标运动一定要知道当前鼠标指针所在位置，才能操作鼠标向目标位置移动。这种运动并不是最自然的交互方式，甚至还因为这种操作不直观发生过最早接触鼠标的一批人在遇到“请把光标移动到Windows窗口”这样的操作指令时，直接把鼠标贴到了屏幕上这样的笑话。

仅从是否最符合用户以物理世界移情于虚拟世界的心智模型的角度来看，鼠标交互方式比起指哪打哪，无需考虑鼠标指针前一个落点的触控笔操作、手势操作在直观性上要欠缺很多。

而在PC端比较经常发生的就是我们在想要找到鼠标指针当前位置时，结果却因为指针太小或背景太花哨而遍寻不见，OSX系统的快速晃动鼠标，鼠标指针就会瞬间瞬间变大许多倍就是为了解决这种交互的一个缺点。

鼠标指针的另一个特点是完全符合费兹定律的限制，费兹定律（Fitts’ Law）是心理学家 Paul Fitts 所提出的人机介面设计法则，是一种主要用于人机交互中的人类运动的预测模型。

它的公式是：MT=a + b * log2(D/W + 1)

它主要定义了游标移动到目标之间的距离、目标物的大小和所花费的时间之间的关系。目标越大，完成点击越快，时间越短。同样地，目标越近，指向越快，完成点击时间越短。也就是说，定位点击一个目标的时间，取决于目标与当前位置的距离，以及目标的大小。

我们不能说移动端的手势交互已经摆脱了费兹定律的束缚，但费兹定律最早确实是针对PC端的交互而产生的，也最能反应PC端鼠标交互的特点。

鼠标可以通过滚动、滑动等方式与指针所投影位置的UI控件进行交互，实现卷屏、平移、放大、缩小等操控效果，这一点是必须要通过接触屏幕才能实现与控件进行交互的移动端设备有显著不同的。

如果我们用移动端的Touch来类比PC端的MouseDown的话，移动端缺少了光标悬浮情况下的各种交互可能，Surface的手势悬浮触控笔试图在触摸屏上复制PC端的鼠标交互，但我对这一移植的前景并不看好。因为移动端的设备交互方式自有其自身特点。

PC端设备的屏幕尺寸让多项目、多应用并行、分屏显示成为常态，正常情况下，同一个屏幕上在同一时间只有一个窗口能够成为激活状态，未被激活的界面在鼠标指针划过界面元素时，一般不需要响应指针的Hover动作。

PC端设备有时候会在桌面上形成多个UI界面的堆叠，一般情况下，总是位于光标投影点的最上层的界面和界面控件响应鼠标的点击，并成为激活状态（如果尚未激活的话）。

以上就是PC端鼠标交互方式的一些特点，有些特点，在移动设备上保留了下来，有些特点，则因为技术或屏幕尺寸等原因被移动设备交互完全放弃，熟悉了PC端交互方式和移动端交互方式之间的区别，就能在设计应用时，针对不同的设备特性做有针对性的优化，以实现各个平台的最大优势。

content-type常见类型辨析(以ajax与springmvc前后端交互为例)

---

博客搬家: content-type常见类型辨析(以ajax与springmvc前后端交互为例)

在http报文的首部中，有一个字段Content-type，表示请求体（entity body）中的数据类型

类型格式：type/subtype(;parameter)? type
主类型，任意的字符串,如text,如果*代表所有；
子类型，任意字符串，如html，如果*代表所有；
可选，如charset参数。

常见的媒体格式类型如下

• text/html ： HTML格式
• text/plain ：纯文本格式
  
• text/xml ： XML格式
• image/gif ：gif图片格式
  
• image/jpeg ：jpg图片格式
• image/png：png图片格式
  以application开头的媒体格式类型：
• application/xhtml+xml ：XHTML格式
• application/xml ： XML数据格式
• application/atom+xml ：Atom XML聚合格式
  
• application/json ： JSON数据格式
• application/pdf ：pdf格式
  
• application/msword ： Word文档格式
• application/octet-stream ： 二进制流数据（如常见的文件下载）
• application/x-www-form-urlencoded ：
  中默认的encType，form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式）

另外一种常见的媒体格式是上传文件之时使用的：

• multipart/form-data ： 需要在表单中进行文件上传时，就需要使用该格式

以上就是我们在日常的开发中，经常会用到的若干content-type的内容格式。接下来重点分析application/json、application/x-www-form-urlencoded和multipart/form-data，三个常用的内容格式

application/json

我们常用的json数据格式，使用ajax发送此种数据请求，如下所示

var dt={
    "userName":"leida",
    "userPasswd":"123456"
}
$.ajax({
    type:"post",
    url:"http://10.28.230.26:8080/login",
    data:JSON.stringify(dt),
    contentType: "application/json",
    success : function(ret) {
        console.log("logintest",ret)
    }
})

注意dt是一个js对象，需要通过JSON.stringify将其序列化为json字符串，再封装进请求体，此时报文的entity body如下所示

此时，后台以如下形式接收参数（ParamDemo为自己定义的类）

@PostMapping("/testJson")
public Object testJson(@RequestBody ParamDemo paramDemo){
    return paramDemo;
}

我遇到一个问题，若按照如下所示发送请求，即不使用JSON.stringify（以前用PHP后台的时候一向是这么搞）此时会报400不能正常解析

var dt={
    "userName":"leida",
    "userPasswd":"123456"
}
$.ajax({
    type:"post",
    url:"http://10.28.230.26:8080/login",
    data:dt,
    contentType: "application/json",
    success : function(ret) {
        console.log("logintest",ret)
    }
})

看了一下http报文，数据对象dt以key1=val1&key2=val2 的方式进行编码,存在entity body中，如下图所示，就叫它键值对形式吧

实际上，该种情况是可以被解析的，此时后台使用@RequestBody注解并使用String类型可以接收该键值对字符串：userName=leida&userPasswd=123456，如下所示

@PostMapping("/testJson")
public Object testJson(@RequestBody String str){
    return str;
}

综上所述，若data参数为JSON.stringify转化好的类型，则被正常序列化为json字符串；若data参数为一个普通js对象，则会被序列化为键值对参数字符串形式，即userName=leida&userPasswd=123456

application/x-www-form-urlencode

这是ajax的contenttype的默认值，用于处理表单，会将表单数据序列化为键值对参数字符串形式，如下图所示

可用HttpServletRequest 或者RequestBody 解析成字符串处理

application/form-data

它会将表单的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。

var formdata = new FormData($("#form")[0]);
$.ajax({
    type : "post",
    url : "http://localhost:8080/roomInfoApply2",
    data : formdata, // 你的formid
    contentType:false,//ajax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件
    processData: false, //当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
    error : function(request) {
        layer.alert('操作失败', {
            icon: 2,
            title:"提示"
        });
    },
    success : function(ret) {
        console.log(ret)
    }
})

报文如下图所示

后台使用如下方式接收数据

@PostMapping("/roomInfoApply2")
public Object testFile(HttpServletRequest request, @RequestParam(value="confer_num",required=false) String num, @RequestParam(value="confer_date",required=false) String date, @RequestParam MultipartFile uploadFile) throws IOException {
    System.out.println(uploadFile);
    String newFileName = "123.xlsx";
    String imgPath = request.getServletContext().getRealPath("/files/") + newFileName;
    File newFile = new File(request.getServletContext().getRealPath("/files"), newFileName);
    newFile.getParentFile().mkdirs();
    uploadFile.transferTo(newFile);
    //response.addHeader();
    return num+date+imgPath;
    //return testDataService.getAllTestData();
}