抽屉式导航怎么用?这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

相关推荐

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

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

    2017-05-25
  • 物联网用户体验设计:四个物联网产品分析

    编译:冬夜之前,我曾经写过《5个重要的物联网用户体验设计策略》,在设计物联网产品时你可能需要考虑这些策略,如果你认为这些有点空洞或理论化,那么可以看下面四个产品的用户体验分析,实际上,有三个产品满足了用户体验设计的策略要求,另一个姑且算是反面教材吧。一、智能灯:增强体验灯泡,你经常打开或者关闭,就目前来看,灯泡并不是什么颠覆性产品,但是你试试如果一周不使用灯泡会怎样?感谢爱迪生,让我们不必去体验这种情况。今天,你很难在商店货架上灯泡的海...

    2018-04-20
  • 与潘通CEO对话:合理的色彩运用,才能设计吸引人的产品包装

    年度流行色从何而来?潘通如何决定每年的流行色?你知道小黄人的颜色是潘通挑选的吗?以上问题在这篇对话中一一为你揭秘。“基于 Pantone 公司的核心业务,色卡销售,色彩咨询,以及色彩授权,中国目前是 Pantone 继美国后的全球第二大市场。按照中国的国际化趋势,不久后就有可能超越美国成为 Pantone 在全球的第一大市场。尤其,中国市场目前愈发突显了对设计的追求和重视。”Color defines our world. ——  Laurie Pressman  Vice-President of the Pantone Color Institute“For me it has always been such a calm color. Grey is like your favorite T- Shirt.” —— Jason Wu

    2017-05-11
  • 史上最完整交互设计基本原则|推荐收藏

    下面的原则对于有效的用户界面的设计和实现都是最基本的,不管是针对传统的图形用户界面还是针对任意的可联网的智能电子设备都是有用的。有效的用户界面是视觉明显的并且宽容的,会带给用户一种控制感。用户能很快…

    2017-08-01
  • 屏幕尺寸越来越多,“首屏为王”还有效么?

    作者:Amy Schade@nngroup,翻译:小球娘   几句话概述:把什么内容放在页面顶部(第一屏的位置)以及把什么内容藏在第一屏位置之后将始终影响用户体验——无论屏幕大小。有平均84%的用户会区别对待页面第一屏内容和…

    交互专题 2017-08-07
  • 交互设计师必备的9种能力(下篇)

    让我们继续来跟着大饼哥来看交互设计师必备的9种能力。

    2017-05-15
  • 交互设计与心理学的关系

    具体联系什么的大家看专业书籍吧,我从另一个角度说一下我的理解吧。 每个学科/专业的产生都是有它的历史使命的,为什么一定是这个时候,为什么一定诞生在这个领域,为什么会如此发展······类比一下其它学科/专业,…

    交互设计 2015-09-11
  • H5时代的多行文本框

    说起输入框,大家都耳熟能详了,今天跟大家谈一谈H5时代的多行输入框!首先一起回顾下输入框在PC端的应用:

    2017-06-04
  • Material Design UI质感设计动画交互设计欣赏

    质感设计(Material Design),是谷歌推出的设计语言,可以在用户界面产生动画,并且动画都是仿照真实的物理世界所产生,而且这套设计语言是跨平台和设备的。简而言之,质感设计是一种简单的方法创建很快的应用程序…

    IxD案例 2015-11-16
  • 淘宝UED的设计流程

    国内知名 UED 团队的设计流程是怎样的? 淘宝 UED 的设计流程图 <img src="https://pic4.zhimg.com/75bcc954c5e1695eeeeb1710eb62c947_b.jpg" data-rawwidth="4000" data-rawheight="1678" clas…

    2016-06-01