兩種基本內(nèi)容呈現(xiàn)模式的概述 - 列表視圖和網(wǎng)格視圖 - 為兩者提供了一個用例。

雖然大屏幕手機逐漸成為主流趨勢，但小型手機更方便攜帶。但與臺式機和筆記本電腦屏幕相比，手機屏幕（無論屏幕尺寸如何）都可以提供更少的內(nèi)容。通常，用戶只能預(yù)覽少量內(nèi)容，需要滾動屏幕才能看到更多內(nèi)容。

今天，我將概述兩種基本的內(nèi)容呈現(xiàn)模式 - 列表視圖和網(wǎng)格視圖 - 并為兩者提供一個用例。

列表視圖和網(wǎng)格視圖。來源：MaterialUp

列表視圖

該列表垂直呈現(xiàn)多個行項目作為連續(xù)元素。它的文字很重，通常有很小的圖標和文字。列表視圖項目所需的垂直空間比圖像少，因此它可以在屏幕上顯示更多列表項目。

列表視圖的示例。圖像來源：材料設(shè)計

內(nèi)容掃描

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

Web內(nèi)容的F形閱讀模式示例

該列表最適合呈現(xiàn)相同類型的數(shù)據(jù)并針對閱讀理解進行優(yōu)化。列表視圖可以通過縮短頁面來避免過多滾動。排除圖像（列表視圖只有小圖標）允許您在每個屏幕上放置更多選項。

具有典型掃描模式的列表的示例。圖像來源：材料設(shè)計

應(yīng)當注意，當處理列表視圖時，用戶的注意力從上到下遞減。

決策

用戶主要依靠閱讀文本內(nèi)容來做出選擇。

利弊

與網(wǎng)格視圖相比，列表視圖具有以下優(yōu)點：

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

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

但它也有一些缺點：

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

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

網(wǎng)格視圖

網(wǎng)格視圖是標準列表視圖的另一個選項。網(wǎng)格列表不同于用于布局和其他視覺呈現(xiàn)的網(wǎng)格，其由網(wǎng)格列表中的垂直和水平排列的單元組成。

網(wǎng)格列表的示例。圖像來源：材料設(shè)計

內(nèi)容掃描

網(wǎng)格視圖為用戶提供了更具破壞性的掃描格式，使其成為可視內(nèi)容的理想選擇。通常，這些圖像占據(jù)大部分細胞空間。

具有典型掃描模式的網(wǎng)格示例。圖像來源：材料設(shè)計

通過網(wǎng)格視圖，用戶的注意力可以更均勻地分布在每個網(wǎng)格單元之間。因此，網(wǎng)格視圖可以優(yōu)化視覺理解并區(qū)分類似的數(shù)據(jù)類型。

用戶決定

用戶主要依靠圖像進行選擇。這里應(yīng)該注意，用戶只能同時看到4-6個網(wǎng)格選項。

電子商務(wù)網(wǎng)站的網(wǎng)格視圖示例。

利弊

網(wǎng)格視圖具有以下優(yōu)點：

·網(wǎng)格視圖更引人注目。

·網(wǎng)格視圖可幫助用戶確定項目之間的視覺差異

·在網(wǎng)格視圖中，用戶的注意力分布更加均勻。

但它也有以下主要缺點：

·網(wǎng)格視圖需要創(chuàng)建更長的頁面，迫使用戶過度使用滾動。

在下面的示例中，您可以看到列表視圖和網(wǎng)格視圖之間的差異。

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

觀點的經(jīng)驗法則

查看內(nèi)容的最有效布局是什么？我應(yīng)該使用列表還是網(wǎng)格視圖？正確答案是：視情況而定。

選擇列表視圖和網(wǎng)格視圖的關(guān)鍵因素是用戶在項目之間做出選擇所需的信息量。但是，這是什么意思？這一切都可以追溯到設(shè)計的主要原則 - 內(nèi)容為王。您應(yīng)該選擇適合您所顯示內(nèi)容類型的布局。

信息使用列表，使用網(wǎng)格的圖像

產(chǎn)品頁面是規(guī)則的一個很好的例子，產(chǎn)品的細節(jié)非常重要。對于家用電器等產(chǎn)品，模型，等級和尺寸等細節(jié)是選擇過程中的主要因素。因此，使用列表視圖呈現(xiàn)內(nèi)容是最合理的。

適用于iOS的WallMart應(yīng)用

對于需要較少產(chǎn)品信息或類似產(chǎn)品的應(yīng)用程序，網(wǎng)格視圖是一個不錯的選擇。對于服裝等產(chǎn)品，在選擇產(chǎn)品時要考慮的文字產(chǎn)品信息較少，您可以根據(jù)產(chǎn)品的外觀做出決策。在此瀏覽過程中，用戶關(guān)注產(chǎn)品之間的視覺差異，他們更喜歡滾動頁面進行產(chǎn)品比較，而不是在列表頁面和產(chǎn)品詳細信息頁面之間反復(fù)切換。

MrPorter iOS應(yīng)用程序

在設(shè)計這些布局時，請選擇合適的圖像大小以便識別，但它可以節(jié)省空間，以便在第一時間看到更多產(chǎn)品。

誰的用戶體驗更好？

最終，使用列表視圖和網(wǎng)格視圖的決定應(yīng)與對用戶最有價值的內(nèi)容保持一致。請記住，用戶體驗與人性有關(guān)，而不僅僅是模式。根據(jù)用戶及其需求找到最合適的視圖模式非常簡單：提前構(gòu)建模擬過程并使用少量用戶進行測試。無論視圖形式如何，使用戶更有效地工作的視圖是最好的！

作者：尼克巴比奇

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

« 最大的凈紅色孵化基地在哪里？誰投資了 | 惠科手機蜂巢營銷系統(tǒng)，讓您的工作完成質(zhì)量的騰飛 »