UI設(shè)計(jì)創(chuàng)新技能層出不窮,UI設(shè)計(jì)滿足著形形色色各種垂直化的需求,在設(shè)計(jì)方面大家也是想方設(shè)法去做一些創(chuàng)新,希望自己能夠在各種應(yīng)用中脫穎而出,今天AAA教育郭老師就針對UI設(shè)計(jì)中Tab設(shè)計(jì)指南進(jìn)行簡單的說明。
1、Tab的作用
tab的作用是為了做好內(nèi)容分類,節(jié)省屏幕空間,等需要的時候更容易被人找到!
試想一下,如果沒有tab 給內(nèi)容分類,所有的功能全部平鋪展開,找起來多麻煩呀,就像衣柜的衣服沒有分類,一堆亂糟糟的,是不是很影響出門速度呢!
2、Tab的分類
根據(jù)tab在界面中所處的位置我們可以把tab分為頂部欄tab、側(cè)邊欄tab和底部欄tab。
底部欄tab在前面文章中已經(jīng)講過了,感興趣的小伙伴可以去UI底部Tab 欄設(shè)計(jì)總結(jié) 這篇文章看看。
側(cè)邊欄tab:側(cè)邊欄tab放在界面左邊還是右邊取決于tab標(biāo)簽與內(nèi)容的關(guān)聯(lián)性。
常見的是放在界面左邊,如叮咚買菜, 你想找西紅柿那么你得先找到蔬菜欄目,再去找西紅柿。從上往下,從左到右,符合用戶瀏覽習(xí)慣。
但也有放在右邊的,如QQ空間的日期tab,因?yàn)榉旁谧筮叺脑挄踝“l(fā)布時間和部分信息,影響閱讀。而這個功能的使用場景就是用戶想要看朋友某個月的動態(tài)內(nèi)容,所以放在右側(cè)更合適。
3、Tab的兩種狀態(tài)
以下內(nèi)容都是針對頂部欄Tab來說的。
Tab可以分為選中狀態(tài)和非選中狀態(tài),一般來說為了凸顯選中狀態(tài),我們主要處理方法有改變字色、放大色號、添加線條、增加背景色等。如下圖所示:攜程是用改變字色+添加色塊的方式使選中狀態(tài)更突出。美團(tuán)外賣是通過改變字色+短線的方式來突出。
具體使用什么方式還要根據(jù)自己產(chǎn)品的特點(diǎn)來設(shè)計(jì),沒有統(tǒng)一的標(biāo)準(zhǔn)。那么可能有小伙伴就會問了,既然沒有統(tǒng)一標(biāo)準(zhǔn)那就可以根據(jù)自己喜好來設(shè)計(jì)了?NO NO NO!!
下面總結(jié)了幾種tab設(shè)計(jì)套路供大家參考,我們一一來看:
加短線的tab樣式
你們做設(shè)計(jì)時會不會糾結(jié)tab選中狀態(tài)時小短線做多長合適呢?
短線有固定長度跟可變長度,我們先說固定長度的吧,這里總結(jié)了3種方式:
(1).小短線非常短,占一個字左右寬的尺寸,如下圖所示:
(2).小短線稍長一些,一般會比兩個字寬幾個像素,如下圖所示:
(3).根據(jù)屏幕等分,這種樣式可用于內(nèi)容比較簡潔的頁面。
接下來是小短線長度可變的情況:
下圖是豆瓣的書影音頁面,短線的長度會隨文字的多少而變化,一般小短線的長度會比文字稍微寬幾像素,具體看情況而定。
為什么同樣都是tab,而短線有長有短,該怎么選擇使用呢?這里提供一個思路供大家參考。
當(dāng)頁面內(nèi)容比較多,可能會伴有其他圖標(biāo)等,小短線太長會使整個導(dǎo)航看著太滿太擠。所以會選短一點(diǎn)的長度。
頁面內(nèi)容比較簡潔,沒有多余的信息和圖標(biāo),小短線用長一點(diǎn)也沒關(guān)系,可以讓頁面更飽滿,層級更清晰。
不過有時候簡單的頁面也會選擇讓小短線很短,使整個頁面更加簡潔清爽 ,所以很多時候并沒有那么絕對,有合理的說法就行了。
說完了短線的長度我們來說說短線的粗細(xì),小短線如果很短,一般就會稍微粗一點(diǎn),因?yàn)楸緛砭投?,如果還那么細(xì),是不是沒有什么存在感。
小短線如果很長,一般就會稍微細(xì)一點(diǎn),因?yàn)楸緛砭烷L,如果還那么粗,是不是會讓頁面很臃腫。
兩級tab樣式
兩級tab樣式指有一個主導(dǎo)航,一個副導(dǎo)航。主導(dǎo)航一般會用線條樣式,副導(dǎo)航會用色塊樣式。
因?yàn)榫€具有貫通整體的作用,比較適合用于展示層級較高的導(dǎo)航。而導(dǎo)航都是由上而下的,所以會優(yōu)先考慮使用線條。然后層級較低的導(dǎo)航為了區(qū)分會使用背景色。因?yàn)樯珘K的視覺權(quán)重比線條大一些,容易分散用戶的注意力。而tab的作用是為了讓用戶更方便的找到自己想要使用的功能,所以沒有必要做的太顯眼。如下圖所示:
酷狗音樂的一級導(dǎo)航用了小短線的樣式,二級導(dǎo)航用了色塊標(biāo)簽,層次對比明顯。馬蜂窩一級導(dǎo)航小短線結(jié)合自身產(chǎn)品品牌特色進(jìn)行了設(shè)計(jì),二級導(dǎo)航選中狀態(tài)使用圖標(biāo)加文字顏色變化,同時下面線條樣式也有變化,比較有新意。
特殊樣式Tab
還有一種tab類似網(wǎng)頁的樣式,用于功能性比較強(qiáng)的頁面。
4、tab的使用舉例
1、tab 可以分為固定和滑動2種樣式,一般會根據(jù)內(nèi)容多少決定使用什么樣式。
tab項(xiàng)過多情況下用戶可以滑動,但是有的情況下tab選項(xiàng)實(shí)在是太多了,這時候可以做成彈框切換的樣式進(jìn)行選擇。如騰訊視頻的處理方式:
2、tab的用色處理,一般會根據(jù)使用目的做不同區(qū)分。
如拉勾首頁頂部tab并不是想引導(dǎo)用戶去點(diǎn)擊,而是讓用戶根據(jù)自己的需要去切換選擇,在頁面優(yōu)先級和重要程度上沒有那么高,因此使用無彩色系的淺灰色和黑色來展現(xiàn)。
如下面右圖我把顏色改為品牌色后,視覺上明顯了很多,這樣反倒對頁面其他元素產(chǎn)生了很多干擾,所以tab用色還是要根據(jù)使用場景來確定。
5、總結(jié)
最開始做tab時, 我覺得樣式隨便設(shè)計(jì)一個就好了,哪需要考慮這么多呢,但當(dāng)別人問為什么這樣設(shè)計(jì)的時候,我就懵逼了!
我們分析任何一個設(shè)計(jì)元素的最終目的都是為了更好的使用它。遇到問題,如果你沒有十足的把握,就先分析競品,把所有能找的方案羅列出來進(jìn)行歸類總結(jié),最后找到適合我們產(chǎn)品的方案,這樣在說設(shè)計(jì)思路的時候也有理有據(jù)了,不會被問的一臉懵。
好了,今天的分享就到這里了,歡迎大家留言討論。因此,您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息,請?jiān)L問AAA教育,包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。
填寫下面表單即可預(yù)約申請免費(fèi)試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會?助教全程陪讀,隨時解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!
?2007-2021/ m.5wd995.cn 北京漫動者教育科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc