1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 交互设计 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

用一篇深度长文,帮你彻底掌握「手势交互」的知识点--九分科技

时间:2020-06-18   分类:交互设计    作者:网络   来源:网络整理   点击:189

@Daidai丶呆 :业内有很多人觉得手势交互没必要拿出来深究,觉得用户使用产品的过程中,自然而然就会去使用拇指,进行手势操作。但这种说法,就跟「用户心理模型」类似。当然,对于用户来说没必要深究手势交互,但作为设计师,如果不了解其背后的逻辑,那么就无法解决产品设计背后的一些问题。

九分网络

所以我们今天,好好聊一聊手势交互这件事。你会发现,原来你以往观察或以为的设计问题,都是手势交互在作祟。

本文来自九分网络

手势的意义

我们以前经常听到「以用户为中心做产品设计」这句话,意思是产品需依附于目标用户的真实场景来设计。与此同时,其实还有一句话在提醒着交互设计师如何做产品设计,就是「以触摸屏为中心做产品设计」。

本文来自九分网络

为什么呢?因为用户从始至终都是在跟触摸屏做接触,不管换了什么设备,他们都是要通过屏幕与产品进行交互的。 九分网络

我们可以在这里思考一下手势的意义。

九分网络

手势的出现改变了什么?可以回想一下 iPhone 4 发布的时候,当看到这样一台屏幕上没有任何按键的设备,是不是会觉得不可思议?键盘,电话接听按键等都消失不见了。

copyright 9fen.net

用一篇深度长文,帮你彻底掌握「手势交互」的知识点--九分科技 copyright 9fen.net

本文来自九分网络

人们在使用 iPhone 这样的产品时,不再需要去强行记忆任何固体按键。触摸屏与手势的结合,帮助我们隐藏不必要的元素,帮助用户聚焦于内容,在有限的物理空间获得更多的信息。 copyright 9fen.net

所以用户通过触摸屏与产品进行交互,跟通过键盘按键与屏幕进行交互是完全不同的。手势交互更自然且更高效。

www.9fen.net

手势操作对我们来说如此自然和直观的主要原因是因为它们类似于与真实对象进行直接交互。譬如你用遥控器控制电视上的按键,需要通过上下左右这样的操作来定位指示器,而触摸屏直接就可以通过手指点击内容进行操作。这是完全不同的概念。

本文来自九分网络

综上所述,我们能知道,手势的三个要素:简洁、易用、直观。 www.9fen.net

所以我们通过一些常见的手势行为,就可以在产品界面上很轻松的完成任务。

九分网络

常见的手势行为:

copyright 9fen.net

点击:单指短暂触摸表面; copyright 9fen.net

双击:单指快速两次触摸表面(通常是缩放);

内容采集来自9fen.net

拖动:沿表面移动而不会破坏接触; www.9fen.net

捏/展开:用两根手指触摸表面以移入(捏合)或移出(展开); 九分网络

按下:单指触摸表面并按住; 内容采集来自9fen.net

滑动:快速手势,不需要触摸目标。 copyright 9fen.net

当然,我们经常也会遇到一些背离手势交互的产品设计,虽然也是点击、拖动等等,但操作起来总是不那么顺心。这里面有一个关键点就是,手势直观性。

九分网络

有数据表明,苹果的 3D Touch 使用率非常低,就是因为直观性太差,用户不知道通过这个操作能带来什么结果,且使用它需要长按,经常会同时呼出「卸载」,那么效率也就会降低。久而久之,用户就不去使用了。

copyright 9fen.net

正面例子如下图,滑动与文案结合。 本文来自九分网络

用一篇深度长文,帮你彻底掌握「手势交互」的知识点--九分科技 copyright 9fen.net

本文来自九分网络

这样一看,用户马上就能知道这个操作行为如何触发,紧接着就产生行动,然后会反馈结果。

www.9fen.net

这也是手势交互的核心:触发,行动,反馈。 www.9fen.net

对比 3D Touch,触发没有提示,行动后时常有两种反馈结果,相比起来就不那么友好了。

内容采集来自9fen.net

除了上面聊的这些,手势交互还能从另一方面来提升效率,就是拇指操作区域。

copyright 9fen.net

拇指驱动设计

我们都知道,现在手机屏幕越来越大,甚至比最早屏幕大了一倍以上。但是很多设计师并没有转换思维,跟进这个趋势的变化。

九分网络

这里给大家普及一个知识:大部分人误以为,手指在屏幕上的热区是永恒不变的,但其实手指热区会根据设备的变大而缩小。因为手掌支撑设备的重心靠后走了,所以拇指操控屏幕的范围也就变小了。如下图。

内容采集来自9fen.net

用一篇深度长文,帮你彻底掌握「手势交互」的知识点--九分科技 www.9fen.net

本文来自九分网络

结果是,手机屏幕变大,双手持机的用户变多,但依然还有 75% 的用户是使用拇指来触摸屏幕的。因此,术语「拇指驱动设计」应运而生。 九分网络

我们上面说到,在使用一些产品的时候,经常会遇到使用起来不顺心的情况,然后说了「手势直观性」的概念。但这里,还有个更重要的原因,就是「拇指操作区域」。

copyright 9fen.net

拇指操作区域被分为三块内容,分别是:易于触达,难以触达,以及介于两者之间的区域。

本文来自九分网络

看下图。

本文来自九分网络

用一篇深度长文,帮你彻底掌握「手势交互」的知识点--九分科技

内容采集来自9fen.net

本文来自九分网络

所以在设计界面时,要注意界面的主要操作元素是否处于用户易于触达的范围之内。

www.9fen.net

标签: 优设 优设网 交互设计 网页设计 手势交互

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----