閱讀1036
標籤：
列表視圖網格視圖用戶體驗儘管大螢幕手機已逐漸成為當下主流趨勢， 但是小尺寸的手機更加方便和便攜。 不過與桌上型電腦和筆記型電腦螢幕相比， 手機螢幕（無論螢幕大小）所能呈現的內容要少得多。 通常使用者只能預覽一小部分內容， 需要滾動螢幕才能查看更多內容。
今天， 我將概述兩種基本的內容呈現模式 - 清單視圖和網格視圖， 並為兩者提供了使用案例。
列表視圖
列表將多個行項作為一個連續的元素垂直地呈現。 它的文本較為繁重， 而且通常只有很小的圖示和文本。 清單視圖專案所需的垂直空間比圖像要少， 因此它可以在螢幕上顯示更多的清單項。
內容掃描
清單視圖為使用者提供了一種遵循自然閱讀習慣的模式， 即F形閱讀模式。
Web內容的F形閱讀模式示例
清單最適合呈現同質資料類型， 並為閱讀理解進行了優化。 清單視圖可以通過縮短頁面來避免太多的滾動。 排除圖片（清單視圖只有小圖示）可以讓你在每個螢幕上放置更多的選項。
需要注意的是， 在處理列表視圖時， 用戶的注意力會從上到下遞減。
決策
使用者主要依賴于閱讀文本內容來進行選擇。
優點和缺點
與網格視圖相比， 列表視圖具有以下優點：
清單視圖遵循自然的閱讀模式。
清單視圖通過在可見區域提供更多選項來防止過度滾動。
但是它也有一些缺點：
在視覺外觀方面， 清單視圖的效果不是很理想。
在列表視圖中， 用戶的注意力會從上到下遞減。
網格視圖
網格視圖是標準列表視圖的另一種選擇。 網格清單與用於佈局和其他視覺化演示的網格不同， 網格列表由網格列表中垂直和水準排列的儲存格組成。
內容掃描
網格視圖為使用者提供了更具中斷性的掃描格式， 使其最適用於視覺內容。 通常， 這些圖像佔據了大部分的儲存格空間。
使用網格視圖，用戶的注意力能夠在每個網格單元之間分佈地更均勻。因此，網格視圖可以優化視覺理解和區分相似的資料類型。
使用者決策
使用者主要依靠圖像進行選擇。這裡需要注意的是使用者在同一時刻只能看到4-6個網格選項。
電子商務網站的網格視圖示例。
優點和缺點
網格視圖有以下優點：
· 網格視圖更吸引眼球 。
· 網格視圖説明使用者判斷專案之間的視覺差異。
· 在網格視圖中，用戶的注意力分佈更加均勻。
但它也有下面的主要缺點：
· 網格視圖需要創建更長的頁面，迫使使用者過度使用滾動。
在下面的示例中，你可以看到列表視圖和網格視圖之間的區別。
關於視圖的經驗法則
查看內容最有效的佈局是什麼?到底應該使用列表還是網格視圖?正確的答案是：視情況而定。
選擇列表視圖與網格視圖的一個關鍵因素是，使用者需要多少資訊才能在專案之間進行選擇。但這意味著什麼呢？這一切都回到設計的主要原則 -- 內容為王。你應該選擇適合你所展示的內容類別型的佈局。
資訊使用清單，圖片使用網格
產品頁面就是規則的一個很好的例子，產品的細節是非常重要的。對於像家電這樣的產品，諸如型號，等級和尺寸等詳細資訊都是選擇過程中的主要因素。因此，使用清單視圖來呈現內容是最合理的。
適用於iOS的WallMart應用程式
對於需要較少產品資訊或類似產品的應用程式，網格視圖是個不錯的選擇。諸如服裝之類的產品，當在產品之間進行選擇時，需要考慮的文本產品資訊較少，而且你可以根據產品的外觀做出決定。在這個流覽過程中，使用者關心商品之間的視覺差異，他們更願意滾動頁面進行商品對比，而不是在清單頁面和產品詳情頁面之間反復切換。
MrPorter iOS應用程式
在設計這些佈局的時候，選擇合適的圖片尺寸，使其既能夠被識別，但又能為更多的產品在第一時間內被看到節約空間。
誰的用戶體驗效果更好？
最終，使用列表視圖與網格視圖的決定應該與對使用者最有價值的內容保持一致。 記住，用戶體驗是關於人性的探究，而不僅僅停留在模式。根據使用者和他們的需求，找出最適合的視圖模式是非常容易的：提前建立好類比流程，並通過少數使用者進行測試。不管什麼視圖形式，只要讓用戶更高效工作的視圖就是最好的！
作者：Nick Babich
本文由 @Mockplus團隊翻譯發佈于產品壹佰。未經許可，禁止轉載。
使用網格視圖，用戶的注意力能夠在每個網格單元之間分佈地更均勻。因此，網格視圖可以優化視覺理解和區分相似的資料類型。
使用者決策
使用者主要依靠圖像進行選擇。這裡需要注意的是使用者在同一時刻只能看到4-6個網格選項。
電子商務網站的網格視圖示例。
優點和缺點
網格視圖有以下優點：
· 網格視圖更吸引眼球 。
· 網格視圖説明使用者判斷專案之間的視覺差異。
· 在網格視圖中，用戶的注意力分佈更加均勻。
但它也有下面的主要缺點：
· 網格視圖需要創建更長的頁面，迫使使用者過度使用滾動。
在下面的示例中，你可以看到列表視圖和網格視圖之間的區別。
關於視圖的經驗法則
查看內容最有效的佈局是什麼?到底應該使用列表還是網格視圖?正確的答案是：視情況而定。
選擇列表視圖與網格視圖的一個關鍵因素是，使用者需要多少資訊才能在專案之間進行選擇。但這意味著什麼呢？這一切都回到設計的主要原則 -- 內容為王。你應該選擇適合你所展示的內容類別型的佈局。
資訊使用清單，圖片使用網格
產品頁面就是規則的一個很好的例子，產品的細節是非常重要的。對於像家電這樣的產品，諸如型號，等級和尺寸等詳細資訊都是選擇過程中的主要因素。因此，使用清單視圖來呈現內容是最合理的。
適用於iOS的WallMart應用程式
對於需要較少產品資訊或類似產品的應用程式，網格視圖是個不錯的選擇。諸如服裝之類的產品，當在產品之間進行選擇時，需要考慮的文本產品資訊較少，而且你可以根據產品的外觀做出決定。在這個流覽過程中，使用者關心商品之間的視覺差異，他們更願意滾動頁面進行商品對比，而不是在清單頁面和產品詳情頁面之間反復切換。
MrPorter iOS應用程式
在設計這些佈局的時候，選擇合適的圖片尺寸，使其既能夠被識別，但又能為更多的產品在第一時間內被看到節約空間。
誰的用戶體驗效果更好？
最終，使用列表視圖與網格視圖的決定應該與對使用者最有價值的內容保持一致。 記住，用戶體驗是關於人性的探究，而不僅僅停留在模式。根據使用者和他們的需求，找出最適合的視圖模式是非常容易的：提前建立好類比流程，並通過少數使用者進行測試。不管什麼視圖形式，只要讓用戶更高效工作的視圖就是最好的！
作者：Nick Babich
本文由 @Mockplus團隊翻譯發佈于產品壹佰。未經許可，禁止轉載。