有什么好的方案可以替代抽屉式导航?

   关于抽屉导航(三线icon/汉堡包菜单)的文章和讨论已经够多了。本文无意加入这些讨论,只是想寻找一种更好的替代方案,毕竟抽屉导航的缺陷早已成为公论 >>>

  效率低下:交互有够麻烦的

  导航性差:不知道自己在哪

  塞满了各种乱七八糟的功能

  先来看看有哪些常见的导航模式

  在此之前我想先老生常谈一下:每一款产品都是为特定用户群体而设计的,你需要仔细琢磨用户的使用场景,一些方法兴许适合你,但对别人却未必。

  1. Swarm和标签导航

  在Swarm by Foursquare的1.0版本中,点击左上角的头像是前往个人中心的唯一途径。


  Swarm by Foursquare

  这看起来很机智,还有比头像更能代表个人中心的icon嘛?但实际情况却是除了设计者之外没有人能理解这个交互,呵呵。所以只过了一个月,Swarm就把个人中心挪到了底部标签栏。

  标签导航是最常见和实用的,尽管会占据一些屏幕空间,但它的好处确实足够多:

  可见性强:全都在你的屏幕上

  结构清晰:最多只能五个标签

  交互方便:只需点一下,搞定

  即便是自2010年起便在使用抽屉导航的Facebook,也从2013年开始投入了标签导航的怀抱。

  不过Swarm的导航还有精进空间,比如他们的导航只有icon没有文字。诚然icon会更直观和形象,但这对icon的要求会很高,它必须要易于理解,不然还是像Facebook那样用文字说明一下比较好。


  Swarm&Facebook

  如你所见,Facebook为每个icon都加上了文字,就算是像「设置 – 齿轮」这样约定俗成的隐喻。而Swarm则使用类似于蜂房的icon来隐喻个人中心,理解成本显然较高。

  也许没我说的那么严重,但许多对设计者而言显而易见的事,对别人来说却可能难以察觉,这却也是事实。

  2. Tinder和滑动导航

  我把以Tinder、Snapchat及其他APP为代表的导航方式称为滑动导航。

  这类导航模式的特点在于体验的自然性,它与滑动手势相得益彰:整个APP就好像是一块水平长条的大屏,无论你如何滑动都只是切换到大屏中的某一部分而已,这使你几乎可以抛弃「点击」操作。

  有得必有失,滑动导航的一大缺点是你无法直接从第1个页面切换到第3个页面,更重要的是,作为页面标题的导航icon至多只能显示3个,其余的会被隐藏起来,你需要遍历所有页面才能够知道这个APP有哪些页面,他们分别在哪,这确实不够直观和便捷。

  不过对于只有3个主页面的APP(比如Midpic)来说,滑动导航可谓如鱼得水。


  Midpic

  也许我们可以通过「无限水平滑动」来改进这一导航模式,这能够消除用户在最左端/右端2个页面时的碰壁感。


  Tinder

  3. BAG和下拉导航

  BAG的设计者Nacho Rapallo引入了一种全新的导航方式:下拉屏幕——就像下拉刷新Feeds那样,不过需要拉得更多——切换页面。


  BAG

  这种交互模式的讨喜之处在于,它类似于抽屉导航,但却没有抽屉导航的部分缺点:

  不占地儿

  五个标签

  交互很快

  抽屉导航最大的问题在于当你切换页面时,你需要先点击汉堡包icon(或右划),等待导航打开,然后再点击目标icon,如果你不小心点错了,就得再来一遍,这太浪费时间了。而通过这种交互方式,你的手指完全不需要离开屏幕,效率大大提升。

  不过这种交互方式并非没有缺陷,如果你的APP包含Timeline,而用户滚屏后需要切换页面时,要首先返回顶部才能进行进行该操作。同时,作为 一种不可见性的交互方式,用户需要被引导,这会很困难。因此我不太推荐初创企业过多使用创新型的交互模式,这会使早期用户赶到迷茫。

  4. 我的替代方案

  经过深思熟虑,我尝试出一种能够避免上述所有缺点的导航模式。我把BAG的下拉改成了侧滑式,这样一来就能避免滚屏的麻烦。我们来看看它长什么样:


  Slide navigation pattern by benjamin berger

  我承认它还不够完美,比如导航依旧是被隐藏的,用户需要去学习和习惯。此外它还与我们常用的右划返回手势会发生冲突。不过它确实要比抽屉式导航更好。

时间: 2024-10-27 19:54:01

有什么好的方案可以替代抽屉式导航?的相关文章

抽屉式导航 让用户专注于核心的功能

[编者按]本文转载自@kentzhu 的个人博客.导航是产品设计的重头戏,Web端设计的时候是在考虑如何将操作展示给用户,而Mobile的设计更多的时候则是考虑如何将操作巧妙的隐藏起来.但这种隐藏实际上是为了核心功能的突出. iOS导航模式基本都是基于iOS系统自身的一些模式,随着iOS新产品的不断出现,新的导航方式也随之更新.在这里,说一下"抽屉式"的导航方式. 当然,抽屉式导航是作者自己给这种导航方式取的名字,至于学名叫什么,小编也不知道.这种导航模式一般采用将导航主体隐藏在app

说说抽屉式导航

Web端设计很多时候是在考虑如何将操作展示给用户,而mobile的设计更多的时候则是考虑如何将操作巧妙的隐藏起来.这种隐藏实际上是对http://www.aliyun.com/zixun/aggregation/17626.html">核心功能的一种突出. 导航始终是产品设计的重头戏,不管在Web端设计还是在mobile的设计中.之前曾经在读<触动人心>的时候写过一篇"移动产品设计之ios导航模式",其中的导航模式基本都是基于ios系统自身的一些模式,随着i

电陶炉网站SEO方案之导航定位

许多人都普通认为不管是厨房电器的网站,还是中小型企业的网站,网站的导航一情况下都是"关于企业.新闻报道.产品中心.服务中心.技术支持.生产基地.联系我们"我们今天要解说的是电陶炉网站SEO方案之导航定位,许多人都普遍认为大多数的网站导航也是这么定位自己企业站还是个人站点,导航都是这么写,我们为何不可以这样写,干嘛还要去研究网站导航定位的问题,下面由爱尚厨电陶炉小编为大家解说一下,我为什么要在电陶网站SEO方案里面重点解说导航定位这个话题呢?一起来探讨一下这个令人纠结的话题. 一.电陶炉

CCAI2017|智能金融论坛:听大佬们讲人工智能在金融领域的那些事儿

CSDN现场消息,22日下午的"智能金融论坛"圆桌会议精彩纷呈.此次会议由蚂蚁金服人工智能部技术总监李小龙主持,上海交通大学计算机系教授邓小铁.香港智能金融科技有限公司(FDT-AI)联合创始人兼CEO柳崎峰.乔治亚理工学院金融学教授Alton M. Costley主席Sudheer Chava.普林斯顿大学运筹与金融工程系助理教授王梦迪.香港中文大学计算机系副教授张胜誉等专家参与讨论. 此次圆桌会议分为两个环节,首先是主持人和嘉宾的问答环节,然后是观众自由问答环节. 主持人李小龙表示

为大家解决动态文本的特效显示与文件大小之间的矛盾

动态|解决|特效|显示 在论坛,笔者会不时见到一些人问关于动态文本的问题,其中问得最多的是动态文本的透明,旋转与遮罩等特效,以及嵌入字符后文件变大等问题.为了让更多的人能够更好地使用动态文本,以及避免论坛里重复出现类似的帖子,笔者下定决心,写一个针对上述问题的动态文本使用教程.说明:1 二楼主要讨论文本显示的原理问题,理论性比较强,如果读者只是为了解决问题,做出需要的效果的话,二楼的内容可以跳过.2 三楼主要提出问题的解决方案,包括显示,以及避免文件变大的问题.3 要在显示和文件大小这对矛盾处理

浅聊淘宝闲鱼发布界面的两次改版

  建议刚学UI的同学多看这类改版经验总结,提前学习交互设计的知识,在求职时能加不少分.习惯靠经验/感觉做设计的新人也别放过,这种实战的案例结合书本看,能帮你更透彻地理解那些设计原则.不多说了,直接看文! 讲交互设计的书里有一本很有名的<简约设计>(<Simple and UsableWeb, Mobliel, and Interaction Design>),相信很多设计师都看过,里面教了一个如何简约四策略.为自己的设计做减法,做一个简单的设计,基本成为一个设计师自我修养的重要信

TAB导航与侧边抽屉导航的巅峰对决

  编者按:本文作者Anthony Rose,是社交网络电台Zeebox的联合创始人及CTO,文章不仅分析了侧边栏导航和Tab导航的利弊,还有改版过程进行A/B test 的详尽过程,且最后也给了建议,读完能对这两种导航有清晰的认识,非常有价值的经验分享 :) ================正文分割线================ 设想你需要设计一个含有许多页面和模块,不能在一屏内显示完全的应用.你一定会首先想到去设计一个底部或顶部的Tab导航.等一下,多出来的一排导航看上去有点碍眼?我们尝

Win8.1开始菜单Start Menu X体验

  Start Meun X是OrdinarySoft出品的一款开始菜单软件,主要分为付费版和免费版.当然免费版的功能没有付费版全面,但是并不意味着它无法代替Win8.1那被人吐槽不断的开始按钮. 图1 Win8.1开始菜单Start Menu X 1.完美适配Win8/Win8.1系统 Start Meun X目前完美适配Win8/Win8.1操作系统,可随系统一并启动.提供了多项方案来替代Win8/Win8.1系统的开始按钮,包括开机跳过开始屏幕.双击关闭系统开始屏幕等功能. 图2 Star

[译]安卓界面导航初识

本文讲的是[译]安卓界面导航初识, 原文地址:A Primer on Android navigation 原文作者:Liam Spradlin 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m- 译者:horizon13th 校对者:SumiMakito, laiyun90 安卓界面导航初识 界面中任何引领用户跳转于页面之间的媒介 -- 这便是导航 当你的应用中的两个不同页面产生联系时,导航便由此而生.跳转链接(不论从哪跳到哪)便是页面间传递用户的媒介.创建导