锐客网

  1. 首页 > 生活百科 > it技术 > >

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

    推荐阅读


    上一篇：纪念第一次参与微信内测

    下一篇：老妈的店铺深海|老妈的店铺深海 文 / 宽窄巷