侧拉菜单——弊大于利的导航模式

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

我们曾经提到过,汉堡菜单将成为移动端设计的主流模式——然而根据数据研究表明,汉堡菜单的弊大于利

汉堡菜单到底好还是坏?这个话题非常微妙。

我将尽量在本文中保持客观的态度,向各位展示汉堡菜单的问题所在,解决问题的方案,至于如何对待这种设计模式,我相信仁者见仁,智者见智。

一、问题所在

  1. 难于发现
  2. 效率低下
  3. 在某些平台下,和平台固有的导航设计模式有所冲突
  4. 无法一瞥既得

1.难于发现

“如果看不到,那么自然便想不到”

在默认状态下,侧边菜单(汉堡菜单)的内容是隐藏的

传统的经验是:最重要、最常使用的功能放置在首屏。然而汉堡菜单打破了这一惯例。用户首先要去了解汉堡菜单是可以激活/关闭的——尽管汉堡菜单现在极为流行,但是很多应用都会在用户初次使用时提示用户,否则一些新手用户很可能无法在主屏上找到主要功能。

2.效率低下

当用户知道在侧边可以开启导航菜单后,新的问题出现了:这种设计模式会强迫,逼迫用户打开应用之后立马开启侧边菜单,否则无法进行操作。

相对于下面传统的标签栏导航设计,我们可以看到,传统的设计模式,所有功能/元素直接陈列在主屏幕中,用户打开应用后可以立即操作。

3.和平台固有的导航模式有所冲突

在iOS平台下,问题尤为突出,和iOS标准的导航设计模式有所冲突,iOS中,一般左上角是返回。而汉堡菜单的开启图标,一般也位于右上角。

如果设计师执意要采用汉堡菜单这种导航设计模式,那么在一些层级丰富的应用设计中,麻烦便凸显:既然左上角用来放置汉堡图标,那么便和返回按钮冲突了。有时候便需要滑动手势来进行层级切换——然而,这种操作模式并不直观。

4.无法一瞥既得

现在的主流设计观念是:尽量让用户直接与信息进行交互。然而汉堡菜单所代表的导航模式,信息无法一瞥既得,用户需要打开侧拉菜单,才能发现信息。

上图是Jawbone UP的应用:摒弃了底部标签栏导航模式,将通知放在右上角,和汉堡图标遥相对应。

这种简化好么?不见得,虽然视觉简化了,但是功能没有简化多少,换言之。设计者简化了视觉,却提高了应用的理解难度(以及操作复杂度)——好看的未必适用。

相反,看看Twitter的标签栏导航,一瞥既得,减少了用户的理解难度,同时让用户可以直接导航。

5.认知问题

当提到侧拉菜单和汉堡图标的时候,有一个理论被支持者反复提及:可以节省屏幕空间,提高阅读区域,进而提高可读性。

但是又何必为了节省屏幕空间而违背一些最基本的人机交互定则?应用需要有焦点区域,应用需要有明确的导航,让用户知道自己身处层级的何处。

 

注意:或许是时候去重新理解人机交互理念了,这样才能避免华而不实的设计错误出现。

二、解决之道

尽管有很多论述指出了汉堡图标的问题所在,但是并没有人提出解决方案。

1.首先要思考的是,这种设计模式在何种情况下有效?

我个人认为,汉堡菜单设计模式不太实用,仅仅在个别案例中有效。

IRCCloud便是一个优异的案例,它证明了汉堡菜单导航模式的价值所在——辅助用户进行频道切换(左)和展示频道成员(右)。

在这个案例中,汉堡菜单是可行的,因为主界面没有子界面,没有层级上的堆叠。(当层级比较复杂时,便需要考虑一下是否要摒弃汉堡菜单了)

虽然这个案例很棒,但是很明显,这款应用的界面有些臃肿,信息过载,信息架构需要重新设计一下了。

右侧的侧拉菜单展示了频道成员,左侧的侧拉展示了频道列表。用户可以选择切换频道,选择用户。但是没有太多地方去展示行为控件——因此设计者将操作按钮放在了左下角。整体看起来非常的冗杂。

2.那该采用怎样的导航模式?

侧边菜单会导致糟糕的信息架构,尤其是在层级复杂的应用设计中。

解决方案是重新审视信息架构

上图便是改动方案,左图中的彩色小点转换为右图中标签栏中的标签。

谨记:

1.要在标签栏中清晰的展示用户所处的功能界面。
2.要保证所有功能元素的可见性和可达性。
3.不要有导航手势的冲突。

解决了侧边菜单所导致的交互问题之后,其实用标签栏导航同样可以节省屏幕空间:根据滚动方向来选择是否隐藏导航栏——请看Facebook应用和Safari。固定的标签栏能够清晰的暗示用户当前所处的位置。

[忍不住多说几句]网站不要无脑抄袭iOS的导航模式,对于某些重形网站来说,重新审视一遍信息架构,再进行移动端设计,比完全照搬iOS导航模式的效果要好得多。

3.如何扩展标签栏导航模式

下图所给的案例全部基于iOS,可以解决标签栏扩容问题。

某些情况下,应用的功能点超过了5个(标签栏大致可以容纳5个标签),可是如果需要扩展怎么办?目前主流的标签栏导航模式中,都采用下图这种办法,提供了一个“更多”图标,点击后会进入另外一个界面,这种效果并不理想,因为跟侧拉菜单一样——功能被隐藏了。如果要扩展的内容超多,可以考虑使用这种方法。

另外一种方法可以参考Rookie,可以滑动标签栏。但是也有缺点,容错率较低,点击手势和滚动手势可能会冲突,可能会出现误操作。

还有一点,值得一提,那边是第二种方法,更适合交互操作的选择,导航功能上稍微弱一点。

三、结论

希望本文能够明晰您对于侧拉菜单和标签栏导航的认识,能够区分彼此的利弊,在设计中合理利用设计模式,向用户展现清晰的信息架构。

source:UI中国

您的赞赏,是对我创作的最大鼓励。

评论( 6

登录后参与评论
  1. 赞同绝大多数观点,但原文中关于抽屉式导航不适用于层级较深的架构,渣渣表示不苟同。相反它反而在深层级中能展现出他的魅力,它可以给用户一个明确的home式的返回指标。其实用户在使用手机时习惯于go 和back.他们并不在乎中间的某个层级。只要你保证他,他可以很方便的返回home就足够了。这时相比于在深层级中额外的提供home返回,抽屉式导航就会显得很简洁方便。结合andy所讲渣渣觉得底部导航与抽屉导航的结合说不定可以生出个漂亮的女儿。ps :在android 关于抽屉式的介绍中,应用主界面中执行back直接回到手机界面存在问题。后来看到在Evernote中优化了这一操作更加坚定了我的看法。

    回复
  2. 实际情况是。手机屏幕发展越来越大,当你单手操作时,用手势操作很容易使用侧滑导航进行切换,底部的TAB栏因为,你的拇指可以是在屏幕中间而够不到了吧。另外使用侧滑导航使屏幕中间可以展示理多的内容,最关键的是不容易被其它信息干扰的,从而获得更好的用户体验。作者的论述太单一。

    回复
  3. 我感觉作者的论证是那么的苍白无力,并且文中只提到了策划导航的一个好处“增大了垂直面积”,其实策划导航有很多好处的,作者对策划导航的交互了解的不够深入,策划导航在app的底层页也可以通过手势呼出的,这一点交互就能让用户更加便利。底部的那种Tab导航,虽然很直观明了,但是那也只适合新用户,并且要求这个五个导航的使用频率非常大才可以,举个例子:你把个人中心放到底部导航上,但是平时用个人中心的次数很少,就明显感觉这个板块碍眼。我不赞同“一撇既得”,合适的时间展示合适的功能,这才是我赞同的,你把所有信息都展示给用户,必然造成界面冗余,阅读效率低下,特别是在这种移动交互设计上,快捷走的生活,有很大一部分人使用的环境都处于Move的状态,简化可视化的信息,这才是趋势。我感觉作者说的“一瞥既得”是不是来自工业设计行业的模式呢?

    回复
  4. "要保证所有功能元素的可见性和可达性。"……………………………………………………..- -|||

    回复
  5. 返璞归真

    回复
加载中