图片 9

触控手势怎么设计才好用(五)

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

一、什么是触控手势

适度的应用手势

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

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

2014年很火的《Flappy bird》。游戏以简单而有效的方式使用了基本的手势。点击或不点击是游戏中唯一的操作手势。玩家可以很快的知道应该使用什么手势,怎么利用手势去进行游戏。

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

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

图片 1

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

图片 2

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

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

Flappy Bird中玩家只需要用一根手指来操控

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

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

提供即时反馈

一、什么是触控手势

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

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

图片 3

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

电容式触摸屏的结构原理图

图片 4

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

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

3D touch的震动反馈

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

使操作可逆

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

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

图片 5

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

图片 6

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

微信取消发送语音

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

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

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

拇指的活动范围对操作手机的效率以及正确度都有一定的影响。

图片 7

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

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

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

保持手势的全局性

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

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

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

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

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

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

图片 8

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

全局手势在iOS中的使用场景

三、触控手势的基本操作

图片 9

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

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

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

– 点击执行主操作

– 滑动以平移