ui学习吧 关注:562贴子:1,136
  • 6回复贴,共1

拇指驱动产品设计 | 手势交互

取消只看楼主收藏回复

对于交互设计师,要牢记一条准则,即以触摸屏为中心做产品设计。
业内有很多人觉得手势交互没必要拿出来深究,觉得用户使用产品的过程中,自然而然就会去使用拇指,进行手势操作。但这种说法,就跟「用户心理模型」类似。当然,对于用户来说没必要深究手势交互,但作为设计师,如果不了解其背后的逻辑,那么就无法解决产品设计背后的一些问题。
所以我们今天,好好聊一聊手势交互这件事。你会发现,原来你以往观察或以为的设计问题,都是手势交互在作祟。
手势的意义
我们以前经常听到「以用户为中心做产品设计」这句话,意思是产品需依附于目标用户的真实场景来设计。与此同时,其实还有一句话在提醒着交互设计师如何做产品设计,就是「以触摸屏为中心做产品设计」。
为什么呢?因为用户从始至终都是在跟触摸屏做接触,不管换了什么设备,他们都是要通过屏幕与产品进行交互的。
我们可以在这里思考一下手势的意义。
手势的出现改变了什么?可以回想一下 iPhone 4 发布的时候,当看到这样一台屏幕上没有任何按键的设备,是不是会觉得不可思议?键盘,电话接听按键等都消失不见了。


1楼2019-12-03 16:20回复
    人们在使用 iPhone 这样的产品时,不再需要去强行记忆任何固体按键。触摸屏与手势的结合,帮助我们隐藏不必要的元素,帮助用户聚焦于内容,在有限的物理空间获得更多的信息。
    所以用户通过触摸屏与产品进行交互,跟通过键盘按键与屏幕进行交互是完全不同的。手势交互更自然且更高效。
    手势操作对我们来说如此自然和直观的主要原因是因为它们类似于与真实对象进行直接交互。譬如你用遥控器控制电视上的按键,需要通过上下左右这样的操作来定位指示器,而触摸屏直接就可以通过手指点击内容进行操作。这是完全不同的概念。
    综上所述,我们能知道,手势的三个要素:简洁、易用、直观。
    所以我们通过一些常见的手势行为,就可以在产品界面上很轻松的完成任务。
    常见的手势行为:
    点击:单指短暂触摸表面;
    双击:单指快速两次触摸表面(通常是缩放);
    拖动:沿表面移动而不会破坏接触;
    捏/展开:用两根手指触摸表面以移入(捏合)或移出(展开);
    按下:单指触摸表面并按住;
    滑动:快速手势,不需要触摸目标。
    当然,我们经常也会遇到一些背离手势交互的产品设计,虽然也是点击、拖动等等,但操作起来总是不那么顺心。这里面有一个关键点就是,手势直观性。
    有数据表明,苹果的 3D Touch 使用率非常低,就是因为直观性太差,用户不知道通过这个操作能带来什么结果,且使用它需要长按,经常会同时呼出「卸载」,那么效率也就会降低。久而久之,用户就不去使用了。


    2楼2019-12-03 16:20
    回复
      对比 3D Touch,触发没有提示,行动后时常有两种反馈结果,相比起来就不那么友好了。
      除了上面聊的这些,手势交互还能从另一方面来提升效率,就是拇指操作区域。
      拇指驱动设计
      我们都知道,现在手机屏幕越来越大,甚至比最早屏幕大了一倍以上。但是很多设计师并没有转换思维,跟进这个趋势的变化。
      这里给大家普及一个知识:大部分人误以为,手指在屏幕上的热区是永恒不变的,但其实手指热区会根据设备的变大而缩小。因为手掌支撑设备的重心靠后走了,所以拇指操控屏幕的范围也就变小了。


      3楼2019-12-03 16:21
      回复
        结果是,手机屏幕变大,双手持机的用户变多,但依然还有 75% 的用户是使用拇指来触摸屏幕的。因此,术语「拇指驱动设计」应运而生。
        我们上面说到,在使用一些产品的时候,经常会遇到使用起来不顺心的情况,然后说了「手势直观性」的概念。但这里,还有个更重要的原因,就是「拇指操作区域」。
        拇指操作区域被分为三块内容,分别是:易于触达,难以触达,以及介于两者之间的区域。
        所以在设计界面时,要注意界面的主要操作元素是否处于用户易于触达的范围之内。
        如果你仔细观察并思考过,也会发现,iOS 的产品界面中,「返回」按钮就位于「难以触达」的区域。原因是产品人员本身也不想用户返回或退出,而是让用户聚焦于当前页面,想要返回,那就需要付出一点成本,什么成本?操作成本。
        有人会说,由于 iOS 可以从手机的左边缘向右侧轻扫以获得返回效果,因此在大多数 iOS 产品中,返回都不需要太大的操作成本。但是,并不是所有 iPhone 用户都知道这一点,也不是所有产品都支持这一特性的。而且手势交互的进化本来也就是为了提升用户操作的效率,所以本质上他们并不矛盾,只是相比以前,我们现在的操作更快了。并且「右滑」返回,本身在手势操作中相比「点击」也是更具操作成本的。
        当了解了手势的一些意义,以及拇指操作区域对于产品设计的重要性之后,我们就可以通过一些案例来做一个全局分析了。


        4楼2019-12-03 16:21
        回复
          内容在上,操作在下
          许多人设计 App,但是没人研究过 App 为什么要这么设计。
          比如,为什么起初要把标签栏放底下呢?关于这个问题,当初我也是问了许多人,而基本都只是说这是官方设计规范。这相当于是一句废话。
          通过翻阅多方资料,我发现在工业设计领域有一条重要的基本设计原则:内容在上,操作在下。
          比如在使用电脑的时候,操作在下意味着使用者在操作过程中,手指始终处于界面下方,而内容在上面,就不会出现手指遮挡内容的情况。
          另外,为什么 iOS 设计规范建议将「编辑」按钮放置在界面右/左上方的位置呢?
          界面右/左上角的位置对拇指来说显然是不友好的。然而,这样做的原因也是显而易见的:编辑功能会让数据发生变化。将这类控件放在难以操作的位置上(与左上角的返回是一个道理),就是一种防御性的设计策略,可以在一定程度上避免因为太容易产生误操作而导致的破坏性的结果。


          5楼2019-12-03 16:23
          回复
            《上瘾》里有句话:当人们不由自由地做出下一个举动时,新的习惯就会成为他们日常生活的一部分。
            当手势充分地发挥了作用,辅助用户高效操作或实现功能,它就成了用户不可分割的一部分。
            今天通过对手势意义的解读,以及拇指驱动设计的解析,再加上这些案例的拆解,我相信你能更好地理解为什么手势交互这么重要了。
            交互设计师对于「触摸屏」,必须有深刻的认识,才能理解设计背后的逻辑。


            6楼2019-12-03 16:23
            回复


              7楼2019-12-03 16:24
              回复