標(biāo)簽欄設(shè)計(jì)有哪些不易察覺的「小細(xì)節(jié)」？

2021-8-23 ui設(shè)計(jì)分享達(dá)人

Tab Bar

Tab Bar「標(biāo)簽欄」一直是UI設(shè)計(jì)師值得學(xué)習(xí)和研究的內(nèi)容，因?yàn)楫?dāng)設(shè)計(jì)師在構(gòu)建一個(gè)新的應(yīng)用程序時(shí)，都可能需要搭建標(biāo)簽欄，建議設(shè)計(jì)師們根據(jù)實(shí)際情況去判斷是否使用。

流行常見的應(yīng)用程序，如Amazon、Spotify、YouTube、Pinterest、Twitter、Instagram、Snapchat，都在使用標(biāo)簽欄，但這并不意味著你的應(yīng)用程序、你的用戶是真的需要或真心喜歡。像計(jì)算器、日歷等應(yīng)用，就沒有涉及此功能。

為什么應(yīng)用程序會(huì)有標(biāo)簽欄？答案顯然是「易于使用」。加入標(biāo)簽欄可以幫助用戶更輕松地導(dǎo)航到頁面，不用再特意點(diǎn)開菜單，選擇想要瀏覽的頁面。帶有標(biāo)簽欄的應(yīng)用程序，通常會(huì)與多個(gè)頁面聯(lián)動(dòng)。而類似計(jì)算器這種工具性質(zhì)的程序，用戶可能會(huì)重復(fù)打開使用，所以其展示重點(diǎn)在主屏幕上，點(diǎn)擊后直接進(jìn)入功能頁面。

為什么標(biāo)簽欄不是菜單？有些應(yīng)用會(huì)使用菜單羅列頁面，雖然占用的屏幕空間更少（菜單圖標(biāo)），但缺點(diǎn)是用戶點(diǎn)擊菜單進(jìn)行多次跳轉(zhuǎn)。為了更好地使用，設(shè)計(jì)師發(fā)明了靠近拇指的酷炫標(biāo)簽欄，方便用戶點(diǎn)擊，以獲得更好地導(dǎo)航和更輕松地沖浪體驗(yàn)。接下來我將為大家介紹幾個(gè)應(yīng)用標(biāo)簽欄時(shí)的小技巧：

01 展示最重要的目的地

標(biāo)簽欄應(yīng)只包含最有用的目的地，應(yīng)是被高度精簡過的，避免變得混亂。許多應(yīng)用程序在其標(biāo)簽欄上添加了搜索屏幕，這有助于更好地導(dǎo)航內(nèi)容。結(jié)合自身程序，為用戶針對性地添加一些重要的功能，提升體驗(yàn)。

比如Spotify的標(biāo)簽欄，使用了音樂播放器中常出現(xiàn)的幾種功能：Home，主頁標(biāo)簽用于播放或可能收聽的內(nèi)容；Search，搜索標(biāo)簽用于檢索其他歌曲和播客；Library，庫標(biāo)簽用于播放列表中用戶喜歡和保存的歌曲。Premium則是結(jié)合了公司業(yè)務(wù)，幫助用戶輕松完成費(fèi)用支付。

02 把相似的內(nèi)容放在一起

體量大的應(yīng)用程序，它們更喜歡使用4-5個(gè)標(biāo)簽，不僅讓標(biāo)簽欄變得整潔，還能幫助用戶快速點(diǎn)擊。如果超過5個(gè)圖標(biāo)，用戶受拇指大小的影響會(huì)無法準(zhǔn)確地點(diǎn)擊。

Pinterest的標(biāo)簽欄雖然只有4個(gè)標(biāo)簽，但它在通知標(biāo)簽內(nèi)設(shè)計(jì)了置于頂部的標(biāo)簽——消息選項(xiàng)卡，最大程度的拓展了用戶在此標(biāo)簽內(nèi)的應(yīng)用。

03 如果需要，盡量使用標(biāo)簽

任何流行的應(yīng)用程序都在使用標(biāo)簽，因?yàn)樗鼈兦宄卣f明了當(dāng)用戶點(diǎn)擊特定標(biāo)簽時(shí)會(huì)做什么。

Youtube和宜家這兩款應(yīng)用復(fù)雜程度各不相同，宜家的內(nèi)容主要是家居家具，YouTube則是不同類型的視頻。YouTube使用的搜索標(biāo)簽，與其他程序相比，也更具自己的特色。

Pinterest的標(biāo)簽欄相對設(shè)計(jì)的專業(yè)一些，會(huì)將標(biāo)簽上的文字隱藏起來。當(dāng)用戶習(xí)慣使用后，標(biāo)簽上的內(nèi)容會(huì)隨之隱藏，我個(gè)人非常喜歡這種設(shè)計(jì)。不過，我建議大家根據(jù)自己的選擇，再去確定是否要這么做。

04 文本標(biāo)簽應(yīng)該簡短

標(biāo)簽欄內(nèi)的標(biāo)簽應(yīng)簡短與清晰，就像設(shè)計(jì)按鈕標(biāo)簽時(shí)一樣，請使用準(zhǔn)確的標(biāo)簽。TikTok的所有標(biāo)簽都是短標(biāo)簽，并且還加入了創(chuàng)建按鈕，如果你想吸引用戶的注意力，你也可以這樣做。

05 避免隱藏標(biāo)簽欄

避免對用戶隱藏標(biāo)簽欄，因?yàn)槠浒俗钪匾膶?dǎo)航功能。大多數(shù)的應(yīng)用程序都遵循了這條規(guī)則，除非有些是出于測試目的，會(huì)選擇隱藏。Pinterest的標(biāo)簽欄在滾動(dòng)瀏覽圖像時(shí)完全隱藏，我個(gè)人猜測，是希望用戶可以最大幅度的查看感興趣的圖像。

06 按順序排列標(biāo)簽

按順序排列標(biāo)簽非常有必要，每個(gè)應(yīng)用程序都會(huì)參照清晰度和可用性這兩個(gè)維度去設(shè)計(jì)。用戶喜歡看到排列好的東西，而標(biāo)簽欄就是其中之一，大型的應(yīng)用程序也基本上遵循類似的設(shè)計(jì)規(guī)則。

打開Pinterest會(huì)看到瀑布流形式的主頁面，重要的內(nèi)容都被呈現(xiàn)在了主頁上。Spotify、Youtube、Pinterst、TikTok等應(yīng)用程序都比較相似，將重要內(nèi)容放在了主頁上。個(gè)人建議大家可以參考，但最重要的是將內(nèi)容井井有條地呈現(xiàn)，并始終如一地遵循著設(shè)計(jì)規(guī)則。