網格列表

網格列表是一般列表的替代方案,通常用於以圖像為主的資訊,因為此種列表可以給圖像提供更好的辨識度。

組成
操作
規範

組成

網格列表由框和方塊組成

方塊順序可依照方塊內容做排序,例如圖片大小或文字。排序的方向為從左至右,由上而下。

瀏覽和組成方向為從左到右成反S路線

如果每個方塊內需要含有更多的資訊,來提高每個方塊的獨立性,建議使用列表卡片呈現。

方塊皆由一個主要內容和一個次要內容組成,主要內容功能是區別方塊,通常為圖片;次要內容則可能是一個操作按鈕或是文字。

方塊應以一預設的主要內容來避免沒有來源的情形。

遊覽和組成方向為從左到右成反S路線

操作按鈕放置在各角落,文字層在靠上或下

操作

  • 點擊不能顯示選單,而可以開啟一個新的畫面。

  • 滾動網格列表滾動方向一般為直向,唯一可以使用橫向的是單行的圖片列表。在網格初次顯示時,最後一行應該以半格呈現,來提示滾動的方向。

直向

  • 調整不建議使用拖拉方式手動排序。調整大小時,方塊會自動重新排序並填滿盡量空白。

  • 更新同列表

規範

  • 副標

欄高:48 dp
左間距:16 dp
字型:Roboto Medium
字體:14 sp

文字
顏色:黑或主題色
不透明度:54 %(非主題色),100 %(主題色)

  • 總覽

中間分隔線寬:1 dp 或 4 dp
欄位高:48 dp(單行文字),68 dp(雙行文字)
文字大小:16 sp(單行),16sp/12sp(雙行),14sp/14sp(雙行)

當方塊大小容不下所需要的字串內容時,如不調整大小,則應將文字截短。

內容
上下左間距:16 dp
右間距:16 dp(一般),8 dp(圖左文右)

文字
字體:16 sp(單行),16sp/12sp(雙行),14sp/14sp(雙行)
行間空白:4 dp

圖示同系統圖示

  • 單行文字

  • 雙行文字

  • 圖片方塊可同時佔用多個框的範圍