中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

今天這篇文章來給大家分析一下tab。其實(shí)tab隸屬于產(chǎn)品導(dǎo)航體系的一部分，所以你要了解tab，必須要它放在導(dǎo)航體系中來分析。希望這篇文章可以幫助大家以后更合理的去使用tab。

tab的分類

為了更好地了解tab，我們首先要對(duì)tab做一個(gè)分類，這里我所分類的依據(jù)是位置。那么根據(jù)tab在界面中所處的位置我們可以把tab分為頂部欄tab、側(cè)邊欄tab和底部欄tab，當(dāng)然在導(dǎo)航體系中我們會(huì)說成頂部欄菜單、側(cè)邊欄菜單和底部欄菜單，都是一個(gè)意思。

虎撲的這個(gè)界面非常具有代表性，因?yàn)槿Ntab樣式出現(xiàn)在同一個(gè)界面里，方便我們進(jìn)行分析。從導(dǎo)航體系的層級(jí)來說，底部欄屬于一級(jí)導(dǎo)航，頂部欄屬于二級(jí)導(dǎo)航，而側(cè)邊欄屬于三級(jí)導(dǎo)航。這種劃分標(biāo)準(zhǔn)的其實(shí)是跟用戶的拇指活動(dòng)范圍來決定的，或者說是拇指法則。

“拇指法則”是資深交互設(shè)計(jì)大神Steven Hoober在2013年對(duì)1300名手機(jī)用戶的調(diào)查研究后提出來一個(gè)新名詞。他通過研究發(fā)現(xiàn)，49%的用戶都是單手拿著手機(jī)，使用拇指進(jìn)行操作。甚至某些大屏手機(jī)使我們不得不進(jìn)行雙手持握的時(shí)候，多數(shù)人也還是傾向于使用自己的拇指。Josh Clark在另一項(xiàng)研究中也得出了類似的結(jié)論，他指出：75%的手機(jī)交互都是由拇指完成的。因此我們也可以說，對(duì)觸摸屏手機(jī)進(jìn)行交互設(shè)計(jì)，用戶主要使用的就是拇指。

一級(jí)導(dǎo)航用戶使用最頻繁，所以用戶的拇指必須很容易就能操作，而側(cè)邊欄和頂部欄相對(duì)來說都屬于“邊陲地區(qū)”，用戶拇指很難夠得著，手小的用戶甚至要借用左手或改變握持姿勢(shì)。這肯定不是一個(gè)令用戶滿意的體驗(yàn)了。

其實(shí)這個(gè)也給了我們一個(gè)啟發(fā)，在給移動(dòng)端產(chǎn)品設(shè)計(jì)界面的時(shí)候，你一定要把圖放在手機(jī)上看，自己嘗試”操作”來測(cè)試易用性。你的產(chǎn)品必須要讓用戶的手指操作起來很舒服，或者可以解放用戶的手指，讓用戶可以單手很方便的完成操作。我可以給大家舉一個(gè)例子，我之前聽到一個(gè)朋友抱怨說，微信發(fā)語音不方便，因?yàn)橛沂謫问治粘植僮鞯臅r(shí)候拇指很難夠得著。我嘗試著把語音和表情的圖標(biāo)對(duì)調(diào)了位置，發(fā)現(xiàn)并不理想。

雖然發(fā)語音更方便了，但是斗圖就很困難了?，F(xiàn)在這個(gè)全民斗圖的時(shí)代，用戶發(fā)表情包的頻率肯定要比發(fā)語音的要高得多(我瞎猜的)。所以微信這里語音功能放在左邊雖然難點(diǎn)擊，但是我覺得沒有毛病。

對(duì)于側(cè)邊欄tab，我們一般習(xí)慣于出現(xiàn)在界面的左邊，但是也有放在右邊的，QQ空間的月份tab就是這么做的，這樣做的一個(gè)好處就是用戶(右手單手握持)更容易操作了。

既然側(cè)邊欄tab在右邊更方便操作，為什么大部分界面設(shè)計(jì)中側(cè)邊欄還放在左邊呢？在我看來，側(cè)邊欄tab放在界面左邊還是右邊取決于tab標(biāo)簽與內(nèi)容的關(guān)聯(lián)性。

舉個(gè)例子，如果你想在虎撲里找到金州勇士隊(duì)的專區(qū)，那么你得先找到NBA論壇，再去找勇士專區(qū)。從上往下，從左到右，符合Z型瀏覽習(xí)慣。

如果你把側(cè)邊欄tab放在左邊，那么用戶的瀏覽方向是反Z字的。而QQ空間的話，用戶不用看左邊的tab項(xiàng)也能知道這條動(dòng)態(tài)的發(fā)布時(shí)間，所以放在右邊更加合適。

tab的兩種狀態(tài)

上面主要說位置對(duì)于tab的重要性，接下來我們主要說tab的設(shè)計(jì)。在設(shè)計(jì)tab之前，我們可以進(jìn)行一個(gè)解構(gòu)，任何一個(gè)tab項(xiàng)其實(shí)都可以由文字和icon組成，其中icon是非必需的。從信息傳遞的角度來說，再牛逼的icon也比不上文字。

Tab可以分為選中狀態(tài)和非選中狀態(tài)，一般來說為了凸顯選中狀態(tài)，我們主要有三種方法：字色，線條和背景色，其中線條的位置可以在文字上方也可以在下方。

我看了一下目前手機(jī)的應(yīng)用，發(fā)現(xiàn)使用線條的頻率要遠(yuǎn)遠(yuǎn)的大于背景色。在我看來，導(dǎo)致這種現(xiàn)象的原因有兩個(gè)。

其一，加線的tab的樣式都是全貫通的，比較適合用于展示層級(jí)較高的導(dǎo)航。而導(dǎo)航都是由上而下的，所以設(shè)計(jì)師會(huì)優(yōu)先考慮使用線條，然后層級(jí)較低的導(dǎo)航為了區(qū)分會(huì)使用背景色來區(qū)分。

其二，色塊的視覺權(quán)重更大一點(diǎn)，會(huì)分散用戶的注意力。而tab屬于導(dǎo)航體系，是為了讓用戶更方便找到自己期望使用的功能，所以tab做的太顯眼沒有必要。這也是設(shè)計(jì)師優(yōu)先考慮線條的原因。例如，下圖中的tab可以放大，居中，但是會(huì)侵占內(nèi)容區(qū)域，所以還是舍棄。

以上就是我自己所總結(jié)出來的兩個(gè)原因，其中第二的原因涉及到信息的優(yōu)先級(jí)。這里我覺得我需要再延伸一點(diǎn)其他的內(nèi)容。

設(shè)計(jì)師在日常工作的時(shí)候，最討厭的一件事情莫過于甲方臨時(shí)改需求。一個(gè)稿子來回反復(fù)的改，那么設(shè)計(jì)師如何避免這種情況呢？在我看來，設(shè)計(jì)師在拿到需求之后一定要跟甲方進(jìn)行充分的溝通，確認(rèn)好需求。當(dāng)然這里的確認(rèn)需求，不僅僅是跟對(duì)方核對(duì)字段是否出錯(cuò)這么簡(jiǎn)單。而是要弄懂甲方這份需求中的信息層級(jí)和設(shè)計(jì)風(fēng)格，說白了就是這個(gè)界面/banner風(fēng)格你想走什么風(fēng)格，你要突出哪些內(nèi)容。

很多時(shí)候，甲方雖然給你需求了，但是他們自己根本不知道自己想要什么？他們的期望是讓設(shè)計(jì)師先做出一稿，他們?cè)谶@個(gè)稿子上進(jìn)行反復(fù)的修改最后達(dá)到他們心中所期望的效果。這種做法無異損害了設(shè)計(jì)師的利益，因?yàn)楫?dāng)甲方都不知道自己想要什么的情況下，你的初稿是根本沒有任何通過的可能性。所以通過詢問信息層級(jí)和設(shè)計(jì)風(fēng)格這兩個(gè)問題，促使甲方具象化自己的需求，這樣也省的設(shè)計(jì)師來回的返工。

Tab的使用場(chǎng)景

任何一個(gè)設(shè)計(jì)組件/元素我們進(jìn)行分析的最終目的都是為了更好的使用?！案玫氖褂谩辈粌H僅是知道如何使用，也意味著要明白使用的場(chǎng)景，知道什么時(shí)候該用什么時(shí)候不該用。

文章開頭就說了tab屬于導(dǎo)航體系，而tab在導(dǎo)航體系中是屬于萬金油，基本都能用，但是也有用不了的時(shí)候。例如QQ郵箱，這是少數(shù)沒有使用底部欄菜單的產(chǎn)品。這里使用的是列表式菜單，這是因?yàn)镼Q郵箱是核心功能流程比較單一的產(chǎn)品，主界面就可以滿足用戶核心場(chǎng)景下的需求，不需要通過底部欄菜單來在幾個(gè)功能模塊之間來回切換。

簡(jiǎn)單的用不了tab，也不意味著復(fù)雜就一定可以用。我再舉一個(gè)例子，tab項(xiàng)過多情況下用戶可以滑動(dòng)，但是有的情況下tab選項(xiàng)實(shí)在是太多了，這時(shí)候tab就不太合適。企鵝直播這里可以切換成彈框進(jìn)行選擇，這個(gè)解決方法就很棒。

所以說tab的使用場(chǎng)景還是很復(fù)雜，一篇文章的篇幅肯定說不了，這里我也只是給大家開了一個(gè)頭，更多的還是要大家多下app去分析。

總結(jié)

以上就是我對(duì)常見tab樣式做的一個(gè)分析，希望可以幫助到大家。

#專欄作家#

王M爭(zhēng)（微信公眾號(hào)：王M爭(zhēng)），人人都是經(jīng)理專欄作家，資深互聯(lián)網(wǎng)人。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Pexels，基于 CC0 協(xié)議