在電子商務類app中應用柵格檢視的原因是什麼呢？什麼樣的案例更適合使用柵格列表而不是簡單的列表檢視呢？在這篇文章中，你會找到這兩個問題的答案。
什麼是柵格檢視
柵格檢視是製作標準列表檢視的另一種選擇，一個柵格檢視在垂直和水平佈局上，把你的內容分成兩列或多列的單元格。
一個柵格列表包含重複的單元格模式，並在水平和垂直方向進行排列布局
卡片式內容
柵格檢視在展示產品資訊的時候沒有過多的附加資訊——店鋪訪問者能看到的資訊描述通常也只是商品的名稱和價格。
以卡片式佈局為例，圖片佔據著單元格大部分空間，文字也限制字數以免過多的換行
瀏覽模式
柵格檢視提供給使用者一種間斷式瀏覽方式，它在相同的資料型別之間保證良好的視覺理解力和差異化是非常適合的。使用者注意力能平均地分佈在每一個單元格：讓使用者視線可以在圖片間自由跳轉而不必擔心順序和連續性。
允許使用者跳讀的圖片
視線軌跡圖，展示了使用者訪問一個銷售沙發的電子商務網站時，他們都看了哪裡。每一個藍點都代表了一次注視，藍點越大表明注視的時間越長。
每一個藍點都代表了一次注視，藍點越大表明注視的時間越長
含義非常的明確：對於使用者目標和商業目標非常重要的資訊元素應該在首屏顯示。使用者對顯示器下半部分的關注遠不如首屏。有趣的是，人們對圖片中人物模特的關注要多於對產品本身的關注。
在柵格檢視展示中，一張帶有人物模特的沙發圖片會比單一的沙發圖片吸引更多的注意力
決策
使用者主要依據圖片來進行選擇，這使得柵格檢視對於相似產品佈局來說非常有優勢（在你需要通過產品外觀做決定的情況下）。例如，如果一個使用者購買鞋子，他／她在腦海中已經有明確的款式。使用者可以在瀏覽鞋子的過程中很容易地認出他／她所尋找鞋子的某些細節。
柵格檢視更吸引消費者的目光
圖片的主要好處，是使柵格在佈局搭建中成為非常有用的手段。圖片在發揮傳達產品第一感覺作用的時候，產品描述是遠遠做不到的。如果使用者看到的是低質量的產品圖片，他們的信任感就會很自然地減少，他們將不願意購買。因此，要確保你的產品圖片高清、大小合適，同時能提供完整的產品資訊。
左圖：失真圖片。右圖：正常解析度
滾動方向
柵格檢視僅以垂直方向的展開最具代表性，一般不鼓勵柵格檢視橫向展開，原因是這種展開方式與標準的閱讀模式衝突，影響理解力。在檢視初始滾動的位置和超出內容滾動的方向相銜接的地方，你需要切斷柵格內容。
在檢視初始滾動的位置要避免柵格內容沿檢視邊緣水平對齊，因為這種放置不能有效地傳達出還有更多的內容
每屏產品圖片數量
在排布單一種類產品的時候，大圖幾乎是很有必要的，因為使用者關心每個商品的視覺差異，並更願意在一個長頁裡滾動，而不是在柵格檢視頁和商品詳情頁反覆的切換。
使用者通常一次看4或6項商品
柵格檢視vs. 列表檢視
當涉及到手機裝置，如何知道你的產品應該選擇哪種佈局？你需要用列表檢視還是柵格檢視？這個決策會影響到使用者尋找目標商品的速度和難易程度。
在強調不同的資料型別時，柵格檢視和列表檢視的結構是不同的。在柵格檢視中，圖片的優先順序高於文字，而在列表檢視中，文字的優先順序高於圖片。
柵格檢視和列表檢視
對於手機裝置而言，使用者的螢幕空間是有限的，在滾動以便瀏覽更多內容之前，使用者一次只能看到一小部分內容。柵格檢視創造了更長的頁面，同時推動使用者以滾動的方式瀏覽更多的內容。下面的例子中，你可以看到列表檢視和柵格檢視的區別。
紅線表示了螢幕的可視部分
然而，在列表檢視和柵格檢視中做選擇一個的關鍵因素是：使用者在選擇商品時需要知道的資訊數量。它完全迴歸到了“使用者是上帝”。產品的細節非常的重要，選擇適合你所要展示內容的佈局：
- 像家電類產品——需要展示產品型號、技術規格以及在選擇過程中起主導作用的好評率——使用列表檢視更明智些。列表檢視在展示更多產品細節上會提供更多的空間。
WallMart的iOS應用
- 像服裝類產品，在選擇商品的時候，不需要考慮太多的商品介紹，柵格檢視是個不錯的選擇。
如果你不確定你的店鋪適合哪種佈局，你需要進行A／B測試並雙方面估量轉化率，去確定哪個形式更好些。
關鍵點
如果通過佈局方式鼓勵使用者瀏覽，使用者將會在一個頁面中向下滾動到很遠，首屏的資訊內容使他們相信向下滾動是非常值得的。俗話說一圖勝千言。在柵格檢視中使用高質量的圖片，在提升銷售上是至關重要的，試著在每一屏顯示更多的產品圖片。
當在列表檢視和柵格檢視中選擇的時候，遵循一個簡單的原則：文字內容用列表檢視，圖片內容用柵格檢視。最終決定使用哪種檢視需要與對使用者最有價值的資訊相匹配。
結論
人們真正需要的是有用的資訊，他們喜歡在做出全面購買決策時能夠提供他們足夠資訊的佈局。謝謝！