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

三期主題預覽圖：

我們在前兩期的歸納裡，分别解析了平台規範下的标簽欄、和标簽欄最重要的圖标元素的設計與落地。可回顧：

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

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

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

所以最後一期我們着陸在真實的産品上，看看這些産品是如何升華标簽欄的。

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

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

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

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

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

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

但你是不是會有一個疑問，常常看見這樣的标簽欄設計。他們不就是在标簽欄中混入了操作工具嗎？

二、舵式标簽及衍生

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

五、總結

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

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

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

作者：Howie_t；公衆号：UCD耍家（ID：ucdplayer）

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

題圖來自Unsplash，基于CC0協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部