移动设备交互设计:移动设备的手势设计

文章描述:移动设备手势设计初探.

 

  嘿~最近在做各种移动端的产品,设计啊体验啊操作啊,用的手都起茧,工作之余也思考了“手”这种较新的交互方式,以及它与界面的关系。本文从手势的种类,应用场景,存在的可用性问题以及如何设计四个大的部分谈起,在此抛砖引玉供大家思考和学习。


  移动设备大行其道的今天,手势是一个流行词汇,那手势是什么呢?手,是人类各种创造性活动的天然工具,人们天生就会使用手的动作去表达情感,比如人们会使用握手来表示友好,聋哑人使用一套用手语来代替语言交流,这些都是手势在生活中的应用。可见自古以来手势就是一套特定的语言系统,在人的交流中发挥重要的作用。从交互上看,手势实际上是一种输入模式。我们现在在直观意义上理解的人机交互是指人与机器之间的互动方式,这种互动方式经历了鼠标、物理硬件、屏幕触控、远距离的体感操作的逐步发展的过程。

  然而交互设计领域,大家普遍探讨的手势概念,是区别于传统的键盘操作和鼠标操作的。后面会着重研究移动设备的手势操作,主要从手势存在的问题、应用场景以及设计时应注意什么说起。


1. 利用鼠标、光标的轨迹模拟手势

  网站www.kakarod.com,采用了大量的屏幕模拟手势交互,点击、拖拽等动作,生动活泼让人眼前一亮。

2. 在物理硬件上的手势

  苹果Magic Mouse鼠标, 。macbook触摸板均支持单指多指滑动等多种手势。

3. 在触摸屏上的手势

  主要有长按、轻触、滑动、拖动、旋转、缩放、摇动这八种手势。

4. 远距离体感

  通过摄像头,传感器等捕捉手甚至整个身体的姿势,来进行控制。

5. 未来的手势

  利用全息投影以及传感器,在空间或者投影上直接操作,这个已经应用在某些领域,相信不久的将来一定会广泛服务于我们的生活。PS:在苹果最新申请的专利中就提到了“投影手势操作”的技术,乔帮主这次又会带来什么革命性的产品就让我们拭目以待吧。

  当然在生活中也还有其他的手势操作,这里就不再赘述。本文主要研究的是目前爆发式增长的移动设备上的触摸屏手势操作,以ios,android系统为主。触屏上的手势是指,将一系列多点触摸事件综合为一个单独事件。分析触摸屏上的手势使用现状,发现相对于传统鼠标键盘,手势交互操作一些明显的特点。下图是从时间和空间两个维度总结出的手势概览。为读者在手势设计时提供参考。


  可用性研究的专家Don Norma在最新一期的《Interaction》杂志中也对手势交互界面进行了质疑和抨击,认为新的手势交互界面有很多地方没有遵循已经建立好的交互设计原则,使得经过良好测试和业内已被理解的交互设计标准正在被推翻、忽略和违背。 

  笔者通过分析现有的app 应用,以及多产品的设计经验,发现此质疑不无道理,主要有以下几个问题:

1.精确性降低
  以 ios为例,相比光标1像素的精度,手势的精确性要低很多。适合手指点击区域需要做到44*44px(iphone4以下设备),配合手势的轻重有0~20px的偏差,所以触屏界面需要使用更大尺寸的控件响应面积。iPhone 3GS、iPad和iPhone4屏幕分辨率密度分别为163 ppi 、132 ppi和326ppi,可以看到3GS和iPad的控件响应像素接近,单边应达到44px的标准,而iPhone4则需要再扩大几倍。

2.缺乏可见性和一致性
  以iPad Pages这个App为例,比如文稿中有2个对象,你想要使它大小一样,有以下两个方法:你可以通过双指拖拽利用边缘参考线让它们大小一样,当然这种放大缩小的方式在很多App中都很常见,因此很容易想到。另外你也可以这样做,用一只手指拖拽其中一个对象的同时,用另一直手指触碰你想要与之相同的对象,当出现符合大小提示时先抬起第一个手指再抬起第二个手指,那么这两个对象的尺寸就完全一样了(这两种方式在app中没有任何帮助和说明)。那么很显然,没有人会轻易发现第二种手势方式。即使发现了也不会很快知道如何使用。再比如android的长按操作也是如此。


  造成这个问题的重要原因是手势界面通常没有代表动作的可视元素,手势即动作。若是通用自然的手势就没问题,若是罕见的组合手势那用户就很难发现它,并有可能带来可用性问题。

3.增加操作成本以及误操作
  在位移上
  手势操作相比于呆板的鼠标点击的确生动有趣了许多,但一些操作,比如放大缩小和下拉却增加了操作成本,在鼠标上滚轮就能完成的事,触屏上就需要手指上下拖动许多下。
  在力度上
  手势操作没有鼠标按下的物理反馈,因为力度也难以掌握,有时糟糕的设计会让用户误以为是自己操作的问题,从而反复尝试。
  在灵敏度上
  ios的触屏都很灵敏,轻触和长按的操作界限很模糊,并且除了固定的Button,很多操作的响应区都很大,不受Button大小限制。因此常常会不小心碰到使某个操作响应,例如在通话记录播出一个号码以及备忘录的右滑的删除。

4.受限于物理因素
  物理按键
  带来真实的触感和一定的操作中断感,后期的手机逐渐弱化物理按键,手势与屏幕结合的更紧凑。Android用硬件按钮触发菜单,意味着你无法预知什么程序以及在什么情况下会有菜单选项。因为硬件按钮始终在那里,无论程序是否需要它。

上图从左往右依次是Plam pre、palm pre2、palm pre3,返回按钮与手机屏幕融合得越来越紧凑
  横竖方向
  直接受限于物理按键,android设备的物理按键位置不统一,横竖屏切换时不便于快速辨认,手势的连贯操作会受到比较大的影响。如果app支持水平方向,考虑将返回按钮和常用的菜单直接显示在软件界面上。因此app应考虑直接提供“返回”按钮。


 
  设备尺寸
  大屏幕的Pad支持更多的多指复杂手势,手机大多单指操作。
  控件形态
  按钮的大小控制(不同分辨率下大小的转换)、拖动时的反馈提示、滑动选择与点击的转化。


  基于上述可用性问题,总结出手势操作设计时应该注意以下几点:
1.操作引导
  这里可以是详细的帮助界面也可以是隐喻图形化的引导(隐喻要符合用户的心智模型),例如分页的圆点标识,或者切换页面露出一部分内容,可长按的系统icon,翻起的页脚升,甚至动画等等。这里的提示程度自己拿捏,效率型应用,尽量做到清晰可见,即看即点。沉浸型应用可以适当预留探索的空间,让用户自己去发现,带来预期之外的惊喜。比如QQLiveHD首页拉绳的晃动。但是,要注意的是隐藏手势和快捷手势不能影响主操作流程,可以作为辅助手势来使用。

2.操作反馈
  手势操作快速轻便,但没有鼠标按下时didadida声的安全感,也十分受限于设备屏幕的灵敏度,所以操作反馈的作用至关重要。例如icon按下时的响应,这里除了没有mouse over的效果,其他三态和PC端是一致的,缺一不可。除此之外还要考虑的是操作区太小被手指遮挡住的情况,反馈一定要明显,并呈现在可视范围内。比如QQ通讯录的姓名检索操作。除了视觉反馈声音也是一种有效的反馈方式,比如iPhone发送SMS发送成功的声音。新浪微博的feed拉取,tweetbot等,都巧妙的运用了声音反馈。

3.误操作
  手势操作相比鼠标更灵活,如果你的程序非常复杂,承载的信息很多,大部分区域都是响应区,那么发生误操作的几率也会大大增加。因此要让用户可以及时撤销操作,时刻知道现在发生了什么,而不是仅仅当发生后给出一个警告。常用于较重要或隐晦的手势,例如删除,一键清除,长按等等,二次确认操作就显得至关重要。

  OMG,不知不觉讲了这么多⊙﹏⊙b,以上只是手势交互的初探,对于这个应用领域,还有很多值得研究和探索的地方,欢迎大家一起来探讨和学习。
  

  最后,感谢“弹指之间”小组成员此次研究上的给力贡献!撒花~最后奉上之前在TED看到的由Jeff Han带来的一则关于手势交互的精彩演讲:  http://www.ted.com/talks/lang/eng/jeff_han_demos_his_breakthrough_touchscreen.html

时间: 2024-08-02 20:10:12

移动设备交互设计:移动设备的手势设计的相关文章

移动设备手势设计初探

嘿~最近在做各种移动端的产品,设计啊体验啊操作啊,用的手都起茧,工作之余也思考了"手"这种较新的交互方式,以及它与界面的关系.本文从手势的种类,应用场景,存在的可用性问题以及如何设计四个大的部分谈起,在此抛砖引玉供大家思考和学习. 移动设备大行其道的今天,手势是一个流行词汇,那手势是什么呢?手,是人类各种创造性活动的天然工具,人们天生就会使用手的动作去表达情感,比如人们会使用握手来表示友好,聋哑人使用一套用手语来代替语言交流,这些都是手势在生活中的应用.可见自古以来手势就是一套特定的语

《移动设备交互设计》读书笔记[1]

读书笔记,不是对书中的内容做完全的摘抄和援引,我是想把读过的内容,经过自己的理解归纳总结出来与大家分享讨论.一.如何理解移动设备 移动设备是相对于不可移动的设备,这里说的不可移动设备不仅指计算机设备,可以包括游戏机,甚至普通电视机.对应的会有掌上游戏机或是移动电视机等,当然,重要的还是我们大家都在讨论的可以做移动互联网应用的多功能手机.同时,还包括一些更广义的移动设备,比如: 1)可穿戴设备,目前这种设备可能还应用于军事和医疗方面,比如战斗机飞行员戴的可交互信息航空头盔,比如特种兵的数字头盔等.

《响应式Web设计实践》一1.2 设备来了,设备来了

1.2 设备来了,设备来了 响应式Web设计实践 我是一名近乎疯狂的旅行者,我不害怕坐飞机,但我担心误机.于是我会常常发现自己坐在拥挤的候机厅里总想找点什么事做,以便用来打发时间. 于是我开始观察身边的人们,更多的时候我会去观察他们使用的是什么样的设备.在最近的一次旅途中,我飞到了一个非常小.非常偏远的机场,小到你只需要五分钟就能办完所有的登机手续.虽然候机厅里只有大概二十五个人,但是Android手机.iPhone以及一些老款的手机都能在那里见到.有人在用Nook读着什么,而我旁边一位头发花白

交互设计中响应式Web设计的优势和设计流程

在设计中经常遇到这几个问题: 1.想要网站兼容手机.平板电脑.pc,就得为不同的设备定制不同的版本. 2.想要网站的某些页面在宽屏显示器下一行显示更多的内容,又得为宽屏定制一个版本. 3.很多人并不是在全屏的情况下浏览我们的页面,如果让页面随着浏览器宽度改变而相应的调整会不会比较好? 有没有办法能有效解决这些问题呢? 响应式Web设计(Responsive Web design)的理念是页面的设计与开发应当根据设备环境(屏幕尺寸.屏幕定向.系统平台等)以及用户行为(改变窗口大小等)进行相应的响应

浅谈交互设计的未来之服务设计

  做交互设计也有好几个年头了,最近一直在思考一个问题,我们这些俗称线框仔的交互设计师,如何保持自己的竞争力,我们的未来会是怎样的? 在互联网公司里担任交互设计师,往往只是一个项目里的螺丝钉,工作内容不外乎分析需求.分析用户.画线框图.做原型demo,在web时代如此,在移动互联时代亦是如此,我们往往只是着眼于屏幕上的信息与用户进行交互,从而容易陷入一个怪圈:交互设计师就是捣鼓UI,做屏幕上的人机交互的东西. 我也曾一度陷入这种想法,但跳出来看后,才惊觉交互其实应该有更广泛的范畴,它是关于我们身

《unix设备驱动》块设备驱动程序(加示例代码)

块设备驱动程序 一个块设备驱动程序主要通过传输固定大小的随机数据来访问设备. 块驱动程序是在核心内存和其他存储介质之间的管道,因此他们可以认为是虚拟内存子系统的组成部分.   一些概念 一个数据块指的是固定大小的数据,而大小的值有内核决定  与数据块对应的是扇区,它是由底层硬件决定大小的一个块.  无论何时内核向用户提供一个扇区编号,该扇区的大小就是512字节. 注册 注册的目的:使内核知道设备的存在 注册块设备驱动程序 注册到内核 int register_blkdev(unsigned in

移动APP设计研究:手势设计应遵循的原则

文章描述:浅谈移动终端使用之手势操作的设计及研究. 手势是指人类用语言中枢建立起来的一套用手掌和手指位置.形状的特定语言系统. 手持设备中的手势是指,将一系列多点触摸事件综合成为一个单独的事件. 手势操作的优势 1. 直觉化--好的手势设计源于生活经验,易于理解,学习成本低. 2. 快捷高效--减少操作步骤,加快完成任务. 手势在平台上的异同 各平台上手势现状 通用手势能被广泛应用是源于对心理模型的匹配,以及大众对于先入为主的接受度. 基本通用的或其他的手势可发展, 需要遵循设计原则,需要注意的

设备不可用或设备未连接:无线上网的常见问题

问:我现在用无线上网卡联网,可是在联网一段时间后老自动断网,再点击连接就显示"设备不可用或设备未连接"只能把它拔下来然后再按上就好了,很是苦恼啊! 答: 也不知道有线连接是否稳定,所以先从路由开始 1.先检查线路质量,包括电话线和电源线,看有否接触不良的现象!电线质量也要尽量选择质量好些的. 2.电压是否稳定,附近是否有平繁启动.负荷比较大.辐射比较强的用电设备. 3.电源适配器质量和电压是否符合要求,有条件换个看看. 4.断线是否发生容易发生在接听电话的时候就可判断电话分配器质量和接

USB设备无法停止通用卷设备怎么办

  USB设备无法停止通用卷设备解决方法: 方法一:释放清空掉剪切板 造成"无法停止通用卷设备",一般都是有原因的,比如上面介绍原因是最常见的,解决办法可以释放清空掉剪切板,您可以随便复制一下硬盘里的任何东西,以释放掉U盘中的复制操作.之后你会发现可以正常删除USB驱动设备了. 方法二:使用任务管理器结束进程 如果觉得上面那种方法还无效的话,可以使用下面这个方法,同时按下键盘的"Ctrl"+"Alt"+"Del"组合键,进入任