標(biāo)簽欄設(shè)計(jì)如何設(shè)計(jì)?5000字干貨詳解標(biāo)簽欄設(shè)計(jì)
標(biāo)簽欄是用戶(hù)進(jìn)入 APP 的第一觸點(diǎn),絕大多數(shù)以固定在設(shè)備底部的形式、讓用戶(hù)在應(yīng)用中的不同模塊之間快速切換。它作為移動(dòng)應(yīng)用中最常見(jiàn)的元素之一,是 UI 設(shè)計(jì)師們繞不開(kāi)的課題。
一個(gè)好的底部標(biāo)簽欄可傳達(dá)出產(chǎn)品的核心功能、品牌形象及設(shè)計(jì)理念,還能用作判斷應(yīng)用是否精致的標(biāo)準(zhǔn),用戶(hù)可通過(guò)第一觸點(diǎn)來(lái)感受這個(gè) APP 是粗糙的還是精致的。所以看似簡(jiǎn)單,但要想設(shè)計(jì)出視覺(jué)美觀、反饋清晰的底部標(biāo)簽欄,有很多值得我們深究的地方。
那么標(biāo)簽欄為何存在?背后滿(mǎn)足的需求和場(chǎng)景到底有哪些?能給產(chǎn)品、用戶(hù)帶來(lái)什么價(jià)值?本文將從很多優(yōu)秀產(chǎn)品中,挖掘出值得學(xué)習(xí)和借鑒的設(shè)計(jì)亮點(diǎn),對(duì)標(biāo)簽欄作出思考及分析,希望能幫到大家。
本期大綱
- 了解標(biāo)簽欄
- 標(biāo)簽欄常見(jiàn)設(shè)計(jì)規(guī)范
- 標(biāo)簽欄組合方式
- 圖標(biāo)切換樣式
- 標(biāo)簽欄功能樣式延展
- 總結(jié)
了解標(biāo)簽欄
1. 為什么要設(shè)計(jì)標(biāo)簽欄?
雖然我們看到如淘寶、京東、美團(tuán)等主流產(chǎn)品都使用了底部標(biāo)簽欄,但并不是所有的產(chǎn)品都需要,部分工具、打車(chē)類(lèi)型的 APP 就沒(méi)有使用標(biāo)簽欄,所以在設(shè)計(jì)一個(gè)產(chǎn)品之前應(yīng)該思考,為什么需要、有沒(méi)有更好的其他方式代替。在這里,我們先了解其作用,然后結(jié)合需求思考與產(chǎn)品的的契合度,最后再?zèng)Q定是否使用它。
傳達(dá)核心功能
底部標(biāo)簽欄一般由 3~5 個(gè)功能(入口)組成一個(gè)完整的產(chǎn)品架構(gòu),這些功能基本都屬產(chǎn)品的核心,可以幫助用戶(hù)避開(kāi)產(chǎn)品中其他信息的干擾、精準(zhǔn)快速的找到這些功能并使用它。
突出重要功能
即便有些不是產(chǎn)品的核心功能,但用戶(hù)的操作頻率極高、可能是核心功能的前置條件或索引,也會(huì)將入口置于底部標(biāo)簽欄,常見(jiàn)的有掃一掃、搜索、發(fā)布作品等。需要注意的是,這種功能在操作之后大部分都會(huì)進(jìn)行二級(jí)頁(yè)面跳轉(zhuǎn),與其他標(biāo)簽的等級(jí)權(quán)重并非平行。
多種展示方式
因產(chǎn)品定位不同、受眾用戶(hù)不同,接收信息的方式也有區(qū)別。標(biāo)簽欄能靈活的承載多種視覺(jué)展現(xiàn)方式,以傳達(dá)出不同的產(chǎn)品氣質(zhì)。例如:受眾群體范圍非常廣泛且存在一定的互聯(lián)網(wǎng)文化差異的產(chǎn)品,使用純文字標(biāo)簽;而對(duì)于長(zhǎng)期活躍在互聯(lián)網(wǎng)環(huán)境下年輕化的專(zhuān)業(yè)用戶(hù),且產(chǎn)品較為輕量,標(biāo)簽欄使用純圖標(biāo)會(huì)顯得更加簡(jiǎn)潔、更有氣質(zhì)。
定位用戶(hù)坐標(biāo)
用戶(hù)可通過(guò)被激活的標(biāo)簽(高亮、顏色變化)清楚自己當(dāng)前所處位置,減少用戶(hù)思考或通過(guò)其他信息解讀而花費(fèi)不必要的時(shí)間。
2. 為什么放在底部?
首先,將標(biāo)簽欄置于底部非常方便用戶(hù)拇指與設(shè)備進(jìn)行交互,基于單手操作的便利性,無(wú)論左、右手,其大拇指都處在設(shè)備底部的自然覆蓋區(qū)域;其次,因用戶(hù)是通過(guò)從上到下、從左到右的"F"型瀏覽順序,設(shè)備底部對(duì)用戶(hù)產(chǎn)生的視覺(jué)注意力相對(duì)較低,置底導(dǎo)航不會(huì)分散其注意力,同時(shí)又方便用戶(hù)隨時(shí)切換至其他感興趣的功能模塊。
根據(jù)史蒂文·霍伯(Steven Hoober)在對(duì)移動(dòng)設(shè)備使用情況的研究結(jié)論中表明:抱著手機(jī)的人占 36%、兩只手使用手機(jī)的人占 15%,而 49%的人依靠一只手在手機(jī)上完成事情,也就是說(shuō),僅用大拇指操作手機(jī)的用戶(hù)可能高達(dá) 75%,這足以說(shuō)明將 Tab 欄置于底部體驗(yàn)會(huì)更好,很大程度上提高用戶(hù)的操作效率及頻次。
綠色代表可以輕松到達(dá)的區(qū)域;黃色代表需要延伸的區(qū)域;紅色表示難以到達(dá),需用戶(hù)改變手持方式。
3. 標(biāo)簽欄結(jié)構(gòu)
底部標(biāo)簽欄結(jié)構(gòu)布局相對(duì)來(lái)說(shuō)比較簡(jiǎn)單,主要有以下幾種元素組成:
1 – 用于承載標(biāo)簽欄所有元素的容器;
2 – 激活狀態(tài)下的圖標(biāo),高亮提示,明確用戶(hù)當(dāng)前所在位置,點(diǎn)擊不會(huì)跳轉(zhuǎn)到其他功能模塊(舵式導(dǎo)航除外);
3 – 激活狀態(tài)下的標(biāo)簽文本,作用與上述相同;
4 – 未激活狀態(tài)下的圖標(biāo),相比激活狀態(tài),視覺(jué)層級(jí)較弱,點(diǎn)擊會(huì)跳轉(zhuǎn)至對(duì)應(yīng)的功能模塊;
5 – 未激活狀態(tài)下的標(biāo)簽文本,作用與上述相同。
標(biāo)簽欄常見(jiàn)的設(shè)計(jì)規(guī)范
1. 標(biāo)簽數(shù)量
為確保底部標(biāo)簽欄表現(xiàn)清晰、反饋及時(shí),iOS、AndROId 兩大平臺(tái)在設(shè)計(jì)規(guī)范中都對(duì)標(biāo)簽數(shù)量給了相同的建議,將底部標(biāo)簽數(shù)量控制在 3~5 個(gè)之間,低于 3 個(gè)會(huì)過(guò)于占用頁(yè)面底部空間,浪費(fèi)資源,超過(guò) 5 個(gè)會(huì)讓結(jié)構(gòu)變的復(fù)雜,且用戶(hù)在操作中容易發(fā)生誤觸。針對(duì)超出 5 個(gè)之外的標(biāo)簽,Google 建議將以漢堡菜單的形式隱藏、iOS 也將多出的標(biāo)簽隱藏并強(qiáng)制替換成"更多"入口,雖然可以將其視為一種解決方案,但體驗(yàn)極差,一方面用戶(hù)無(wú)法提前感知隱藏的功能入口,極易忽略,另一方面,產(chǎn)品將重要功能隱藏可能會(huì)存在不可預(yù)知的風(fēng)險(xiǎn)。
具體的標(biāo)簽數(shù)量如何決定,這還得根據(jù)產(chǎn)品的框架來(lái)確定,功能結(jié)構(gòu)的劃分會(huì)告訴你標(biāo)簽數(shù)量到底是 3 個(gè)還是 5 個(gè)。比如:功能比較單一的產(chǎn)品,3 個(gè)入口足以滿(mǎn)足需求,對(duì)于結(jié)構(gòu)復(fù)雜且超出 5 個(gè)的,需根據(jù)產(chǎn)品的核心功能、主推業(yè)務(wù)進(jìn)行篩選,最終控制在 5 個(gè)以?xún)?nèi)即可。
2. 標(biāo)簽間隔
屏幕均分:這是在設(shè)計(jì)中使用最多的一種方式,不管標(biāo)簽有幾個(gè),都可以利用整個(gè)標(biāo)簽欄的寬度進(jìn)行平均分布。例如:以 iOS 二倍圖設(shè)計(jì)稿 750px 的寬度為基準(zhǔn),如果存在 5 個(gè)標(biāo)簽,那么每個(gè)標(biāo)簽就應(yīng)該在 150px 寬度的區(qū)域內(nèi)左右居中、并依次均勻排布在整個(gè)底部標(biāo)簽欄中。
同等間距:比較少見(jiàn),一般只有 3 個(gè)標(biāo)簽時(shí)才會(huì)選擇使用這種方式,在標(biāo)簽較少的情況下,相比均分,視覺(jué)上看起來(lái)更為緊湊。
3. 視覺(jué)分割
缺少視覺(jué)分割的標(biāo)簽欄很容易出現(xiàn)錯(cuò)覺(jué),讓用戶(hù)誤以為這是頁(yè)面底部的內(nèi)容,對(duì)信息的區(qū)分非常不友好,我們可以通過(guò)投影、分割線、背景色、毛玻璃效果對(duì)標(biāo)簽欄作出明確的信息版塊區(qū)分。
標(biāo)簽欄組合方式
1. 圖標(biāo)加文字組合
這是最為常見(jiàn)的組合方式,當(dāng)某種樣式的圖標(biāo)被廣大用戶(hù)熟知、或頻繁使用某個(gè)應(yīng)用時(shí),引人注目的圖標(biāo)能讓用戶(hù)快速理解,且不受文化、地域的影響快速觸達(dá)目標(biāo),即便存在某種歧義,配合文字說(shuō)明使其更加標(biāo)準(zhǔn)化,這種圖文組合最為穩(wěn)妥,不容易出錯(cuò)。
2. 純文字
兩大短視頻平臺(tái)「抖音/快手」底部標(biāo)簽欄就是當(dāng)代純文字標(biāo)簽的代表作,另外如小紅書(shū)、百度翻譯、高德地圖…等也采用的這種方式。
純文字標(biāo)簽遵循簡(jiǎn)單易用的原則,方便直觀的進(jìn)行操作,對(duì)用戶(hù)的影響力較小,讓用戶(hù)更專(zhuān)注于信息本身,例如需用戶(hù)高度聚焦界面內(nèi)容的高德地圖,去圖標(biāo)化降低標(biāo)簽欄注意力是一種不錯(cuò)的表現(xiàn)方式。不過(guò)這種標(biāo)簽樣式單一,對(duì)于信息延展會(huì)受到一定局限,如品牌傳播、節(jié)日宣傳促銷(xiāo)等,所以純文字標(biāo)簽不能亂用、濫用,比較適合用戶(hù)群體跨度較大的產(chǎn)品。
3. 純圖標(biāo)
一般適用于較為小眾的產(chǎn)品,例如花瓣,所面向的用戶(hù)群體是跨度非常小的年輕化互聯(lián)網(wǎng)專(zhuān)業(yè)人員。純圖標(biāo)樣式較為簡(jiǎn)潔,能在一定程度上提升產(chǎn)品氣質(zhì),雖然在識(shí)別度有所降低,但對(duì)于這類(lèi)用戶(hù)心智模型的建立已相對(duì)完善,所以用戶(hù)并不完全依賴(lài)通過(guò)閱讀文字才能理解標(biāo)簽含義,更可能是利用位置記憶、圖形化等知識(shí)喚醒固有認(rèn)知來(lái)快速定位。
圖標(biāo)切換樣式
標(biāo)簽欄的圖標(biāo)設(shè)計(jì)這里就不做闡述了,如果不太清楚,請(qǐng)看這篇文章:
1. 圖標(biāo)切換風(fēng)格
眾所周知,底部標(biāo)簽欄圖標(biāo)都有選中與未選中狀態(tài),其「線性<面性」最為常見(jiàn),在市場(chǎng)所有應(yīng)用中的使用率接近 50%,主要優(yōu)勢(shì)在于線性圖標(biāo)可無(wú)限延伸,且選中與未選中狀態(tài)非常明顯,便于用戶(hù)快速定位。
不僅如此,產(chǎn)品也會(huì)根據(jù)不同的定位設(shè)計(jì)出不同風(fēng)格的圖標(biāo),給用戶(hù)傳達(dá)出不同的視覺(jué)感受。雖然樣式繁多、五花八門(mén),但常見(jiàn)的、實(shí)用的也就那么幾種,主要有:線性<線性、線性<面性、線性<線+面、面性<面性、面性<線+面、線+面<線+面這 6 種。
2. 圖標(biāo)切換交互
直接切換
雖然大家都知道,動(dòng)態(tài)的圖標(biāo)比靜態(tài)更吸引眼球,但對(duì)于嚴(yán)謹(jǐn)性、效率型的產(chǎn)品真的不適合加入任何動(dòng)畫(huà)效果,部分產(chǎn)品為了避免對(duì)用戶(hù)產(chǎn)生影響,甚至直接將圖標(biāo)去掉,如「抖音/快手」。直接切換能給人一種踏實(shí)、穩(wěn)重的感覺(jué),有效降低無(wú)關(guān)信息的干擾,但并非絕對(duì),需是產(chǎn)品性質(zhì)而定。
透明過(guò)渡
感知度較弱,相比純靜態(tài)顯得沒(méi)那么生硬,在圖標(biāo)切換過(guò)渡時(shí)更加自然柔和。
縮放
單一的縮放動(dòng)畫(huà)效果干凈利落、一步到位,其穩(wěn)定性與活力感比較平衡,相比上面的直接切換,在聚焦操作區(qū)域的同時(shí)提升標(biāo)簽切換的感知度。
線性生長(zhǎng)
線性生長(zhǎng)類(lèi)動(dòng)效相比縮放,在視覺(jué)表現(xiàn)力上更豐富,通過(guò)不同的表現(xiàn)方式很容易與同類(lèi)競(jìng)品形成差異化,讓產(chǎn)品看起來(lái)非常細(xì)膩,更具備品質(zhì)感。不過(guò)這類(lèi)動(dòng)效耗時(shí)較長(zhǎng),容易過(guò)度吸引用戶(hù)的注意力,需控制好切換動(dòng)效時(shí)長(zhǎng)。
填充
線性到面性風(fēng)格的轉(zhuǎn)變,以一種自然的節(jié)奏從中心或四角延伸,直接填充圖標(biāo)。部分產(chǎn)品為了提升過(guò)渡時(shí)的趣味性,會(huì)使用多種顏色依次進(jìn)行填充。
抖動(dòng)
抖動(dòng)的圖標(biāo)會(huì)顯得俏皮可愛(ài),一般動(dòng)效節(jié)奏較快,具備速度感。在設(shè)計(jì)動(dòng)效時(shí)通過(guò)簡(jiǎn)單的 K 幀+回彈表達(dá)式即可完成,利用左右/上下快速位移或旋轉(zhuǎn)來(lái)體現(xiàn)出抖動(dòng)、跳動(dòng)、晃動(dòng)的動(dòng)畫(huà)效果。
標(biāo)簽欄功能樣式延展
好的底部標(biāo)簽欄設(shè)計(jì)不僅在視覺(jué)上表現(xiàn)的出類(lèi)拔萃,其在功能和業(yè)務(wù)上也起到了不可替代的作用,可以是多功能延展、品牌傳播,亦或是活動(dòng)宣傳、產(chǎn)品促銷(xiāo)等,都能做到精準(zhǔn)把控。
1. 裝飾圖標(biāo)
不同風(fēng)格的圖標(biāo)不僅能利用多種表現(xiàn)方式提升整體視覺(jué)體驗(yàn),還能通過(guò)優(yōu)質(zhì)的觀賞性、趣味性來(lái)留住用戶(hù),減少用戶(hù)流失。
除此之外,可通過(guò)底部標(biāo)簽欄來(lái)滿(mǎn)足用戶(hù)情感需求和產(chǎn)品商業(yè)需求。比如:受不同的地域/文化影響、行業(yè)類(lèi)型需求,將標(biāo)簽欄圖標(biāo)樣式及色彩設(shè)計(jì)的與其屬性息息相關(guān),讓用戶(hù)與產(chǎn)品產(chǎn)生共鳴,以滿(mǎn)足情感需求;另外,國(guó)內(nèi)傳統(tǒng)節(jié)日「中秋/國(guó)慶」、國(guó)際促銷(xiāo)「618/雙 11」節(jié)日等,電商類(lèi)產(chǎn)品會(huì)提前換上相關(guān)的裝飾性圖標(biāo),體現(xiàn)出濃濃的節(jié)日氛圍,并引導(dǎo)用戶(hù)消費(fèi)。
2. 品牌基因融合
在標(biāo)簽欄融入品牌基因不但能傳達(dá)出獨(dú)特的品牌形象與氣質(zhì),還能讓用戶(hù)與產(chǎn)品產(chǎn)生聯(lián)動(dòng),留下深刻的記憶。
首先,已選中標(biāo)簽的主體色是傳播品牌形象的方式之一,絕大多數(shù)產(chǎn)品都會(huì)使用主體色,以確保與產(chǎn)品調(diào)性保持高度的一致;
其次,利用品牌 LOGO 替代產(chǎn)品首頁(yè)標(biāo)簽也是很常用的方式,可以在已使用品牌色的基礎(chǔ)上再利用 LOGO 進(jìn)行二次傳播,讓線上線下、APP 內(nèi)外都形成視覺(jué)關(guān)聯(lián);
除此之外,圖標(biāo)融入品牌元素、品牌名稱(chēng)、吉祥物等,都可以很好的進(jìn)行品牌形象傳播。
3. 一標(biāo)簽、多功能
底部標(biāo)簽欄最主要的作用是滿(mǎn)足用戶(hù)隨時(shí)切換到不同功能下的需求,為了給用戶(hù)提供的更多便利、增強(qiáng)用戶(hù)體驗(yàn),很多產(chǎn)品讓單個(gè)標(biāo)簽上同時(shí)承載 2~3 個(gè)功能,以滿(mǎn)足不同狀態(tài)下的需求。不過(guò)類(lèi)似這種多功能標(biāo)簽,一部分采用的是隱藏的方式,需要用戶(hù)在長(zhǎng)時(shí)間的使用中慢慢發(fā)掘。
餓了么首頁(yè)標(biāo)簽承載了三個(gè)功能(1.功能切換;2.頁(yè)面上滑會(huì)變成向上箭頭,點(diǎn)擊回到頂部;3.在頂部點(diǎn)擊會(huì)定位到第二屏分類(lèi)),全民 K 歌中間唱歌標(biāo)簽承載了兩個(gè)功能(1.功能切換;2.長(zhǎng)按彈出語(yǔ)音錄入歌名搜索)。
4. 多種傳達(dá)方式
如果產(chǎn)品需要給用戶(hù)更明確、清晰的反饋,不能僅局限于視覺(jué)層面,還能通過(guò)觸覺(jué)、聽(tīng)覺(jué)來(lái)強(qiáng)化用戶(hù)操作之后的反饋感知。有一點(diǎn)需要說(shuō)明的是,聽(tīng)覺(jué)、觸覺(jué)需要合理使用,并不是每個(gè)產(chǎn)品都適合,例如音樂(lè)類(lèi)產(chǎn)品,如果在聽(tīng)歌狀態(tài)下,切換標(biāo)簽時(shí)出現(xiàn)提示音,這時(shí)就成了干擾用戶(hù)的噪音,真的很破壞氣氛。
在淘寶點(diǎn)擊底部標(biāo)簽切換時(shí),會(huì)伴隨輕盈的水滴提示音,增加聽(tīng)覺(jué)感知;也有少部分產(chǎn)品在標(biāo)簽上增加了觸覺(jué)反饋,點(diǎn)擊時(shí)會(huì)有輕微震動(dòng),結(jié)合視覺(jué)變化,用戶(hù)的反饋感知?jiǎng)t更加強(qiáng)烈。
5. 自定義圖標(biāo)
標(biāo)簽欄圖標(biāo)自定義現(xiàn)在也比較常見(jiàn),如果產(chǎn)品需要強(qiáng)化某個(gè)標(biāo)簽,就可以采用這種方式對(duì)用戶(hù)進(jìn)行視覺(jué)引導(dǎo)。淘寶的「逛逛」標(biāo)簽隨時(shí)會(huì)根據(jù)系統(tǒng)推薦直播內(nèi)容變成主播頭像,在操作之后復(fù)原;百度網(wǎng)盤(pán)「我的」標(biāo)簽也會(huì)跟隨用戶(hù)頭像的變化保持一致。
6. 隱藏彩蛋
QQ 在消息圖標(biāo)中隱藏了趣味性的交互變化,雙擊或輕輕拖拽或會(huì)不同的搞怪表情,不過(guò)對(duì)功能沒(méi)有實(shí)際的作用,只能在一定程度上增加用戶(hù)與產(chǎn)品交流互動(dòng)的趣味性。
7. 百寶箱
將釘釘?shù)臉?biāo)簽欄輕輕上滑,就會(huì)出現(xiàn)平時(shí)常用的功能,好似一個(gè)百寶箱。不過(guò)采用這種方式需要有一個(gè)前提,提供的便捷入口必須是常用的、且原本功能入口層級(jí)較深,隱藏至標(biāo)簽欄只為方便用戶(hù)更快觸達(dá),原來(lái)的入口需繼續(xù)保留,否則,還不如去掉。
總結(jié)
底部標(biāo)簽欄是關(guān)聯(lián)整個(gè)產(chǎn)品架構(gòu)的重要組件,一定要將用戶(hù)想知道的、產(chǎn)品想要表達(dá)的信息準(zhǔn)確無(wú)誤的表現(xiàn)出來(lái),不能因?yàn)槟硞€(gè)細(xì)節(jié)的缺失讓用戶(hù)產(chǎn)生挫敗感,從而導(dǎo)致用戶(hù)流失。
要設(shè)計(jì)好底部標(biāo)簽欄并不復(fù)雜,但是要考慮的細(xì)節(jié)還是很多,如果只是了解到一些基礎(chǔ)的規(guī)范就著手設(shè)計(jì),那么這個(gè)標(biāo)簽欄只是一個(gè)承載導(dǎo)航的容器而已。需要做的是確保標(biāo)簽的可觸達(dá)性、一致性、相關(guān)聯(lián)性、可讀性,然后思考產(chǎn)品的特性并以及當(dāng)下媒介結(jié)合使用,讓其發(fā)揮出更大的作用,實(shí)現(xiàn)更高用戶(hù)價(jià)值和商業(yè)價(jià)值。
以上是筆者根據(jù)自身經(jīng)驗(yàn)及整理的部分資料對(duì)底部標(biāo)簽欄進(jìn)行的總結(jié),其實(shí)在實(shí)際工作中要用到的知識(shí)點(diǎn)并非止于此,不管是從視覺(jué)層面還是功能層面,都還有很多可以探索、深挖的點(diǎn),需要在實(shí)戰(zhàn)中不斷的思考和學(xué)習(xí),不斷提升,沒(méi)有最好、只有更好。
作者:能量眼球
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請(qǐng)?jiān)L問(wèn):網(wǎng)站技術(shù)
本文來(lái)源:http://gagu89.com/seodongtai/17381.html