后台回复进阶查看《各行业产品设计方案》界面中的组件设计有很多通用的交互设计模式。产品导航做为界面上最常见的组件同样也有多种被大家熟知的设计模式，模式化的组件为产品经理快速、有效的创建产品界面、构建信息架构提供的方便的应用。接下来，我们就看一看在网页端、移动端常见的导航设计模式有哪些：
WEB界面不同区域的导航模式1.顶部区域导航界面的header称之为页首区域或顶部区域。顶部区域的导航对一个产品的用户体验至关重要，根据用户的浏览习惯：从左到右，从上到下的浏览顺序，他们进入产品后顶部导航是他们首先看到的内容。顶部水平栏导航是顶部区域导航的主要模式。常做为产品主导航，放在产品所有界面顶部区域。
汉堡导航通过将一些次要的信息隐藏来节约界面的使用空间，使顶部区域更加清爽简洁，用户注意力可以更好的集中在重要的信息上。
汉堡导航在web界面导航设计中使用频繁，用户很熟悉这种导航模式，不会额外增加用户的学习成本。汉堡导航设计时需要注意的是汉堡按钮很容易被用户忽视，所以在设计的时候要通过按钮形式的设计来适当的引导用户。也就是说，汉堡按钮设计要做到清晰展示，又不占据太大空间。=============模式二：水平栏导航顶部水平栏导航设计模式有时伴随着下拉菜单，当鼠标移到某个项上时弹出它下面的二级子导航项。顶部水平栏导航一般特征导航项是文字链接，按钮形状，或者选项卡形状水平栏导航通常直接放在邻近网站logo的地方它通常位于折叠之上
顶部水平栏导航的缺点顶部水平栏导航最大的缺点就是它限制了你在不采用子级导航的情况下可以包含的链接数。对于只有几个页面或类别的网站来说，这不是什么问题，但是对于有非常复杂的信息结构且有很多模块组成的网站来说，如果没有子导航的话，这并不是一个完美的主导航菜单选择。何时使用顶部水平栏导航顶部水平栏导航对于只需要在主要导航中显示5-12个导航项的网站来说是非常好的。这也是单列布局的网站的主导航的唯一选择(除了通常用于二级导航系统的底部导航)。当它与下拉子导航结合时，这种设计模式可以支持更多的链接。2.侧边栏/竖直导航模式一：侧边竖直导航侧边栏导航的导航项被排列在一个单列，一项在一项的上面。它经常在左上角的列上，在主内容区之前——根据一份针对从左到右习惯读者的导航模式的可用性研究，左边的竖直导航栏比右边的竖直导航表现要好。侧边栏导航设计模式随处可见，几乎存在于各类网站上。这有可能是因为竖直导航是当前最通用的模式之一，可以适应数量很多的链接。
它可以与子导航菜单一起使用，也可以单独使用。它很容易用于包含很多链接的网站主导航。侧边栏导航可以集成在几乎任何种类的多列布局中。侧边栏导航的一般特征文字链接作为导航项很普遍(包含或不包含图标)很少使用选项卡(除了堆叠标签导航模式)竖直导航菜单经常含有很多链接
竖直/侧边栏导航缺点因为可以处理很多链接，当竖直菜单太长时有时可能将用户淹没。尝试限制你引入的链接数，取而代之可以使用飞出式子导航菜单以提供网站的更多信息。同时考虑将链接分放在直观的类别当中，以帮助用户很快地找到感兴趣的链接。何时使用竖直/侧边栏导航竖直导航适用于几乎所有种类的网站，尤其适合有一堆主导航链接的网站。????????????????????????????????????????????????3.页脚区导航????????????????????????????????????????????????模式一：页脚次导航页脚导航通常用于次要导航，并且可能包含了主导航中没有的链接，或是包含简化的网站地图链接。
访客通常在主导航找不到他们要找的东西时会去查看页脚导航。页脚导航的一般特征页脚导航通常用于放置其它地方都没有的导航项通常使用文字链接，偶尔带有图标通常链接指向不是那么关键的页面页脚导航的缺点如果你的页面很长，没有人愿意仅仅为了导航而滚动到页面底部。对于较长的页面，页脚导航最好作为重复链接和简要的网站地图的地方。它不适合作为主导般形式。何时使用页脚导航\绝大多数网站都有这样那样的页脚导航，即使它只是重复其它地方的链接。考虑什么放在那有用，以及你的访客可能最想找什么。
WEB端&移动端常见导航模式1.Web端常见导航模式模式一：选项卡导航选项卡导航可以随意设计成任何你想要的样式，从逼真的，有手感的标签到圆滑的标签，以及简单地方边的标签等。它存在于各种各样的网站里，并且可以纳入任何视觉效果。
选项卡比起其它类别的导航有一个明显的优势：它们对用户有积极的心理效应。人们通常把导航与选项卡关联在一起，因为他们曾经在笔记本或资料夹里看见选项卡，并且把它们与切换到一个新的章节联系在一起。这个真实世界的暗喻使得选项卡导航非常直观。选项卡导航的一般特征样子和功能都类似真实世界的选项卡(就像在文件夹，笔记本等中看到的一样)一般是水平方向的但也有时是竖直的(堆叠标签)
面包屑导航的缺点面包屑不适于浅导航网站。当网站没有清晰的层次和分类的时候，使用它也可能产生混乱。何时使用面包屑导航。面包屑导航最适用于具有清晰章节和多层次分类内容的网站。没有明显的章节，使用面包屑是得不偿失。模式三：标签导航标签经常被用于博客和新闻网站。它们常常被组织成一个标签云，导航项可能按字母顺序排列(通常用不同大小的链接来表示这个标签下有多少内容)，或者按流行程度排列。
这种交互模式可以很好的提升顶部栏的易用性，但是这是建立在牺牲一部分页面空间的基础上换来的，所以我们在使用的时候一定要谨慎。在上面我一直强调顶部栏设计要简洁明了，要让用户一眼就能看明白。因为顶部栏属于导航体系的一部分，是为了避免用户迷路，帮助他们更好的使用产品。归根结底用户使用你的产品是为了你提供的内容或服务，而不是来看狂拽酷炫的顶部栏。所以我们不能本末倒置，将顶部栏做的过于花哨，进而分散用户的注意力。此外极简风格很适合响应式设计，可以在多设备上追求一致的用户体验。简约设计的另一大优点就是，设计师会经常遇到临时的迭代需求，领导突然让你在这里加一个按钮那里加一个文字标签，简约设计为这种突然的迭代需求提供了操作空间。2.移动端常见导航模式模式一：Tab/分段控件导航栏Tab左右切换顶部导航栏与分段控件顶部导航栏，都是顶部有多个标题切换的导航栏样式，分为选中标题与未选中标题，如下图：
分段控件顶部导航栏一般有2~5个可选项，且不能左右滑动。Tab左右切换顶部导航栏的可选项可以扩展很多(如爱奇艺的首页顶部Tab切换有24个可选项)，并且可以左右滑动切换，选中样式也比较丰富，常见的有底部加上小短线、字体颜色变化、字号放大等(多个合并使用更能突出选中标题)，如下图：
模式二：通栏导航栏通栏导航的背景层一般与下方的模块打通了，在视觉上看起来更为统一，还能一定程度上节约界面空间。如下图：
通栏导航栏常用在电商、旅游等界面复杂或是需要烘托氛围的界面中（多伴随着背景处理），有些也会放在顶部通栏Banner上，节省空间的同时减少割裂感。通栏导航栏的背景处理方式一般有三种:1.特殊背景处理：与下方模块整体风格保持一致，多采用与下方一致的图片背景；2.颜色、渐变背景：采用纯色或是渐变背景，常见于卡片风格的界面；3.黑色透明渐变蒙层：采用一层渐变蒙层，常见于图片Banner上，保证导航栏文字的可识别性。
上图中，豌豆公主的顶部导航栏整体下移，并且减小了搜索框的高度，提高屏幕的利用率。
全文完，更多精彩内容碼上看
