關(guān)于線上產(chǎn)品標(biāo)簽欄(Tab Bar)的解構(gòu)和分析

0 評論 11507 瀏覽 71 收藏 21 分鐘

編輯導(dǎo)語:我們在使用產(chǎn)品時,經(jīng)常會用到標(biāo)簽或者標(biāo)題進行查找,這樣可以更快的讓用戶找到預(yù)期目標(biāo);清晰有效的標(biāo)簽也能一定程度上提高用戶體驗,用細節(jié)提升好感;本文作者分享了關(guān)于線上產(chǎn)品標(biāo)題欄的解構(gòu)與分析,我們一起來了解一下。

標(biāo)簽欄(Tab Bar)是界面設(shè)計繞不開的一個課題,絕大多數(shù)產(chǎn)品都必需一個視覺美觀、反饋清晰的標(biāo)簽欄來傳達品牌形象。

本篇文章將討論與標(biāo)簽欄相關(guān)的設(shè)計細節(jié),并嘗試分析設(shè)計背后的思考;所有案例均來源于各大線上產(chǎn)品,觀點僅來源于個人粗淺的分析,如果有哪里說得不對的地方,希望大家多多指點。

關(guān)于線上產(chǎn)品標(biāo)題欄(Tab Bar)的解構(gòu)和分析

一、理解標(biāo)簽欄作用

根據(jù)iOS人機交互指南,標(biāo)簽欄(Tab Bar)是用于組織APP結(jié)構(gòu),以扁平層級,只用于導(dǎo)航的基礎(chǔ)控件。

標(biāo)簽欄不應(yīng)承載任何操作,如果需要執(zhí)行操作,應(yīng)選用工具欄(Tool Bar);標(biāo)簽數(shù)量一般在3-5個(針對手機,pad端可以適當(dāng)多一些),如果標(biāo)簽太多,最后一個標(biāo)簽可以是“更多”,將更多的標(biāo)簽收納其中。

標(biāo)簽欄的主要作用有以下2點:

1. 定位導(dǎo)航 & 凸顯品牌

關(guān)于線上產(chǎn)品標(biāo)題欄(Tab Bar)的解構(gòu)和分析

1)定位導(dǎo)航

一般情況下,標(biāo)簽欄常駐于各一級頁面底部。選中標(biāo)簽明確提示用戶當(dāng)前所處位置,當(dāng)用戶想要前往其他一級頁面時,只需切換底部標(biāo)簽即可。

關(guān)于線上產(chǎn)品標(biāo)題欄(Tab Bar)的解構(gòu)和分析

2)凸顯品牌

首頁是產(chǎn)品給用戶留下第一印象的關(guān)鍵一步,標(biāo)簽欄中的視覺元素,包括選中標(biāo)簽的顏色、圖標(biāo)形式、組合樣式等等無不體現(xiàn)了產(chǎn)品氣質(zhì)。

關(guān)于線上產(chǎn)品標(biāo)題欄(Tab Bar)的解構(gòu)和分析

二、整理標(biāo)簽欄分類

不同維度下,標(biāo)簽欄可以被分為多種類型;我們不妨從以下5個維度依次對標(biāo)簽欄進行分類,以便觀察研究不同的分類方式下標(biāo)簽欄的不同特點。

關(guān)于線上產(chǎn)品標(biāo)題欄(Tab Bar)的解構(gòu)和分析

1. 位置維度

常見的標(biāo)簽欄一般是吸附于屏幕底部,不隨用戶手勢滑動而發(fā)生位置變化;然而也有一些產(chǎn)品為了切合用戶的使用場景,做了一些位置上的調(diào)整,可能呈現(xiàn)懸浮狀態(tài)或者會隨著用戶手勢改變而發(fā)生位移。

關(guān)于線上產(chǎn)品標(biāo)題欄(Tab Bar)的解構(gòu)和分析

常規(guī)吸底的標(biāo)簽欄:

  • 優(yōu)勢:更加符合用戶心智,用戶的認知和操作成本最低。可以隨時方便地切換頁面。
  • 劣勢:頁面底部約90pt(劉海機型)高度的部分被遮擋,內(nèi)容層展示效率進行了一定程度的讓渡。

懸浮類的標(biāo)簽欄:

  • 優(yōu)勢:屏幕遮擋區(qū)域小,為用戶爭取了更多的視覺空間瀏覽信息。
  • 劣勢:用戶第一時間會感到陌生,同時操作成本有所上升。尤其是唯品會案例,左側(cè)三個標(biāo)簽比較擁擠,且在單手握持的情況下,很容易誤操作。

有道詞典和馬蜂窩給出了一個折中兩全的解決方案:根據(jù)用戶的操作手勢推測用戶意圖,決定是否展示/隱藏標(biāo)簽欄。

當(dāng)用戶向上滑動屏幕時,我們認為,用戶的意圖是瀏覽下方更多信息,此時就將標(biāo)簽欄隱藏,直到用戶出現(xiàn)向下滑動屏幕的手勢時,顯示標(biāo)簽欄,給用戶提供便利的跳轉(zhuǎn)操作。

關(guān)于線上產(chǎn)品標(biāo)題欄(Tab Bar)的解構(gòu)和分析

2. 功能維度

標(biāo)簽欄是由多個標(biāo)簽組成,通常情況下,標(biāo)簽的展示形式相同,沒有側(cè)重;然而在一些產(chǎn)品中,為了突出某一核心功能,通常會將該功能對應(yīng)的標(biāo)簽進行視覺上的強調(diào)。

關(guān)于線上產(chǎn)品標(biāo)題欄(Tab Bar)的解構(gòu)和分析

關(guān)于線上產(chǎn)品標(biāo)題欄(Tab Bar)的解構(gòu)和分析

3. 標(biāo)簽組合方式維度

組成標(biāo)簽欄的元素有:文字、圖標(biāo)、底板等…將不同元素排列組合,可以形成許多不同的組合結(jié)果,不同的組合對應(yīng)不同的標(biāo)簽欄樣式。

關(guān)于線上產(chǎn)品標(biāo)題欄(Tab Bar)的解構(gòu)和分析

關(guān)于線上產(chǎn)品標(biāo)題欄(Tab Bar)的解構(gòu)和分析

關(guān)于線上產(chǎn)品標(biāo)題欄(Tab Bar)的解構(gòu)和分析

關(guān)于線上產(chǎn)品標(biāo)題欄(Tab Bar)的解構(gòu)和分析

純文字:

兩大短視頻產(chǎn)品(抖音&快手)以及重工具性的高德地圖,都選用了純文字的樣式;純文字的樣式在視覺上對用戶注意力影響最?。ū娝苤?,圖像比文字天然更具視覺吸引力),用戶可以更加集中地將注意力放在內(nèi)容視圖,專注于信息本身。

視頻流產(chǎn)品需要打造沉浸感,以便用戶能連貫自然地看盡可能多的內(nèi)容。因此收斂標(biāo)簽欄視覺占比十分合理科學(xué)。

同理,對于強工具性的高德地圖來說,用戶的使用場景多集中在戶外,物理環(huán)境混亂復(fù)雜,界面需要最大程度幫助用戶快速聚焦;地圖視圖無疑是用戶視覺的最重要落點,減弱標(biāo)簽欄的視覺表現(xiàn)是一個不錯的設(shè)計思路。

純圖標(biāo):

相較于國內(nèi)產(chǎn)品,海外產(chǎn)品更常用純圖標(biāo)類型的標(biāo)簽欄。個人理解是,采樣的3款產(chǎn)品(FB、IG、Twitter)都是已經(jīng)高度普及的產(chǎn)品,用戶對產(chǎn)品結(jié)構(gòu)的心智模型已經(jīng)建立完善。

用戶不需要通過閱讀文字才能理解標(biāo)簽的含義,更有可能是通過位置記憶來定位,圖標(biāo)很有可能只是起輔助識別的效果。

繼承上文思路,同樣是普及性很高的產(chǎn)品,為什么國內(nèi)的國民產(chǎn)品如微信、支付寶并沒有去掉標(biāo)簽欄文字呢?原因可能和目標(biāo)用戶群體的年齡分布情況有關(guān),上文中使用純圖標(biāo)的海外產(chǎn)品涵蓋的用戶群體相對更年輕,而國內(nèi)的國民產(chǎn)品幾乎達到了全年齡段的覆蓋;去掉文字對表意的影響相對不可控,對于相當(dāng)數(shù)量的中老年用戶來說,單憑圖標(biāo)來理解含義比較困難。

圖標(biāo)加文字:

最常見的組合形式,最為穩(wěn)妥、不易出錯。

特殊樣式:

視覺傳遞服務(wù)于功能表達,對于需要強調(diào)的功能,自然要使用更加高調(diào)醒目的視覺形式加以凸顯。某些情況下,單獨凸顯一個強勢功能即可,如轉(zhuǎn)轉(zhuǎn)的發(fā)布功能;而另外的情況下,要凸顯的不是某一具體功能,而是選中的狀態(tài),幫助用戶更好定位(如美團外賣)。

4. 圖標(biāo)風(fēng)格維度

  • 根據(jù)圖標(biāo)的造型將圖標(biāo)分為:線性圖標(biāo)、面性圖標(biāo)、線面結(jié)合圖標(biāo)三大類。
  • 根據(jù)圖標(biāo)的視覺風(fēng)格可以分為:扁平、微立體、雙色、毛玻璃效果等等……

關(guān)于線上產(chǎn)品標(biāo)題欄(Tab Bar)的解構(gòu)和分析

線性圖標(biāo):選中狀圖和未選中狀態(tài)均是線性圖標(biāo)。

  • 優(yōu)勢:造型耐看、有質(zhì)感。
  • 劣勢:只能用顏色或者透明度進行不同狀態(tài)之間的區(qū)分,選中狀態(tài)與未選中狀態(tài)之間的差異相對較小(尤其在暗色模式下),可能會造成用戶定位當(dāng)前位置時發(fā)生偏差。

關(guān)于線上產(chǎn)品標(biāo)題欄(Tab Bar)的解構(gòu)和分析

面性圖標(biāo):選中狀態(tài)和未選中狀態(tài)均是面性圖標(biāo)。

  • 優(yōu)勢:造型內(nèi)收緊湊、色塊更加容易吸引用戶注意。
  • 劣勢:只能用顏色或者透明度進行不同狀態(tài)之間的區(qū)分。

關(guān)于線上產(chǎn)品標(biāo)題欄(Tab Bar)的解構(gòu)和分析

線面結(jié)合圖標(biāo):選中狀態(tài)是面性、未選中狀態(tài)是線性圖標(biāo)。

不同狀態(tài)之間差異度大,用戶更容易快速定位所在位置;選中和未選中對應(yīng)線性和面性兩套圖標(biāo),視覺發(fā)揮空間大,是當(dāng)前最被廣泛采用的設(shè)計策略。

關(guān)于線上產(chǎn)品標(biāo)題欄(Tab Bar)的解構(gòu)和分析

5. 運營維度

為了配合節(jié)日、大促、周年慶等活動,標(biāo)簽欄可能會需要特殊設(shè)計。

關(guān)于線上產(chǎn)品標(biāo)題欄(Tab Bar)的解構(gòu)和分析

為了烘托專題氣氛,需要對標(biāo)簽欄做或多或少的修改。當(dāng)專題氣氛需要很濃烈時,如大促、春節(jié)等,標(biāo)簽欄圖標(biāo)在造型上會和平時有很大區(qū)別。

  • 優(yōu)勢:頁面整體氛圍一致,氣氛熱烈。
  • 劣勢:標(biāo)簽欄的圖標(biāo)識別度非常低,需要靠用戶記憶位置或通過閱讀文字來拾取信息,降低使用效率。

三、細化視覺規(guī)范

上面從整體的角度對標(biāo)簽欄進行了分類,接下來將從4個細節(jié)的角度對標(biāo)簽欄進行拆解。

關(guān)于線上產(chǎn)品標(biāo)題欄(Tab Bar)的解構(gòu)和分析

1. 布局方式 & 分割方式

大多數(shù)情況下,根據(jù)標(biāo)簽個數(shù)將頁面寬度等分即可。對于非通欄的特殊標(biāo)簽欄,標(biāo)簽的寬度不受屏幕寬度影響,居中懸浮于視圖底部;“分割”指的是標(biāo)題欄和上方內(nèi)容視圖的分割。

如何建立分割感?方式有以下3種:

  • 層級分割:使用投影
  • 線分割:使用分割線
  • 顏色分割:使用顏色

關(guān)于線上產(chǎn)品標(biāo)題欄(Tab Bar)的解構(gòu)和分析

關(guān)于線上產(chǎn)品標(biāo)題欄(Tab Bar)的解構(gòu)和分析

越來越多的產(chǎn)品選擇扁平的視覺風(fēng)格,投影風(fēng)格勢頭不再。以微信為標(biāo)志,去掉頭部黑色導(dǎo)航欄,用毛玻璃效果取代;結(jié)合其他巨頭產(chǎn)品的迭代情況,不難看到,當(dāng)前的界面設(shè)計思路是不斷化繁為簡、去偽存真的過程。

降低視覺噪音,讓用戶的注意力更好的聚焦信息本身,減弱不必要的視覺感知同樣是信息爆炸時代下的大勢。

2. 背景

將從顏色、造型、尺寸的角度進行分析比較。

關(guān)于線上產(chǎn)品標(biāo)題欄(Tab Bar)的解構(gòu)和分析

3. 圖標(biāo)

以下只討論部分標(biāo)題欄中的圖標(biāo)細節(jié),關(guān)于圖標(biāo)的繪制細節(jié)太多,適合單獨開辟一個新話題。此處不加以展開。

關(guān)于線上產(chǎn)品標(biāo)題欄(Tab Bar)的解構(gòu)和分析

4. 文字

根據(jù)iOS人機交互指南,界面中的文字不能小于11pt。然而國內(nèi)產(chǎn)品大多數(shù)將標(biāo)題欄字號定為10pt,個人分析是因為同樣字號的漢字視覺效果大于英字。

四、整理交互細節(jié)

用戶向系統(tǒng)發(fā)出操作指令,系統(tǒng)給出反饋,反饋信息被用戶接收到,就完成了一次完整的交互。

關(guān)于線上產(chǎn)品標(biāo)題欄(Tab Bar)的解構(gòu)和分析

我們著重來討論幾種常見的標(biāo)簽點擊反饋形式。

關(guān)于線上產(chǎn)品標(biāo)題欄(Tab Bar)的解構(gòu)和分析

關(guān)于線上產(chǎn)品標(biāo)題欄(Tab Bar)的解構(gòu)和分析

關(guān)于線上產(chǎn)品標(biāo)題欄(Tab Bar)的解構(gòu)和分析

關(guān)于線上產(chǎn)品標(biāo)題欄(Tab Bar)的解構(gòu)和分析

關(guān)于線上產(chǎn)品標(biāo)題欄(Tab Bar)的解構(gòu)和分析

觀察上方幾種點擊反饋方式,結(jié)合直觀感覺和產(chǎn)品屬性:

硬切類:給人穩(wěn)重可靠的感覺。微信、支付寶、釘釘、螞蟻財富、京東金融、天貓等產(chǎn)品均采用無過度動畫的模型;可見該類型適用于重功能的社交類產(chǎn)品、嚴(yán)謹(jǐn)穩(wěn)重的金融類產(chǎn)品,給用戶傳達一種踏實穩(wěn)定的感覺,過多的視覺裝點如無必要,即是累贅。

縮放類:穩(wěn)定感與活力感較為平衡。大多數(shù)線上產(chǎn)品采用這種動畫模型,如qq、淘寶、美團、網(wǎng)易云音樂、今日頭條等。值得討論的是,微信和qq,一個采用了無過度動畫模型一個采用了縮放模型;同樣地,天貓采用了無過度動畫模型而淘寶使用的是縮放模型;可見,在產(chǎn)品功能高度類似的情況下,不同的產(chǎn)品定位和品牌傳達是設(shè)計的重要依據(jù)。

線條生長類:視覺效果較為復(fù)雜華麗,吸引用戶注意,同時動畫耗時較長,使用該模型的代表產(chǎn)品是京東和馬蜂窩;視覺表現(xiàn)上很豐富,容易與同類產(chǎn)品形成差異化,給用戶傳達一種產(chǎn)品細節(jié)滿滿的感覺;然而,是否會對用戶產(chǎn)生一定程度的視覺干擾?個人認為和產(chǎn)品的使用頻率有密切聯(lián)系。

對于以旅行攻略為主打功能的馬蜂窩來說,產(chǎn)品本身被打開的頻率不高,在有限的曝光時間內(nèi),盡量給用戶留下有記憶點的使用體驗,制造與競品的差異;而京東的標(biāo)簽切換動效,個人認為稍顯復(fù)雜了一些;動畫包括線條生長+充填生長+細節(jié)點綴,如此多的變化組合在一起,難免有過度吸引注意力的情況發(fā)生。

填充生長類:視覺上豐富飽滿,給人熱烈活潑的印象。qq空間和自如都使用了這種表現(xiàn)方式。

填充飛入類:極具動感,樣式新穎。兩款直播類產(chǎn)品,虎牙直播和花椒采用了此種方式。新穎的樣式和情感化的細節(jié),拉近了產(chǎn)品和用戶的距離,同時也進一步增加了產(chǎn)品的娛樂性。

除了視覺反饋之外,還可以結(jié)合觸覺(振動)和聽覺(提示音)。

視覺結(jié)合觸覺的產(chǎn)品有:百度網(wǎng)盤、淘票票等,觸覺的加入更加明確了反饋,使得點擊感知更加強烈和具象。

視覺結(jié)合聽覺的產(chǎn)品有:淘寶。每次點擊標(biāo)簽都伴有輕盈的提示音,提升愉悅感。尚未觀察到將視覺、觸覺、聽覺結(jié)合使用的產(chǎn)品。

iOS自帶的AirDrop功能有類似體驗:發(fā)送端將文件投遞至接收端,發(fā)送端會有視覺和觸覺反饋,接受成功后接收端會有聲音提示,對于用戶來說,實際上的同時受到了3個維度的信息反饋。

關(guān)于線上產(chǎn)品標(biāo)題欄(Tab Bar)的解構(gòu)和分析

上面我們討論的是從標(biāo)簽a切換到標(biāo)簽b的反饋情況。那么在已經(jīng)選中標(biāo)簽a的情況下再次點擊標(biāo)簽a,反饋情況又是如何?我們不妨分類討論:

1)內(nèi)容流頁面

  • 點擊對應(yīng)頁面標(biāo)簽=回到頂部或者刷新內(nèi)容(淘寶首頁和微淘);
  • 點擊對應(yīng)頁面標(biāo)簽=直接刷新(抖音首頁的下拉刷新只適用于第一個視頻,之后的下拉手勢是看上一個視頻,點擊標(biāo)簽欄的首頁,可以直接刷新,解決了手勢沖突的問題)。

2)非內(nèi)容流頁面(內(nèi)容固定)

點擊對應(yīng)頁面標(biāo)簽:無反饋(微信讀書的書架頁面)

關(guān)于線上產(chǎn)品標(biāo)題欄(Tab Bar)的解構(gòu)和分析

五、趨勢分析 & 優(yōu)秀案例欣賞

觀察幾款產(chǎn)品的迭代情況,不難發(fā)現(xiàn),不同產(chǎn)品不約而同都在視覺上做減法。

關(guān)于線上產(chǎn)品標(biāo)題欄(Tab Bar)的解構(gòu)和分析

關(guān)于線上產(chǎn)品標(biāo)題欄(Tab Bar)的解構(gòu)和分析

六、總結(jié)

以上是我個人對標(biāo)簽欄相關(guān)的一些整理和總結(jié),盡管標(biāo)簽欄作為一個相當(dāng)基礎(chǔ)的控件,其中也不乏非常多的設(shè)計細節(jié)值得深挖。

感謝閱讀,歡迎交流!

 

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

題圖來自 Unsplash,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!