網頁設計之：移動用戶體驗設計之列表視圖與網格視圖

2017-12-16 13:14:49 | 作者：sw996 | 0個評論 | 人瀏覽

盡管大屏幕手機已逐漸成為當下主流趨勢，但是小尺寸的手機更加方便和便攜。不過與臺式機和筆記本電腦屏幕相比，手機屏幕（無論屏幕大小）所能呈現的內容要少得多。通常用戶只能預覽一小部分內容，需要滾動屏幕才能查看更多內容。

今天，我將概述兩種基本的內容呈現模式 - 列表視圖和網格視圖，并為兩者提供了使用案例。

列表視圖和網格視圖。    來源： MaterialUp

列表視圖

列表將多個行項作為一個連續的元素垂直地呈現。它的文本較為繁重，而且通常只有很小的圖標和文本。列表視圖項目所需的垂直空間比圖像要少，因此它可以在屏幕上顯示更多的列表項。

列表視圖示例。    圖片來源：Material Design

內容掃描

列表視圖為用戶提供了一種遵循自然閱讀習慣的模式，即F形閱讀模式。

Web內容的F形閱讀模式示例

列表最適合呈現同類數據類型，并為閱讀理解進行了優化。列表視圖可以通過縮短頁面來避免太多的滾動。排除圖片（列表視圖只有小圖標）可以讓你在每個屏幕上放置更多的選項。

具有典型掃描模式的列表示例。    圖片來源：Material Design

需要注意的是，在處理列表視圖時，用戶的注意力會從上到下遞減。

決策

用戶主要依賴于閱讀文本內容來進行選擇。

優點和缺點

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

• 列表視圖遵循自然的閱讀模式。

• 列表視圖通過在可見區域提供更多選項來防止過度滾動。

但是它也有一些缺點：

• 在視覺外觀方面，列表視圖的效果不是很理想。

• 在列表視圖中，用戶的注意力會從上到下遞減。

網格視圖

網格視圖是標準列表視圖的另一種選擇。網格列表與用于布局和其他可視化演示的網格不同，網格列表由網格列表中垂直和水平排列的單元格組成。

網格列表示例。    圖片來源：Material Design

內容掃描

網格視圖為用戶提供了更具中斷性的掃描格式，使其最適用于視覺內容。通常，這些圖像占據了大部分的單元格空間。

具有典型掃描模式的網格示例。    圖片來源：Material Design

使用網格視圖，用戶的注意力能夠在每個網格單元之間分布地更均勻。因此，網格視圖可以優化視覺理解和區分相似的數據類型。

用戶決策

用戶主要依靠圖像進行選擇。這里需要注意的是用戶在同一時刻只能看到4- 6 個網格選項。

電子商務網站的網格視圖示例。

優點和缺點

網格視圖有以下優點：

• 網格視圖更吸引眼球 。

• 網格視圖幫助用戶判斷項目之間的視覺差異。

• 在網格視圖中，用戶的注意力分布更加均勻。

但它也有下面的主要缺點：

•  網格視圖需要創建更長的頁面，迫使用戶過度使用滾動。

在下面的示例中，你可以看到列表視圖和網格視圖之間的區別。

紅線顯示屏幕的可見部分。    圖片來源： nngroup

關于視圖的經驗法則

查看內容最有效的布局是什么?到底應該使用列表還是網格視圖?正確的答案是：視情況而定。

選擇列表視圖與網格視圖的一個關鍵因素是，用戶需要多少信息才能在項目之間進行選擇。但這意味著什么呢？這一切都回到設計的主要原則 -- 內容為王。你應該選擇適合你所展示的內容類型的布局。

信息使用列表，圖片使用網格

產品頁面就是規則的一個很好的例子，產品的細節是非常重要的。對于像家電這樣的產品，諸如型號，等級和尺寸等詳細信息都是選擇過程中的主要因素。因此，使用列表視圖來呈現內容是最合理的。

適用于iOS的WallMart應用程序

對于需要較少產品信息或類似產品的應用程序，網格視圖是個不錯的選擇。諸如服裝之類的產品，當在產品之間進行選擇時，需要考慮的文本產品信息較少，而且你可以根據產品的外觀做出決定。在這個瀏覽過程中，用戶關心商品之間的視覺差異，他們更愿意滾動頁面進行商品對比，而不是在列表頁面和產品詳情頁面之間反復切換。

MrPorter iOS應用程序

在設計這些布局的時候，選擇合適的圖片尺寸，使其既能夠被識別，但又能為更多的產品在第一時間內被看到節約空間。

誰的用戶體驗效果更好？

最終，使用列表視圖與網格視圖的決定應該與對用戶最有價值的內容保持一致。 記住，用戶體驗是關于人性的探究，而不僅僅停留在模式。根據用戶和他們的需求，找出最適合的視圖模式是非常容易的：提前建立好模擬流程，并通過少數用戶進行測試。不管什么視圖形式，只要讓用戶更高效工作的視圖就是最好的！

作者：Nick Babich

地址：https://uxplanet.org/mobile-ux-design-list-view-and-grid-view-8f129b56fd5b

本文由 @Mockplus團隊翻譯

本文來自: 成都百度快照優化|成都百度關鍵詞排名優化|成都SEO【思為網絡】，轉載請保留出處！歡迎發表您的評論

相關標簽：網頁設計  移動互聯網  網站用戶體驗  

相關推薦

• 以精致詮釋搜索之美：百度三端搜索首頁2016-12-21 12:38:43
• 馬云：“電子商務”將消失 新五通一平將引領未來2016-10-13 22:4:19
• 月影談:寫給想成為前端工程師的同學們【轉】2016-10-13 10:50:9
• 一篇文章讀懂微信小程序(應用號)是什么，是否值得投入進來做？[轉]2016-9-22 22:27:54
• 網頁設計中靈活使用HTML5表單驗證技術2016-6-16 23:57:50
• 2015年網頁設計的9大趨勢-網頁設計賞析2015-7-31 22:1:10
• 谷歌算法4.21大更新：移動體驗將影響排名2015-3-12 0:30:21
• 關于如何寫好一篇好軟文的思考2015-1-18 1:46:50
• [轉]SEO核心概念：什么是內容增益2015-1-18 1:44:57
• 【轉】字體字號對用戶體驗的影響--網站用戶體驗篇2014-10-4 23:23:24