ui

先说说导航栏的定义和作用吧。

导航栏本质上就是超链接，帮助用户快速访问某个特定地址。

导航栏强调合理性、逻辑性，它让整个产品（Web or App）结构清晰，条理分明，指引用户当前所处的位置，防止其有迷失感。

现在一说“导航栏”这3个字，大家的第一反应都是移动端UI的设计，但在此之前，却是Web独领风骚数十年。

在这里只讨论主流的导航栏设计，那些太小众前卫化的不在范围之内。

导航栏的设计语言比较模糊混淆，大多数网站或者是App并不是单一导航设计语言，而是多种混合使用。

Web中比如主导航栏是顶端，辅导航栏在左侧；又或者反着来，主导航栏左侧，辅导航栏顶端。

特征网站：GitHub、微博

GitHub 微博

App中也是一脉相承，两者混用。有顶栏+底栏的、有顶栏+侧边栏的、还有三者一起用的。

特征App:36氪、网易云、游民星空

App

Web导航设计

在Web导航栏设计中，还有一个经久不衰的设计要点是面包屑导航。

面包屑作为一种视觉指引，为用户揭示出网页的层次结构，也正是因此，面包屑成为了用户了解网站背景信息的重要途径。关于面包屑的讲解与使用，不再细讲，这里推荐一篇文章。

1.顶部导航栏

Web中最常见最中规中矩的导航栏，不会犯错，不太出众，让用户快速了解产品及功能，快速找到自己想要的内容。

1.1顶部导航栏中又细分好几种，有以魅族、Pasoti为首的顶部导航栏+全屏Banner，适用于产品线短内容少、重营销宣传性质为主的网站。

魅族 Pasoti

1.2顶部导航栏+卡片式，适用于产品功能较少， 注重视觉风格的统一和图文的浏览效率

特征网站：Dribbble、花瓣

Dribbble 花瓣

1.3顶部导航栏+Feed流，适用于强内容展示网站

 特征网站：知乎、Facebook

知乎 Facebook

2.巨型导航栏

多运用在拥有大量细分内容的网页，比如电商，比如电商，比如电商。                                           

像淘宝这种就是典型混淆使用，不知道各位在逛淘宝的时候有没有用过最顶端导航栏中的“网站导航”。

特征网站：淘宝、小米

淘宝 小米

3.侧边导航栏

侧边导航栏分左侧和右侧，一般都在左侧，因为左侧符合我们的习惯，从左往右写字、从左往右读书，Office的设置在左边，Eclipse、AS也在左边，左边更容易聚焦，有更多的点击率。

适用于几乎所有的网站，尤其是有很多子分类内容的网站

 特征网站：简书（左）、动画元素导航（右）

简书 动画元素导航

App导航设计

纵观互联网的发展路径，我们可以了解到发展趋势是逐渐的从Web过渡到移动端，而移动端导航栏的玩法和Web大相径庭而又殊途同归，仔细观察能在App上看到许多Web设计语言的影子。

1.底部导航栏

如果说Web导航栏国王是顶部导航栏的话，那移动端导航栏的国王必定是底部导航栏无疑，而这位国王的领土更是随着iOS的壮大飞速扩张。

直观易懂、简单便捷、快速上手、跨平台 通用性……许许多多的优点都在它身上，很多遵守着Material design规范的App在版本迭代升级中都纷纷转投阵营，一头扎进底部菜单栏中，比如现在的国民应用“微信”，再比如小众的App应用市场“酷安”。

无他，底部导航栏真的是通杀级别的，适用于所有的App，没有MD的极简，没有抽屉式的隐藏，上至八十岁的老奶奶下至三岁的小萝莉，都能把底部菜单栏玩的不要不要的。

特征App：微信、QQ、知乎、Airbnb、支付宝、淘宝

底部导航栏

底部导航栏还进化出另外一种模式，所谓的“舵式导航”,我不太了解为什么取这个名字，因为整个底栏像舵轮？

这种设计更加突出中间重要且操作频繁的主功能

特征App:微博、闲鱼、得到

舵式导航

2.顶部导航栏

适用于平衡内容和分类的展示，每个类别的使用率都很高

特征App:网易云、读读日报、豆瓣电影

顶部导航栏

3.侧边导航栏

侧边导航栏可以有效的节约屏幕的空间，创造更沉浸式的浏览环境，减少次要信息的干扰，同时可以将完全不相关的功能整合在一起

适用于在使用过程中需要不断的在导航选项间进行来回切换操作、需要频繁的在低层级和高层级页面之间来回跳转、导航选项较多、层级结构较深的App

特征App：百词斩、Telgram、图解电影

侧边导航栏

万变不离其宗，Web导航栏变来变去就那么几种：“顶栏”“侧边”，App的导航栏亦是如此：“顶栏”“底栏”“侧边栏”，正如同一生二二生三三生万物，这几个有限的导航栏创造了现今无限的交互。

未经允许，谢绝转载