网页端、移动端导航设计模式全解

​界面中的组件设计有很多通用的交互设计模式。

产品导航做为界面上最常见的组件同样也有多种被大家熟知的设计模式，模式化的组件为产品经理快速、有效的创建产品界面、构建信息架构提供的方便的应用。

接下来，我们就看一看在网页端、移动端常见的导航设计模式有哪些：

WEB界面不同区域的导航模式

1.顶部区域导航

界面的header称之为页首区域或顶部区域。

顶部区域的导航对一个产品的用户体验至关重要，根据用户的浏览习惯：从左到右，从上到下的浏览顺序，他们进入产品后顶部导航是他们首先看到的内容。

顶部水平栏导航是顶部区域导航的主要模式。常做为产品主导航，放在产品所有界面顶部区域。

有些产品经理认为顶部内容没什么可设计的，无非是logo和一些文字链接组合起来。但事实并不是这样。

首先，我们来看一下顶部区域常包含的内容有哪些：

l品牌logo

l菜单

l搜索框

l提示消息

l登录／注册

l联系方式

l语言切换

l其他产品或者移动端app的下载链接

l行为召唤链接（我要投稿，我要发博）

这些都是顶部区域中常见元素，设计时根据产品自身实际情况取舍。

在这些内容中，以导航形式存在的菜单尤为重要，常见的导航设计模式分为两种：

模式一：汉堡导航

顶部区域很小，导航中的内容很多，怎么办？当然要通过内容的取舍完成导航设计。

取舍意味着保留和舍弃，在交互设计中舍弃不代表不要某些内容，而是隐藏一些内容，在用户发起交互后再显示。这样的隐藏，体现了按需查看的原则，当用户需要时再展现在用户面前。

汉堡导航就是这种典型思路的导航模式。

常见的汉堡导航由三条水平线条构成，像两层面包一层肉的汉堡包，所以我们形象的称之为汉堡导航。

汉堡导航通过将一些次要的信息隐藏来节约界面的使用空间，使顶部区域更加清爽简洁，用户注意力可以更好的集中在重要的信息上。

汉堡导航在web界面导航设计中使用频繁，用户很熟悉这种导航模式，不会额外增加用户的学习成本。

汉堡导航设计时需要注意的是汉堡按钮很容易被用户忽视，所以在设计的时候要通过按钮形式的设计来适当的引导用户。也就是说，汉堡按钮设计要做到清晰展示，又不占据太大空间。

模式二：水平栏导航

顶部水平栏导航设计模式有时伴随着下拉菜单，当鼠标移到某个项上时弹出它下面的二级子导航项。

顶部水平栏导航一般特

导航项是文字链接，按钮形状，或者选项卡形状

水平栏导航通常直接放在邻近网站logo的地方

它通常位于折叠之上

顶部水平栏导航的缺点

顶部水平栏导航最大的缺点就是它限制了你在不采用子级导航的情况下可以包含的链接数。对于只有几个页面或类别的网站来说，这不是什么问题，但是对于有非常复杂的信息结构且有很多模块组成的网站来说，如果没有子导航的话，这并不是一个完美的主导航菜单选择。

何时使用顶部水平栏导航

顶部水平栏导航对于只需要在主要导航中显示5-12个导航项的网站来说是非常好的。这也是单列布局的网站的主导航的唯一选择(除了通常用于二级导航系统的底部导航)。当它与下拉子导航结合时&#