导航栏家族大揭秘

前言

导航设计在产品或者页面中担任重要的角色,能在不同的场景下帮助用户快速找到自己想要的东西。我们如何区分在什么样的场景中使用那种导航设计是我们作为设计师必须要了解的,接下来我们会讲到我们经常用的 Tab 导航栏、抽屉式侧边导航栏、宫格式导航栏以及列表式导航栏。

目录

  • 1.导航栏定义
  • 2.Tab 导航栏
  • 3.抽屉式导航栏
  • 4.宫格式导航栏
  • 5.列表式导航栏
  • 6.总结

1.导航栏定义

导航栏对于用户而言,最大的意义是帮助用户快速找到自己想要的“东西”;对于产品目标,可以通过“信息架构设计”去引导说服用户。好的导航设计符合用户的心智模型,能帮助用户快速了解产品的核心功能以及组织架构,而差的导航设计简直就一场噩梦!

2.Tab 导航栏

Tab导航栏是我们最常见的导航设计,由于功能架构清晰,内容暴露,保证页面内容突出,所以适用场景非常广泛。由于功能和使用场景不同,所以 Tab 导航栏分为底部导航栏和顶部导航。
底部导航栏底部导航栏是“产品信息功能架构“的体现,从内容和功能需求的角度上来讲,底部导航栏是通过对内容和需求的层层筛选以及分类归纳得到,所以基本都用于“一级导航”,选项内容通常在3~5个之间。从交互的角度上来讲,底部导航栏处于用户点击的最佳位置,方便用户操作。从设计的角度来讲,为了帮助用户快速识别一般是 icon 加文字信息的组合方式。

我们以知乎和 LOFTER 为例,底部导航是对整个产品的核心功能架构的分类,且处于拇指点击的最佳位置,设计上信息明确,能帮助用户快速选择用户想要的“功能”。
顶部导航栏顶部导航栏对于底部导航栏而言,是对其内容的延展。从内容和功能需求的角度上来讲,顶部导航栏是对页面内的内容进行分类,用于满足用户的浏览查看的需求;从交互的角度上来讲,顶部导航栏在屏幕顶端的位置,单手操作很难点击到,但是现在基本都会通过添加手势交互来解决手指不能方便点击的问题。从设计的角度上来讲,基本都会采用“纯文字”标签的形式,减少其他元素的干扰,帮助用户可以快速选择自己的想要的内容。

我们以今日头条和豆瓣为例,通过上图我们可以看出,设计上采用了“纯文字”标签的形式,减少了其他的干扰元素,使得页面中我们可以通过顶部导航栏的不同的标签在同一页面中快速浏览不同的内容。

3.抽屉式导航栏

曾经抽屉式导航风靡一时,由于将菜单栏的隐藏,显得画面干净整洁,所以受到了广大设计师的青睐,就连 Facebook 也曾为它做过 A/B test 测试,但最终测试结果是:用户的周平均使用率大幅度下降。这是因为抽屉式侧边栏从交互的角度上来讲,需要进行二级点击,导致信息不足够暴露,使得用户不容易发现,提高了用户的使用成本。所以用户会经常“懒得点击”或“忘了点击”;而且从交互的角度上,抽屉式导航的内容基本都会采用列表的形式,屏幕上半部分的选项单手的操作的时候比较难点到。从使用场景的角度上来讲,作为一级导航的话,抽屉式侧边栏导航虽然不够突出,但是可以突出app 的沉浸感,例如“单读”这一类注重内容的 app,或者像“滴滴”这类功能目的比较强的 app。

我们以单读和滴滴为例,单读为了提升沉浸感,侧边栏导航选用了全屏弹出的设计样式,而“滴滴”的功能目的性较强,所以在设计上只弹出屏幕的3/2的位置,让用户看到当前所操作的页面,提醒用户当前的任务和目的。
将侧边栏导航应用在二级导航中,则不需要像一级导航栏一样进行隐藏,所以在信息展现上充分暴露,从使用场景的角度来讲,侧边栏在二级导航中适用于内容品类丰富的页面;而从交互的角度上来讲,由于展示的信息较多,部分产品会添加上下手势滑动来辅助用户切换内容。设计上一般适用纯文字标签的形式,提高用户的信息获取率。

以“网易严选”为例子,左侧的二级导航栏帮助用户对商品进行分类,这样减少了用户在寻找商品的时多余的交互步骤,同时网易严选结合了上下滑动的手势交互辅助用户切换,纯文字标签的设计形式减少其他因素的干扰,帮助提高用户对信息的获取效率,帮助用户快速选择和浏览商品,进而减少页面的跳出率。

4.宫格式导航栏

宫格导航优势在于可以展示较多的信息展示而且信息相对独立,所以它的使用场景更加适用于内容信息架构丰富的页面。当内容较多的是也会一定程度上带来选择上的困难,所以这里我们需要对宫格导航里的内容再次进行分类,我们以今日头条和熊猫直播两个 app 为例。

在设计展现形式上,不同的类型的 app 会根据实际的功能业务进行调整,例如今日头条为了能让用户快速选择自己的感兴趣的频道,减少其他因素的干扰,所以选择了纯文字标签的形式。

熊猫直播中选用了 icon 加文字的组合,因为针对视频用户他们对图形化的内容更加感兴趣。为了防止内容过多而导致用户选择困难,两个 app 都对内容进行了内容分类。

5.列表导航栏

列表导航由于条目清晰、层级明确被广泛应用,一般应用在二级页面,而在一部分功能性较强的的 app 中也担任着以及导航的作用,例如有 QQ邮箱:

由于所要展示的信息较多,所以会对其内容进行分组断开,帮助提高用户的操作效率,防止用户选择困难。在设计上列表导航的设计特点一般是自左到右 icon 加文字的组合,符合人们的阅读习惯,通常页面内容的优先级排列是由功能的重要性和用户的使用频率决定的。

在二级页面中,例如 TIM 相对设计上弱化了 icon 的设计,突出了信息设计,并且做了信息的分组,能帮助用户快速选择切换。

6.总结

我们通过对主流的 Tab 导航和抽屉式侧边栏导航、宫格式导航栏以及列表式导航的分析,导航设计作为产品或页面中重要的组成部分,设计工作中我们需要从产品的功能信息架构来确定导航栏的等级,结合用户需求以及产品业务目标来选择适用那种导航栏的设计,同时从交互和设计的角度来兼顾用户体验。
参考链接:
移动app设计: Tab导航是否是大势所趋? https://www.jianshu.com/p/b817ce73573f
tab设计总结 https://www.jianshu.com/p/aad725558d8c 交互设计实战!TAB导航与侧边抽屉导航的巅峰对决 https://www.jianshu.com/p/217b96aa6bed 从逛商城学习产品设计:信息架构梳理如何从小白到精通? https://zhuanlan.zhihu.com/p/20042697

海盐社(公众号)

作者:姜正

(0)

相关推荐

  • 奥雅之光家族成员大揭秘

    奥雅之光家族成员大揭秘 步骤/方法 01 奥雅之光艾米女神 她是奥雅大陆上的全能女神和战神.她在人们衷心的信奉和虔心的祈福中,从奥雅之树中诞生,点化了大陆上三个种族的天赋,引领他们建设家园,共同抗击黑 ...

  • 怎样用PPT制作网站导航栏

    有很多朋友问我怎么样做一个仿网站类型的PPT,为了方便大家学习,今天就做一个这样的PPT教程。而对于仿网站类型的PPT所遇到的最大难题就是导航栏的制作,今天我们就从最难的地方来开始吧。(提供PPT源文 ...

  • Win10系统文件资源管理器左侧导航栏如何隐藏U盘

    win10操作系统在操作与管理上有很大变化,比如在win10系统下使用U盘时,在文件资源管理器左侧导航栏也会显示U盘,虽然我们可以通过导航栏来快速打开管理U盘,但绝大部分的用户还是习惯原来的传统操作模 ...

  • word2010版文档打开导航栏和标尺的方法

    word更新了2007,2010和2013等版本,目前大家都有用,不过刚开始使用2010版就会找不着北,我就是这样,一开始都是不知道导航栏在哪,下边小编将为大家介绍一下word2010版文档打开导航栏 ...

  • 网页顶部导航栏设计总结

    网页中的header,一般我们称之为顶部导航栏,这里为了行文方便,以下都简称顶部栏.顶部栏对于一个网站的用户体验来说是至关重要的,因为根据用户的浏览习惯(从左到右,从上到下),当他们进入一个新的网站, ...

  • 设计语言 – 侧边导航栏/分页

    今天给大家讲解下侧边导航栏.分页.步骤条的绘制方法. 上几篇文章中有些内容与这章相符,重复的内容也就不多讲了.不理解的朋友们建议先阅读前几篇文章. <设计语言-按钮> <设计语言-按 ...

  • 荣耀8桌面整理/壁纸/小工具/风格/导航栏/文件夹

    荣耀8添加或删除空白页面,更换壁纸,添加窗口小工具,设置桌面切换效果,桌面设置,自定义通知栏及图标,更改桌面风格,设置导航栏,创建文件夹#资料课代表 | 讲窍门# 如果有一个干净整洁的桌面,不但看起来 ...

  • 使用HTML做导航栏的代码有几种方法?

    导航栏基本都是横排.竖排列的,看到的大部分都是横排排列的,每个人都有自己的方法做出好看的导航排列,方法有很多种,选择自己快速的方法即可. 操作方法 01 横排无非是本身标签是行内标签或者将块状标签添加 ...

  • 华为手机屏幕下方的导航栏不见了怎么找回?

    操作方法 01 找到手机"设置"并点击打开.通常没有个性化设置的情况下,打开手机后,在主界面上,就会有设置选项,图标是一个齿轮,下面有"设置"二字,如图所示. ...