自上次參加完回音分享會后，我下定決心要洗心革面乖乖打基礎，于是開啟了這個part，爭取兩個月不間斷更新，寫完Material Design與iOS中的組件（順便學學英語），以便今后在使用的時候完全不虛

Grid lists

Material Design鏈接：Grid lists

網格列表

網格列表（Grid lists）

網格列表是標準列表視圖的替代方法。

Grid lists由以垂直和水平布局排列的cell重復后組成。

Grid lists最適用于同質數據類型。 它們有助于提高用戶對Grid lists所含內容的視覺理解。

類型

僅圖像

單行文本（可帶圖標）

兩行文字（可帶圖標）

操作

垂直滾動

篩選

替代

Lists

Cards

用法

網格列表最適合呈現同類數據，通常為圖像，并且針對視覺理解和區分類似數據類型進行了優化。

瀏覽路徑

一個grid list由在其內部的垂直和水平排列的重復cells組成。

Tiles可容納內容，并可垂直或水平地涵蓋一個或多個cells。

如果tiles中的文本需要足夠突出以區分主要的內容片段，請考慮使用不同的容器，如lists或cards，可優化文本顯示與加快閱讀理解。

Lists：針對閱讀理解進行了優化，特別是在比較一組包含多種數據類型的數據時。

Cards：用于格式不一致的內容，例如帶有可變長度標題的照片或具有異質內容的數據集，例如照片，視頻和書籍的混合集合。

內容

Tiles中的內容

Tiles中的內容由主要內容和輔助內容組成。 主要內容是主要的區分元素，通常是圖像。 次要內容可以是操作或文本。

為缺少主要內容圖像的tiles提供默認圖像。

包含主要操作和次要操作的tiles

Tiles中的操作

主要和次要內容上的操作（如播放，放大，刪除或選擇）都是即時操作，并且通常不會引發grid lists內的選項子菜單（溢出操作）。

操作可以打開后續的視圖，如一張card。

主要操作

·填充整個tile，因此不會通過圖標或文字的形式呈現

·在一個特定grid list中的所有tile中都保持一致。 例如，單個grid list中所有tiles的主要操作可能都是查看圖像的詳細信息。

次要操作或內容

·在tiles內，通過圖標或文字的形式呈現

·在一個特定grid list中的所有tile中都保持一致

·放置在一個特定grid list中所有tiles中的相同位置，但是不同grid lists（角落或邊緣）之間的相同位置可能會有所不同。 例如，一個grid list中的所有標題可能位于左下角，而另一個網格列表中的所有標題可能會放置在左上角。

次要操作與文案的位置

行為

滾動

grid lists通常只能垂直滾動。

不鼓勵橫向滾動grid lists，因為滾動會干擾典型的閱讀模式，影響理解。 一個明顯的例外是水平滾動的單行圖像grid list，例如圖庫，它與典型的閱讀模式相符合。

切斷grid lists初始滾動位置中的網格圖塊，以傳遞出內容溢出的滾動方向。

手勢

不允許對每個tile進行滑動（swipe）操作。拾取并移動（Pick-up-and-move）行為是不鼓勵的。

Tile篩選和分類

Grid lists中的內容可以通過編程方式、日期、文件大小、字母順序或其他參數進行篩選。

Grid lists中的第一個項目位于grid list的左上角，并且順序為從左至右，從上至下。

尺寸和調整大小

調整grid list的大小會導致tiles在水平空間變為可用時重新排序。全屏的grid list會調整大小以適應屏幕寬度。

水平空間收縮時，grid list不會轉換為list。grid list和list是用于強調不同數據類型的獨立結構。Grid lists展示圖像優先于文字，Lists展示文字優先于圖像。

要在整個網格列表中保持一致的節奏，請截斷過長的文本內容。或者，增加grid的大小，以便tiles可以容納較長的標題。

響應式設計

全屏grid lists應該使用Ratio Keylines導出的具有最小和最大寬度的流體圖像比率。他們應該保留固定的高度，margins和padding。

居中的grid lists具有最小寬度的fluid?margins。它們保持固定的圖像寬度，高度和padding。

margin是指從自身邊框到另一個容器邊框之間的距離，就是容器外距離。（外邊距）

padding是指自身邊框到自身內部另一個容器邊框之間的距離，就是容器內距離。（內邊距）