单配置就能实现手机、PC 网页中滑动、焦点轮播图、tab 切换和触摸导航等大部分功能。

js 滑动特效插件

Swiper 是一款纯 javascript 打造的滑动特效插件，主要用对移动端 web 开发中的内容触摸滑动需求，同时兼容 PC 网页。该插件团队维护多年，非常稳定，是移动端网站滑动需求的重要选择。

插件特性

• 应用广泛，轮播图类插件排名第一
• 纯 javascript 打造，无第三方依赖
• 上手简单，中文文档详细，代码例子充足
• 支持在 React / Vue / Angular 等主流框架中作为组件使用

所有滑动需求，Swiper 全搞定

用户界面的滑动需求在移动开发中太常见了，前端开发者在面对不同功能模块的需求，往往需要找几个插件或者组件库来完成。而 Swiper 很能打，大多数情况下都是一个插件满足左右滑动切换功能需求。

Swiper 现在已经更新到 Swiper 6，是一款完成度高、稳定且生态完善的 js 插件，在官网大量的 demo 下，不仅可以满足常见的banner焦点图、菜单和侧滑等常规需求，也能轻松应对 3D 旋转、视差切换等酷炫切换特效，像腾讯、阿里、字节跳动等很多耳熟能详的大厂都在使用。

免费开源说明

Swiper 自发布以来一直基于 MIT 协议开源，使用完全免费，能够用于任何个人和商业项目。

关注我，持续分享高质量的免费开源、免费商用的资源。

↓↓点【了解更多】查看本次分享的网址。

台回复 进阶 查看《各行业产品设计方案》

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

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

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

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

1.顶部区域导航

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

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

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

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

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

l品牌logo

l菜单

l搜索框

l提示消息

l登录／注册

l联系方式

l语言切换

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

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

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

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

模式一：汉堡导航

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

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

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

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

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

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

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

=============

模式二：水平栏导航

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

顶部水平栏导航一般特征

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

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

它通常位于折叠之上

顶部水平栏导航的缺点

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

何时使用顶部水平栏导航

顶部水平栏导航对于只需要在主要导航中显示5-12个导航项的网站来说是非常好的。这也是单列布局的网站的主导航的唯一选择(除了通常用于二级导航系统的底部导航)。当它与下拉子导航结合时，这种设计模式可以支持更多的链接。

2.侧边栏/竖直导航

模式一：侧边竖直导航

侧边栏导航的导航项被排列在一个单列，一项在一项的上面。它经常在左上角的列上，在主内容区之前——根据一份针对从左到右习惯读者的导航模式的可用性研究，左边的竖直导航栏比右边的竖直导航表现要好。

侧边栏导航设计模式随处可见，几乎存在于各类网站上。这有可能是因为竖直导航是当前最通用的模式之一，可以适应数量很多的链接。

它可以与子导航菜单一起使用，也可以单独使用。它很容易用于包含很多链接的网站主导航。侧边栏导航可以集成在几乎任何种类的多列布局中。

侧边栏导航的一般特征

文字链接作为导航项很普遍(包含或不包含图标)

很少使用选项卡(除了堆叠标签导航模式)

竖直导航菜单经常含有很多链接

竖直/侧边栏导航缺点

因为可以处理很多链接，当竖直菜单太长时有时可能将用户淹没。尝试限制你引入的链接数，取而代之可以使用飞出式子导航菜单以提供网站的更多信息。同时考虑将链接分放在直观的类别当中，以帮助用户很快地找到感兴趣的链接。

何时使用竖直/侧边栏导航

竖直导航适用于几乎所有种类的网站，尤其适合有一堆主导航链接的网站。

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍3.页脚区导航‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

模式一：页脚次导航

页脚导航通常用于次要导航，并且可能包含了主导航中没有的链接，或是包含简化的网站地图链接。

访客通常在主导航找不到他们要找的东西时会去查看页脚导航。

页脚导航的一般特征

页脚导航通常用于放置其它地方都没有的导航项

通常使用文字链接，偶尔带有图标

通常链接指向不是那么关键的页面

页脚导航的缺点

如果你的页面很长，没有人愿意仅仅为了导航而滚动到页面底部。对于较长的页面，页脚导航最好作为重复链接和简要的网站地图的地方。它不适合作为主导般形式。

何时使用页脚导航

绝大多数网站都有这样那样的页脚导航，即使它只是重复其它地方的链接。考虑什么放在那有用，以及你的访客可能最想找什么。

WEB端&移动端常见导航模式

1.Web端常见导航模式

模式一：选项卡导航

选项卡导航可以随意设计成任何你想要的样式，从逼真的，有手感的标签到圆滑的标签，以及简单地方边的标签等。它存在于各种各样的网站里，并且可以纳入任何视觉效果。

选项卡比起其它类别的导航有一个明显的优势：它们对用户有积极的心理效应。人们通常把导航与选项卡关联在一起，因为他们曾经在笔记本或资料夹里看见选项卡，并且把它们与切换到一个新的章节联系在一起。这个真实世界的暗喻使得选项卡导航非常直观。

选项卡导航的一般特征

样子和功能都类似真实世界的选项卡(就像在文件夹，笔记本等中看到的一样)

一般是水平方向的但也有时是竖直的(堆叠标签)

选项卡导航的缺点

选项卡最大的缺点是它比简单的顶部水平栏更难设计。它们通常需要更多的标签，图片资源以及CSS，具体根据标签的视觉复杂度而定。选项卡的另一个缺点是它们也不太适用于链接很多的情况，除非它们竖直地排列(即使这样，如果太多的话它们还是看起来很不合适)。

何时使用选项卡导航

选项卡也适合几乎任何主导航，虽然它们在可以显示的链接上有限制，尤其在水平方向的情况下。将它们用于拥有不同风格子导航的主导航的较大型网站是个不错的选项。

模式二：面包屑导航

面包屑的名字来源于Hansel和Gretel的故事，他们在沿途播撒面包屑以用来找到加家的路，这可以告诉你在网站的当前位置。这是二级导航的一种形式，辅助网站的主导航系统。

面包屑对于多级别具有层次结构的网站特别有用。它们可以帮助访客了解到当前自己在整站中所处的位置。如果访客希望返回到某一级，它们只需要点击相应的面包屑导航项。

面包屑的一般特征

一般格式是水平文字链接列表，通常在两项中间伴随着左箭头以指示层及关系

从不用于主导航

面包屑导航的缺点

面包屑不适于浅导航网站。当网站没有清晰的层次和分类的时候，使用它也可能产生混乱。何时使用面包屑导航。面包屑导航最适用于具有清晰章节和多层次分类内容的网站。没有明显的章节，使用面包屑是得不偿失。

模式三：标签导航

标签经常被用于博客和新闻网站。它们常常被组织成一个标签云，导航项可能按字母顺序排列(通常用不同大小的链接来表示这个标签下有多少内容)，或者按流行程度排列。

标签是出色的二级导航而很少用于主导航。他可以提高网站的可发现性和探索性。标签云通常出现在边栏或底部。如果没有标签云，标签则通常包括于文章顶部或底部的元信息中，这种设计让用户更容易找到相似的内容。

标签导航的一般特征

标签是以内容为中心的网(博客和新闻站)站的一般特性

仅有文字链接

当处于标签云中时，链接通常大小各异以标识流行度

经常被包含在文章的元信息中

标签导航的缺点

人们通常把标签和博客和新闻网站联系在一起(有时候也可能是电子商务网站)，所以如果你的网站与这些网站有本质的不同，它可能对你就没有帮助。标签也会给内容创作者带来一定量的工作量，因为为了使标签系统有效，每篇文章都需要打上准确的标签。

何时使用标签

如果你拥有很多主题，为内容打上关键词标记是很有利的。如果你仅有几个页面(可能你的网站是一个公司网站)，可能就不需要给内容打标签了。是否结合标签云或只是将标签包含在元信息中得取决于你的设计。

模式四：出式菜单和下拉菜单导航

出式菜单(与竖直/侧边栏导航一起使用)和下拉菜单(一般与顶部水平栏导航一起使用)是构建健壮的导航系统的好方法。它使得你的网站整体上看起来很整洁，而且使得深层章节很容易被访问。

他们通常结合水平，竖直或是选项卡导航一起使用，作为网站主导航系统的一部分。

出式菜单和下拉菜单导航的一般特征

用于多级信息结构

使用JavaScript和CSS来隐藏和显示菜单

显示在菜单中的链接是主菜单项的子项

菜单通常在鼠标悬停在上面时被激活，而有时候也可能是鼠标点击时激活

出式菜单和下拉菜单导航缺点

除非你在主导航链接边上放置一些标识(通常是箭头图标)，不然访客可能不知道那有包含子导航项的下拉或出式菜单，因此使这些标识很明显是非常重要的。同时出式菜单和下拉可能使得导航在移动设备上非常难用，所以要确保你的移动样式表处理了这种情况。

何时使用出式菜单和下拉菜单导航

如果你想在视觉上隐藏很大的或很复杂的导航层次，出式菜单和下拉是很好的选择，因为它让用户决定他们想看见什么，以及什么时候可以看见它们。它们可以用来在不弄乱网页的情况下按需显示很大数量的链接。它们还可以用来显示子页面和局部导航，并且不需要用户首先点击打开新的页面。

模式五：双层菜单

双层菜单的样式在近来的顶部栏设计中也愈发受到设计师的青睐。因为随着产品功能的不断增加与完善，渐渐出现了一些单层菜单无法解决的情况，那就是顶部栏需要展示的内容过多，而且某些特定功能不属于同一层级。为了更好的应对这类情况，设计师们创造性的使用双层菜单这种样式。

以上面的网站为例，上层的菜单有社交网络的链接（Facebook,Instagram和Twitter），企业logo，搜索框，购物车和汉堡按钮。下层的菜单有产品种类，营业网点地址，新闻，关于我们和联系我们。

在这种情况下，如果将这些信息以传统的单行菜单展示，势必会放不下，造成顶部栏的过度拥挤。

双层菜单设计要点

大部分用户不会一个字一个字去读页面中的信息，他们是“扫描”式阅读。所以顶部栏上的文字设计首要考虑的是可读性，要让用户在短时间内就可以获取这些信息。所以我们的文字要做到能够从背景中凸显出来，必要的时候可以加粗字体样式。

模式六：：固定型顶部导航

固定顶部栏代表着另一种设计思路：无论用户进行何种操作，顶部栏对用户来说都是可见的。这类的顶部栏适用于页面内容比较多，需要用户不断下拉滑动的网站。

这种交互模式可以很好的提升顶部栏的易用性，但是这是建立在牺牲一部分页面空间的基础上换来的，所以我们在使用的时候一定要谨慎。

在上面我一直强调顶部栏设计要简洁明了，要让用户一眼就能看明白。因为顶部栏属于导航体系的一部分，是为了避免用户迷路，帮助他们更好的使用产品。归根结底用户使用你的产品是为了你提供的内容或服务，而不是来看狂拽酷炫的顶部栏。所以我们不能本末倒置，将顶部栏做的过于花哨，进而分散用户的注意力。

此外极简风格很适合响应式设计，可以在多设备上追求一致的用户体验。

简约设计的另一大优点就是，设计师会经常遇到临时的迭代需求，领导突然让你在这里加一个按钮那里加一个文字标签，简约设计为这种突然的迭代需求提供了操作空间。

2.移动端常见导航模式

模式一：Tab/分段控件导航栏

Tab左右切换顶部导航栏与分段控件顶部导航栏，都是顶部有多个标题切换的导航栏样式，分为选中标题与未选中标题，如下图：

分段控件顶部导航栏一般有2~5个可选项，且不能左右滑动。Tab左右切换顶部导航栏的可选项可以扩展很多(如爱奇艺的首页顶部Tab切换有24个可选项)，并且可以左右滑动切换，选中样式也比较丰富，常见的有底部加上小短线、字体颜色变化、字号放大等(多个合并使用更能突出选中标题)，如下图：

模式二：通栏导航栏

通栏导航的背景层一般与下方的模块打通了，在视觉上看起来更为统一，还能一定程度上节约界面空间。如下图：

通栏导航栏常用在电商、旅游等界面复杂或是需要烘托氛围的界面中（多伴随着背景处理），有些也会放在顶部通栏Banner上，节省空间的同时减少割裂感。

通栏导航栏的背景处理方式一般有三种:

1.特殊背景处理：与下方模块整体风格保持一致，多采用与下方一致的图片背景；

2.颜色、渐变背景：采用纯色或是渐变背景，常见于卡片风格的界面；

3.黑色透明渐变蒙层：采用一层渐变蒙层，常见于图片Banner上，保证导航栏文字的可识别性。

模式三：小程序导航栏

微信的小程序导航栏，在顶部右上方有一个不可去除也无法编辑的Titlebar按钮，微信配置了一深一浅两种风格。

从APP转换到小程序时，要注意调整APP的顶部导航栏的位置以及搜索框的大小，避免被Titlebar遮挡，如下图：

上图中，豌豆公主的顶部导航栏整体下移，并且减小了搜索框的高度，提高屏幕的利用率。

关于导航设计的若干思考

1.为市场部做推广的导航栏怎么做？

百度通过层层导航来抓取网站数据。关于导航栏重要的一点是，网站导航通常出现在网站的顶部，所以如果导航栏被网络推广，流量权重可以传递到目录页。

一个清晰的导航系统是网站设计的一个重要目标，它对网站信息架构和用户体验有着重要的影响。在设计导航栏时，网络推广也越来越成为一个需要考虑的因素。

从SEO的角度来看，在网站导航栏中应该注意以下几点?

l网站导航包含关键词
一般来说，网站导航一般包括核心关键词和长尾关键词。为了使页面看起来简洁美观，通常只选择一个关键词代替，用标题标签来表达完整的关键词。当然，在这里需要提醒的是，为了增加某个关键词的密度，一些企业网站在网站导航中加入了关键词，并删除了超链接。虽然这是一种策略，但还是有轻微的作弊嫌疑。

l网站导航中合理使用H2-H3标签
除了特殊的SEO单页优化，多个H1标签将出现。一般来说，正规网站的每个独立页面基本上只包含一个独立的H1。因此，在设计导航栏时，需要合理地分配标记H2-H3。给出相应的列来增加重要性。

l避免内容页面与网站导航关键词之间的冲突
网站的锚文本是由每个网络推广人员设置的，但在这里我们经常忽略一个小细节。一般来说，搜索引擎只记录某个链接在该国出现的锚文本关键词。基于搜索引擎的爬行顺序，从上到下，从左到右，如果关键字出现在导航栏中，尽量不要在内容页面上使用它们。给这个链接相同的锚文本，就可以使用语义相关的单词。

2.从用户角度，导航设计要解决什么问题?

l问题一：我在哪里?

用户可以从任何内部页面进入网站，有时也可以从主页进入，点击多个链接后，用户已经忘记了如何到达当前页面。导航系统需要清楚地告诉用户现在是网站整体结构的哪一部分。页面设计风格的统一，面包屑导航的使用，以及主导航系统当前类别的突出显示，都可以帮助用户判断他们现在所处的位置。

l问题二：接下来想去哪里?

有时用户知道他想要做什么，页面的导航设计告诉用户点击哪里来完成他的目标。有时候用户不知道自己应该做什么，网站导航需要给用户一个全国性的建议，引导用户到达网站目标完成页面。合理的导航和品类名称，文字中的相关链接，引导用户将产品放入购物车的按钮，相关产品推荐，网站地图，网站搜索框等都有助于用户点击进入下一步。

vue init mpvue/mpvue-quickstart slidebar

<template>
 <div>
 <div class="navbar">
 <block v-for="(item,index) in tabs" :key="index">
 <div :id="index" :class="{'navbar_item_on':activeIndex == index}" class="navbar_item" @click="tabClick">
 <div class="navbar_title">{{item.name}}</div>
 </div>
 </block>
 <div class="navbar_slider" :class="navbarSliderClass"></div>
 </div>
 <div>
 <div :hidden="activeIndex != 0">选项一的内容</div>
 <div :hidden="activeIndex != 1">选项二的内容</div>
 <div :hidden="activeIndex != 2">选项三的内容</div>
 </div>
 </div>
</template>

<script>
export default {
 data() {
 return {
 tabs: [
 {
 name: "选项卡1",
 type: "1",
 checked: true
 },
 {
 name: "选项卡2",
 type: "2",
 checked: true
 },
 {
 name: "选项卡3",
 type: "3",
 checked: true
 }
 ],
 activeIndex: 0,
 };
 },
 computed: {
 navbarSliderClass() {
 if (this.activeIndex == 0) {
 return "navbar_slider_0";
 }
 if (this.activeIndex == 1) {
 return "navbar_slider_1";
 }
 if (this.activeIndex == 2) {
 return "navbar_slider_2";
 }
 },
 },
 methods: {
 tabClick(e) {
 this.activeIndex = e.currentTarget.id;
 }
 },
};
</script>

<style scoped>
.content {
 box-sizing: border-box;
 height: 100%;
 padding-top: 50px;
 /* overflow: auto; */
 -webkit-overflow-scrolling: touch;
}
.swiper-item {
 height: 100%;
 text-align: center;
}
.navbar {
 display: -webkit-box;
 display: -webkit-flex;
 display: flex;
 position: fixed;
 z-index: 500;
 top: 0;
 height: 50px;
 width: 100%;
 background-color: #298de5;
 border-bottom: 1rpx solid #ccc;
}
.navbar_item {
 position: relative;
 display: block;
 -webkit-box-flex: 1;
 -webkit-flex: 1;
 flex: 1;
 padding: 13px 0;
 text-align: center;
 font-size: 0;
}
.navbar_item .navbar_item_on {
 color: white;
}
.navbar_title {
 color: white;
 font-weight: 500;
 display: inline-block;
 font-size: 15px;
 max-width: 8em;
 width: auto;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 word-wrap: normal;
}
.navbar_slider {
 position: absolute;
 content: " ";
 left: 0;
 bottom: 0;
 width: 6em;
 height: 3px;
 background-color: white;
 -webkit-transition: -webkit-transform 0.1s;
 transition: -webkit-transform 0.1s;
 transition: transform 0.1s;
 transition: transform 0.1s, -webkit-transform 0.1s;
}
.navbar_slider_0 {
 left: 29rpx;
 transform: translateX(0);
}
.navbar_slider_1 {
 left: 29rpx;
 transform: translateX(250rpx);
}
.navbar_slider_2 {
 left: 29rpx;
 transform: translateX(500rpx);
}
.controls {
 display: -webkit-box;
 display: -webkit-flex;
 display: flex;
 position: fixed;
 z-index: 8888;
 top: 80;
 height: 50px;
 width: 100%;
 background-color: #298de5;
}
</style>

<template>
 <div>
 <div class="navbar">
 <block v-for="(item,index) in tabs" :key="index">
 <div :id="index" :class="{'navbar_item_on':activeIndex == index}" class="navbar_item" @click="tabClick">
 <div class="navbar_title">{{item.name}}</div>
 </div>
 </block>
 <div class="navbar_slider" :class="navbarSliderClass"></div>
 </div>
 <swiper class="content" :duration="50" :style="'height:'+contentHeight" @change="swiperChange" :current="currentTab" @animationfinish="onAnimationfinish">
 <swiper-item v-for="(item,index) in tabs" :key="index">
 <div>{{item.name}}</div>
 </swiper-item>
 </swiper>
 </div>
</template>

<script>
export default {
 data() {
 return {
 tabs: [
 {
 name: "选项卡1",
 type: "1",
 checked: true
 },
 {
 name: "选项卡2",
 type: "2",
 checked: true
 },
 {
 name: "选项卡3",
 type: "3",
 checked: true
 }
 ],
 activeIndex: 0,
 currentTab: 0,
 winWidth: 0,
 winHeight: 0,
 };
 },
 computed: {
 navbarSliderClass() {
 if (this.activeIndex == 0) {
 return "navbar_slider_0";
 }
 if (this.activeIndex == 1) {
 return "navbar_slider_1";
 }
 if (this.activeIndex == 2) {
 return "navbar_slider_2";
 }
 },
 contentHeight() {
 return this.winHeight + "px";
 }
 },
 methods: {
 tabClick(e) {
 this.activeIndex = e.currentTarget.id;
 this.currentTab =this.activeIndex;
 },
 swiperChange(e) {
 this.currentTab = e.mp.detail.current;
 this.activeIndex = this.currentTab;
 },
 onAnimationfinish() {
 console.log("滑动完成.....")
 }
 },
 onLoad() {
 var res = wx.getSystemInfoSync();
 this.winWidth = res.windowWidth;
 this.winHeight = res.windowHeight;
 }
};
</script>