摘要：同一主題有多條子內容時，我們通常會將子內容抽象為標簽（tab），方便用戶通過tab快速定位。

本期交互設計師地九枝星將以股票APP為例，以小見大，分析tab在實際的產(chǎn)品設計中靈活多變的一面。

股票APP中有一個模塊需要展示股東的完整信息，而這些信息可能會在不同的時間段發(fā)生變更。其中，核心需求是展示近四個時間段的完整信息。然而對于一些新近的股票來說，往往只有一個時間段的相關信息，tab本身的存在意義就受到質疑，但是隨著股票后續(xù)的發(fā)展，肯定會延伸出更多的時間段tab。

所以，在“展示單一tab，而后通過點擊這一tab，再選擇其他tab”與“同時展示多個tab，點擊即可直達對應tab”間就有了討論的空間。

ps：如果四個時間段都沒有數(shù)據(jù)時，則隱藏該模塊。本文討論的前提是至少有一個時間段的情況。

文本大綱：

1.兩種方案

2.方案1的設計討論

3.方案2的設計討論

4.總結

1.兩種方案

按照設計思路不同，可以分為兩種方案，如下所示：

兩種方案

方案1：將時間段的選擇做成tab形式，放在主要股東數(shù)據(jù)的上方，通過單擊操作，進行tab間的切換。

方案2：將時間段的選擇放在主要股東模塊的右上角，通過單擊時間段兩邊的箭頭區(qū)域和左右滑動屏幕來切換數(shù)據(jù)。

2.方案1的設計討論

方案1的設計優(yōu)缺點

優(yōu)點：內容比較直觀，從第一個tab切換到第三個或者第四個tab時，只需要一步操作，相對簡單。

缺點：單擊左側tab的操作難度大。數(shù)據(jù)較少時，不容易處理。

數(shù)據(jù)較少時的交互設計方案有兩大種，一種是隱藏沒有數(shù)據(jù)的時間段；另一種是顯示沒有數(shù)據(jù)的時間段，此時間段下的數(shù)據(jù)顯示為空。示意圖如下：

方案1數(shù)據(jù)較少時的處理方案

隱藏沒有數(shù)據(jù)的時間段如方案1.1和方案1.2所示，一個是靠左對齊，一個是居中對齊，內容展示簡單直觀，但是排版不是很美觀。

顯示沒有數(shù)據(jù)的時間段，此時間段下的數(shù)據(jù)顯示為空如方案1.3所示，排版雖然保持了美觀，但是會誤導用戶去點擊，點擊后并沒有達到用戶的預期，讓用戶做無用功。多次點擊沒數(shù)據(jù)，也可能會讓用戶喪失耐心。

3.方案2的設計討論

方案2的設計優(yōu)缺點

優(yōu)點：展示時間段的數(shù)量比較靈活。排版上節(jié)省了頁面的垂直空間，展示有數(shù)據(jù)的時間段，隱藏沒有數(shù)據(jù)的時間段。左右滑動進行切換的方式，降低了操作難度。數(shù)據(jù)較少時，處理很容易。

缺點：與方案1相比，從第一個時間段切換到第四個時間段，需要兩步操作（兩次單擊、兩次滑屏或者一次單擊一次滑屏），操作難度稍微增大（滑屏的難度較單擊的操作難度?。?。

方案2分解圖

方案2數(shù)據(jù)較少時的解決方案

4.總結

綜上所述，方案1和方案2各有利弊。

后期版本上線，我會統(tǒng)計一下第2、3、4個時間段的點擊率再做優(yōu)化。