抽屉式导航怎么用?这4种场景教你正确的设计姿势

…上图的 APP 将选项卡(tab row)变成抽屉式导航菜单(drawer menu),用户在相应功能间的切换率急剧下降。…很多用户还没有建立起相应的心理模型(尤其是抽屉式或者汉堡包菜单)尽量将 APP 的核心功能放在用户可以看得到地方。
——能露出来, 就别藏着触摸操作中,手势永远要比点击优先级低。现代触摸操作习惯毕竟只流行了几年,然而传统PC上的操作习惯已经实行了将近20年。所以通过滑动来切换Tab不会比点击切换来的直观。
——石头们

抽屉式导航怎么用?这4种场景教你正确的设计姿势

2012年,path首先使用了汉堡菜单作为产品的导航方式来替代原本的标签页的导航方式。一时引起了各大厂商的跟风,Youtube、facebook等App都纷纷把自己的导航改成了抽屉式导航。但由于没有统一的规范,各个产品的抽屉导航设计也各不相同,为了控制Android平台日益混乱的抽屉交互方式,2013 Google I/O大会之后,Google将Navigation Drawer纳入了Android Design规范当中,随后大量应用开始采用这种交互模式【1】。

不过慢慢的,包括youtube和facebook在内的很多app都将抽屉式导航换回了原来的标签页导航,从此,对于抽屉式导航的争辩就一直没有断过。并且慢慢的,对于抽屉式导航的批评渐渐多于肯定【2】。我摘取其中的两则批评如下。

…上图的 APP 将选项卡(tab row)变成抽屉式导航菜单(drawer menu),用户在相应功能间的切换率急剧下降。…很多用户还没有建立起相应的心理模型(尤其是抽屉式或者汉堡包菜单)尽量将 APP 的核心功能放在用户可以看得到地方。

——能露出来, 就别藏着

触摸操作中,手势永远要比点击优先级低。现代触摸操作习惯毕竟只流行了几年,然而传统PC上的操作习惯已经实行了将近20年。所以通过滑动来切换Tab不会比点击切换来的直观。

——石头们

总结一下,对于抽屉式导航的批评主要有如下几点:

1. 可见性不好:

  • 首先抽屉式导航的入口是三条杠,对于部分用户来说,他们并不能准确知道这三条杠可以呼出抽屉式导航;
  • 抽屉式导航毕竟是隐藏起来的,没有现有标签式导航来的明显。

2. 操作复杂。抽屉式导航的切换可以直接点击,如果Tab放在上方可以直接滑动切换。但是抽屉式导航的切换就要先呼出侧边栏,然后再点击,相对比而言,操作更加繁琐。

3. 与现有的交互方式冲突。抽屉式导航可以从屏幕左边缘向右滑动唤出,与iOS的后退操作冲突。但是这本来就是Android的设计规范,并不一定适用于iOS,所以我觉得的这个批评不成立。

但是,正如那句老话“垃圾是放错地方的资源”,我始终相信,没有不好的交互设计,只有不适合产品使用场景的交互设计。所以抽屉式导航也是有它的正确使用方法的。

首先关于这个入口的问题,我觉得暂时是无解的,但是这是可以通过长期的用户教育来实现的。正如现在的开关键(一个圆圈加一条杠),这个设计其实并不能一目了然地让人知道这是开关键,但是经过长期的使用,现在大部分人都会知道这是开关键。所以,这个问题就只能交给时间来解决了。

但是除此之外,上面的批评1,2总结一下就是切换麻烦(批评3不太站得住脚)。只是,如果产品的导航不需要频繁切换呢?如果有其他的切换入口呢?那么问题就迎刃而解了。那么有没有产品是这样的呢?答案是:当然有。下面我就结合一些例子来讲讲抽屉式导航的正确使用方式。

1. 导航模块有主次

抽屉式导航的使用场景首先一点是:导航的模块是有主次之分的。相对比于常用的标签式导航而言,抽屉式导航的模块之间主次区分更加明显。

  1. 当启动应用时,标签式导航的每个模块入口都是可见的。
  2. 标签式导航的模块切换非常容易,通常是点击(底部Tab)或者滑动(顶部Tab)操作。
  3. 当进入某个模块时,其他模块的入口依旧清晰可见。

基于以上三点,标签式导航模块之间的区分不是特别大。

但是对于抽屉式导航而言,以上三点都不成立。所以,相对而言,抽屉式导航的第一个模块的重要程度要远远大于其他的模块。也就是说,当不同导航模块之间存在明显的主次之分时,才可以考虑使用抽屉式导航。

举个例子,豆瓣一刻的导航模块如下:

抽屉式导航怎么用?这4种场景教你正确的设计姿势

一刻的导航

如上图,因为豆瓣一刻的资讯都是严格按照每天为单位的,一刻的目的也是希望你当天阅读完当天的内容。所以,一刻的核心使用场景是当日事当日毕,当天的内容(即“今日一刻”模块)的优先级远远大于其他模块。其他模块是为次要场景设计的,即使渗透率不高,对于产品的影响也不大。

2、次要模块可以有快捷入口

对于次要的模块,我们并不需要严格保证模块的渗透率。但是,假如我们可以提高次要模块的渗透率,又何乐而不为呢?既然抽屉式导航的可见性不高,操作繁琐,那为什么不可以另辟蹊径?设置一个可以见高,操作便捷的入口呢?答案当然是肯定的。

对于豆瓣一刻来说,模块之间的优先级如下:今日一刻>往期内容>热门作者、栏目浏览、我的喜欢。所以,往期内容模块的使用场景是仅次于今日一刻模块,但是又远远高于其他模块。所以,针对这个模块,可以设置更加便捷的快捷入口。豆瓣一刻的处理方式如下图:

抽屉式导航怎么用?这4种场景教你正确的设计姿势

次要内容快捷入口

在每日一刻内容列表的最下方设置了一个按钮,作为往期内容模块的快捷入口。这样的快捷入口,一方面不会干扰最主要的内容,因为它设置在页面最后面。另一方面,当用户阅读到最后的时候,假如用户还有强烈的阅读愿望,那么这个入口简直就是沙漠中的甘泉。

最最巧妙的一点,为什么这里不用上拉刷新而是使用按钮呢?因为上拉刷新的内容往往是衔接在当前页面下的,同时上拉刷新的操作成本很低。但是,往期内容模块与今日一刻的区分度又比较大,衔接在当前页面下并不合适,操作太便利的话又显示不出模块之间的区分度。所以,这里采用按钮而不是上拉刷新。

3、应用首次启动进行引导

当然,为了解决可见性的问题,还需要在首次启动应用的时候进行引导。对于抽屉式导航的引导,有两种方式:

  1. 启动应用自动打开导航;
  2. 指引用户点击汉堡菜单按钮,然后再弹出导航。

两种引导各有利弊,当然好处就是都可以起到引导作用。而坏处来说:

  • 第一种方法的坏处是:即使使用动画引导,引导的效果还是不如第二种,毕竟第二种用户是亲手打开导航的;
  • 第二种的坏处就是:它需要强迫用户先完成这个操作,然后才能进行其他操作。

相对而言,这种胁迫会对用户的控制欲造成一些伤害,用户体验会打一点折扣。

抽屉式导航怎么用?这4种场景教你正确的设计姿势

自动打开指引

抽屉式导航怎么用?这4种场景教你正确的设计姿势

浮层指引

4、善用小红点

最后一个方法也是为了解决可见性不高的问题,就是利用让人又爱又恨的小红点,英文名称叫Badge Notification。小红点有两种形式:一种是带数字的,另一种是不带数字。带数字的一般是跟消息有关系,比如还有两条消息未处理,那么小红点就会显示一个“2”;不带数字的一般就是引导作用,告诉用户这里有东西需要你查看。

抽屉式导航怎么用?这4种场景教你正确的设计姿势

普通小红点

抽屉式导航怎么用?这4种场景教你正确的设计姿势

带数字的小红点

由于小红点对于用户来说确实体验不太好,很多人都会有强烈的强迫症要消灭这些小红点。所以,针对用户的这种心理,小红点反而成为了产品的一种非常高效、简洁的引导方式。

不过,有句话要说的是:小红点虽好,可不要贪杯哟。适当适量的引导可以处于一种“既触发了用户的强迫症又避免让用户厌恶”的状态。如果一旦超过这个度,产品就有可能会被抛弃,所以谨慎使用小红点。

再次重复一下那句话,垃圾是放错地方的资源。没有错误的控件,只有使用不当的控件。所以与其指责抽屉式导航的种种错误,不如找一个恰当的场景去承载它,让它发挥自己的闪光之处。以上就是我对于抽屉式导航使用的一些心得。

【1】交互设计新手必看!探秘抽屉导航的前生今世 http://www.woshipm.com/ucd/92222.html

【2】哪些因素阻碍国内 BAT 的移动应用采用 Material Design?-Kenny MacCormick的回答-知乎 https://www.zhihu.com/question/37376355/answer/71940532

 

本文由 @Autumn阿秋 原创发布于人人都是产品经理 ,未经许可,禁止转载。

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

(0)
CatherineCatherine
上一篇 2017-05-30 04:48
下一篇 2017-05-30 06:42

相关推荐

  • 【交互设计】怎么让引导页不再是无用小透明?

    前言在接触一款新应用的时候用户常常会看到一些引导页,但在操作的时候直接当透明的就快速滑过或跳过了,这种时候,大家一定会有“这些引导好无用啊”的无力感,目前甚至有着“如果一个产品需要引导,说明该产品缺乏友…

    2017-08-04
  • 交互设计新人的核心竞争力

    从实习的第一天起,我就数着日子在过,时间走的太快拦也拦不住,要做要学的事情又太多。转眼七月已经过去,总觉得还是有点后知后觉,花了一个月的时间去适应新环境和新工作,慢慢才知道寻求突破点的重要性,所以今…

    2017-08-04
  • 交互设计的进阶三重境

    ✨交互设计师的迷茫作为交互设计师,工作几年之后,如果还处在 “从产品接需求输出线框图” 的循环中,或许就会产生一些迷茫:自己的价值和竞争力在哪里?如何突破,进一步提升自己的能力与话语权?迷茫,是因为无法定位自己,寻不得方向,找不到出路。所以,当我们提问该如何提升时,不妨先想一想,【用户体验设计】这座高塔,究竟是个什么模样,而自己又在什么位置。此文中,我根据自己的一些工作经历和理解,将交互设计师的能力成长分出三个阶段:功能完善者、产品推动...

    2018-02-26
  • 通过导航加强用户体验的3个原则

    文章介绍了导航设计中的3个原则,将以下原则付诸实践,或许会使用户体验大大Max!

    2017-05-06
  • 为什么职场上的印度人总比中国人混得好?

    目前为止我还未有机会到过印度。身边去过的人有大致两边倒的两种观点,一种是这是一个思想自由的国度,人们开心知足、与世无争。一种是这是一个脏乱差效率低下的地方,一条公路几十年也修不整齐。我无从判断,因为每一种观点都主观。有一位曾经生活在帝都的印度女记者倒是写过一本比较中印差异的书叫《烟与镜》,值得一读。因为工作和学习的关系,我与很多印度人一起共事或者正在共事,有的只能算是点头之交,有的成为了挚友。1先说一件趣事,多年前,我没有与印度人近距离...

    2018-03-16
  • 最浓缩的概念:交互是什么?交互的本质及如何理解

    在使用一种产品或东西的整体过程。而无论这个使用行为是有无目的导向。本身这个过程,即是交互的本质。而任何一个交互的过程中必定存在交互对相,及交互的媒介。在这里,我先声明一下哦。以下的分析过程可不那么容易跟得上,思维与对生活细节观察力不够的,请直接跳过。但,以下的内容是当年我在新加坡修用户体验时,在交互过程一环中的必修环节。做好心理准备,那就开始看吧。题外话:而如果想改进这一环节,那么在提升交互环节的效率方式手段上,也无非只能是,1,提升硬件能力来加速。2,减少多余软件操作环节。3,有无改变硬软件间关系的其它模式?题外话:而如果想改进这一环节,那么在提升交互环节的效率方式手段上,也无非只能是,1,提升硬件能力来加速。2,减少多余渠道操作环节,如展开一个个目录,或通过其它模式打开。3,提升系统本身效率。产品设计的体验层级关系:
    核心层:产品本质体验层。---这产品是为达成什么用户目的而生的。
    中间层:产品使用过程中的体验层。---这就是我们所有产品中的交互层。
    最表层:产品的视觉体验层。---这部分就是UI〜我们也知道约炮软件其实并没有什么用,但为什么能相对留存久呢?也就是在于用户在心理层上有侥幸心理。同时加上其在媒体上潜意默化的某某成功的宣传。所以,让用户的心理否定延后。所以,相对来说,知道没什么用,但还是久留一下看看。但大多有头脑的。基本上也在一段时间后最终放弃。

    2017-05-25
  • 关于“下一步 ”的设计思考

    用户在使用 App的过程中,总会进入各种页面,并且对于页面之间的跳转, “<” 返回或者物理键均可回溯到上一级页面。但是进入下一级页面的入口,可以是各种操作按钮、缩略图、 tab或者导航切换,在工具性产品中,…

    2016-03-14
  • APP设计:那些打动人心的设计点(二)

    上周写了一篇文章《APP设计:那些打动人心的设计点》,总结了八个APP的小设计点,这些小设计点不是针对APP的核心业务和功能的设计,但会给用户带来一点小便利和小惊喜,就像电影最后的彩蛋,让人期待而心动。紧接着上篇,我们继续说说那些打动人心的APP设计。

    2017-05-05
  • Axure rp视频教程36集,免费!

    1-36集,免费学习~~~点击“阅读原文”或长按下面二维码立即观看视频。对教程有疑问,请咨询微信:13388182428

    2018-04-09
  • 关注 Web 设计

    相较于设计教程,这样的问答对于个人来说更有针对性,离我们日常的设计工作更近一些。我个人也有这样的体会,有时会有一两个问题长期停留在脑子里,得不到解决,偶然的碰到刚好涉及到这方面的文章,会有一下子豁然开朗的感觉。所以这样的形式也是非常有价值的。以下就是第1周的所有问题和答复,希望在设计对大家有所帮助。

    2015-01-03