手机端&PC端鼠标和手势交互异同辨析(一)

移动端相较于PC端的交互动作,即手势操作相较于鼠标键盘输入设备操作,是存在相当大的不同的。在iOS系统出现之前的时代,是单点触控的电容屏和触控笔和手机端物理键盘对PC端的粗暴移植和复刻,有的移动端设备甚至复制了PC端笨重的QWERTY键盘,那时移动端的输入设备基本和PC端是可以一一对应的。

qwerty键盘+触控笔

但在乔布斯主导的iOS系统和手势操作系统出现后,我们已经无法简单把移动端的手势操作与PC端输入设备简单对应了。移动端设备的交互方式也从此开始与PC端的交互方式分道扬镳,渐行渐远。

被乔布斯抛弃的触控笔和物理键盘带来了移动端交互革命

我们先来回顾一下PC端鼠标针对UI控件的几个主要交互动作:

Hover:

有时候也被称为“MouseOver+MouseOut”,PC端用户可以用鼠标指针移过UI控件时UI控件的交互反馈来推测UI控件的操作方式。某些位于某种UI控件之上的Hover动作可能会让鼠标指针产生不同形态的变化,如链接会变为手型,载入新内容会变为沙漏,可操作文字内容变为工字梁,Q&A变为问号等等,鼠标指针形态的改变是对当前悬停位置内容的一种指示。

有些UI控件本身会对鼠标的Hover行为产生反馈,此时不光鼠标指针会发生相应的形态变化,UI控件本身也会根据预先定义产生不同形态的变化。熟悉CSS的朋友可能记得文字链接的几种定义::link; :visited; :hover; active; 其中的hover就是针对鼠标悬停于自身时自己的样式呈现。

Hover交互的用户端触发条件:移动鼠标指针。

Hover 交互

Click:

有时候也被称为“Active”、“Action”、“MouseDown+MouseUp”,是鼠标点击UI控件后释放点击的一套交互行为,这个过程中用户点击和释放的坐标点是一致的,没有移动行为。系统在判定用户的交互动作是“Click”动作后,提供用户点击的UI控件本身应该提供的交互反馈或系统层级反馈。

Click交互一定是发生在Hover交互之后的,Hover是Click的前置动作,因为不把鼠标指针悬浮到UI控件之上,是无法完成对目标UI控件的点击行为的。

Click交互的用户端触发条件:移动鼠标指针Hover目标UI控件,然后按压物理按键。

Click交互

Right Click:

PC端虽然判断鼠标点击的事件监听机制是同样的,但无论是苹果的OSX系统还是微软的Windows系统,都默认把鼠标右键点击交互反馈留给了ContextMenu,即系统菜单,此时系统或应用收回了对右键反馈的控制权,鼠标右键点击激活的是系统菜单,用户需要再次点击菜单选项来对当前UI控件进行更多操作。

Right Click交互的用户端触发条件:移动鼠标指针Hover目标UI控件,然后按压物理按键右键。

Right Click交互

Tap:

Tap交互也叫Soft-touch,中文一般称为“轻敲”,是鼠标指针Hover于某UI界面元素后,在鼠标操作区(或触控板外设)上快速轻敲以实现与界面元素间的互动,普通的windows系统鼠标可能不支持此操作。

Tap交互

Tap交互针对的UI界面元素一般是界面级控件,如操作区放大缩小、进入程序选择界面等。

Tap触发条件:Hover于界面元素,轻敲鼠标操作区,没有物理按压行为。

Drag:

Drag交互中文一般称之为“拖拽”,是鼠标指针Hover于某UI控件后,用鼠标按键或其他方式触发UI控件进入拖拽状态后,通过移动鼠标指针的位置来将UI控件拖移至指定位置,然后通过松开按键或其他方式解除控件拖拽状态。

Drag交互

拖拽状态需要UI控件本身支持拖拽功能才能激活。所以有时候通过鼠标指针的变化来指示指定UI控件是可拖拽的。

拖拽状态触发条件:Hover于界面元素,按住鼠标按键或快捷键激活拖拽状态,拖拽完成后解除拖拽状态。

Scroll:

Scroll交互是指鼠标指针Hover于指定界面后,用鼠标滚轮或轻划动作来实现界面内容滚动显示。

Scroll状态触发条件:Hover于界面元素,滚动鼠标滚轮或上下轻划鼠标操作区。

Pan:

这个动作中文一般称为“平移”,是指鼠标指针悬停在某个UI控件上方时,可以通过在鼠标二维平面和屏幕之间建立一种映射关系,来实现在UI空间内的卷屏效果。

平移

这个动作是Mac的OSX等操作系统支持的苹果专用鼠标提供的基于鼠标Hover交互的交互方式,如果我们把触摸板外设也作为鼠标的变体和延伸的话,笔记本的触摸板也提供这个交互方式。

Pan交互触发条件:Hover于指定控件,二维平面内轻划鼠标操作区实现。

Zoom

Zoom交互分为放大(Zoom In)和缩?。╖oom Out)操作,一般是鼠标指针Hover于指定界面或UI控件,通过鼠标按键或快捷键激活Zoom状态,缩放完成后,再通过释放按键解除zoom状态。

Zoom交互触发条件:Hover于指定控件,通过鼠标按键或快捷键激活Zoom状态,二维平面内轻划鼠标操作区实现Zoom效果,然后释放按键解除Zoom状态。

以上就是PC端鼠标能够实现的主要交互行为。下一篇我们继续分析PC端鼠标交互和移动端手势交互的异同。

最后编辑于
?著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,172评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,346评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,788评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,299评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,409评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,467评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,476评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,262评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,699评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,994评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,167评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,827评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,499评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,149评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,387评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,028评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,055评论 2 352

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,460评论 1 45
  • ??JavaScript 与 HTML 之间的交互是通过事件实现的。 ??事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,483评论 1 11
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,094评论 1 32
  • 2018/6/25 嘿嘿,今天可以在上课的时候可以做点“小动作”,因为成人一级班的学生今晚要做期中考试试卷。我有足...
    好好活着的梅菜花阅读 304评论 0 0
  • 〈20190324晨间日记〉D262 想念 想念是最伤的痛,我总那么地思念你,我最爱的侄子。 与你分离并非我愿,想...
    过云雨Milo阅读 351评论 0 0