單配置就能實現手機、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>