小于 1 分钟
其实网页或者 App 中的导航(Navigation)这个概念远不止我们熟悉的导航栏，而是一个更加广的交互概念: 引导用户和产品进行有效的交互，实现用户的目标。本文将详细地介绍界面的导航设计。
一个网页或 App 产品要想有很好的可用性(usability)，需要做好的最基本的一点是导航的设计或者说引导用户的设计。如果用户在使用一个网站或者 App 的时候找不到自己的处在什么位置或者该怎么去到想要的页面，那么视觉效果再怎么有创意或者抓人眼球都无法弥补产品的缺陷。无论您的产品想满足用户什么需求，让用户知道产品当下的状态和每一步操作之后的结果是对用户最基本的尊重。
导航
大约 18 分钟
评判导航菜单的设计好坏有多种不同的维度，由于它太过常用，它的好坏并没有得到更多重视。实际上，导航作为网站设计的一个基础组成部分，对于可用性的要求并不低。以下是一些常见的设计技巧。
超大菜单栏
即使许多设计师不喜欢这样的设计，而且从美学的角度上它也是反智的，但是对于许多客户而言，它依然是一个客户反响很好的设计方案。但是这样的设计对于用户可能还是有一些困扰，并且没有提供真正有用的功能。
只有极少数的电商类网站能够真正适合使用超大导航栏的，因为他们确实需要足够的空间来承载大量的导航栏目。不过过大的导航栏可能还是存在一些可用性问题的。
大约 6 分钟
其实网页或者 App 中的导航(Navigation)这个概念远不止我们熟悉的导航栏，而是一个更加广的交互概念: 引导用户和产品进行有效的交互，实现用户的目标。
导航栏究竟在哪里
导航栏 Navigation Bar，也简称为 Navbar。一定会有不少刚入门的 UI 新人，在诸多的 Bar 控件中，难以区分它所指代的区域。
在 iOS 上，导航栏是指显示在应用程序顶部，位于状态栏下方的容器区域，层级应高于当前页面内容。
在安卓上，Google 公司在 Material Design 中也赋予了它同样的定义，但是却给了它另一个名称，顶部应用栏(Top App Bar)。
大约 8 分钟
厌倦了传统顶部导航的设计师，越来越偏爱侧边栏导航了。这种常见于页面左侧的侧边栏设计，已经成了许多独树一帜的设计师的选择了。
无处不在的侧边栏导航
侧边栏导航和菜单设计的演变有着密不可分的关系。响应式设计的流行使得向移动端偏移的网页设计，不得不采用菜单栏来替代传统的导航模式，其直接的影响就是催生了汉堡图标。
随着汉堡图标的流行，弹出式的菜单也越发的常见。其中有些菜单是完全开放式的，而有的菜单则带着下拉框，还有一部分直接是弹出的菜单界面。而为了兼容大量的移动端界面，下拉和弹出式的菜单大多采用的是纵向布局——而这和侧边栏的设计，是如此的相似。换句话来说，这种垂直的导航就是一种弹出式的侧边栏导航。
大约 5 分钟
底部导航栏图标重要性及维度
重要性
底部导航栏的图标是路牌，承担着指路的作用，给用户指明进入产品后可以分别通往什么页面。早期的底部导航栏是单一的指路功能，经过多年的交互设计迭代后，附加了「信息展示」和「引导操作」的作用，这点会在下文中详细阐述。
三个重要评估维度
品牌调性
品牌调性决定了图标的体量感、差异化和创意延展。怎样评估图标设计能够体现出品牌调性呢? 最简单直接的方法: 截屏首页，不看顶部栏，仅从底部导航栏能看出来这是什么产品，就算成功体现了品牌调性。
大约 5 分钟
导航分很多类别，如标签导航、抽屉式导航、九宫格导航、混合组合导航、列表式导航、Tab 导航、平铺导航等等。
现在用到更多的导航其实是标签导航(tabbar)，它随处可见，相信目前大部分的 App 用的导航都是标签形式的。
理清产品框架
相信很多设计师在设计导航时，一上来就开始 YY 自己的导航要放什么，因为这个时候他已经被标签形式的导航洗脑了，认为自己的 App 就应该用标签导航。然后继续 YY 产品的功能，自己理出个最适合的，放上去就好了。
其实不然。做好一个导航要考虑的问题其实非常多，还要考虑产品后期发展的延展性。必须定好整个产品的框架，把最核心的功能放在第一层页面，再根据产品的深度来设计导航的模式。
大约 3 分钟