5个方法帮你设计好用的触控手势

   移动的触控时代早已到来,您是否也与时俱进了呢?今天腾讯CDC这篇好文,从什么是触控手势、触控手势的使用场景/基本操作,有哪些好用的触控手势、手势设计守则五个方面帮你全方位学习这个知识点,交互设计师来收!

  我们生活在一个人机互动频繁,由设备驱动的世界中。

  随着触摸屏逐渐成为移动设备的标配,多点触控手势的广泛应用,让我们与手机、平板电脑甚至是笔记本电脑之间建立起了一种更宽广的联系方式。我们通过模拟真实世界的手势与屏幕上的各种元素进行互动,使许多曾经不曾想或者不敢想的人机交互方式变成了现实,同时手势操作的应用降低了人与物理设备之间的沟通的门槛。


  图0. 婴儿几乎无困难的通过屏幕玩游戏

  我家那位小P孩,不到2岁就已经能够很自然轻松解锁iPad、翻页找到他喜欢玩的熊猫餐厅,接着熟练地在各种食材选折他喜欢的,制作一份美味的虚拟美食;而我们也乐于买各种大屏手机和平板电脑送给我们的长辈。移动设备及手势交互方式给我们带来革命性体验和便捷,移动的触控时代早已到来,您是否也与时俱进了呢?值得我们每一位设计师反思。

  一、什么是触控手势

  触控手势是自然用户界面(NUI)的一种表现形式。

  自然用户界面(Natural user interface, NUI)是指一类无形的用户界面。NUI则只需要人们以最自然的交流方式(如语言和文字)与机器互动。直观的说,使用NUI的设备不需要键盘或鼠标。特别是触控技术将使人机交互变得更加自然直观,更为人性化。

  您的手机、平板电脑还有笔记本拥有识别多点触控输入的功能来帮助你实现对其广泛的运用。这种输入方式帮助我们实现与屏幕内容的交互,而模仿真实中的操作手势可以降低我们对操作屏幕对象的认知障碍。

  在PC时代,我们需要他人或者一个说明教程去教会我们怎么使用鼠标,移动屏幕的光标,而这些在现实世界里几乎找不到可相映射的东西,然后学习怎么双击打开一个文件,按住一个文件不放,把它拖动到文件夹里面。

  触控手势带来的是自然用户界面,支持触控的移动设备能够自然直观的被所有年龄层,不同技能水平的人所使用。使用Multi-Touch多点触控式接口技术,取代目前所使用的键盘(按键)、鼠标,将进一步体现出人性化操控接口的未来趋势。


  图1. 电容式触摸屏结构原理图

  试想一下在那些老套的用户界面里,需要你把鼠标悬停或者邮件点击目标上才能获得更多详细的信息,而这些在手机设备上将不再起作用。如何摆脱这种惯用的设计呢?答案就是,创建移动先行体验。

  二、触控手势的的使用情景(移动的情景)

  移动情景指的是用户使用时的环境和状态——也就是任何可以影响用户与设备进行交互的内容。由于这些情境持续而快速地变化,对移动设备而言就显得尤为重要。我们要考虑用户分心、多任务、手势操作、低电量条件和糟糕的连接条件等复杂环境下的通用设计。


  图2. 移动中的互动语境(出处:Nadav Savio | Giant Ant Design)

  各种移动环境下会影响到用户使用触屏设备完成任务的效率和准确度的因素有:

  – 移动情景下,注意力容易被分散(如交谈,观察周围环境等)

  – 移动情景下,操作手机的时间碎片化(各种事情打断)

  – 移动情景下,任务容易被中断(意外情况影响)

  – 移动情景下,肢体可能被其他物体被占用(如遛狗、拎包等)

  – 移动情景下,噪音分散注意力(车水马龙、人声鼎沸的路边)

  三、触控手势的基本操作


  图3. 钢铁侠系列电影中的全息触控交互

  所谓自然手势就是在真实物理世界中存在或演绎而来的手势。例如上下滑动滚动列表,滑动以平移等。这类手势是自然的,不需要或很少需要用户去学习的。

  – 长按以查看更多操作(现在有了3D Touch,同长按操作相比,最大区分是需要是有一定的按压力度)

  – 点击执行主操作

  – 滑动以平移

  – 轻扫以选定,并进行命令操作

  – 收缩和拉伸以缩放

  – 转动以旋转

  – 边缘轻扫以使用系统命令

  四、好用的手势是怎样的?

  首先我们来看看多点触控的优缺点。


  那么什么是好用的手势呢?

  好用的手势一来简单,二来支持单手操作,它们该如由Tweetie创始人Loren Brichter所开发并获得专利的“下拉刷新”一样受欢迎。或者像 iBook的翻页动作一样自然简单。以下是好用的手势该有的一些特征:

  – 简单易用。不仅动作简单,还要能在拥挤的交通工具上单手操作

  – 容易记忆。其一手势要好记,其二要让人愿意记住

  – 符合认知习惯。也就是说,该手势一方面要遵循人的自然习惯和意识,另一方面要契合手势即将产生的操作

  – 实用。手势要让用户感到舒服,少有用户愿意点两次才看到想看的东西,让会让他们感到麻烦

  – 愉悦的体验。Winkler 认为好的手势会有神奇的感觉。UX 总是个未知数,而且难于言传。但这恰是我们认识、

  享受科技的一种表现

  – 及时反馈。反馈就是说用户知道当前正在进行的操作。用户进行完手势操作后有明确的状态信息告知

  五、手势设计应用过程中需要注意的点:(手势设计准则)

  符合认知习惯

  在非概念性项目中使用基础手势(组合)之外的“创新”手势,未建立统一规范的情况下,使用混乱会导致用户困惑,学习成本稿,增加记忆负担,难以引导用户培养使用习惯,技术上的限制可能会使“创新”变成不便。

  最终使用者是人,手势操作是基于人的行为来定义的。手势操作是人们现实世界行为的映射,因此,手势设计要符合大多数人的认知习惯,减少用户的认知成本。比如有方向性的手势操作,要尽量符合拇指的活动方向,且要与认知相一致。


  图4. iBooks的翻页体验与翻实体书

  记忆力限制

  因为这些手势操作不能明白的显示在界面上,没有代表动作的可视元素,需要用户记住哪种手势对应的是哪些操作,一些不常用的手势操作往往很难发现。如果手势直观常用自然没问题,而如果没有“自然”的手势去代表一个动作,用户就会感到困惑,于是便需要记忆,就像在使用命令行界面时要记住那些命令一样。

  一个App中手势数量需保持在5个数量以下,多依赖与界面的引导和暗示,让此类用户根据情境记忆这些手势,从而增加手势的易记忆性。

  如果用户对其缺乏认知,这些手势操作就不易被发现,也便不会为人所用,甚至造成操作障碍。(坏的例子,找不到导航栏)


  图5. Mozilla Firefox 4版本右划呼出Tab

  不同应用场景采用不同的手势设计

  人们会在千奇百怪的环境中使用我们的产品,我们的产品在和周围环境争夺用户的注意力,凭借一个3.5~5寸的屏幕与车水马龙、人声鼎沸的大千世界作斗争,因此在实际的手势设计中还需考虑该应用的使用场景。

  效率型和实用型应用,这类应用一般使用场景是在行进间,考虑手机一般随着用户的行进而摇晃,操作效率以及误操作等因素,一遍采用单手操作手机的手势交互。

  游戏等屏幕沉浸型应用,一般为休闲且稳定的操作环境,可以适当的设置一些复杂手势配合游戏中的高级操作功能,增加游戏的操作乐趣。


  图6. Clear的手势操作令人印象深刻

  适度的应用手势

  2014年火得不能再火,一旦开始玩根本停不下来的《Flappy bird》。游戏以简单但有效的方式使用了基本的手势。点击或不点击是唯一的操作手势。玩家可以很快地知道应该使用什么手势以及怎么利用手势去进行游戏。


  图7. Flappy Bird游戏,玩家只需要用一根手指来操控

  提供即时反馈

  在用户触摸屏幕的时候,立即提供视觉提示,可提高用户的信心。交互操作涉及到的元素可表现为改变颜色、改变大小或发生移动/震动。


  图8. 3D touch的震动反馈

  使操作可逆

  触控互动操作应该是可逆的。提供视觉反馈来表明当用户抬起手指时会发生什么,同时允许用户反悔,取消操作。这将使你的应用能够安全地使用触控操作进行浏览。


  图9. Wechat取消发送语音

  不要让你的手势触发区域远离拇指热区(拇指法则)

  Jash Clark在《触动人心-设计优秀的iPhone应用》一书中提到,拇指的活动范围对操作手机的效率以及正确度都有一定的影响。

  虽然拇指能够划到整个屏幕,但拇指在所及范围和灵活性上是有限的,只有三分之一的屏幕是真正容易触及的——也就是拇指正对的区域。为了获得舒适的人机体验,应将主要点击目标放置在方便拇指点击的热区内。


  图10. Luke Wroblewski在《移动为先》(Mobile First)

  保持手势的全局性

  不要让用户在你的应用中适应了你创造的手势后,却又在你的应用中碰壁。

  如果用户已经习惯你的手势,觉得你的手势达到了方便快捷的目的,并耗费学习成本掌握并适应了你的手势,那么便意味着你成功了一半。尽量用简单的手势完成常用功能,需要复杂手势操作完成的功能,要有一个方便且更容易发现的方式相配合。尽量使用统一的手势,减少不同手势的切换频率。


  图11. 全局手势在iOS原生应用中的使用场景

  写在最后

  好用的触控手势是人与设备、应用之间交流的方式。当初创造多点触控技术的人,难能可贵的是细心洞察到了人们细腻的本真行为特征,转而用触屏这一行为自然的映射了出来。

时间: 2024-08-19 07:50:06

5个方法帮你设计好用的触控手势的相关文章

手机的交互设计方法:手机产品交互设计原则

一.用户体验信息收集 在讨论手机的交互设计方法之前,需要先对手机的用户使用习惯有一些基本的了解,需要对手机的用户体验信息做一些收集整理.收集用户体验信息首先需要确定两个问题:一是确定目标用户群体:二是确定信息收集的方法和途径. 在确定目标用户群体的时候,很显然的是,已有产品有过使用和交互经验,具备该产品或系统的交互体验的用户,相比较于那些没有体验的用户,可以为设计提供更多更有效的信息.因此在收集用户体验信息时,应该首先考虑所需设计的产品的用户或是有过类似产品使用经验的用户.在理想的情况下,当用

单片机 倒计时-谁能帮我设计一个89c51的一个八人抢答器的汇编程序,万分感谢!!!

问题描述 谁能帮我设计一个89c51的一个八人抢答器的汇编程序,万分感谢!!! 1.数码管前一位显示抢答,后两位显示倒计时60s 2,p1.2为开始按钮 解决方案 //以前做过的,需要按你的要求改一改,望采纳. #include #include #include #define uchar unsigned char #define uint unsigned int #define D8279 XBYTE[0x5EFF] //8279 数据口地址 #define C8279 XBYTE[0x

为什么android会有两种启动Aactivity的方法,这样设计的初衷是什么

问题描述 为什么android会有两种启动Aactivity的方法,这样设计的初衷是什么 startActivity(Intent)/startActivityForResult(Intent):来启动一个Activity 这两种方法有和区别和联系 解决方案 参考这个, 解决方案二: 另一种可以反回信息的,两个activity可以交互 解决方案三: android:两种启动activity的方法Android Activity启动的两种方法android 启动 service 的两种方法

c语言-求各位大师帮帮忙设计一个程序 C语言 写出代码

问题描述 求各位大师帮帮忙设计一个程序 C语言 写出代码 设计某班学生成绩管理系统,要求实现以下功能: 1.从键盘输入学号.姓名.各门课程成绩(不少于2门),并将其保存在文件中. 2.打开文件后,计算每个人的总分和平均分,排序并保存. 3.可以在文件中进行单项查询或多项查询的功能. 万谢 解决方案 人都这样,有了想法就不想写代码了,想叫别人写,所以才雇佣别人去做码农 解决方案二: 这种作业题在网上搜搜都会有的,比如这个http://blog.csdn.net/sdliujiangbo/artic

谁可以帮我设计一个类似于通讯录功能的程序?

问题描述 谁可以帮我设计一个类似于通讯录功能的程序? 这个程序只需要有3栏,姓名,号码,还有账号,输入姓名,它可以自己根据字母顺序排好,像手机通讯录那样自己排序,输入姓名,就可以查到后面的信息. 解决方案 有人帮忙设计一下吗?我可以出一些费用 解决方案二: 是设计还是开发?这个是不一样的..你想做的是Android APP吧?

《JavaScript应用程序设计》一一2.9 方法API的设计

2.9 方法API的设计 JavaScript中的语言特性可以帮助你更好地设计方法API,包括参数命名.函数多态.链式调用.lambda等.你应该了解并掌握这些语言特性,以便在合适的时候将它们引入.当你在设计方法API时,要时刻牢记章首介绍的四项原则,这里再强调一遍:· 保持简单· 一次只做一件事情· 不要重复造轮子· 少即是多

移动美食应用盘点:N种方法帮你找美食

美食类推荐社交应用,在App store上不胜枚举.你是想看图找美食.根据朋友的推荐找美食.还是想听从厨师们专业级别的推荐.甚至是自己定制美食都随你.吃货们上眼这里!小编总结了N种方法帮你找美食!精美饮食指南Ness Dining Guide精美的UI界面 半透明的交互面板 简单的搜索框给餐馆评分一时间不知道吃什么?那这款精美的饮食指南Ness Dining Guide就算排上用场了!旨在用美丽的新方式来发现你喜欢的餐馆.与一般的餐馆推荐类应用不同的是,Ness具有智能学习功能,在你给其他餐馆打

用IE 10触控事件模型调试响应式Web设计

目前我正在研究IE 10触控事件.虽然我已经十分幸运地拥有了一台Windows 8平板电脑,但是我仍在寻找一种更加简便的方法,即无需每次切换至平板电脑,便可直接在经典笔记本上执行基本测试的方法.在寻找该方法的过程中,我发现了一些技巧和窍门,有了这些经验,您就可以在不使用触控设备的情况下,对代码中的IE 10触控事件进行调试了.正面效应:这种方法还可帮助您测试.调试响应式Web设计! 先决条件:在学习本教程之前,首先需要执行下列步骤: IE 10触控事件模型 如果您对触控执行方式还不甚了解,可以先

设计容易让用户发现的手势操作

[编者按]本文转载自@子木yoyo 的个人博客.当触屏设备,如智能手机.平板电脑普及后,手势操作逐渐流行.这样就使得用户可以直接触摸屏幕,对对象进行操作. 虽说这是更自然的一种人机交互方式,但是手势操作在可用性上仍然是一个难题.因此我们就需要在设计上做出能让用户更容易的理解的手势操作交互. 曾几何时,计算机只能通过命令行界面来使用.想让计算机做点什么,就需要记住各种命令,并准确无误地输入.当图形用户界面流行起来之后,人们不再需要去记忆命令了. 用户想要做的事情都显示在屏幕上.想要进入某个软件,只