一种强大的交互模式:应用内的手势

手势是一种强大的交互模式吗?是的,移动设备已经从一块砖头发展成由手指驱动的复杂计算机了。触摸和手势交互具有很大的潜力,使得移动体验更加的轻松和有趣。


手势是一种强大的交互模式吗?是的,移动设备已经从一块砖头发展成由手指驱动的复杂计算机了。触摸和手势交互具有很大的潜力,使得移动体验更加的轻松和有趣。

一种强大的交互模式:应用内的手势

还记得鼠标作为最常用的触发器在网站及应用上悬浮和点击的时光吗?那些日子一去不复返了。苹果公司推出iPhone后,多点触控技术成为了主流,用户了解到他们不只是能在界面点击而且还可以用手捏合、滑动、横扫。手势成为了新的点击。

触摸和手势驱动设备的兴起,极大的改变了我们思考交互的方式。手势不仅是好玩,而且也非常有用和自然。今天,移动应用的成功很大程度上也取决于构建体验的手势有多么的好用。甚至Adobe公司还推出了一个新的设计线框图的程序,Adobe XD,支持你从把一切构建成简单的线框图原型和多屏幕体验。你可以免费下载和体验下Adobe XD。

手势驱动用户界面的力量

手势控制如此的自然和直接是因为它们类似于与真实对象的交互。在按钮上使用手势有三个主要原因:

  1. 更简洁:app中依赖手势的控件越多,屏幕上显示的按钮就越少,从而为有价值的内容留出了更多的空间 。这使app更加以内容为中心,让用户做更重要的事情时没有障碍和分心。
  2. 更易用:手势一旦被用户发现和学习就会变成用户体验中令人愉悦的一部分,并且可以通过减少流程中的步骤来提升交互。例如,当你需要在移动设备上删除项目时,每次点击一项来删除是很耗时的,一个简单的快捷方式是滑动以删除。
  3. 更直接:虽然按钮看起来是更有用的触发器,但是手势有更大的潜力,与内容的交互更加直观。

Clear是一个“手势驱动”app的很好的例子。这个app的使用几乎完全基于手势:滑动、下拉、捏合。它有一个简约的界面(没有按钮),然而用起来简单的令人惊讶。

一种强大的交互模式:应用内的手势

动效在基于手势的设计中发挥的作用

移动应用中手势与动效总是紧密关联的。在维持用户的交互性引导方面,动效扮演了极其重要的角色。与手势的配合过程中,动效几乎使大脑相信它是在与有形的对象交互。

此外,在给用户提供视觉反馈方面动效也很有价值的。如果没有动效,用户是不知道已经完成了手势动作的。

即使是个非常创新的手势交互,如下拉刷新,配合动效也已经成了标准。它如此的直观,所以无数基于列表的应用程序都采纳了这种姿态简单的设定。

一种强大的交互模式:应用内的手势

手势的黑暗面

在设计应用程序是我们时常假设我们应用中使用的手势如此自然(对我们来说是自然,而不是对用户),不需要遵守基本的可用性原则。但在设计移动应用时,可发现性仍然是一个非常重要的原则。

正如Thomas Joos所说的,手势控制最大的缺点是学习曲线。每次你移除了界面上杂乱的东西,应用程序的学习曲线都在上升。这是因为手势具有很低的可发现性-它们总是隐藏的,用户需要识别这些选项。这就是为什么你的界面依赖于可视按钮的手势越多,混淆的可能性就越大。

一种强大的交互模式:应用内的手势

在设计基于手势的界面前,你应该顾虑的几件事:

(1)增加负担

大多数手势既不自然也不容易学习和记忆。例如,在大多数应用中,单手指的手势意味着一件事情,具有两个手指的相同手势意味着另外一件事,而另外还有三四个其他手势。

(2)缺乏反馈

多数情况下,手势不会留下其路径方面的任何记录,这意味着一个人做出手势后并没有得到任何响应,那几乎没有任何信息帮助你理解为什么会这样。

(3)缺乏一致性

大多数手势不是标准的,并且在各个应用之间也不一致。即使是一个简单的手势,例如横扫电子邮件条目可能在各个电子邮件应用中代表不同的功能。例如在Apple Mail中删除未读邮件,你应该向左滑动未打开的邮件,界面显示删除该邮件的选项。在Gmail中向左滑动可将邮件标记为已读。

明确的提示

设计用户界面过程中应该为手势的可用性提供一些线索给用户。因为如果没有视觉提示,用户可能对如何与应用程序进行交互感动困惑。在引导用户使用你的界面时,你应该提供一组视觉线索及渐进式展开的动效。

好的手势通常能够在提供视觉线索及渐进式展开的游戏中找到。众所周知,最好的游戏是让人随着时间的推移学习技巧而不是一味地教导他们。例如,Pudding Monsters’的游戏机制是完全基于手势的,但是它能够让用户不必猜测什么就知道该做什么。它们展示了一个带有动画的场景,用户立马很清晰的就知道要做什么。

一种强大的交互模式:应用内的手势

结论

手势是一种强大的交互模式吗?是的,移动设备已经从一块砖头发展成由手指驱动的复杂计算机了。触摸和手势交互具有很大的潜力,使得移动体验更加的轻松和有趣。

没有办法在不考虑手势的情况下来设计移动应用程序。它们应该作为提供服务和节约时间的角色。要设计一个有意义的手势,你应该把它和一个动作绑定,使手势和动作衔接在一起。提供反馈、视觉线索以及引导如何使用手势操作是非常重要的。

 

原文:In-App Gestures And Mobile App User Experience

原文作者:Nick Babich

译文:咚咚咚

译文地址:ME网易移动设计

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/24871/

(0)
CatherineCatherine
上一篇 2017-05-09 22:42
下一篇 2017-05-10 00:52

相关推荐

  • 设计实战案例!谈谈网易严选企业购的交互设计

    网易UEDC – 柴蒙:企业采购是现今市场经济下一种最主要最主流的采购形式,其特点是大批量采购商品。传统的企业采购方式不可避免地会带来如回扣、效率低、采购过程不透明等诸多问题。

    2017-09-21
  • 微信红包后台系统可用性设计实践

    作者:方乐明(现任微信支付应用产品系统负责人,主要从事微信红包、微信转账、微信群收款等支付应用产品的系统设计、可用性提升、高性能解决方案设计等,曾负责 2015、2016 和 2017 年春节微信红包系统的性能优化…

    交互专题 2023-03-03
  • 订单流程研究之提交订单

    在上一篇笔者有提到,平台不一定都提供货到付款服务,因此京东、唯品会和亚马逊在提交订单时需要选择支付方式,而淘宝天猫则是在提交订单之后才需要选择支付方式。提交订单之后,每种类型的订单可支持的操作也就不一样了。

    2017-05-31
  • 将Axure移动端原型生成二维码教程(二维码支持微信等app扫描访问)

    使用Axure制作完成移动端原型以后,如果需要在手机上进行演示,该如何进行操作呢?普通的方法就是将原型文件上传到托管平台上面,然后生成一个URL链接发送到手机上用浏览器打开。如果能将URL链接生成一个二维码,直接用微信或QQ等应用直接扫描就能打开原型,这样访问体验能有很大的提升。所以今天这篇分享就是教大家如何将Axure制作的移动端原型生成二维码。下面这个就是我用原型链接生成的二维码图片,直接用微信或QQ扫描这个二维码就能体验到效果。链...

    2018-03-24
  • 【干货·扫盲】主屏幕尺寸,主屏分辨率,像素密度,PPI之间到底什么关系?

    今天我给大家来讲讲这几个咱们经常打交道的词到底啥意思,以及他们之间到底有什么关系。这篇文章是我花了一个下午从N多篇文章里提炼出的一个白话版,保证让你看得懂。 咱们从手机开始说起吧。先上一张图,给大家看…

    交互设计 2015-09-08
  • 我们都在交互稿中放了些什么?

    作为一名交互设计师,在输出交互稿件之时,要考虑的不仅是如何将需求转为具体页面,而且还要清晰的将其中的思想传达给对方。

    2017-05-08
  • 硅谷设计师看苹果交互设计趋势:如何适应大屏?

    来源:用户体验联盟 本文作者:Jiaxin Yu 苹果终于顺应市场潮流,推出了大屏手机,而且销量前所未有的火爆!苹果大屏手机的推出,必然影响其交互设计的改变,其中有怎样的趋势?请看硅谷设计师的看法! 今年夏天,…

    交互设计 2014-10-11
  • AI时代的门票——智能语音交互

    AI时代即将到来,而语音识别便是入场券。说出一句话,也许你可以直接听到想要的结果,也许机器会直接执行你的命令,也许……这无限延伸的可能性,便是 AI 的魅力。“宫保鸡丁怎么做”,冰箱上的显示屏开始播放宫保鸡丁教学视频。“我想看个赛车类电影”,电视上显示《速度与激情》系列影片。“我要开party,放个激情澎湃的音乐吧”,音箱播放《Sugar》

    2017-04-28
  • 《2017中国设计行业价格报告》——交互设计

    《2017中国设计行业价格报告》——交互设计创意点亮生活设计美好人生创意设计一个有温度有格调的公众号合作、投稿:cda-zj@vip.163.com微信:13777850472微博:@浙江省创意设计协会

    2018-02-14
  • 用户体验的目标是做到“自然”

    不想错过精彩的荔枝话题,点击文章左上角关注“荔枝3十1”。每晚10:00点荔枝陪你说一事晚安文/励志妹图/荔枝工作室经作者授权发布用户体验的目标是做到“自然”导语“自然的体验是不需要用户去思考的。”1需要用文字来解释的交互不是好交互(1)我观察3岁的小孩用iphone很容易上手。比如,iphone的开锁,小孩甚至不用学就会用。因为触摸是人的天性,同时iphone通过箭头图标,向右滑动的文字条(小孩看不懂文字),来暗示手指触摸向右滑动来解...

    2018-04-28