捲軸

捲軸是用來表示使用者在文件中的位置大於檢視空間。使用者可以將視窗檢視區域向上或向下移動,藉此瀏覽文件的其他部分。

使用者可透過觸控、旋轉輪或觸控板與捲軸互動。輕觸捲軸上的箭頭可依「頁面」來移動內容,也就是以與畫面高度相等的遞增方式移動內容。不過,如果使用者快速快速滑過捲動畫面 (視觸控螢幕靈敏度而定),則翻轉動作可能會產生不可比的動感,讓捲動畫面更遠。無論捲動方式為何,捲動動作都應一律貼齊至某個項目。


圖解

捲軸是由向上捲動和向下捲動的預設用途和捲動進度指標所組成。捲動預設用途的 Chevron 用於表示捲動的方向。捲動進度指標是選用元素,可根據網頁的總內容數,指出可見內容和捲動位置。

注意:捲動進度指標設計可拖曳。

1. 向上捲動功能的預設用途 (停用狀態)
2. 捲動進度指標
3. 向下捲動功能提示

規格

捲軸位置 (堆疊主要導覽項目和最小化控制列)

僅含有應用程式標頭的捲軸位置

含有應用程式標頭和控制列的捲軸位置

含有應用程式標頭和已展開控制列的捲軸位置

含有應用程式列/標題和最小控制列的捲軸位置

僅含應用程式列/標題的捲軸位置

含有應用程式標頭和控制列的捲軸位置

含有應用程式標頭和已展開控制列的捲軸位置

螢幕高度較短的捲軸位置

選用的捲動進度指標


風格

顏色

元素 顏色(日模式) 顏色 (夜間模式)
主要圖示 - 使用中狀態 White 白色 @ 88%
主要圖示 - 閒置狀態 白色 @ 56% 白色 @ 50%
捲動進度指標 白色 @ 16% 白色 @ 12%

尺寸

元素 大小 (dp)
主要圖示 44
觸控目標 76
捲動進度指標寬度 6
圓角半徑 (R4) 完整

範例

格狀內容檢視中的捲軸
含有捲動進度指標的清單內容檢視畫面中的捲軸
格狀內容檢視中的捲軸
清單內容檢視畫面中的捲軸