乾貨！iOS和Android規範解析之標籤導航和分段控制項

Material Design Guidelines

標籤（tabs）使內容在一個較高的層級被組織起來。一般，一個標籤裡需要展示與該標籤相關的內容。標籤的名字需要清楚地描述該標籤裡所包含的內容。

資訊架構

標籤導航一般用於從一個比較高的層級來組織資訊，

呈現出提綱挈領的效果。例如，使用標籤呈現報紙的不同版面。不要使用標籤導航來呈現不同頁碼的頁面（就像搜索結果頁中的第1頁，第2頁那種頁面），也不要把標籤的切換設計成可迴圈的樣式（即，在最後一頁，繼續向下切換又回到第一頁）。

下面所示的用法示例需要注意：

內容

一個標籤裡的所有內容應該屬於一個大分類（比如“設置”或者“音樂”），並且標籤之間內容不能有重疊。標籤可以包含圖示（icon）和文字。如果使用文字，則儘量簡短。

另外有以下用法示例需要注意：

使用

標籤有兩種，一種是固定標籤，適用於標籤的數目比較少的情況。每個標籤固定的位置，有利於用戶的記憶：

固定標籤示例

另一種是可劃動標籤，適用於標籤數量比較多的情況。同時，可劃動標籤的寬度可以長短不一，根據標題長短決定。

可劃動標籤示例

通常，標籤被建議使用在以下的情況：

需要經常切換視圖；

應用包含的視圖比較少；

應用提供的幾個視圖都比較重要（由於標籤切換，

相對於別的導航方式來說，操作更容易。因此通過標籤導航提供的幾個視圖，相對來說到達率會更好。筆者注）。

iOS Human Interface Guidelines

分段控制項可以包含兩個或者更多的分段選項，每一個選項作為一個獨立的按鈕而存在。在一個分段控制項裡，所有的分段選項在長度上要保持一致。和按鈕一樣，每個分段選項可以包含文案或者圖片。分段控制項通常用來作為不同視圖的入口，

比如在地圖應用裡，分段控制項可以讓使用者在“地圖”、“交通”和“衛星”等視圖間切換。

△ iOS系統自帶的地圖應用

關於分段控制項的使用，蘋果規範給出了以下幾個要點：

限制分段選項的數目，以提高可用性。更寬的分段選項更容易點擊。在iPhone上，蘋果建議一個分段控制項包含的分段選項最多是5個（想說5個也不少了好不好。。）

儘量保證每個分段選項裡的內容的尺寸是一致的。因為所有的分段選項在長度上需要保持一致，所以如果有的分段選項內容很滿，而有的比較空，在視覺上會不太美觀。

在一個分段選項裡，避免同時使用文案和圖片。儘管單個分段選項裡可以包含文案或者圖片，但是同時包含兩者可能會使介面看起來割裂和迷惑。

如果你定制了一個分段控制項的外觀，那麼請確保內容的位置是恰當的。比如，如果你更改了分段控制項的背景，那麼請確保裡面的內容看起來是OK的，並且是對齊的。

以上介紹了MD和iOS設計規範中對於標籤導航和分段控制項的介紹。這兩個控制項由於長得比較相似，因此經常會用錯；尤其是分段控制項，需要注意它是不能通過劃動來切換的。

------

。）

儘量保證每個分段選項裡的內容的尺寸是一致的。因為所有的分段選項在長度上需要保持一致，所以如果有的分段選項內容很滿，而有的比較空，在視覺上會不太美觀。

在一個分段選項裡，避免同時使用文案和圖片。儘管單個分段選項裡可以包含文案或者圖片，但是同時包含兩者可能會使介面看起來割裂和迷惑。

如果你定制了一個分段控制項的外觀，那麼請確保內容的位置是恰當的。比如，如果你更改了分段控制項的背景，那麼請確保裡面的內容看起來是OK的，並且是對齊的。

以上介紹了MD和iOS設計規範中對於標籤導航和分段控制項的介紹。這兩個控制項由於長得比較相似，因此經常會用錯；尤其是分段控制項，需要注意它是不能通過劃動來切換的。

------