盡管現在手機屏幕的趨勢是越做越大，然而實際上真正使得手機如此輕便的地方正在于它的小尺寸。相比于臺式電腦，甚至筆記本電腦的屏幕，手機的小屏幕都只能容納更少的內容信息，用戶在滾動查看更多內容前只能在當前屏幕中看到很少一部分。

今天我要重新審視信息展示的兩種基本模式——列表視圖和網格視圖，并為各自提供相關用例加以說明。

列表視圖和網格視圖

一、列表視圖

一個列表垂直呈現多個連續的行元素。列表視圖重在文本內容，因此通常只有一些小圖標穿插在文本信息內。為了同一時間能在當前屏幕中顯示更多的列表項內容，這就要求列表中的每一項在垂直方向上占用相比于圖片更少的空間。

列表視圖示例

1、內容瀏覽

列表視圖的內容呈現方法更符合人們自然的閱讀模式，如F形模式。

網頁上的F形示例

列表視圖最適合用來顯示同類型的數據，并易于人們的閱讀理解。通過減少頁面（即每一頁包含更多內容），列表視圖降低了用戶的滾動壓力。對圖片的排斥（列表視圖只有縮略圖，完整的圖片占用空間）更使得視圖的每一屏允許您以適應更多的內容。

典型瀏覽模式下的列表示例

最后一點同樣重要的是，當用戶瀏覽列表視圖時，他們的注意力從上到下依次降低。

2、用戶是如何做選擇的

用戶主要依靠閱讀文本信息來做出決定。

3、優缺點

相比于網格視圖，列表視圖有以下優點：

• 列表視圖遵循人們的自然閱讀模式；
• 每一屏能夠展示更多信息/選項，減輕了給用戶帶來太多滾動翻頁的麻煩；

其缺點在于：

• 列表視圖在視覺外觀上缺乏表現力；
• 列表視圖中，用戶的注意力會自上而下減弱；

二、網格視圖

網格視圖是標準列表視圖的一種替代方案。網格視圖由用來做布局的網格線和其他視覺線索將其明顯區分出來。一個網格視圖由在垂直和水平方向上重復排列的元素項構成。

網格視圖示例

1、內容瀏覽模式

網格視圖營造了一個略微有停頓感的瀏覽模式，使得它最適合于視覺內容。通常情況下，圖片占用了是視圖元素的絕大部分空間。

典型瀏覽模式下的網格視圖

用戶的注意力在每個網格單元間均勻遷移。網格視圖更易于視覺理解，并區分相似類型的數據。

2、用戶是如何做選擇的

網格視圖下用戶主要依靠圖片來做出選擇/決定。而需要注意的一點是用戶在同一時刻只能注意到4-6個網格單元。

Ecommerce 中的網格視圖應用

3、優缺點

網格視圖有以下優點：

• 網格視圖更吸引用戶眼球；
• 網格視圖有助于用戶區分單元項間的視覺差異；
• 視覺視圖中用戶注意力均勻遷移；

不足之處：

（1）網格視圖會導致內容信息分布在更多的頁面，因此，用戶需要為了看到更多信息需要滾動更多次。下面例子中你可以看到兩種視圖的對比情況：

紅線部分標示出每一屏容納的信息量

三、關于縮略圖使用的一般準則

那么究竟對于內容呈現來講什么是最有效的布局方案呢？你到底該使用列表視圖還是網格視圖呢？正確的答案是：看情況而定。

選擇列表視圖？還是網格視圖？一個關鍵的因素是用戶為了做選擇/決定究竟需要l瀏覽/對比多少信息。這到底是神馬意思？這一切都歸為一個主要原則，即內容為王。你應該根據你的內容類型來選擇與之合適的視圖布局。

詳情使用列表，圖片使用網格

商品頁面是一個極為恰當的例子。對于像家用電器這樣的商品，其產品型號、評分和尺寸規格是用戶做選擇的關鍵因素，采用列表視圖就很有意義。

WallMart iOS客戶端

網格視圖則更適合于那些要求更少的商品信息或者商品類似的情況。比如服裝類商品，你挑選時更在意商品外觀，對于文本描述則次要很多。在這種情況下，用戶更關心單元元素間的視覺差異，也更愿意滾動頁面來進行比較，而不是多次重復的在列表頁和詳情頁間來回切換。

MrPorter iOS客戶端

當設計這些布局時，挑選合適的圖片尺寸，一方面使其大到足夠用戶識別，一方面使其小到同一屏能顯示更多商品。

四、使用哪種方案關乎于用戶體驗

最后，究竟使用列表視圖還是網格視圖，這需要你從哪種信息（是文本描述還是圖片）是對用戶最有價值來衡量。切記，用戶體驗關乎于人性探討，絕不僅僅停留在模式層次。找出最適合于用戶或對用戶最友好的方案自然簡單：將主要流程實體建模后找一部分用戶進行測試。那個能提高用戶效率的方案便是贏者。

譯者：三達不留點gpj

譯自：https://uxplanet.org/mobile-ux-design-list-view-and-grid-view-8f129b56fd5b#.keyi6kjst

本文由 @三達不留點gpj 翻譯發布于人人都是產品經理。未經許可，禁止轉載。