APP研究系列之抽屉式导航的使用场景

最近刚好完成了积分移动端V1.0-2.0改版,整体界面交互和导航都进行了一次重新设计,恰好就是把之前的抽屉式导航换成了现在的标签导航。

改版完对之前的抽屉式导航做一个汇总吧;

首先,什么是抽屉式导航?

我们来看看官方的解释:

1、导航抽屉面板,从当前界面的左边划出,显示应用程序的主要导航选项;

2、用户可以把导航抽屉在屏幕上划动来从屏幕的左边缘或通过触摸操作栏上的应用程序图标;

3、随着导航抽屉的扩展,它覆盖的是内容而不是操作栏;

4、抽屉完全扩展时,操作栏调整其内容通过替换当前的操作栏标题与上下文的应用程序名称和删除所有操作视图导航下面的抽屉里。溢出菜单设置的标准动作条目和帮助仍然可见;

用我们通俗的话说就是,通过侧边栏左滑的方式呼出的导航方式,叫侧边栏导航;由于看起来像是抽屉抽出,也叫作抽屉式导航;

其次,抽屉式导航有什么优势或是特点呢?

1、抽屉式导航将部分信息内容进行隐藏,节省屏幕空间,突出了应用的核心功能;

如果应用主要的功能和内容都在一个页面里面,只是一些用户设置这类低频操作内容需要显示在其他页面里。为了让主页面看上去干净美观,可以把这些辅助功能放在抽屉栏里;

2、根据拇指使用情况的热区,我们更容易了解拇指在使用手机时的适应情况。在某份调查数据的拇指热区中采用了右手拇指,且以大拇指跟扣紧手机左下角为基准;见下图;

再者,抽屉式导航有什么劣势或是缺陷呢?

1、可见性不好;

1)、抽屉式导航的入口是三条杠,对于部分用户来说,他们并不能准确知道这三条杠可以呼出抽屉式导航;

2)、抽屉式导航毕竟是隐藏起来的,没有现有标签式导航来的明显;

2、操作复杂;

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

3、与现有的交互方式冲突;

抽屉式导航可以从屏幕左边缘向右滑动唤出,与iOS的后退操作冲突。但其实这是Android的设计规范,并不一定适用于iOS。在这一点上,可能还存在有待商榷的地步;

那么,什么情况下适用抽屉式导航,或者说抽屉式导航应该怎么用呢?

1、导航的模块有主次之分;

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

A、当启动应用时,标签式导航的每个模块入口都是可见的;

B、标签式导航的模块切换非常容易,通常是点击(底部Tab)或者滑动(顶部Tab)操作;

C、当进入某个模块时,其他模块的入口依旧清晰可见。

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

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

我们来看一个例子;

对于一个电商应用来讲,用户登录并找到自己想要的或者系统正在进行的促销的秒杀商品,去下单完成购买才是最重要的;其次才是查看订单和个人信息;关于客户服务的重要性就没那么重要了;选择商品购物模块的优先级远远大于其他模块;其他模块是为次要场景设计的,即使渗透率不高,对于产品的影响也不大;

2、次要模块有快捷入口;

对于次要的模块,我们并不需要严格保证模块的渗透率;但是,如果某些应用也需要提高次要模块的渗透率,我们依然可以做到;既然抽屉式导航的可见性不高,操作繁琐,但是我们依然可以另辟蹊径,设置一个可以见高,操作便捷的入口;

豆瓣一刻在这一点上可以说把抽屉式导航的作用发挥到了淋漓尽致的地步;

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

在每日一刻内容列表的最下方设置了一个按钮,作为往期内容模块的快捷入口;这样的快捷入口,一方面不会干扰最主要的内容,因为它设置在页面最后面;另一方面,当用户阅读到最后的时候,如果用户还想阅读以下往期的内容,点击就好了;

还有这里有一点豆瓣也用的很巧妙:这里用的是按钮而不是上拉刷新;

上拉刷新的内容往往是衔接在当前页面下的,同时上拉刷新的操作成本很低;往期内容模块与今日一刻的区分度又比较大,衔接在当前页面下并不合适,操作太便利的话又显示不出模块之间的区分度;所以,这里采用按钮而不是上拉刷新;这些很细节的地方,可以看得出豆瓣一刻的产品很细心;

3、应用首次进行引导;

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

A、启动应用自动打开导航;

B、利用浮层的方式指引用户点击汉堡菜单按钮,然后再弹出导航;

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

A、第一种方法的坏处是:即使使用动画引导,引导的效果还是不如第二种,毕竟第二种用户是亲手打开导航的;

B、第二种的坏处就是:它需要强迫用户先完成这个操作,然后才能进行其他操作;相对而言,这种胁迫会对用户的控制欲造成一些伤害,用户体验会打折扣;

4、小红点提示;

利用小红点解决可见性不高的问题,即在三条杠上面显示小红点;

小红点有两种形式:

A、一种是带数字的,带数字的一般是跟消息有关系,比如还有两条消息未处理,那么小红点就会显示一个“N”;

B、不带数字的一般就是引导作用,告诉用户这里有东西需要你查看;

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

综上汇总,虽然现在越来越多的app在弃用这种导航方式,但其实抽屉式导航本身并没有什么问题,我们要做的,就是找到一个恰当合适的使用场景,来让它为用户提供价值所在;在这一点上,很庆幸豆瓣一刻一直坚持着使用抽屉式导航;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,319评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,801评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,567评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,156评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,019评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,090评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,500评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,192评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,474评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,566评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,338评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,212评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,572评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,890评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,169评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,478评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,661评论 2 335

推荐阅读更多精彩内容

  • 2012年,path首先使用了汉堡菜单作为产品的导航方式来替代原本的标签页的导航方式。一时引起了各大厂商的跟风,y...
    妖叶秋阅读 10,456评论 8 48
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,049评论 25 707
  • 当确定了APP的设计需求和产品的整体结构之后,要着手开始规划和制作APP的原型及UI界面。一款APP的好与不好,很...
    设计思考阅读 45,867评论 7 117
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,943评论 4 60
  • 淡淡流年香 现在越来越喜欢 那种恬静 那种深邃 那种微凉 总感觉那是一种 看透苍茫 是一种 宠辱不惊的彻悟 或许是...
    笔耕心田阅读 431评论 0 0