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

Posted 2023-04-17

参考技术A 在PC端用户要判断一个控件可以与之互动的操作方式，可以用鼠标在目标控件上进行“探测”，鼠标指针和控件本身的形态变化都能够明确指示用户可以执行的操作。

而在移动端用户要判断一个控件的交互方式，除了控件本身的UI设计带来的暗示以外，在真正点击这个控件之前，都无法真正确定。这像极了量子物理理论里的“薛定谔的猫”，即你在真正点击控件之前，你永远无法预知按钮真正支持的操作方式。

此外由于移动端所有交互都是基于Touch的，所以此交互行为和PC端有极大差异，PC端除了拖动窗口滚动条实现界面滚动效果之外，基本都是用鼠标指针悬停于目标控件之上通过滚轮或轻划实现滚动效果，所以PC端的滚动交互，鼠标指针和UI控件之间是没有发生实质意义的接触的（如果我们把Hover视为无接触的话）。

但移动端由于屏幕物理尺寸限制，滚动操作和点击操作并列成为移动端交互的两大最重要交互方式。滚动操作一定要手指先接触屏幕表面，快速滑动一段距离并抬起以实现滚动效果，所以在手指按压屏幕的瞬间，位于手指于屏幕接触点的UI控件是有极大几率被激活到“Active”状态的，只是系统在判断操作行为是“滚动”而非“点击”行为后，对Active目标控件执行了ontouchcancel，也就是目标控件虽然被激活，但并没有执行后续运行结果。

在移动端，用户在点击控件后，如果新的内容和反馈和点击行为发生的时间中间有“Gap”，则用户可能会对控件是否已被接收到交互产生迷惑，如果这个Gap时间很长，则直接影响用户体验，尼尔森法则里的 状态可见原则 就是要预防这种情况：

移动端对于控件在被点击的瞬间能够提供的效果反馈定义很不一致。

有的应用，有的模块提供了类似PC端的Active效果

安卓的Material Design脱离了PC端UI控件交互方式的束缚，用Touch后的强反馈效果来指示用户点击产生的即时反馈，是一种很好的思路。 

以上的这些差异这也就对移动端控件的设计带来了新的要求：

如支持移动的控件，除了设计上增加控件“可移动”的隐喻之外，还要标配可移动图标。

如内容不可点击，就不要设计成列表项样式。之前文章里曾经举过一个工作中遇到的例子，产品经理想要把一组只读性信息做成列表项样式，这样设计必然会让用户产生迷惑，从而带来非常大的用户体验问题。

如楼层图不可点击，就不要设计成可点击样式。之前在实际项目中，遇到过一个聚合页，楼层图设计的样式是明显引导用户点击楼层头图进入详情页的，虽然没有加“更多”按钮，这样的设计就会引起很多体验问题。

对于从来没有接触过移动端设备和交互方式的用户来说，如果要实现编辑一个控件，无论是左滑进入编辑状态还是长按进入编辑状态，都是需要一定的学习成本和学习过程的，但用户一旦掌握了这种交互方式，就会在使用时形成关于如何操作此类控件的心理模型。

一般来说，用户并不会太关注ios平台和安卓平台的区别，所以无论在什么类型的设备上，用户都趋向于使用同一套思路去解决类似问题，所以如果条件允许，在可控范围内尽量实现控件交互方式和交互反馈的统一，是对用户体验的最大支持。

如果不可控因素太多，那也要尽量按照下述优先级去统一交互反馈：

跨平台交互反馈统一 > 系统内交互反馈统一 > 应用内交互行为统一 > 板块内交互行为统一

移动端的交互方式是触摸手势交互，所以相较于使用鼠标来操作的PC端，移动端与现实世界的交互方式对照也更紧密和一致，早期的拟物化风格UI界面上，相册、日历、笔记本、按钮、开关、拖拽控件等，都是现实世界物品的完全照搬，都可以在现实中找到完全对应的实物，正因为这样，用户的心智模型也更加稳固，更加与现实一致。

而一些比较抽象的如跳转、弹框、返回等交互，用户也已经形成了固定的心智模型，甚至形成了稳定的空间记忆。一旦遇到问题，用户会在屏幕的二维空间固定位置去寻找对应的控件。

因为移动端相比PC端缺少了鼠标Hover来发现适合的交互方式的特点，移动端用户只有在手指实际接触到屏幕的瞬间才能真正了解控件支持的交互方式，所以移动端的交互方式要求尽量采用简单、直接、可发现性强的交互方式，那些学习成本高的，不符合用户心智模型和心理预期的交互方式注定会成为用户体验的阻碍，这也是为什么我们除了Demo演示App等少数特殊场景需求的应用外很少看到多手指手势大范围应用的原因，因为随着控制手势的手指数量增加，操作复杂度的上升是指数级的。

如下图这种多手指手势操作，就极复杂且不符合用户心智模型，用户在使用过程中不但学习成本高，后期也难记起这些手势：

移动端不是强制要求添加控件的Touch时的Active效果，但如果某些控件如跳转新页面的列表项等，在用户Touch了屏幕上的控件到新的页面刷新加载之间可能会有一段延迟时间，如果这个延迟时间较长，则可以考虑增加“Active”效果以增加体验流畅度，减少误操作。

记录--Vue PC前端扫码登录

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

需求描述

目前大多数PC端应用都有配套的移动端APP，如微信，淘宝等，通过使用手机APP上的扫一扫功能去扫页面二维码图片进行登录，使得用户登录操作更方便，安全，快捷。

思路解析

PC 扫码原理？

扫码登录功能涉及到网页端、服务器和手机端，三端之间交互大致步骤如下：

1. 网页端展示二维码，同时不断的向服务端发送请求询问该二维码的状态；
2. 手机端扫描二维码，读取二维码成功后，跳转至确认登录页，若用户确认登录，则服务器修改二维码状态，并返回用户登录信息；
3. 网页端收到服务器端二维码状态改变，则跳转登录后页面；
4. 若超过一定时间用户未操作，网页端二维码失效，需要重新刷新生成新的二维码。

前端功能实现

如何生成二维码图片？

• 二维码内容是一段字符串，可以使用uuid 作为二维码的唯一标识;
• 使用qrcode插件 import QRCode from \'qrcode\'; 把uuid变为二维码展示给用户

import v4 as uuidv4 from "uuid"
import QRCode from "qrcodejs2"
 let timeStamp = new Date().getTime() // 生成时间戳，用于后台校验有效期
 let uuid = uuidv4()
 let content = `uid=$uid&timeStamp=$timeStamp`
 this.$nextTick(()=> 
     const qrcode = new QRCode(this.$refs.qrcode, 
       text: content,
       width: 180,
       height: 180,
       colorDark: "#333333",
       colorlight: "#ffffff",
       correctLevel: QRCode.correctLevel.H,
       render: "canvas"
     )
     qrcode._el.title = \'\'

如何控制二维码的时效性？

使用前端计时器setInterval, 初始化有效时间effectiveTime, 倒计时失效后重新刷新二维码

export default 
  name: "qrCode",
  data() 
    return 
      codeStatus: 1, // 1- 未扫码 2-扫码通过 3-过期
      effectiveTime: 30, // 有效时间
      qrCodeTimer: null // 有效时长计时器
      uid: \'\',
      time: \'\'
    ;
  ,

  methods: 
    // 轮询获取二维码状态
    getQcodeStatus() 
      if(!this.qsCodeTimer) 
        this.qrCodeTimer = setInterval(()=> 
          // 二维码过期
          if(this.effectiveTime <=0) 
            this.codeStatus = 3
            clearInterval(this.qrCodeTimer)
            this.qrCodeTimer = null
            return
          
          this.effectiveTime--
        , 1000)
      

    ,
   
    // 刷新二维码
    refreshCode() 
      this.codeStatus = 1
      this.effectiveTime = 30
      this.qrCodeTimer = null
      this.generateORCode()
    
  ,

前端如何获取服务器二维码的状态？

前端向服务端发送二维码状态查询请求，通常使用轮询的方式

• 定时轮询：间隔1s 或特定时段发送请求，通过调用setInterval(), clearInterval()来停止；
• 长轮询：前端判断接收到的返回结果，若二维码仍未被扫描，则会继续发送查询请求，直至状态发生变化（失效或扫码成功）
• Websocket：前端在生成二维码后，会与后端建立连接，一旦后端发现二维码状态变化，可直接通过建立的连接主动推送信息给前端。

使用长轮询实现：

 // 获取后台状态
    async checkQRcodeStatus() 
       const res = await checkQRcode(
         uid: this.uid,
         time: this.time
       )
       if(res && res.code == 200) 
         let codeStatus - res.codeStatus
         this.codeStatus =  codeStatus
         let loginData = res.loginData
         switch(codeStatus) 
           case 3:
              console.log("二维码过期")
              clearInterval(this.qrCodeTimer)
              this.qrCodeTimer = null
              this.effectiveTime = 0
            break;
            case 2:
              console.log("扫码通过")
              clearInterval(this.qrCodeTimer)
              this.qrCodeTimer = null
              this.$emit("login", loginData)
            break;
            case 1:
              console.log("未扫码")
              this.effectiveTime > 0  && this.checkQRcodeStatus()
            break;
            default:
            break;
         
        
    ,

本文转载于：

https://juejin.cn/post/7179821690686275621

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。