儘管大螢幕手機是流行趨勢，但還是小尺寸的行動電話更方便易攜，相比於桌上型電腦和筆記本的螢幕，手機螢幕容納的內容要少一些，使用者只能預覽少量的內容，再通過滑動來檢視更多內容。
今天我要為大家舉例介紹概述內容的兩種基本模式 —— 列表檢視和網格檢視
列表檢視和網格檢視
來源: MaterialUp
列表檢視
多個行元素排列為一個連續的元素。它承載的的文字較多並且通常只有小圖示與文字兩部分組成。列表檢視項需要的垂直空間比影像要小，可以讓更多的列表項同時在螢幕上顯示出來。
列表檢視舉例
來源: Material Design.
內容掃視
列表檢視使使用者可以遵循他們自然的閱讀模式，例如F型模式。
F型模式瀏覽網頁內容
列表最適合用來呈現相似的資料型別和優化內容可讀性。列表檢視可以減少滾動，使頁面更短。去掉影像（列表檢視只用到手勢操作）能讓你在固定面積的螢幕中接觸更多的選項。
列表的典型掃描模式示例
來源: Material Design.
並且使用者在處理列表檢視時，隨著視線從上而下的移動注意力在慢慢減少。
決策
使用者主要依靠閱讀文字來進行選擇。
利弊
與網格檢視相比，列表檢視有以下優點：
· 列表檢視遵循自然閱讀模式。
· 列表檢視防止過量滾動，在可見區域內提供更多的選擇。
但它也有一些缺點：
· 在視覺外觀上，列表檢視非常中庸。
· 在列表檢視中使用者的注意力從上到下逐漸減少。
網格檢視
網格檢視是標準列表檢視的一種替代方法。網格列表用不同的網格來進行佈局和其他視覺演示。網格列表由重複的單元格組成，單元格通過水平和垂直線分割。
網格列表的示例
來源: Material Design.
內容掃視
網格檢視為使用者在掃視過程中提供了更多的中斷，使其最適合視覺內容。通常影像佔單元空間的主導地位。
模式網格典型掃視範例
來源: Material Design.
使用者的注意力往往是均勻地分散在各個網格單元間。網格檢視可以優化視覺理解並且區分相似資料型別。
決策
使用者主要依靠影像進行選擇。重點是——使用者往往只能同時看到4個或6個網格項。
電子商務網站的網格檢視示例
利弊
網格檢視有以下好處：
· 網格檢視更吸引人們的眼球
· 網格檢視可以幫助使用者發現各個專案之間的視覺區別
· 在網格檢視中使用者的注意力分佈更均勻
但它也主要有以下缺點——網格檢視的頁面較長，並迫使使用者更經常使用滾動。下面的例子可以看出列表檢視和網格檢視之間的區別。
紅線標出螢幕的可見部分
圖片來源: nngroup
通用經驗法則
什麼是檢視內容最有效的佈局方式？你應該使用列表還是網格檢視嗎？
正確的答案是：具體情況具體分析
選擇列表檢視與網格檢視的關鍵因素是：使用者在專案之間進行選擇時需要多少資訊。這是什麼意思？一切都回到設計的主要準則——內容就是一切。你應該選擇適合你展示內容型別的佈局。
展現細節選列表，高清大圖選網格
產品頁面是這一規則很好的例子。產品的細節是非常重要的部分。 像家電這樣的產品選擇過程中需要參考很多細節，如型號，評分和尺寸這些主要參考因素。對於這類產品，列表檢視更合適些。
沃爾瑪的iOS版App
當app內的產品資訊較少時，網格檢視是不錯的選擇。對於服裝類產品，人們選擇專案時往往需要較少的文字資訊和較多的圖片資訊。因為你通常是根據服裝類產品的外觀來決定買哪件的。在這個選擇過程中，使用者更關心各個選項間的視覺區別，寧可滾動單個長頁也不願反覆在列表頁和產品詳情之間切換。
Mrpoter app for iOS
設計這些佈局時要選擇合適大小的影像，使他們可以被識別並且使用者可以同時看到更多的產品。
這是使用者體驗的一部分
最終使用列表檢視還是網格檢視應該與什麼對使用者最有價值聯絡起來。記住，使用者體驗是以人為本的，而不僅僅是一種模式。這很容易找出什麼最有利於使用者和他們的任務：用他們與一些使用者進行測試。讓使用者更加高效的工作才是最後贏家。