無極5註冊_從真實產品案例出發,分析高手是如何做好標籤欄設計的?

這是標籤欄組件總結的第三期,也是最後一期了。

我們在前兩期的歸納里,分別解析了平台規範下的標籤欄、和標籤欄最重要的圖標元素的設計與落地。可回顧:

用三期乾貨,全方位解析「標籤欄」控件設計

本系列將分三期全方位解析如何做好標籤欄設計,第一期先從 iOS 人機交互規範和 Google Material Design 平台規範切入,來系統梳理一下「標籤欄」。

閱讀文章 >>

掏空家底!圖標設計落地全方位指南

這一期真的是掏空了職業經驗,總結出一套圖標製作與落地方法,內容涵蓋真實項目中的大多數坑點。

閱讀文章 >>

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

但我掐指一算,發現事情並沒那麼簡單。在我日常真實產品的使用過程和刻意的觀察中,發現有很多應用程序的標籤欄打破了常規,一部分在表現層層面有所創新,一部分甚至還利用標籤欄來為產品的部分功能賦能引流。所以最後一期我們着陸在真實的產品上,看看這些產品是如何升華標籤欄的。

首先分清標籤欄和工具欄

標籤欄存在於應用程序屏幕的底部,但存在於應用程序屏幕底部的控件,就一定是標籤欄嗎?這可不一定。

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

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

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

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

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

舵式標籤及衍生

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

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

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

那麼這算不算是違背了iOS的規範定義,把工具欄的功能,糅雜在了標籤欄中呢?

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

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

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

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

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

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

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

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

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

合理減輕用戶視覺負擔

常規的標籤欄一般都會包含圖標和標籤標題。但有一些應用程序卻並沒有這麼做。

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

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

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

從用戶群體分析:抖音下沉用戶居多,並且用戶知識層面及年齡分佈極廣。直接用大號的標籤文字,反而有助於各個層面的用戶更清晰地理解應用結構。

與此相反,花瓣APP就只採用了圖標,而沒有採用標籤文字。

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

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

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

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

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

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

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

首先是標籤類目減少,產品結構更加清晰。之前的「目的地」、「酒店」、「我的」全部移入頁面之中,不再作為獨立結構展示。僅保留了「首頁」和「去旅行」(「去旅行」板塊=前版本的「旅行商場」),新增了舵式按鈕,強化用戶創建旅行筆記的操作。並且在用戶下滑頁面時,「首頁」和「去旅行」被收縮隱藏,給首頁的內容流增加了更多的視覺版面,方便用戶閱覽。

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

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

總結

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

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

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

歡迎大家關注作者微信公眾號:「UCD耍家」

未经-摩登3注册-摩登3测速官网-允许不得转载:摩登3注册-摩登3测速官网 » 無極5註冊_從真實產品案例出發,分析高手是如何做好標籤欄設計的?

赞 (0)