几种常见移动导航模式详析

虽说一款应用的生死不是由导航决定,但毋庸置疑,导航模式的选择在产品用户体验上占有很大的比重。就导航本身来说,没有优劣之分,端看你的应用适合哪种。下面是我罗列的一些常见的移动导航模式,接下来会对其一一举例说明(注:重要模式会重点分析,其余简略,篇幅略长,不喜可跳过)


虽说一款应用的生死不是由导航决定,但毋庸置疑,导航模式的选择在产品用户体验上占有很大的比重。就导航本身来说,没有优劣之分,端看你的应用适合哪种。下面是我罗列的一些常见的移动导航模式,接下来会对其一一举例说明(注:重要模式会重点分析,其余简略,篇幅略长,不喜可跳过)

几种常见移动导航模式详析

标签式

标签式导航是ios平台上公认的最经典的导航模式,看市场上几乎有80%的应用都在使用就能知道。标签式导航关注的是平行空间的展示,它的优点是适用于多个内容体系,且重要程度相似(平级关系),能频繁在不同页面间切换,切换成本底,只需一次点击;缺点是占用一定高度空间,且标签数量有限,最多5个标签。

下图中图1-淘宝,是标签式导航的标准使用形式,每个标签作为一个导航分类放在标签栏中(注意都是名词)。图2和图3可以算是标准形式的变形(还有其他变形形式,后面再讲),虽然也是有5个标签,但处于中间位置的标签不是作为导航使用,而是一个行为召唤按钮。行为召唤按钮主要强调某项重要功能的快捷使用,该功能需要是应用最核心且最常用的功能,优先级很高。比如图2的instagram,它的目标是以一种快速、美妙和有趣的方式将你随时抓拍下的图片分享出来,它关注的是能随时随地抓拍。因此,作为行为召唤按钮的“拍照”放在标签栏上就很有必要。

几种常见移动导航模式详析

但是,有些应用对于行为召唤按钮的放置并不合理。如下图的图3-简书,虽然文章的撰写是简书的核心功能,将其作为标签栏中的一个按钮,即能在视觉上凸现出来,又能减少操作负荷,似乎很棒。但却忽略了一个重要的问题,从使用环境来说,文章或者文档的撰写是需要在安静且能集中注意力的环境下,但移动app天然具有干扰多且注意力不集中的问题。而且在手机上输入上百字也是一件痛苦的事。对于这款产品的手机用户来说,可能用户对内容的消费比对执行动作更重要。

另外,还有一种常见的标签式导航的变种,即传统的标签式+点聚式。这里先专门讲一下点聚式,最为我们所熟知的点聚式就是曾经经典的path结构,即抽屉导航+点聚式,如下图所示—改版前图示,它的目的是将用户最频繁使用的多个核心功能点汇聚在主界面中显示,方便用户随时呼出使用。只是,如今单独使用点聚式的应用越来越少,就连path也对这种传统的点聚式进行了调整,变成了依附于标签的点聚式结构,如下图中的path改版后。还有下图中的样式1和样式2,也是这种形式的不同展现。他们的共同点是,使用同一个导航入口,进行多个同级功能的不同操作,大部分都是2-5个不同的操作选项,当然也会有更多,比如下图中的新浪微博,点击“加号”入口,出现了更多的功能选项,且这些功能的优先级相若。

几种常见移动导航模式详析

其实,在Android 5.0中,这种点聚式更常用的表现形式是悬浮响应按钮,它代表的是这个app中最主要的操作。只是就目前来讲使用场景有限,实际应用并不理想。

抽屉式

抽屉式导航的目的是带给用户更为沉浸的体验。它的特点是,“阅读”为王,点击切换少,专注于主体信息本身。从表现形态来看,抽屉导航很符合产品的二八法则,即产品中只有20%的功能常用,所以要突显,剩下的80%不常用,因此隐藏。它不像标签导航一样强调平级关系的切换,而是突出重要且核心的功能。抽屉导航的另一些优点是,侧边导航收纳的导航标签可以是5个以上,节省屏幕空间。缺点是无法快速完成导航切换,操作成本高。

关于抽屉导航,在Android和ios平台的使用也有区别。抽屉导航在Android平台上比ios更常使用。由于在ios上,抽屉导航没有专门的设计规范,所以使用上较为随意,表现形式也不受拘泥。

如果以抽屉导航和主页在空间位置为评判依据,其在风格上主要有3种表现:

第一种是浮层,即导航抽屉处于主页上层,通过滑动或点击的手势打开抽屉,抽屉部分遮挡或覆盖原来页面的内容,如下图中图4,这种风格多数会在Android上出现。

第二种是叠加式,即导航抽屉位于主页的底部,打开抽屉,原来的主页会向屏幕右侧滑动,显出主页下方的导航抽屉,如下图中图5,这种风格在ios上很普遍。第三种是嵌入层,即导航抽屉和主页处于同一层,通过轻滑、平移或点击打开抽屉,把原先的页面内容部分推出屏幕外,如下图中图6(注意导航和主页衔接处无阴影)。

而第三种风格经常会有如下图图7的变形,就是说在打开侧边抽屉的时候,嵌入式抽屉不仅把上一级页面向右推开,还采用3D效果将其推到后面。了解不同风格可在设计时斟酌使用。

几种常见移动导航模式详析

选项卡式

对于选项卡导航,不同平台有不同的设计规则。今天主要说说ios上选项卡的表现,选项卡的本质即是,实现容器内不同视图或内容的切换。虽然对于选项卡本身,ios没有专门的规范约束,但这并不妨碍广大设计者们自由发挥。目前市场上主要有3种形式的选项卡:分段选项卡、固定选项卡和滑动选项卡。

分段选项卡:是由两个或两个以上宽度相同的分段组成,正常情况下不超过4个,视觉上会有一个很明显的描边按钮。分段选项卡经常会作为二级导航,对主导航内容再次分类,可以在顶部导航栏的下方,也可以直接放在导航栏上,如下图所示。标签之间互相关联,只能点击切换,操作效率较低。

几种常见移动导航模式详析

另外,就是固定选项卡和滑动选项卡,两者都可以直接点击或左右滑动切换选项,且一级和二级导航都能使用。区别就是滑动选项卡可以有更多选项,且能直接通过手指滑动导航找分类,适用于相关类别多的应用,如下图的电子商务网站。

几种常见移动导航模式详析

下拉菜单式

现如今,下拉菜单式导航并不常用。下拉菜单和导航抽屉一样,是以突出内容为主的导航模式;一般位于产品顶部,通过点击呼出导航菜单。

由于导航菜单位于屏幕顶部,不适合结合手势,操作负荷大,因此不适合需要频繁切换功能,且能在一定程度上节省屏幕空间。一般情况下,下拉菜单很容易被滑动选项卡取代,且滑动选项卡可以结合手势操作,使用效率更高,这也是现在下拉菜单很少被使用的原因,除非你的下拉菜单选项中有很明显的优先级区分。

比如下图所示,图8的新浪微博首页作为默认选中项,显示和用户相关的所有微博,常态下用户只需要一直浏览下去即可,很少需要主动点击切换,除非想要筛选某些特定的微博内容,此处的内容优先级很容易区分。同理,图9也是如此,用户关注更多且更感兴趣的是以项目为维度的内容分组,因此用下拉菜单来表现。另外,多数菜单是以点击后弹框的形式出现,也有一些是从底部滑出一个新的页面调出菜单,如下图中的图10。

几种常见移动导航模式详析

宫格式

宫格式导航,是一种类似于手机桌面各个应用入口的导航方式。每个入口往往是比较独立的信息内容,用户进入一个入口后,只处理与此入口相关的内容,如果要跳转至其他入口,必须要先回到入口总界面。

这种导航经常用于工具类app中,它的优点是功能拓展性强,可增加多个入口。缺点是单页承载信息能力弱,层级深,不适合频繁任务切换。如下图的美颜相机就是标准的宫格式结构,每个功能类似于独立的app,且作为一级导航使用,这种表现形式现在越来越少。而剩下的其他三张图示,属于宫格式的一种变形,我称之为数据入口,这种只作为各种大数据入口的导航模式现在更多作为二级导航使用,特别是平台类产品。

几种常见移动导航模式详析

列表式

列表式导航也是一种十分常见的导航模式,纯粹的列表导航很少见,一般都是搭配着别的导航模式一起使用,大多作为二级导航。

列表中可以放置图片、标题或者详情文字等来展示信息,列表本身是一个传达信息效率很高的载体,因此使用列表的时候要注意,每个列表所占的屏幕空间,以及每屏能显示多少条列表等。

如下图所示的图1-1采用了列表的分组模式,图2-2中列表中的每项信息可能都会影响用户的点击转化,所以如这种形式的列表,细节信息很重要。

几种常见移动导航模式详析

图1-3和图1-4为二级列表,点击列表右侧的小符号,可以展开或者隐藏信息,这方便用户查找信息并快速定位,多数情况下,点击右侧小符号可能会出现快捷编辑模式或者部分详情信息,便于用户直接编辑或者浏览。而点击整个列表,通常会进入新一级的详情页面。因此,设计师在设计的时候要注意。

图示式

图示式是一种更加可视化的导航,它能根据页面内容的变化及时更新图片,适合以图片为主的内容,像新闻、美食、旅行、视频图片等经常使用,常作为二级导航。

由于图片可能需要经常更新,因此需要配置固定的栏目或标题,防止不断更新的图片让用户找不到入口。这种形式的导航常常会采用网格布局,如下图所示,每行基本上会有1-3个图示单位,不同的网格布局决定了每屏容纳的图示个数,因此用户浏览效率及点击转化率也会有所不同。

几种常见移动导航模式详析

幻灯片式

幻灯片的导航方式,适用于图片或整块内容的并列展示,用户通过手指左右滑动来切换当前内容。正常情况下,幻灯片的数量不宜太多,最好控制在7-8个以内,避免用户操作疲劳。如下图所示,使用幻灯片设计最好在设计上提供视觉暗示,让用户清楚的知道所处的位置以及幻灯片数量,例如添加分页标识码,或者隐喻还有下一张图片等。

几种常见移动导航模式详析

 

本文由 @butter 原创发布于人人都是产品经理 ,未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/31769/

(0)
CatherineCatherine
上一篇 2017-06-02 17:06
下一篇 2017-06-02 20:09

相关推荐

  • 设计思考:如何传达APP中的隐藏手势?

    手势本是能够帮助用户更好的使用产品,但手势交互常被隐藏起来,因此用户如果没有发现隐藏手势,便失去了设计这些隐藏手势的功能作用。那么到底该如何向用户传达APP中的隐藏手势呢?看看这篇文章,或许你就知晓。

    2017-05-10
  • 最浓缩的概念:什么是用户体验,用户体验设计怎么做?

    如约而至,这是体验三篇文章中的最后一篇。本篇我会说明一下何为UE,及UED的本质是什么。其实,我相信很多人其实能感觉到体验是什么,但是一直没能用一句话来表达出准确的意思。那,在说明之前先说什么是User Experience Desgin(UED),为什么大多称之为UXD呢?

    2017-05-25
  • 稳健中求发展,中普集团兼顾合规安全与用户体验

    互联网金融行业在中国发展已有十余年,金融市场几经波折后进入合规发展阶段,2018年可谓是监管最为严格的一年,优胜劣汰,有实力的平台纷纷积极拥抱监管,合规运营。中普集团作为科技金融的重要践行者和普惠金融的倡导者,一直坚持“合规”运营这一核心宗旨,自成立起就坚持依法合规,诚信为本,全心全意为用户和社会着想。从2017年的金融工作会议召开以后,合规备案是整个行业最为关心的问题,也是各大平台稳健发展的核心要务。中普集团认为,现阶段平台除了要积极...

    2018-04-07
  • 内部教程!超实用6步透视网易设计规范(附完整PDF下载)

    这是一份不可多得的网易干货资料,更是一份非常标准的设计规范准则!产品经理&视觉设计必看!

    2016-08-29
  • 用户体验才是真正的“一句顶一万句” 安徽燕之坊食品公司用勤哲软件实现生产、经营和管理数据的互联互通

    统计数据显示,截止2017年底,国内食品工业企业超过4万家,主营业务收入占全国工业的比重十分之一强。在实施制造强国战略和推进健康中国建设中,食品工业作为传统的“以食为天”的民生产业占据着不可或缺的重要位置。当前,食品行业在实现快速发展的过程中,面对城乡居民安全、多样、健康、营养、方便的食品消费需求时,与其他行业一样面临着转型、升级的动能和压力。尤其是在食品质量安全水平和高品质食品有效供给方面,利用现代信息技术创新消除安全和质量隐患等领域...

    2018-02-11
  • 2016必掌握的交互设计趋势

    设计趋势是什么样的,出于各种原因,很多设计趋势在演进中逐渐消失,有的则甚正蜕变成为主流。作为一个专注于网页和平面设计的设计机构,我们对所有相关的技术和设计趋势都极度敏感。通过多位设计师们对2015的总结…

    2016-01-10
  • 转化率低是设计师的问题?这锅我们不背!

    市场反馈好不好是由那些自带话语权或流量的人或产品决定的,这些人或产品既左右了大部分人的喜欢和习惯,又代表了大部分人的喜欢和习惯。转化率=(产生购买行为的客户人数 / 所有到达店铺的访客人数)× 100%

    2017-08-04
  • 如何完美碾压用户体验职位面试 【UXRen译#152】

    作者: Patrick Neeman |  翻译:Shea ,校审:Ariel   当你成功进入了电话面试或者面对面面试的阶段,这就意味着你已经通过了最艰难的考验:你已经具备了在该公司工作的技能。现在要被评估是否具备软实力以及能否…

    交互专题 2017-08-07
  • 掌握交互设计思想,从用户视觉心理开始

    什么是交互设计师?在刚刚开始研究交互的时候,我也经常问自己:什么是交互设计师?这两年“用户体验”这个词非常火,以前在技术沟通中经常生硬的用“用户体验”这个词来说服技术,难免有些空洞。其实用户体验不止于产品的交互设计有关,还包含产品的内容和服务、表现形式,大部分情况下产品的内容和服务才是整个用户体验的核心。而我所理解的交互设计就是把表现形式、内容和用户行为相互协调的一门学问,是影响用户体验的关键因素之一。另外,按国内就业情况来看,目前交互...

    2018-04-26
  • Don't make me think 读书总结

       这本书算是一本很入门的交互设计图书,很多内容其实都是通过以前的积累已经知道的内容。我相信对于大家来说,“要记得在每个页面上加导航栏”这种提醒已经不需要了。所以,我在下面列出一些看完过后,觉得可以温习…

    2015-08-20