標簽欄?工具欄?傻傻分不清楚

5 評論 11923 瀏覽 95 收藏 14 分鐘

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

三期主題預覽圖:

耍好控件 | 標簽欄?工具欄?傻傻分不清楚

我們在前兩期的歸納里,分別解析了平臺規范下的標簽欄、和標簽欄最重要的圖標元素的設計與落地??苫仡櫍?/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協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 寫的很棒 大家都沉浸在文章中而忽略了評論了嗎

    回復
  2. 什么時候“產品經理”APP瀏覽文章底部的工具欄可以滑動消失

    回復
  3. 回復
  4. UI設計體現了這個產品調性和側重點 UI設計也是半個產品經理啊

    回復
  5. 講得全,講得透。期待更新更多的文章。

    回復