成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

為什么設(shè)計(jì)師在網(wǎng)站和APP上都愛用tab式導(dǎo)航

2021-06-04    分類: 網(wǎng)站建設(shè)

一、tab式導(dǎo)航的作用
為什么我們需要使用這樣的表現(xiàn)形式呢,因?yàn)閷τ谝欢夗撁嫔闲枰谟邢薜目臻g里承載更多的產(chǎn)品信息,一屏屏滑下去找內(nèi)容效率很低,因?yàn)槭褂眠@樣形式的導(dǎo)航,能夠快速幫助用戶找到感興趣的信息。如下圖所示:

tab式導(dǎo)航設(shè)計(jì)

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

tab式導(dǎo)航設(shè)計(jì)

tab式導(dǎo)航設(shè)計(jì)

蘋果的地圖就是使用的標(biāo)準(zhǔn)模式,這種模式目前已經(jīng)比較少見了,在目前流行扁平化的視覺上來說,標(biāo)準(zhǔn)模式的導(dǎo)航視覺不強(qiáng),根據(jù)標(biāo)簽的個(gè)數(shù)將屏幕等分,做出選中的區(qū)分。
2.下劃線
下劃線模式與標(biāo)準(zhǔn)模式一樣,在界面的上方,但是還是有所區(qū)別的,該模式的特征是通過文本標(biāo)簽下劃線來表示當(dāng)前選中狀態(tài),如下圖所示:

tab式導(dǎo)航設(shè)計(jì)

tab式導(dǎo)航設(shè)計(jì)

這種模式的導(dǎo)航keep&叭噠使用的就是下劃線,一般使用這種模式的界面都比較簡潔,標(biāo)簽數(shù)量不是很多,而且下面大多是列表形式。
表現(xiàn)形式上,下劃線的分為以下幾種:

tab式導(dǎo)航設(shè)計(jì)

tab式導(dǎo)航設(shè)計(jì)

有屏幕等分的,有居左排列的,間隔大多在45px-70px之間,這兩種情況首頁都有出現(xiàn)過,比較適合標(biāo)簽數(shù)目比較少的情況,每個(gè)標(biāo)簽都有固定的位置,有利于對用戶的記憶,
設(shè)計(jì)時(shí)這種固定的分類最好不超過5個(gè)(其實(shí)5就挺多的了),因?yàn)橄旅嬗邢聞澗€了,因此文字可以放大或者改變顏色來與其他的做出區(qū)分,也可以兩種情況都有,因?yàn)榉诸惒皇呛芨?,因此視覺層級也不是很高,大多出現(xiàn)在不重要的一級頁面或者二級頁面上。在首頁上可以根據(jù)產(chǎn)品的基因給單調(diào)的tab導(dǎo)航做一些特別的處理。

tab式導(dǎo)航設(shè)計(jì)

tab式導(dǎo)航設(shè)計(jì)

3.滾動(dòng)
滾動(dòng)模式將在用戶選擇左右兩側(cè)標(biāo)簽時(shí),滾動(dòng)整個(gè)導(dǎo)航控件,以顯示原本處于界面之外的條目。如下圖所示:

tab式導(dǎo)航設(shè)計(jì)

tab式導(dǎo)航設(shè)計(jì)

設(shè)計(jì)師在使用這種模式時(shí),能夠設(shè)置任意的標(biāo)簽,不必像傳統(tǒng)的標(biāo)簽式考慮導(dǎo)航控件的數(shù)量,目前來說這種模式是運(yùn)用范圍最廣的,同時(shí)在界面邊緣露出其他的標(biāo)簽,讓用戶知道后面還有別的菜單,避免用戶發(fā)現(xiàn)不了界面之外的菜單。
如果為了讓界面變得更有趣味性和識別度,因此下劃線可以做一些有趣的動(dòng)效:

tab式導(dǎo)航設(shè)計(jì)

tab式導(dǎo)航設(shè)計(jì)

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

名稱欄目:為什么設(shè)計(jì)師在網(wǎng)站和APP上都愛用tab式導(dǎo)航
文章鏈接:http://jinyejixie.com/news/116345.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供全網(wǎng)營銷推廣、小程序開發(fā)、網(wǎng)站內(nèi)鏈搜索引擎優(yōu)化、網(wǎng)站營銷、定制開發(fā)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)
石柱| 怀仁县| 台南县| 长阳| 蒙城县| 凉城县| 郴州市| 科技| 壶关县| 金坛市| 海丰县| 合肥市| 长宁县| 铅山县| 巴林左旗| 调兵山市| 新余市| 牡丹江市| 奉新县| 壶关县| 乌苏市| 建宁县| 石家庄市| 满城县| 界首市| 和静县| 永城市| 天峻县| 平湖市| 东乡族自治县| 苗栗市| 宁国市| 郯城县| 贺州市| 南投市| 东乌珠穆沁旗| 固阳县| 平潭县| 东明县| 林州市| 乳山市|