首页

这些手势交互你关注到了吗?

lanlanwork


01. 评论区双指上滑送出“抱抱”

在听一首喜欢的音乐时,参与评论可以表达自己对音乐带来的共鸣感,也可以看其它听友的评论寻找知音。在网易云音乐的评论区隐藏着一个手势交互,对某一条评论双指上滑就会针对其给出拥抱,两个小人微笑拥抱的动画显示在该条评论右下角,进而用户头像下方会显示“收到了抱抱”的标签提示。

在不新增功能入口的同时,借助双指手势交互来满足需求,既能不破坏原生的结构,又能带给用户不一样的操作体验。这个隐藏的彩蛋你是否注意到?以后在体验产品的时候除了发现视觉表层的可见内容以外,也要加强手势交互的操作来发现更多隐藏的功能。

图片

 

02. 长按激活单击退出

iOS 的设计在手势交互的探索上比较多,全屏的模式将手势发挥到了极致,也带给我们对于手势交互的更多理解。在苹果手机桌面,我们可以通过长按激活应用管理,单击则会退出管理模式,操作非常便利。

无需在当前的设计上面新增更多繁琐的控件,手势的借助可以使得我们的设计更加极简,减少过多的内容对用户的干扰。

图片

 

03. 长按与时间跨度的结合

长按激活功能比较常见,但是结合时间长短的变化相对较少。苹果手机桌面的应用管理,在长按应用图标时会弹窗展示功能列表,继续维持长按则会进入应用管理,随着长按的时间跨度不一样激活不同功能需求。

在手势交互设计过程中,除了通过动作的不同激活功能操作之外,也可以结合时间跨度、力度、位置等进行组合交互,来满足多重功能操作的需求。

图片

 

04. 可以移动的红包

通过红包吸引用户进而转化是很多电商产品的玩法,在必要 APP 中红包通过倒计时的形式营造出紧迫感,促使用户立即使用,进而提高红包的使用率。红包悬浮在左侧会挡住分类的展示,为了解决这个问题红包借助滑动手势可以移动,用户可以在左侧导航栏到底部标签栏之间任意滑动,方便预览分类。

单指滑动是常用的手势交互,精准定位元素之后可以拖动使其改变位置,不仅方便内容的展示也不会造成底层内容的阅读干扰。

图片

 

05. 同一个功能不同的手势交互

我们在观看视频的时候,短视频是单击控制播放/暂停,而视频播放软件则是通过双击控制。由于长视频用户需要观看很久,容易触屏造成误操作,双击是为了形成二次确认,降低误操作的概率。

短视频播放由于内容比较简短,可以通过单击控制播放/暂停,双击则是更多功能的辅助,同一个功能在不同的场景需要配合不同的手势。我们在进行产品设计的时候,可以根据业务类型和用户场景的差异借助手势来满足更多功能的操作,用户习惯培养之后将会提高其操作体验度。

图片

 

06. 通过左滑程度控制删除

左滑动是产品设计中非常普遍的手势交互,通过左滑展开列表隐藏功能,比如编辑、置顶、删除等。

在脉脉 APP 的消息模块,消息列表左滑可以进行置顶和删除,如果继续往左侧滑动则会实现自动删除,以此来替代点击删除图标完成删除操作的步骤。通过左滑配合点击删除操作路径多一步,而左滑程度控制删除效率更高,针对一些消息较多的产品,可以方便用户快速清理未读消息。

图片

 

07. 双击头像“拍一拍”

在微信群聊或者与好友聊天的时候,为了重点提示好友,可以通过双击好友头像进行“拍一拍”,晃动的头像和震动的提示加强好友对信息的关注度。

结合双击的手势交互,在不改变当前布局的情况下加强社交属性,增强好友间的互动提示,通过手势丰富了社交体验。

图片

 

08. 单击进入全屏模式

虽然手机逐步进入大屏时代,但是用户还是希望获得更少的干扰,全屏模式的操作可以让干扰降到最低。

百度地图在操作后会有弹窗式的内容呈现,用户可以通过单击屏幕退出弹窗,再次单击则会进一步隐藏基础控件,进入全屏模式。通过单击的手势交互来简化内容结构,降低干扰带给用户更集中的操作体验。

图片

 

09. 长按快速预览精彩片段

通过爱奇艺 APP 刷剧的时候,在搜寻影视作品的过程中,可以通过长按作品封面进行快速预览,播放精彩片段来判断是否值得追剧。

通过长按激活弹窗,可以在不改变当前布局结构的前提下,进行更多功能操作。适合针对隐藏式功能,也能避免误操作。

图片

 

10. 长按结合位置区域变化

很多影视类产品在全屏播放视频时,除了通过拖动进度条进行快进/倒退之外,也能通过长按屏幕进行快进。

而腾讯视频与之不同的是结合了屏幕区域,在全屏状态下,左侧区域长按快退,右侧区域长按快进。长按结合位置区域变化功能状态,深入了手势交互的操作,也能带来不一样的操作体验。

图片

 

11. 三击激活“辅助触控”

单击和双击的手势交互较为常见,而三击手势应用较少,有待深入探索。目前来说,带有 Home 键的苹果系列手机,可以通过三击 Home 键激活“辅助触控”快捷键,再次三击隐藏快捷键。

通过三击可以快速激活功能快捷键,减少了多个步骤路径,也不会导致用户误操作。

图片

 

12. 下拉程度影响功能变化

手势下滑形成下拉刷新已经成为产品设计中的基础操作,为了进一步延展功能,很多产品在下拉过程中根据下拉的程度判断是刷新还是进入二层楼(活动或者功能模块)。

通常是通过控制下拉的距离来做判断,会提示“松开刷新”的字样,如果继续下拉则会激活功能变化。进入二级功能界面或者二层楼活动界面,深度的功能开发带给用户更多的选择性。

图片

 

13. 缩放预览相册大小

苹果手机自带的相册(照片)APP,可以通过双指缩放来改变照片预览的大小,方便用户在众多照片中通过缩小快速查看,再通过放大做进一步的选择。借助缩放的手势交互,方便用户自由缩放预览并作出快捷的操作,提高了用户的操作体验感。

双指缩放对于屏幕的缩放预览十分便利,在很多应用场景都有涉足,比如相册、地图、绘图工具等。

 

14. 双击最大化图片预览

在图片预览的时候,可以通过双击最大化图片,方便对细节的观察。通过双击的手势交互来快速放大图片,在很多相册应用、电商产品、微信等社交产品中都有涉足,只要是全屏模式下预览图片,都可以通过该手势交互完成缩放。

双指缩放属于慢动作,而双击最大化属于快速一步到位,适合查看图片细节等操作。通常是双击最大化,再次双击恢复正常。

 

15. 手势交互控制地图预览

手势交互在地图软件中的运用表现得淋漓尽致,对于用户来说操作变得更加便利和快捷。

以高德地图举例:单击手势可以隐藏操作栏进入全屏模式;长按固定区域会激活当前位置定位,方便随时查看和开始导航;双击手势可以对地图进行固定倍数放大;双指缩放可以对地图进行任意缩放,便于精准查看位置区域等。手势交互控制地图预览提升了操作便捷度,借助手势提升了地图类产品的体验感。

图片

 

16. 拖动完成自定义设置

随着用户对个性化的需求升级,很多产品都开放了部分常用功能模块的自定义设置。比如网易云音乐的底部导航栏在设置环节中,便可通过拖动完成自定义设置。

利用压力结合滑动可以实现拖动手势交互,对于一些需要用户谨慎操作的功能比较适合,也能有效防止误操作。

图片

 

17. 拖动叠加实现应用建组

当用户下载的应用很多的时候,通常都会通过建组管理手机桌面上的各类应用软件。可以通过拖动应用叠加到其他应用软件上实现自动建组,建组、进组、移出等操作均可通过拖动手势完成,操作非常便利。

拖动手势交互针对一些防止误操作的功能比较适合,相当于二次确认的过程。

图片

 

18. 长按滑动实现多选

在百度网盘中可以通过单击选择控件对文件进行选择操作,也可以通过长按整个区域实现选中,长按过程中可以结合滑动实现多选。

长按滑动进行多选针对文件较多的场景非常便利,也不用担心误操作。在一些相册应用中点击选择按钮之后也可以通过滑动实现多选,操作路径多一步。无论是通过激活选择按钮,还是长按都是起到二次确认的作用,长按滑动操作相对更简单。

图片

 

小结

随着手机触屏灵敏度的提升,手势交互在产品设计中的应用会越来越普及,特别是针对大屏手机。本期整理的关于手势交互操作的案例仅作为抛砖引玉,还有很多的优秀案例有待大家去发现和总结,不足之处留言补全。

 

原文地址:黑马家族(公众号)

作者:黑马青年

转载请注明:学UI网》这些手势交互你关注到了吗?

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务




「手势交互」的知识点

涛涛

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

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

手势的意义

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

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

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

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

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

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

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

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

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

常见的手势行为:

  • 点击:单指短暂触摸表面;
  • 双击:单指快速两次触摸表面(通常是缩放);
  • 拖动:沿表面移动而不会破坏接触;
  • 捏/展开:用两根手指触摸表面以移入(捏合)或移出(展开);
  • 按下:单指触摸表面并按住;
  • 滑动:快速手势,不需要触摸目标。

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

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

正面例子如下图,滑动与文案结合。

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

这也是手势交互的核心:触发,行动,反馈。

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

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

拇指驱动设计

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

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

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

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

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

看下图。

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

如果你仔细观察并思考过,也会发现,iOS 的产品界面中,「返回」按钮就位于「难以触达」的区域。原因是产品人员本身也不想用户返回或退出,而是让用户聚焦于当前页面,想要返回,那就需要付出一点成本,什么成本?操作成本。

有人会说,由于 iOS 可以从手机的左边缘向右侧轻扫以获得返回效果,因此在大多数 iOS 产品中,返回都不需要太大的操作成本。但是,并不是所有 iPhone 用户都知道这一点,也不是所有产品都支持这一特性的。而且手势交互的进化本来也就是为了提升用户操作的效率,所以本质上他们并不矛盾,只是相比以前,我们现在的操作更快了。并且「右滑」返回,本身在手势操作中相比「点击」也是更具操作成本的。

当了解了手势的一些意义,以及拇指操作区域对于产品设计的重要性之后,我们就可以通过一些案例来做一个全局分析了。

1. 内容在上,操作在下

许多人设计 App,但是没人研究过 App 为什么要这么设计。

比如,为什么起初要把标签栏放底下呢?关于这个问题,当初我也是问了许多人,而基本都只是说这是官方设计规范。这相当于是一句废话。

通过翻阅多方资料,我发现在工业设计领域有一条重要的基本设计原则:内容在上,操作在下。

比如在使用电脑的时候,操作在下意味着使用者在操作过程中,手指始终处于界面下方,而内容在上面,就不会出现手指遮挡内容的情况。

如下图的键盘操作提示:

基于此,相信你也知道为什么标签栏在下方了吧?

另外,为什么 iOS 设计规范建议将「编辑」按钮放置在界面右/左上方的位置呢?

界面右/左上角的位置对拇指来说显然是不友好的。然而,这样做的原因也是显而易见的:编辑功能会让数据发生变化。将这类控件放在难以操作的位置上(与左上角的返回是一个道理),就是一种防御性的设计策略,可以在一定程度上避免因为太容易产生误操作而导致的破坏性的结果。

通过这一小段之前聊过的内容,你们会发现,手势与拇指操作其实在驱动着产品设计。下面我们来聊个大的案例。

汉堡包菜单的消失解析

汉堡包菜单,也就是侧边栏导航,Facebook 早期测试显示侧边栏导航让用户使用率降低了一半。

我们一起来看看市面上给出的三类说法。

1. 可见性太低

默认状态下,用户是看不见侧边栏的,除非点击了侧边栏的弹出按钮。所以这种情况下,里面的功能都是用户脑袋里已知的,但很可能都想不起来。比如,现在你回想一下知乎底部 5 个标签分别是什么?或者微信右上角「+」里面有哪些功能?是不是要想一会儿,才能记起来?甚至还是想不起来。

之前我在文章里写过,用户对于功能的使用一定是「所见即所得」,而不是「心向往之」。用户只会注意自己看到的信息,而不是凭借记忆或想象来使用产品。

底部标签栏就很好的解决了汉堡包菜单的「可见性」问题。

2. 效率较低

效率较低主要在于操作频率,大家看下面两组图的对比。

第一张图,当用户从首页进入到个人信息页面,只需要两步;而第二张图,则要三步。

这里多一步看起来似乎影响不大,但如果现在要从个人信息页面到「标签 3」的话,第一张图也只需要两步,第二张图还是需要三步,当频繁去使用这样的产品后,用户的整体效率就会下降,体验也会随之降低。

3. 与平台模式冲突

大家应该知道,在 iOS 的操作页面中,通过手势可对 tab 进行左右切换,而侧边栏除了通过点击菜单按钮展开之外,也可以通过右滑弹出。这里面有什么冲突呢?看下图。

当页面聚焦在「标签 2」时,右滑除了能回到「标签 1」,同样也很可能会切出侧边导航栏。

这样的手势冲突,导致页面层级与功能导航的优先级混乱了。

无论是导航还是控件,当它们组成一个页面后,它们的操作就会有优先级。比如下面这个例子。

如果你对标红的分段控件比较熟悉,就知道,它是可通过屏幕滑动进行切换的。但是在「短信」里,它是不能通过滑动屏幕进行切换的,因为用户可对单条信息进行左滑做删除或其他操作。所以当页面操作模式存在矛盾时,我们会将子层级操作优先于父层级操作。

譬如你进入朋友圈,是不能马上回到首页的,这时候页面层级较深,产品人员要将用户聚焦于页面本身,如果直接能返回到首页,页面层级和产品架构就会混乱。

类似的例子还有很多,我这里就不继续列举了。

所以从「短信」的例子可以看出,当控件与控件之间的手势发生冲突时,我们要考虑优先级,将内容优先于页面来处理。那么回到上面的例子,分段控件与汉堡包菜单的手势发生冲突时,很明显我们要优先分段控件的操作,而禁止掉汉堡包菜单的右滑手势。结果就是,效率又低了。

4. 小结

这三类,如果你认真思考里面的关系,其实就会发现,它们的共通点就是与拇指的联系过于被动或直接被切断了。

  • 第一个「可见性太低」的例子,菜单被隐藏,拇指不能直接与菜单产生关系,并且距离过远,拇指难以触达。
  • 第二个「效率太低」的例子,用户需要通过拇指来回操作,导致效率降低,这就跟使用遥控器控制电视机一样,用户无法直接触达内容。
  • 第三个「手势冲突」的例子,其实就很清晰了,就是说标签栏的优先级可能会被页面的其它控件所取代,那么拇指就无法直接对其产生作用,从而禁止当前页面的手势交互行为。

它们的核心点就是拇指与触摸屏的关系。

如果你现在还不能深刻理解汉堡包菜单的劣势,那就想一下去看一下现在的产品,其中「我的」、「个人中心」或「更多」其实都是变相的汉堡包菜单。

在「我」这个标签页里,这一系列功能列表,无非就是另一种模式的汉堡包菜单,只是这里呈现的都是不重要的功能,并不影响用户使用这个产品。回想一下,你是不是很少,甚至从来没用过这里的某几个功能?再跟手势结合,就会发现,「我」所处区域并不是容易点击的区域,这就是它效率低下的原因了。现在能懂了么?

弹框的操作路径

当传统的确认弹窗逐渐被手势操作取代,大家就应该察觉到:以往从电脑迁移到移动设备上的交互行为已逐渐被改善。

我曾经写过一篇文章,叫「取消按钮的设计逻辑」,讲了「左取消,右行进」这个原理。意思就是当我们在设计弹框的时候,用户已经习惯这样的操作路径,所以不要轻易更换位置以混淆用户的认知。再从手势的角度来说,就是右边更容易点击。

后来有同学说到,但是有些特殊场景,譬如删除资料,而产品人员不希望用户删除,于是把删除放在左边,取消放在右边。毕竟右边更容易点击,所以位置换了会比较合理。

这是错的!

我们不能通过改变用户使用产品的常识来将产品人员的想法置于用户之上。当用户已经形成「左取消,右行进」的认知之后,违反这样的一致性,去换位置是很危险的。所以出现了 action sheet,来解决一些产品关于 alert 无法解决的问题。

如图。

大家要记住的是,当页面逻辑与手势操作产生逻辑冲突时,我们不是去否定以前已经被验证且正确的内容,而是通过创新,来解决这个冲突。这就是拇指驱动设计的一种方式。

包括我们以前在移动设备上选择删除某项数据,都会弹出警告框,询问我们是否确认删除。这种方式会打断我们的操作行为,久而久之,用户已经对此交互方式习以为常,或者说免疫了,但这种弹框的方式始终被认为是不好的一种交互手段。所以侧滑删除,已经被更多产品功能用来取代没必要弹框的操作。

也许很多人没思考过底层原因,或者仅仅只是觉得其相比弹框显得更友好。其实这个行为是基于手势交互做了相应的优化,让用户操作起来更加方便。

Banner

到了这里,我再举个所有人都熟悉的例子,就是轮播图了。

轮播图最早出现于网页端,后来被大量商家模仿,以至于到移动端还备受各产品设计人员的欢迎。但其实很多人对轮播图的使用方法都是错误的。

下面来看轮播图与手势的关系。

试想:你的轮播图有 6 张 Banner,你要翻到第 4 张,无论是往前翻还是往后翻都要产生 3 次交互行为。而大部分产品的用户在界面停留的时间不会这么久,更不会看完你 Banner 的内容。以至于有研究表明,大部分产品里,除了第一张 Banner 的点击率能达到 83% 之外,其余的点击率都非常低。

有人说可以点击下面的原点指示器做跳转,这么小的点,你觉得点击它现实么?所以手势交互与轮播图是相互矛盾的一种设计方式。

所以当运营策划了一个活动,而你就往顶部的轮播图里塞,这个行为就已经注定这个活动的用户参与度是很低的了。除了个别电商产品,他们以卖广告位给商家作为盈利点,但即便如此,我相信这个广告位除了第一张图的点击量稍高外,其他图片的点击量相对于产品本身的用户体量比较而言还是很低的。这也是为什么部分产品把轮播图规则改为用户进入首页随机展示轮播图页面,而不是强制指定于显示第一张的原因。

毕竟轮播图在顶部,用户需要通过拇指长时间的在「延伸区域」进行操作,那么使用率自然就降低了。

如果你的产品有很多活动是在同时期进行的,那么我给部分产品的建议是放一个活动主题入口,如下图。(当然,这要视情况而定,并不是通用的。)

搜索框的变化

我们现在看到的搜索框基本都是放在屏幕顶部。

为什么呢?

市面上对这个问题的解释是这样的:用户已经被现在的产品训练得在界面的顶部必须看到一个搜索框,设计师打破这个常规就要承担风险。

看完这篇文章,你就已经知道,对于用户来说,由于屏幕顶部离拇指很远,处于难以触达的区域,在体验上很不好。所以搜索框成了认知上应该在顶部,但操作体验上又不应该在顶部的一个设计。

但是回想一下,会发现大多数 App 的主要内容都是位于易于触达的区域。所以当看到高德地图把搜索框移动到下面来之后,就能知道,拇指驱动设计的概念被越来越多的人认识到其重要性。

地图类产品把搜索框移到下面来的首创应用不是高德,应该是 Lyft。

瞧,拇指驱动设计,多酷~

总结

《上瘾》里有句话:当人们不由自由地做出下一个举动时,新的习惯就会成为他们日常生活的一部分。

当手势充分地发挥了作用,辅助用户操作或实现功能,它就成了用户不可分割的一部分。

今天通过对手势意义的解读,以及拇指驱动设计的解析,再加上这些案例的拆解,我相信你能更好地理解为什么手势交互这么重要了。

交互设计师对于「触摸屏」,必须有深刻的认识,才能理解设计背后的逻辑。

如果这篇文章对你有帮助,记得点个赞,后面我好持续输出。

文章来源:优设

交互手势的容错性和逻辑性

涛涛

交互手势是用户操作的重要部分,交互手势的设计好坏非常影响用户体验,那么,交互手势的设计上对于容错性和逻辑性需要注意什么?

随着用户体验被愈发的重视,更多的 APP 偏向于使用多手势优化用户的操作流程,降低使用阻力。

点击某个确定的按钮的手势操作虽然被普遍使用并被用户熟知,但是增加更快捷的手势操作可以大大增大操作热区,提高操作效率,如下图。

交互手势的容错性和逻辑性

然而,我们可以发现由于不同产品的设计师对于用户体验的理解不同、交互层面的思考不同,导致设计的交互手势也不同。

有时同一种操作在不同的 APP 中交互手势也是不统一的,这无疑增加了用户的学习成本和记忆成本。

举个例子,iOS 端的得到和有书的播放页的打开和关闭方式。

得到有两种方式打开和关闭页面,用户可以通过点击控件或上滑控件打开播放页,通过点击收起按钮或下拉页面关闭播放页。但是有书只有一种方式打开和关闭,用户只能通过点击控件打开播放页,通过点击返回图标关闭播放页。

这让习惯了使用得到的我去使用有书时,感觉非常别扭,每次都尝试用得到的手势去操作但是都失败了,失败后我下一次并没有记住仍然用手势去操作,如此反复令我相当沮丧。

交互手势的容错性和逻辑性

容错性

容错性是一个很大的话题,今天我们仅仅在交互手势层面上讨论。

上面的例子中,有书并没有设计滑动手势去打开和关闭播放页,那么我以我的经验去进行的滑动滑操作在有书这个产品中就是错误的和不被产品识别的。但是这种手势又广泛存在于大量的音频播放 APP 中,如喜马拉雅、荔枝 FM 等。

一旦用户从这些 APP 迁移到了有书,本来养成的操作习惯在有书就失效了,用户就会感觉“这个 APP 很难用,用起来很不舒服”,进而可能放弃有书转而投向其他产品怀抱。

与手势设计类似,这也是为什么现在的同种类型的 APP 的信息架构设计越来越同质化,当我们打开淘宝、天猫、京东时我们有时感觉就像是同一个 APP ,本质上也是为了降低用户的迁移、记忆和学习成本。

如下图所示,提高手势的容错性对用户的意义。

交互手势的容错性和逻辑性

很多优秀的产品考虑到了上述问题,设计了多手势来优化用户体验。

举个例子,在 APP Store 的首页点击一个推荐卡片后进入详情页,由于详情页是直接由卡片放大转场的,不同于传统的新页面右侧进入和从底部弹出。

在用户的使用习惯和认知中新页面如果从右侧进入就可以通过右滑返回,从底部弹出的话就可以下拉返回。因此,当用户面对卡片放大进入新页面这种全新交互时可能会疑惑如何返回,对此理解不同的用户可能会尝试右滑,也可能尝试下拉。

APP Store 的设计在此就有很好的容错性,用户可以通过三种方式返回首页,分别是、右滑返回、下拉返回和点击叉号返回,这不但降低了用户的记忆和学习成本,也便于不同习惯的用户使用。

交互手势的容错性和逻辑性

针对不同的场景,手势的使用也会有不同。

一个很好的案例是知乎的评论:知乎的评论的关闭方式有三种,分别是下拉、右滑和点击叉号。

用户观看评论的场景有两种,第一种是只想看一下精选评论然后关闭,第二种是被评论吸引后一直往下看。当用户单手操作不方便点击叉号时,下拉对应的是第一种用户;右滑对应的是第二种用户,不管用户看了多少屏的评论,随时可以通过右滑关闭评论(因为用户翻阅了很多屏评论后需要下拉到第一条评论时,下拉关闭评论手势才会生效,所以第二种用户一般不使用下拉去关闭评论)。

可能你会心生疑惑:“第一种用户也可以使用右滑来关闭评论呀”,确实可以,但是对于人的操作习惯来说,上下滑动会比左右滑动更方便。

交互手势的容错性和逻辑性

还值得讨论的是苹果自 iPhone 6s 开始加入的新交互方式 3D Touch,它允许用户通过更大力度的重按呼出情景菜单快捷地使用高频功能而不用先打开 APP,对于追求效率的用户来说简直不要更方便,但是对于不支持 3D Touch 的机型则无法使用情景菜单。

因此,在生活中我发现这样的现象,很多使用惯了3D Touch 的用户换到无 3D Touch 的苹果机型后很不习惯,总是尝试去重按但是是无效的。

其实在很多安卓手机上也有情景菜单这一功能,它巧妙地将卸载也加到了情景菜单中,因此用户只需要通过长按就可以获得所有需要的功能,而不是像苹果那样长按是卸载而重按是情景菜单。

我猜测苹果为了适配所有机型,提高容错性,从今年的发布会的 iPhone 11 和iPhone 11 pro 开始,取消了 3D Touch,转而使用 Haptic Touch (有震动反馈的长按)代替。当你长按某个图标时,感受到震动后松开,即可呼出二级菜单;如果震动后仍不松开,则进入到卸载 APP 时的抖动状态,使得之后的即使不支持 3D Touch的机型可以使用便捷的情景菜单了。

对于不支持 3D Touch 的老款机型会不会在 iOS 13 更新后也可以使用 Haptic Touch 呢?

如果一致统一的话,容错性将大大提高,我们将拭目以待。

不仅仅是 iOS ,Android 的版本 Android 10经历了 6 个测试版迭代后正式发布,我们发现交互手势是 Android 10 的一个巨大亮点。Android 10 在第三版内测系统开始引入全局手势操作,用户启用后,屏幕底部便不会再出现虚拟按键和导航栏,只会剩下一个指示条,上滑返回主屏、侧滑返回上一层的操作逻辑也均和 iOS 保持一致。

这可能标志着安卓手机一直以来在国内各家厂商的各种创新手势的割裂生态中即将重归统一,并和 iOS 保持一致。

这种妥协将大大提高在用户使用一款新安卓手机时的容错性,同时降低了今后用户在两大系统之间的迁移成本。

逻辑性

再谈谈逻辑性,在交互手势的层面上,如果用户能够通过某个手势进行某个操作后,按照逻辑,用户也可以通过反向的手势或对应的手势进行逆向操作。

比如,在微信首页下拉调出小程序页面,之后可以通过上拉返回首页。点击加号呼出更多操作,再次点击加号收起更多操作。

如果违背了用户的心理模型和逻辑性,用户就会感觉到混乱和不适。

这里举一个反例, Uki 的个人主页可以通过点击或下拉底部的固定底板收起更多信息,但是收起后只能通过点击展开更多个人信息而不能上拉,不符合逻辑与用户的心理模型。

交互手势的容错性和逻辑性

如下图所示,逻辑性对用户的意义。

交互手势的容错性和逻辑性

有的时候,我们会发现为了提高容错性,我们会牺牲一部分逻辑性。

就像上文提到的知乎关闭评论弹出框,逻辑上它是从底部弹出的,但是不但能够下拉关闭还可以右滑关闭。尽管右滑关闭有些违背用户的心理模型,但是确实给用户带来了很多操作上的便捷。

如何设计

1. 是否需要加入多手势操作的考虑因素

我们需要考虑的因素包括使用频率、危险程度和特殊体验。

  1. 使用频率:当一个功能的使用频率足够高时,我们加入多手势操作去提高用户操作效率才是有意义的。一个低频的功能的特殊手势操作很容易被用户遗忘。
  2. 危险程度:如果一个操作不可撤销且存在危险性质,我们最好不要加入多手势操作。此时我们需要用户更加专注,如果加入多手势操作可能会增加误操作的概率。
  3. 特殊体验:当我们需要加入特殊的模拟体验时,此时我们可以加入多手势操作。如探探左滑无感右滑喜欢,给用户带来的“翻牌子”感觉是点击操作无法替代的。QQ 阅读下拉拟物绳灯进行日间和夜间模式切换,这种存在我们记忆中的交互方式能够唤起我们的情感。

2. 评估所选手势的考虑因素

1)考虑不同平台的硬件系统和操作系统特性

由于硬件与操作系统差异,iOS 系统支持很多手势,但是安卓系统在手势支持方面就不如 iOS 丰富。

安卓硬件设备的差异比较大,不同安卓手机厂商会在安卓系统的基础上自定义系统的手势操作,因此对于手势的支持也有较大的差异。对于这种情况我们需要熟悉相应平台的规范,做到心中有数。

2)考虑所选的手势的学习成本和记忆成本,用户是否已经被教育

如下图所示,尽管设备支持的手势数量多不胜数,但是日常使用 APP 时,大部分用户习惯使用的手势很少,比如单击、双击、滑动、上拉、下拉、双指扩张和收缩等。除此之外的手势教育成本和学习成本很高。

一般比较通用的功能是没有必要在此处创新的,但是如果一些特殊的操作确实需要加入时,我们就需要考虑下面的问题。

交互手势的容错性和逻辑性

a. 如果没有教育成熟,考虑加入教学或搭配简易的操作方式

对于我们需要加入的手势操作当前用户并未被教育成熟时,我们需要考虑加入手势教学,具体的手势教学类型下一部分会详细讨论。

然而,大部分情况下用户的记忆是短期的,教学内容可能会被快速遗忘,下次用户使用 APP 时仍然不会使用特殊手势。此时我们应该将一些比较难以记忆的手势操作搭配一个简单的手势操作。

比如 QQ 阅读的下拉拟物绳灯切换夜间模式的手势操作设计,其考虑到了有些用户在现实生活中并未见过拟物绳灯,并不知道是要进行下拉才能触发操作。因此,QQ 阅读贴心地搭配了一个简单的点击操作,用户通过点击绳灯也可以切换夜间模式,如下图。

交互手势的容错性和逻辑性

b. 考虑所选手势是否可能导致冲突和误操作,如果导致了,考虑如何避免和折中

最常见的手势冲突情况就是 APP 的手势与操作系统的全局手势冲突。

解决方案有两个,一是避免设计与全局手势一致的手势操作,例如 iOS 的在屏幕边缘右滑返回、全面屏机型的底部上滑退出应用等全局手势操作;二是仍然设计与全局手势冲突的操作,但是将全局手势部分禁用或以其他的方式区分开。

如下图有书播放页的案例,由于进度条滑动控件过于靠左,导致使用 iOS 全局右滑返回手势时有时会产生误操作,即本来想要右滑返回却不小心滑动了进度条。

这种情况下我们可以标注一个右滑手势禁用区域给开发工程师说明情况,将此情况避免掉即可。

交互手势的容错性和逻辑性

误操作指的是,我们设计的手势操作与 APP 内的其他操作或系统全局手势操作接近导致用户触发了非预期的操作。比如 iOS 端的知乎被吐槽的一个右滑返回手势操作,经过研究发现,由于 iOS 端的知乎在浏览回答的页面设计的右滑返回的热区过大,导致用户上滑浏览的时候如果手指的滑动角度变化幅度过大一不小心就触发了右滑返回,再次进入回答后又需要翻页很久才能找到之前离开的地方,很影响体验。

我觉得知乎可以减少热区,将热区调整为 iOS 全局的右滑返回区域即可,如下图所示。

当然,产品设计需要平衡与取舍,如果减少了热区是否会影响其他用户的体验还需要考虑和调研,两者并无绝对的对错

交互手势的容错性和逻辑性

3. 让用户了解并使用新手势

当新手势无法直接让用户感知时,我们需要加入一些手势教学帮助用户快速上手使用。

1)手势教学方式

a. 浮层和动画引导使用静态或动态的手势图片或气泡示例告诉用户使用哪种手势进行操作

相比于静态,动态比静态更为直观和易学。

交互手势的容错性和逻辑性

b. 内容隐喻通过微妙的视觉线索暗示用户此处可以通过某种手势进行操作

由于教学内容难免具有干扰性,对于高级用户来说是不必要的,但是对于初级用户又是必要的,因此以这种内容暗示的方式使教学极为轻量化,在低干扰的情况下使得用户学习了手势操作。

如下图,哔哩哔哩在打开第一篇文章时会平移显示下一篇文章的框架,暗示用户可以通过左右滑动切换文章。

再比如陌陌在打开点点功能时,会在用户进入页面的时候播放一个动画,暗示有很多卡片叠加在了一起,用户可以通过滑动切换卡片。

交互手势的容错性和逻辑性

2)教学的出现时机

a. 操作前当产品中设计了不容易感知的新手势,在用户操作前,通过教学让用户了解和学习新的手势。

b. 错误操作后对于一些与用户的心理模型和习惯不一致的手势,提前预测用户可能输入的错误手势,在用户错误操作后进行提示,规范用户的操作方式。

如下图,由于知乎旧版本是通过左右滑动切换回答的,新版本调整为上下滑动后,需要纠正用户使用习惯。因此,当用户仍然使用左右滑动时,会出现浮层提示用户正确的手势进行教学。

交互手势的容错性和逻辑性

结语

以上是日常思考和总结,有不恰当之处欢迎指出。希望本文在大家进行手势设计的过程中能够帮助做出合理的决策。

文章来源:人人都是产品经理 

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档