當前位置：首頁 > 專業知識 > 為什么設計師在網站和APP上都愛用tab式導航

為什么設計師在網站和APP上都愛用tab式導航

作者：天晴創藝發布時間：8/12/2019 11:14:45 AM瀏覽次數：12056文章出處：北京網站設計

一、tab式導航的作用
為什么我們需要使用這樣的表現形式呢，因為對于一二級頁面上需要在有限的空間里承載更多的產品信息，一屏屏滑下去找內容效率很低，因為使用這樣形式的導航，能夠快速幫助用戶找到感興趣的信息。如下圖所示：

tab式導航設計

比如說騰訊動漫，愛奇藝，都將首頁分成了很多類型，但兩者的分類耶有所不同，騰訊動漫分成了少女心、少年魂、兄弟情等這種故事情節的劃分，愛奇藝則直接按照電視劇、電影、兒童、綜藝、動漫等，很多信息屬于同一緯度但是類型上是互斥的。
但是不同類型的產品會根據產品的特性來進行劃分，也是為了能夠讓用戶快速有效的找到信息北京網站外包，就是通過tab對信息結果進行分類，提升用戶定位信息的效率。
二、tab式導航的類型
1.標準
標準模式的導航是在界面的上方顯示，作為服務的頂層導航，標簽隔斷界面內容，這種導航主要用于不同頁面之間的切換，如下圖所示：

tab式導航設計

tab式導航設計

蘋果的地圖就是使用的標準模式宏藍計算機科技，這種模式目前已經比較少見了，在目前流行扁平化的視覺上來說，標準模式的導航視覺不強，根據標簽的個數將屏幕等分，做出選中的區分。
2.下劃線
下劃線模式與標準模式一樣，在界面的上方，但是還是有所區別的，該模式的特征是通過文本標簽下劃線來表示當前選中狀態，如下圖所示：

tab式導航設計

tab式導航設計

這種模式的導航keep&叭噠使用的就是下劃線，一般使用這種模式的界面都比較簡潔，標簽數量不是很多，而且下面大多是列表形式。
表現形式上，下劃線的分為以下幾種：

tab式導航設計

tab式導航設計

有屏幕等分的，有居左排列的，間隔大多在45px-70px之間，這兩種情況首頁都有出現過，比較適合標簽數目比較少的情況，每個標簽都有固定的位置，有利于對用戶的記憶，
設計時這種固定的分類最好不超過5個（其實5就挺多的了），因為下面有下劃線了，因此文字可以放大或者改變顏色來與其他的做出區分，也可以兩種情況都有，因為分類不是很高，因此視覺層級也不是很高，大多出現在不重要的一級頁面或者二級頁面上。在首頁上可以根據產品的基因給單調的tab導航做一些特別的處理。

tab式導航設計

tab式導航設計

3.滾動
滾動模式將在用戶選擇左右兩側標簽時，滾動整個導航控件，以顯示原本處于界面之外的條目。如下圖所示：

tab式導航設計

tab式導航設計

設計師在使用這種模式時，能夠設置任意的標簽，不必像傳統的標簽式考慮導航控件的數量，目前來說這種模式是運用范圍最廣的，同時在界面邊緣露出其他的標簽，讓用戶知道后面還有別的菜單，避免用戶發現不了界面之外的菜單。
如果為了讓界面變得更有趣味性和識別度，因此下劃線可以做一些有趣的動效：

tab式導航設計

tab式導航設計

馬蜂窩的下劃線就有個小細節的動效，讓它的滑動整體感覺很生動，可滑動標簽的寬度可以長短不一，也可以完全一致，也可以長短不一，根據標題長短來決定。這種設計出現最多的就是在首頁上，可以有下劃線也可以沒有下劃線，最重的視覺層面是字體大小的變化，而且與未選中的字體差異大，間隔也大多是45px-70px之間。
三、tab式導航的優缺點
優點：
1、簡單高效、操作方便，除了底部的導航外，再搭配頂部的分類導航切換，能夠讓用戶簡單清晰的找到自己想要的產品，層級明確；
2、學習成本低，用戶在第一次使用產品的時候，都會看產品有沒有自己感興趣的內容，而標簽式導航將產品的吸引點都展開在一個頁面里，用戶掃一眼就能大致了解如果操作以及有沒有自己想要的。
缺點：
1、標簽欄入口很多個人網站制作，會分散用戶的注意力；
2、占據屏幕空間，屏幕可展示的內容變少。
（鄭重聲明：本文版權歸海鹽社潘團子所有，轉載文章僅為傳播更多信息之目的，如有侵權，請聯系我們刪除；如作者信息標記有誤，請聯系我們修改。）
，

文章來源：北京網站設計

文章標題：為什么設計師在網站和APP上都愛用tab式導航

文本地址：http://m.yoyoenglish.cn/info_1505.html

【收藏本頁】【打印】【關閉】

本文章Word文檔下載：為什么設計師在網站和APP上都愛用tab式導航