這是標(biāo)簽欄組件總結(jié)的第三期，也是最后一期了。本文我們著陸在真實(shí)的產(chǎn)品上，看看這些產(chǎn)品是如何升華標(biāo)簽欄的。

三期主題預(yù)覽圖：

我們?cè)谇皟善诘臍w納里，分別解析了平臺(tái)規(guī)范下的標(biāo)簽欄、和標(biāo)簽欄最重要的圖標(biāo)元素的設(shè)計(jì)與落地?？苫仡櫍?/p>

1. 搞明白標(biāo)簽欄，再來(lái)說(shuō)用戶(hù)體驗(yàn)
2. 了解圖標(biāo)規(guī)范，用Lottie動(dòng)畫(huà)讓圖標(biāo)落地

結(jié)合前兩期的內(nèi)容，其實(shí)基本已經(jīng)可以駕輕就熟地搞定標(biāo)簽欄設(shè)計(jì)了。

但我掐指一算，發(fā)現(xiàn)事情并沒(méi)那么簡(jiǎn)單。在我日常真實(shí)產(chǎn)品的使用過(guò)程和刻意的觀察中，發(fā)現(xiàn)有很多應(yīng)用程序的標(biāo)簽欄打破了常規(guī)。一部分在表現(xiàn)層層面有所創(chuàng)新，一部分甚至還利用標(biāo)簽欄來(lái)為產(chǎn)品的部分功能賦能引流。

所以最后一期我們著陸在真實(shí)的產(chǎn)品上，看看這些產(chǎn)品是如何升華標(biāo)簽欄的。

一、首先分清標(biāo)簽欄和工具欄

標(biāo)簽欄存在于應(yīng)用程序屏幕的底部，但存在于應(yīng)用程序屏幕底部的控件，就一定是標(biāo)簽欄嗎？這可不一定。

Safari的底部有一組操作圖標(biāo)，它們主要執(zhí)行與當(dāng)前頁(yè)面相關(guān)的動(dòng)作的按鈕。它在用戶(hù)開(kāi)始向下滑動(dòng)頁(yè)面閱讀時(shí)隱藏，但點(diǎn)擊屏幕底部或上滑頁(yè)面時(shí)它又會(huì)再次顯示。

我們?cè)谇懊娴奈恼轮刑岬剑?strong>標(biāo)簽欄是架構(gòu)了多個(gè)屏幕之間頁(yè)面內(nèi)容切換的容器。而這種只執(zhí)行當(dāng)前頁(yè)面操作的按鈕容器，iOS給它定義了另外一個(gè)名稱(chēng)：工具欄。

工具欄一般只有在用戶(hù)可能需要對(duì)當(dāng)前頁(yè)面執(zhí)行操作的時(shí)候，才會(huì)顯示的控件，許多應(yīng)用程序?qū)ぞ邫诙疾捎昧瞬煌目刂骑@隱的操作手勢(shì)。

iOS人機(jī)交互規(guī)范特意強(qiáng)調(diào)需要設(shè)計(jì)者們區(qū)分標(biāo)簽欄和工具欄。對(duì)于只執(zhí)行當(dāng)前頁(yè)面操作的工具，不應(yīng)該和能夠切換頁(yè)面的標(biāo)簽放置在一起。標(biāo)簽欄是用于體現(xiàn)產(chǎn)品的框架結(jié)構(gòu)，而工具欄卻是直接在當(dāng)前頁(yè)面產(chǎn)生交互，放在一起會(huì)使用戶(hù)認(rèn)知產(chǎn)生歧義。

但你是不是會(huì)有一個(gè)疑問(wèn)，常?？匆?jiàn)這樣的標(biāo)簽欄設(shè)計(jì)。他們不就是在標(biāo)簽欄中混入了操作工具嗎？

二、舵式標(biāo)簽及衍生

我們常在社區(qū)類(lèi)APP中看到上圖這樣的標(biāo)簽欄——標(biāo)簽欄中部因?yàn)橐粋€(gè)大型按鈕使標(biāo)簽欄形成了舵峰，所以被稱(chēng)為舵式標(biāo)簽。

一般舵式標(biāo)簽的顏色、大小等視覺(jué)表現(xiàn)會(huì)被設(shè)計(jì)得和其他普通標(biāo)簽有所差異，通過(guò)視覺(jué)對(duì)比的方式吸引用戶(hù)關(guān)注。

舵式標(biāo)簽通常和產(chǎn)品框架體現(xiàn)無(wú)關(guān)，大多數(shù)應(yīng)用程序使用舵式標(biāo)簽是用來(lái)承載系統(tǒng)功能。起初是因?yàn)樯鐓^(qū)類(lèi)APP為了激勵(lì)和方便用戶(hù)隨時(shí)隨地地輸出UGC內(nèi)容，所以把觸發(fā)用戶(hù)創(chuàng)作/發(fā)布的功能按鈕放置在標(biāo)簽欄中。

那么這算不算是違背了iOS的規(guī)范定義，把工具欄的功能，糅雜在了標(biāo)簽欄中呢？

答案是不盡然。工具欄中的操作一般只對(duì)當(dāng)前頁(yè)面中的內(nèi)容產(chǎn)生交互，而大部分舵式標(biāo)簽承載的是全局性的功能，用戶(hù)可以在任意的頂級(jí)頁(yè)面中隨時(shí)隨地進(jìn)行主要功能的操作，該操作并不隸屬于任何一個(gè)頁(yè)面下。

久而久之，因?yàn)槎媸綐?biāo)簽可以很好地承載產(chǎn)品的重要功能，而被許多的應(yīng)用程序設(shè)計(jì)所采用（尤其是內(nèi)容社區(qū)類(lèi)）。

但舵式標(biāo)簽畢竟只是一種展現(xiàn)形式，利用其背后“以標(biāo)簽欄承載重要功能”的方法，而衍生出的變形使用手法也越來(lái)越普遍。越來(lái)越多的應(yīng)用采用舵式標(biāo)簽或其原理，卻不再單一地用于承載產(chǎn)品功能，而是配合營(yíng)銷(xiāo)場(chǎng)景、付費(fèi)場(chǎng)景，給產(chǎn)品的變現(xiàn)、拉新賦能。

拼多多近一兩年在用戶(hù)拉新上下足了功夫，以“邀請(qǐng)好友助力，攢夠100元可提現(xiàn)”的營(yíng)銷(xiāo)形式，促進(jìn)用戶(hù)瘋狂分享。拼多多的病毒式營(yíng)銷(xiāo)主要依附于社交軟件，由此還觸發(fā)了微信更新了一波封禁外鏈的新規(guī)章。從這個(gè)層面看來(lái)，拼多多的這次營(yíng)銷(xiāo)活動(dòng)無(wú)疑是成功的。

之前拼多多的營(yíng)銷(xiāo)入口有首頁(yè)的Banner圖、金剛區(qū)和“個(gè)人中心”頁(yè)面，而現(xiàn)在已經(jīng)直接將營(yíng)銷(xiāo)入口放在了標(biāo)簽欄中。同一個(gè)營(yíng)銷(xiāo)活動(dòng)竟然多次改變了功能入口，最后還是落在了標(biāo)簽欄上。

我們可以通過(guò)拼多多這樣的動(dòng)作總結(jié)出：標(biāo)簽欄所承載的信息，能觸發(fā)用戶(hù)行為的可能性比Banner、功能列表等一系列表現(xiàn)形式要更勝一籌。

甩甩寶寶是騰訊融資的一款社交電商產(chǎn)品。甩甩寶寶的標(biāo)簽欄，在UI表現(xiàn)層面本已經(jīng)脫離了標(biāo)準(zhǔn)的標(biāo)簽欄規(guī)范，進(jìn)行了創(chuàng)新，他們還通過(guò)標(biāo)簽欄依附了“分享”操作，方便店主身份用戶(hù)獲客。這一點(diǎn)和舵式標(biāo)簽原理有著異曲同工的作用。

但畢竟舵式標(biāo)簽算是打破了常規(guī)，將功能按鈕設(shè)計(jì)進(jìn)了標(biāo)簽欄中，所以我還是奉勸大家不要輕易嘗試。因?yàn)?strong>一般舵式標(biāo)簽應(yīng)該作用于什么功能或場(chǎng)景，這已經(jīng)不單單是UI表現(xiàn)層的問(wèn)題了。畢竟是體現(xiàn)產(chǎn)品結(jié)構(gòu)層的標(biāo)簽欄，是在無(wú)時(shí)無(wú)刻地向用戶(hù)傳遞著產(chǎn)品調(diào)性。

如果想使用舵式標(biāo)簽，最好是從產(chǎn)品需求、用戶(hù)目標(biāo)等各個(gè)層面進(jìn)行分析、討論之后，再?zèng)Q定是否要如此設(shè)計(jì)。

三、合理減輕用戶(hù)視覺(jué)負(fù)擔(dān)

常規(guī)的標(biāo)簽欄一般都會(huì)包含圖標(biāo)和標(biāo)簽標(biāo)題，但有一些應(yīng)用程序卻并沒(méi)有這么做。

坐擁4億日活的抖音APP的標(biāo)簽欄就只包含了標(biāo)簽文字，而沒(méi)有使用圖標(biāo)。

以下是我個(gè)人的觀點(diǎn)及看法：

從視覺(jué)層面分析：抖音主打短視頻業(yè)務(wù)，用戶(hù)進(jìn)入抖音，首頁(yè)即開(kāi)始播放視頻。視頻內(nèi)容紛繁復(fù)雜，如果我們把視頻內(nèi)容看做一個(gè)頁(yè)面的背景，那么這個(gè)背景還是復(fù)雜的、動(dòng)態(tài)的。如果在標(biāo)簽欄中增加圖標(biāo)，必定要縮小標(biāo)簽標(biāo)題文字size。并且頁(yè)面中的信息，基本都聚集在屏幕底部。增加圖標(biāo)反而還要增加用戶(hù)的認(rèn)知成本。

從用戶(hù)群體分析：抖音下沉用戶(hù)居多，并且用戶(hù)知識(shí)層面及年齡分布極廣。直接用大號(hào)的標(biāo)簽文字，反而有助于各個(gè)層面的用戶(hù)更清晰地理解應(yīng)用結(jié)構(gòu)。

與此相反，花瓣APP就只采用了圖標(biāo)，而沒(méi)有采用標(biāo)簽文字。

其實(shí)這么做有一定的風(fēng)險(xiǎn)，請(qǐng)?jiān)O(shè)計(jì)師謹(jǐn)慎嘗試。標(biāo)簽欄如果僅有圖標(biāo)，對(duì)圖標(biāo)的意義傳達(dá)要求極高，即使設(shè)計(jì)出符合大眾認(rèn)知的圖案，也會(huì)讓用戶(hù)產(chǎn)生疑惑，要通過(guò)嘗試點(diǎn)擊，來(lái)驗(yàn)證自己的猜想是否正確。

花瓣敢如此設(shè)計(jì)，一來(lái)是因?yàn)橛脩?hù)群體大部分都是設(shè)計(jì)師，對(duì)圖案表達(dá)有一定的認(rèn)知程度；二來(lái)是因?yàn)閷?duì)比web版的花瓣，移動(dòng)端所承載的功能相對(duì)比較簡(jiǎn)單，結(jié)構(gòu)比較清晰。

如果你的產(chǎn)品結(jié)構(gòu)比較復(fù)雜，請(qǐng)不要輕易嘗試省去標(biāo)簽文字。雖然減輕了用戶(hù)的視覺(jué)負(fù)擔(dān)，但用戶(hù)認(rèn)知成本增加了，不能讓用戶(hù)輕松地找到想要的功能，極大地降低了用戶(hù)體驗(yàn)，那就得不償失了。

所以綜上所述，減少部分視覺(jué)元素可以減輕用戶(hù)視覺(jué)負(fù)擔(dān)。但減少圖標(biāo)的被接受程度是大于減少標(biāo)簽文字的。

四、優(yōu)秀案例解析——馬蜂窩標(biāo)簽欄的改版創(chuàng)新

年初，馬蜂窩進(jìn)行了10.0版本迭代。該版本對(duì)整個(gè)移動(dòng)端頁(yè)面進(jìn)行了大幅改動(dòng)，其中標(biāo)簽欄的樣式與交互方式的更新，讓我眼前一亮。

馬蜂窩曾經(jīng)的標(biāo)簽欄和市場(chǎng)內(nèi)普遍的應(yīng)用程序沒(méi)有區(qū)別，而這一次大版本更新，馬蜂窩設(shè)計(jì)團(tuán)隊(duì)對(duì)標(biāo)簽欄進(jìn)行了新的嘗試。

首先是標(biāo)簽類(lèi)目減少，產(chǎn)品結(jié)構(gòu)更加清晰。之前的“目的地”、“酒店”、“我的”全部移入頁(yè)面之中，不再作為獨(dú)立結(jié)構(gòu)展示。僅保留了“首頁(yè)”和“去旅行”（“去旅行”板塊=前版本的“旅行商場(chǎng)”），新增了舵式按鈕，強(qiáng)化用戶(hù)創(chuàng)建旅行筆記的操作。

并且在用戶(hù)下滑頁(yè)面時(shí)，“首頁(yè)”和“去旅行”被收縮隱藏，給首頁(yè)的內(nèi)容流增加了更多的視覺(jué)版面，方便用戶(hù)閱覽。

標(biāo)簽欄的改版，一定關(guān)系到產(chǎn)品框架層的重組和產(chǎn)品側(cè)重面的偏移。從這一次馬蜂窩標(biāo)簽欄改版，很明顯地感受到了馬蜂窩對(duì)主要營(yíng)收業(yè)務(wù)的重視，剔除了許多引導(dǎo)用戶(hù)進(jìn)入商城的干擾路徑。并且把UGC內(nèi)容的重要程度也進(jìn)行了拔高。

不論是從舵式標(biāo)簽的使用，還是合理減輕用戶(hù)視覺(jué)負(fù)擔(dān)，馬蜂窩這一次標(biāo)簽欄改版都做的恰到好處，個(gè)人是非常欣賞的。但對(duì)于這次迭代，目前還沒(méi)有相關(guān)用戶(hù)數(shù)據(jù)可查，也沒(méi)有查閱到相關(guān)設(shè)計(jì)師的改版總結(jié)文獻(xiàn)，所以真實(shí)的用戶(hù)效果和反饋我們可以再拭目以待一下。

五、總結(jié)

每一次講到控件的進(jìn)階使用，我發(fā)現(xiàn)總離不開(kāi)交互和產(chǎn)品商業(yè)價(jià)值?！斑M(jìn)階”就是為了突破規(guī)范的瓶頸，探索UI能夠溢出表現(xiàn)層之外的價(jià)值。

所以標(biāo)簽欄也不例外，我們?nèi)绻魂P(guān)注于平臺(tái)規(guī)范，那么標(biāo)簽欄只是一個(gè)承載框架的容器。但通過(guò)對(duì)眾多應(yīng)用程序的觀察，許多產(chǎn)品、設(shè)計(jì)團(tuán)隊(duì)已經(jīng)開(kāi)始平衡控件的用戶(hù)價(jià)值和商業(yè)價(jià)值。

多多去思考和學(xué)習(xí)，不僅僅能提升自己的視覺(jué)能力，對(duì)于產(chǎn)品思維方面也會(huì)得到一些進(jìn)步。

作者：UCD耍家；公眾號(hào)：UCD耍家（ID：ucdplayer）

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

題圖來(lái)自Unsplash，基于CC0協(xié)議