Tabs

在一個 app 中,tabs 使在不同的視圖和功能間探索和切換以及瀏覽不同類別的數據集合起來變得簡單。

用法

tab 用來顯示有關聯的分組內容。tab標簽用來簡要的描述內容。

移動設備的 tabs


擴展的 app bar + tab bar


加入檢索 + app bar + tab bar


默認的 app bar + tab bar


默認的 app bar + 可滾動的 tab bar


和 tab 指示器一樣的字體顏色


被鎖定滾動的 tab bar

桌面環境的 tabs


默認的 app bar + tab bar


附加"更多"溢出下拉菜單


Tab 溢出標識碼,第一步


展開的菜單


居中的 tab bar

何時使用

使用 tabs 將大量關聯的數據或者選項劃分成更易理解的分組,可以在不需要切換出當先上下文的情況下,有效的進行內容導航和內容組織。

僅管 tab 的內容讓人自然的聯想到導航(例如:道路選項可以切換地圖的視圖,搜索結果引導到其他網站),但 tabs 本身并不是用來導航的。

Tabs 也不是用于內容切換或是內容分頁的(例如:應用中頁面之間的切換)。



不要

Tab 特性

Tabs 應該顯示在一行內。

Tabs 不應該被嵌套。也就是說,一個 tab 里的內容不應包含另一組 tabs。

一組 tabs 至少包含 2 個 tab 并且不多于 6 個 tab。

Tabs 控制的顯示內容的定位要一致。

Tab 中當前可見內容要高亮顯示。

Tabs 應該歸類并且每組 tabs 中內容順序相連。

保持 tabs 和他們的內容相鄰,可以明確兩者間的關系,距離太遠會讓人誤解。



不要



不要

內容

Tab 的內容

即使是兩個 tabs 之間,tab 中呈現的內容可以有很大的差別。比如,不同年份的 tab 組合或者是不同類型的設置。

一組 tabs 中的所有內容應該互相關聯并且在同一個主題下(例如:設置、指南),但是每個 tab 又是相互獨立的。

Tab 標簽應該邏輯的組織相關內容,并提供有意義的區分。

Tab 標簽可能是圖標或者文字并且不能省略。

避免進行跨 tab 的內容比較。如果一個跨 tab 的內容比較是有必要的,那么也許應該換一種內容的組織和呈現方式。

Tabs 的類型

根據平臺和使用環境,tab 的內容可以表現為固定的 tabs 或者是滾動(滑動)的 tabs。

固定的 tabs

固定的 tabs 同時顯示所有 tabs,最適合用于快速相互切換的 tabs (例如,在地圖中切換線路的交通方式)。

視圖的寬度限制了 tabs 的最大數量。在固定的 tabs 中每個 tab 寬度相等,都是最寬的 tab 標簽的寬度。可以通過點擊 tab 或者是在內容區域中左右滑動來在固定的 tabs 間進行導航。

滾動的 tabs

滾動的 tabs 用于顯示 tabs 的子集,可以在任何時候使用,并且可以包含更長的 tab 標簽和更多的 tabs 數量,最適合用于觸摸操作的瀏覽環境并且用戶不需要直接比較 tab 標簽。

可以通過點擊 tab 、在 tab 上左右滑動或者在內容區域中左右滑動來在滾動的 tabs 間進行導航。

規格

固定并且全屏寬度

可滾動的

桌面/平板

按下 tab 時的動畫

原文:Tabs 翻譯:vincent4j 校對:PoppinLp

两码中特期期