美文网首页用户体验UI设计创业扶持
这样做引导,帮你的用户快速熟悉手势交互

这样做引导,帮你的用户快速熟悉手势交互

作者: 张安松 | 来源:发表于2017-05-15 15:21 被阅读29次

在计算机被发明出来之后,很长一段时间里,人们都是使用键盘来完成交互的。而随着70年代图形化界面的出现和鼠标的发明,个人电脑兴起的时代,绝大多数的用户入门之时都是借助鼠标来同屏幕上的各种元素进行交互的。自苹果的Newton MessagePad 系列问世之后,移动端设备的新纪元悄然开启,小型化的移动端计算设备和手机在21世纪之初自然地结合到了一起,催生了智能手机,2007年 iPhone 是一个众所周知的分水岭:电容屏技术、多点触控、手指替代触控笔,全新的交互模式开启了如今我们所处的移动端的时代。

选择对的手势

当你想在你的UI中引入手势交互的时候,应该先了解一下你的目标受众可能会用的APP中所用的手势,以及你的目标市场。在你的APP 中引入类似的手势交互,能够至少降低用户转移APP的时候的学习成本,这样针对目标市场的手势设计,让用户一开始就能以一种舒适的方式开始使用。

手势学习

虽然手势几乎无处不在了,但是面对新的APP的时候,用户还是不清楚哪些手势可用,学习新APP的手势交互几乎是绕不过去的问题。绝大多数的界面交互沿用了最常用的点按、滑动和捏合手势,通过这些手势可以执行绝大多数的操作,其中点按是无疑是最常用也是最直觉的。但是,与显性的图形化的界面不同,手势交互本身是隐形的,除非用户实现知道某个界面某个位置可以用手势交互,否则,用户需要通过自行摸索和尝试来发掘。

所以,从这个角度而言,只有设计师在界面中提供正确的视觉指引,用户才会“正确地发现”手势交互的存在。

避免在新用户引导的时候加入手势教程

许多手势交互驱动的APP当中,设计师都习惯于将手势交互的教程放在首次打开APP的时候。这样带有新用户引导教程的APP非常之多,用户需要在刚刚进入的时候,了解APP的功能、特点,学习操作等等等等。但是,这样的教程展现方式本身并不够优雅,也不够有效。这种新用户引导阶段的前期教程所存在的主要问题,是用户必须在一打开应用的时候,就记住一大堆的信息。如果信息和教程不多还好,稍多一些,用户会很快陷入混乱。举个例子,著名的效率应用 Clear,新用户引导教程长达7页,用户需要非常耐心地看完它们才知道如何正确有效的使用这款应用。这样的设计无疑是糟糕的。

在使用过程中提供教程

在用户使用APP的过程中,结合用户所处的界面、执行的操作、正在完成的任务和上下文信息来提供相应的手势交互的教程。如果想要交给用户一个新的手势,那么你必须慢慢开始,不要指望一次搞定,不要急于求成。

所以,你需要给用户的是一个迭代式的渐进的指引教程,恰到好处的提醒,并且你的引导应该是专注于单个交互的,而非一次给用户灌输尽可能多的信息。结合语境来提供教程和指引,才是最有效的。

下图是 Android 版的Youtube 的APP中的手势交互的引导界面,这款源自谷歌官方的应用采用的是标准的Material Design的手势交互方式,用户会在初次进入应用之后,适时地提供相应的手势交互引导,一次一项,不会进行填鸭式的信息灌输。简练的文本引导,让用户能够快速明白交互方式和结果。

使用动效来呈现手势

手势本身是动态的,它和动效本身有着高度的相似性。作为设计师,使用动效来呈现手势的交互和效果是非常自然的逻辑。为了让用户能够更为清晰的明白手势的正确用法,你可以在相应的元素上加上文本说明,并且搭配相应的交互动效,展示操作方式和执行结果。就像下面的案例所示:

使用动效进行手势交互引导的时候,有三种比较流行的方式。

第一种是提示动效。提示动效主要以预览的形式展现了如何运用手势来与特定的元素进行交互。它是作为手势和触发交互之间的桥梁而存在的。比如下面这个布丁怪物的游戏就是以手势操作为主的,动效结合游戏场景,呈现给用户交互的基本方式。

第二种方式也很有效,内容展示。相比于第一种方式,内容展示更加微妙,它向用户呈现了交互所能呈现出来的内容和结果。就像下面这个案例,它简单的展示了卡片之后还隐藏着其他的卡片,隐晦而微妙地暗示用户,使用滑动手势就能看到后面的卡片了。

总结

手势交互的实用性和泛用性是有目共睹的,它依赖于界面,并且高度依赖基础的几个单指和双指手势,但是它的隐藏性使得设计师的引导显得无比重要。还好在最近几年的经验累积之下,手势交互的引导模式有了如今这套相对成熟的经验,动效、文本和提示可以有效的帮助用户,逐步学会新界面的手势交互。

相关文章

  • 这样做引导,帮你的用户快速熟悉手势交互

    在计算机被发明出来之后,很长一段时间里,人们都是使用键盘来完成交互的。而随着70年代图形化界面的出现和鼠标的发明,...

  • 【iOS学习】——手势识别

    iOS 手势 手势需要开启用户交互 点击手势 单击手势 双击手势 添加 numberOfTapsRequired...

  • 浅谈用户交互关于“引导”设计的常见类型;

    用户交互_引导 引导,可以让用户在短时间内快速了解产品的特色及使用方式,轻松上手去体验产品的功能,完成自己的目标。...

  • UI总结(二)

    手势 状态: 注意:UIImageView 和UILabel 用户交互(userInteractionEnable...

  • 浅谈用户交互常见的“操作手势”

    用户交互_操作手势 操作应用时,使用最多的交互方式就是操作手势。这些手势引发了与内容密切的个人联系,并增强了对屏幕...

  • 5(3)页面示例-手势交互

    用户使用点击、拖拽、捏合等手势与移动设备进行交互,这些手势在不同应用之间都是通用的。使用手势拉近了用户和设备之间的...

  • 用户交互(9)-手势

    手势 用户通过在触摸屏上使用手势与iOS设备交互。这些手势引出了与内容的亲近个人联系,增强了对屏幕对象的直接操作感...

  • 投知识:——手势识别已走进我们的智能生活

    手势识别已走进我们的智能生活 科技引导新生活,人机交互越过屏幕触摸向非接触式的手势识别的方向大踏步的发展,人机交互...

  • 京东小程序产品规范

    产品交互风格定义 交互定义 用户交互的重要性 产品功能是否能和用户做好交互,重要是能够引导用户,给用户意料中的反馈...

  • iOS swift交互式转场动画

    交互式转场动画 交互式转场动画,提高动画与用户交互性,从而提升用户体验。通过手势、重力感觉等交互操作,使原本连贯的...

网友评论

    本文标题:这样做引导,帮你的用户快速熟悉手势交互

    本文链接:https://www.haomeiwen.com/subject/lfthxxtx.html