這是標簽欄組件總結的第三期，也是最后一期了。本文我們著陸在真實的產品上，看看這些產品是如何升華標簽欄的。

三期主題預覽圖：

我們在前兩期的歸納里，分別解析了平臺規范下的標簽欄、和標簽欄最重要的圖標元素的設計與落地?？苫仡櫍?/p>

1. 搞明白標簽欄，再來說用戶體驗
2. 了解圖標規范，用Lottie動畫讓圖標落地

結合前兩期的內容，其實基本已經可以駕輕就熟地搞定標簽欄設計了。

但我掐指一算，發現事情并沒那么簡單。在我日常真實產品的使用過程和刻意的觀察中，發現有很多應用程序的標簽欄打破了常規。一部分在表現層層面有所創新，一部分甚至還利用標簽欄來為產品的部分功能賦能引流。

所以最后一期我們著陸在真實的產品上，看看這些產品是如何升華標簽欄的。

一、首先分清標簽欄和工具欄

標簽欄存在于應用程序屏幕的底部，但存在于應用程序屏幕底部的控件，就一定是標簽欄嗎？這可不一定。

Safari的底部有一組操作圖標，它們主要執行與當前頁面相關的動作的按鈕。它在用戶開始向下滑動頁面閱讀時隱藏，但點擊屏幕底部或上滑頁面時它又會再次顯示。

我們在前面的文章中提到：標簽欄是架構了多個屏幕之間頁面內容切換的容器。而這種只執行當前頁面操作的按鈕容器，iOS給它定義了另外一個名稱：工具欄。

工具欄一般只有在用戶可能需要對當前頁面執行操作的時候，才會顯示的控件，許多應用程序對工具欄都采用了不同的控制顯隱的操作手勢。

iOS人機交互規范特意強調需要設計者們區分標簽欄和工具欄。對于只執行當前頁面操作的工具，不應該和能夠切換頁面的標簽放置在一起。標簽欄是用于體現產品的框架結構，而工具欄卻是直接在當前頁面產生交互，放在一起會使用戶認知產生歧義。

但你是不是會有一個疑問，常?？匆娺@樣的標簽欄設計。他們不就是在標簽欄中混入了操作工具嗎？

二、舵式標簽及衍生

我們常在社區類APP中看到上圖這樣的標簽欄——標簽欄中部因為一個大型按鈕使標簽欄形成了舵峰，所以被稱為舵式標簽。

一般舵式標簽的顏色、大小等視覺表現會被設計得和其他普通標簽有所差異，通過視覺對比的方式吸引用戶關注。

舵式標簽通常和產品框架體現無關，大多數應用程序使用舵式標簽是用來承載系統功能。起初是因為社區類APP為了激勵和方便用戶隨時隨地地輸出UGC內容，所以把觸發用戶創作/發布的功能按鈕放置在標簽欄中。

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

答案是不盡然。工具欄中的操作一般只對當前頁面中的內容產生交互，而大部分舵式標簽承載的是全局性的功能，用戶可以在任意的頂級頁面中隨時隨地進行主要功能的操作，該操作并不隸屬于任何一個頁面下。

久而久之，因為舵式標簽可以很好地承載產品的重要功能，而被許多的應用程序設計所采用（尤其是內容社區類）。

但舵式標簽畢竟只是一種展現形式，利用其背后“以標簽欄承載重要功能”的方法，而衍生出的變形使用手法也越來越普遍。越來越多的應用采用舵式標簽或其原理，卻不再單一地用于承載產品功能，而是配合營銷場景、付費場景，給產品的變現、拉新賦能。

拼多多近一兩年在用戶拉新上下足了功夫，以“邀請好友助力，攢夠100元可提現”的營銷形式，促進用戶瘋狂分享。拼多多的病毒式營銷主要依附于社交軟件，由此還觸發了微信更新了一波封禁外鏈的新規章。從這個層面看來，拼多多的這次營銷活動無疑是成功的。

之前拼多多的營銷入口有首頁的Banner圖、金剛區和“個人中心”頁面，而現在已經直接將營銷入口放在了標簽欄中。同一個營銷活動竟然多次改變了功能入口，最后還是落在了標簽欄上。

我們可以通過拼多多這樣的動作總結出：標簽欄所承載的信息，能觸發用戶行為的可能性比Banner、功能列表等一系列表現形式要更勝一籌。

甩甩寶寶是騰訊融資的一款社交電商產品。甩甩寶寶的標簽欄，在UI表現層面本已經脫離了標準的標簽欄規范，進行了創新，他們還通過標簽欄依附了“分享”操作，方便店主身份用戶獲客。這一點和舵式標簽原理有著異曲同工的作用。

但畢竟舵式標簽算是打破了常規，將功能按鈕設計進了標簽欄中，所以我還是奉勸大家不要輕易嘗試。因為一般舵式標簽應該作用于什么功能或場景，這已經不單單是UI表現層的問題了。畢竟是體現產品結構層的標簽欄，是在無時無刻地向用戶傳遞著產品調性。

如果想使用舵式標簽，最好是從產品需求、用戶目標等各個層面進行分析、討論之后，再決定是否要如此設計。

三、合理減輕用戶視覺負擔

常規的標簽欄一般都會包含圖標和標簽標題，但有一些應用程序卻并沒有這么做。

坐擁4億日活的抖音APP的標簽欄就只包含了標簽文字，而沒有使用圖標。

以下是我個人的觀點及看法：

從視覺層面分析：抖音主打短視頻業務，用戶進入抖音，首頁即開始播放視頻。視頻內容紛繁復雜，如果我們把視頻內容看做一個頁面的背景，那么這個背景還是復雜的、動態的。如果在標簽欄中增加圖標，必定要縮小標簽標題文字size。并且頁面中的信息，基本都聚集在屏幕底部。增加圖標反而還要增加用戶的認知成本。

從用戶群體分析：抖音下沉用戶居多，并且用戶知識層面及年齡分布極廣。直接用大號的標簽文字，反而有助于各個層面的用戶更清晰地理解應用結構。

與此相反，花瓣APP就只采用了圖標，而沒有采用標簽文字。

其實這么做有一定的風險，請設計師謹慎嘗試。標簽欄如果僅有圖標，對圖標的意義傳達要求極高，即使設計出符合大眾認知的圖案，也會讓用戶產生疑惑，要通過嘗試點擊，來驗證自己的猜想是否正確。

花瓣敢如此設計，一來是因為用戶群體大部分都是設計師，對圖案表達有一定的認知程度；二來是因為對比web版的花瓣，移動端所承載的功能相對比較簡單，結構比較清晰。

如果你的產品結構比較復雜，請不要輕易嘗試省去標簽文字。雖然減輕了用戶的視覺負擔，但用戶認知成本增加了，不能讓用戶輕松地找到想要的功能，極大地降低了用戶體驗，那就得不償失了。

所以綜上所述，減少部分視覺元素可以減輕用戶視覺負擔。但減少圖標的被接受程度是大于減少標簽文字的。

四、優秀案例解析——馬蜂窩標簽欄的改版創新

年初，馬蜂窩進行了10.0版本迭代。該版本對整個移動端頁面進行了大幅改動，其中標簽欄的樣式與交互方式的更新，讓我眼前一亮。

馬蜂窩曾經的標簽欄和市場內普遍的應用程序沒有區別，而這一次大版本更新，馬蜂窩設計團隊對標簽欄進行了新的嘗試。

首先是標簽類目減少，產品結構更加清晰。之前的“目的地”、“酒店”、“我的”全部移入頁面之中，不再作為獨立結構展示。僅保留了“首頁”和“去旅行”（“去旅行”板塊=前版本的“旅行商場”），新增了舵式按鈕，強化用戶創建旅行筆記的操作。

并且在用戶下滑頁面時，“首頁”和“去旅行”被收縮隱藏，給首頁的內容流增加了更多的視覺版面，方便用戶閱覽。

標簽欄的改版，一定關系到產品框架層的重組和產品側重面的偏移。從這一次馬蜂窩標簽欄改版，很明顯地感受到了馬蜂窩對主要營收業務的重視，剔除了許多引導用戶進入商城的干擾路徑。并且把UGC內容的重要程度也進行了拔高。

不論是從舵式標簽的使用，還是合理減輕用戶視覺負擔，馬蜂窩這一次標簽欄改版都做的恰到好處，個人是非常欣賞的。但對于這次迭代，目前還沒有相關用戶數據可查，也沒有查閱到相關設計師的改版總結文獻，所以真實的用戶效果和反饋我們可以再拭目以待一下。

五、總結

每一次講到控件的進階使用，我發現總離不開交互和產品商業價值?！斑M階”就是為了突破規范的瓶頸，探索UI能夠溢出表現層之外的價值。

所以標簽欄也不例外，我們如果只關注于平臺規范，那么標簽欄只是一個承載框架的容器。但通過對眾多應用程序的觀察，許多產品、設計團隊已經開始平衡控件的用戶價值和商業價值。

多多去思考和學習，不僅僅能提升自己的視覺能力，對于產品思維方面也會得到一些進步。

作者：UCD耍家；公眾號：UCD耍家（ID：ucdplayer）

本文由 @UCD耍家 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議