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

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


Tab Bar 


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

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


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


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


01 展示最重要的目的地

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

比如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個標(biāo)簽,不僅讓標(biāo)簽欄變得整潔,還能幫助用戶快速點(diǎn)擊。如果超過5個圖標(biāo),用戶受拇指大小的影響會無法準(zhǔn)確地點(diǎn)擊。

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


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

任何流行的應(yīng)用程序都在使用標(biāo)簽,因為它們清楚地說明了當(dāng)用戶點(diǎn)擊特定標(biāo)簽時會做什么。

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

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


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

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


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

避免對用戶隱藏標(biāo)簽欄,因為其包含了最重要的導(dǎo)航功能。大多數(shù)的應(yīng)用程序都遵循了這條規(guī)則,除非有些是出于測試目的,會選擇隱藏。Pinterest的標(biāo)簽欄在滾動瀏覽圖像時完全隱藏,我個人猜測,是希望用戶可以最大幅度的查看感興趣的圖像。


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

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

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


07 傳達(dá)位置

標(biāo)簽欄幫助用戶輕松導(dǎo)航,如果用戶不知道自己的位置所在,也就無法進(jìn)行有效地瀏覽。比如Duolingo和Headspace的標(biāo)簽欄,就向用戶傳達(dá)了其所在的準(zhǔn)確位置。


08 從數(shù)據(jù)中學(xué)習(xí)并持續(xù)優(yōu)化

如果你想改進(jìn)應(yīng)用內(nèi)的標(biāo)簽欄設(shè)計,數(shù)據(jù)是關(guān)鍵點(diǎn)。你可以測試用戶最喜歡的、不使用的以及需要增加的標(biāo)簽分別是什么。

一款成功的應(yīng)用是需要持續(xù)迭代優(yōu)化的,就像靈感平臺Pinterest,雖然它不急于測試新事物,但卻與用戶建立了深深的羈絆,慢慢沉淀積累,再去提升應(yīng)用程序的用戶體驗。


文章來源:站酷  作者:UX詞典

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)



日歷

鏈接

個人資料

存檔