APP標簽設計:三問Tap的標簽布局設計

9 評論 28749 瀏覽 43 收藏 9 分鐘

為什么主流資訊應用都選擇4Tab的標簽布局?這個看似理所當然的功能設計背后有哪些前潛在的邏輯?看完文章后你可能會有個解答。

  1. 為什么主流資訊應用都選擇4Tab的標簽布局?
  2. 為什么它們的主Tab Menu都放置在屏幕底部?
  3. 為什么放置在底部的Tab Menu不支持左右滑動切換?

不難發現上圖中列舉的三款應用都使用了放置在底部的4Tab模式,并且在Tab樣式上都選擇了圖標+文字的信息展示。

1.為什么都選擇4Tab的界面模式?

我印象中頁面布局要選用Tab時,應該遵循“5±2“的原則,即Tab的數量應該維持在這個數量區間內。下圖顯示了2016年12月份和2017年1月份市場主流安卓手機型號,根據數據:當前用戶使用手機的屏幕尺寸維持在5.0-5.5寸之間。在這個先提條件下,Tab的數量維持在3到5個之間無疑使最好的選擇。

在網絡直播和短視頻還沒有現在這么火熱的時候,這類資訊應用大多是選擇3Tab的設計,隨著視頻形式媒體受到用戶的熱捧,它們迅速跟進升級,形成現在的4Tab格局,看上去整體比較和諧,沒有擁簇的突兀感。

Tab的信息提示以扁平化處理的小圖標+文字標題的形式展示,選中的Tab與其它Tab之間以顏色高亮區分顯示清晰明了,極大降低了用戶進行選擇的成本。

我個人感覺「騰訊新聞」底部Tab的布局較其它兩款應用要略微緊湊一點,但是沒有過分擁擠的感覺,反而迎合了整體白色的色調顯得優雅大氣,保持了新聞類信息傳遞的嚴肅緊湊性(之所以使用「嚴肅」一詞,是與下文要提到的「天天快報」形成比對)。

2.為什么Tab Menu要放置在屏幕底部?

資訊應用大都將Tab Menu放置在屏幕底部,在屏幕頂部大都選擇沉浸式設計,緊跟二級Tab:按照信息特征進行標簽化分類的小標題。這些二級Tab從根本上講是隸屬于底部Tab的,是對信息的進一步整合,方便用戶對信息進行選擇甄別。

按照我們平時的閱讀習慣,是不是喜好先著眼于手機屏幕(信息媒介,如書本、報紙等)左上方呢?作為資訊應用,它對用戶的核心價值在于媒介性,因此要保證用戶以最低的時間成本獲取到最新資訊,設置在頂部的二級Tab無疑幫助用戶減輕了閱讀壓力,使得用戶很快認識到產品的核心功能與自我需求。

而主Tab顯然只是應用的擴展功能,在保證基本的信息媒介作用基礎上深層次發掘用戶潛在需求,是對產品基本功能的補充和擴展。二級Tab對信息進行分類,按照理解從左向右的順序,其信息類別權重大體呈現逐級遞減(不完全保證),但是最重要的是一定是默認選擇的Tab。上述的三款應用中對應的則是「要聞」、「推薦」、「頭條」,是面向主流用戶的權重最高的信息類別。

當用戶在最短的時間成本內獲取到滿意的信息后,他可以有兩種選擇:一是離開應用,二是探索應用更深層次的功能。底部的主Tab就發揮出它的功能,它是用戶在使用完基礎功能(信息獲?。┲竽抗馔A舻淖詈髤^域,對發掘潛在的用戶粘性和延長用戶停留在產品上的時間具有特殊意義。

3.為什么底部的Tab Menu不支持左右滑動切換呢?

在使用過程中,進行橫向滑動操作你會發現此時應用進行二級Tab,即信息分類之間的切換,而不是位于底部的主Tab響應。為什么主要Tab在響應這一操作的優先級輸給了二級Tab呢?

同樣是因為應用基礎功能的需求,底部的主Tab是應用潛在功能,而橫向滑動響應應該以滿足應用的主體功能為主,方便用戶對于信息的快速選擇,這樣可以進一步降低用戶獲取資訊的成本。

此外,在一些場景用戶需要單手操作手機,而單手操作時用戶一般握持手機下半部機身,拇指的操作受到目前主流屏幕大小的限制。將主Tab放置在屏幕底部保證用戶單手握持可操作性的同時,保證更受用戶青睞的滑動操作被產品的基本訴求所響應。

聯想到更多的去驗證它

基于這樣的想法,我特意去搜索了國內主流安卓OS,小米的MIUI、魅族的Flyme以及華為的EMUI,基本上都選擇在主屏幕底部設置四個基礎的快速訪問圖標(電話、信息、聯系人+其它)。微信底部有4個Tab,手Q系列是3個Tab,基本上維持了“5±2“的設計原則。

可不是所有的資訊應用都是4Tab

首先來看一組數據:

可以看出,同樣主打資訊傳播的「天天快報」在同類應用的安裝規模甚至超過了資深門戶網易、新浪和搜狐,雖然在2017年2月份的統計區間段內呈下滑趨勢,但總體規模仍然位列前三。打開這款產品,不難發現它與其它應用最大的不同之處:

「天天快報」沒有遵循其它同類產品的設計思路,它選擇了更加簡潔的無底部Tab Menu的設計思路,完全舍棄主流路線,僅僅保留基本的資訊訴求功能,產品的結構更加扁平化,獨具產品特色。同時作為騰訊系產品,在色調上與「騰訊新聞」一貫的白色保持一致。因此我猜測應該是與「騰訊新聞」搭成雙駕馬車,一方面與傳統的門戶新聞產品競爭,另一方面開創獨具特色的「快報」產品,在內容更新上尋求差異化路線,以此作為產品吸引用戶的核心競爭點。

小結與猜測

為什么主流資訊應用都選擇4Tab的標簽布局?我想這個問題應該有了一個大致的答案,在思考這個問題的時候我有兩個停留點:一是數字“4”,我在想為什么不是3,或者不是5呢?其實在短視頻和直播沒有當下這樣火爆的時候,這些應用確實經歷過3Tab的格局,當新的需求產生的時候要去不斷迭代升級,迎合用戶。在未來,可能會有新的需求產生,那么它們可能會進行擴展,到時候可能會變成5Tab,但是應該不會有超過5Tab的時代產生,那樣產品架構進一步復雜化,用戶的使用成本會提高,顯然不是一種更好的選擇;二是我的一個大膽猜測,未來可能會回到3Tab,信息進一步整合,當下火熱的視頻需求也許會被取代,也說不好呢!

 

作者:阿坤先生,微信公眾號:阿坤先生 (ID:AKunTalk)

本文由 @阿坤先生 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 非杠,想問標題用tap,內容用tab,究竟兩個區別在哪?

    來自廣東 回復
  2. 現在有好多App采用了底部5tab方式,而不是如你所說的回歸3tab哦

    來自江蘇 回復
    1. 我最后是從3和5兩個方向總結的,你仔細看一下吧

      來自重慶 回復
    2. 那可能是我語文水平有限,你最后強調了2點:一是數字4,雖然其中有描述可能會是3也可能會是5,肯定不會超過5,但是重點肯定不是在5,二是大膽猜測,會回到3,強調的是3。所以我才感覺到有些迷惑

      來自江蘇 回復
    3. 我自己也看了一下,是有這方面的誤讀。抱歉,我的問題。

      來自重慶 回復
  3. tab放在底部是ios的主流,安卓應該是為了和ios版本的統一和減少設計成本而做的變化。

    來自北京 回復
    1. 我沒有想到這一點,之前好像在哪里看過說是不是微信安卓和IOS的版本區別樹立了安卓應用的行業規范呢?

      來自重慶 回復
  4. 不大明白4Tab跟現在直播類產品火爆有什么直接關系

    來自浙江 回復
    1. 我在前面引用的三款應用中,「騰訊新聞」和「網易新聞」底部都有一個Tab是「直播」,而對應到「今日頭條」中則是「視頻」。我思考可能是短視頻和直播信息的需求促成這一格局的形成。

      來自重慶 回復