因?yàn)閺氖码娚绦袠I(yè)已經(jīng)有一段時(shí)間，且在迭代的過程中學(xué)到了不少相關(guān)知識。所以抽空寫了一篇關(guān)于「列表視圖」與「網(wǎng)格視圖」的文章分享給各位。

列表視圖（上圖左）：

• 列表視圖適合許多長文本信息的展示，如標(biāo)題、描述、評論等，它可以幫助用戶更好的理解商品的相關(guān)信息；
• 通過閱讀習(xí)慣與眼動(dòng)模型的研究，列表視圖符合「最重要的內(nèi)容應(yīng)該置于左邊，次要的放在右邊」的實(shí)驗(yàn)結(jié)果。

網(wǎng)格視圖（上圖右）：

• 網(wǎng)格視圖更多的是突出圖像的。它更適用于文字信息較少，圖像層級更重的頁面；
• 用戶主要以圖像確認(rèn)網(wǎng)格視圖的信息，所以通常可以一次掃描 4-6 個(gè)視圖。

列表視圖和網(wǎng)格視圖都可以看成是一個(gè)組件，組成元素有圖像、標(biāo)題、評論、位置等。區(qū)別就在于將這些元素進(jìn)行合理的布局或組合，用于頁面的相關(guān)信息展示。

1. 搜索與查看

通過多次的 A / B 測試表明：列表視圖用于搜索結(jié)果展示頁更受用戶的歡迎。但是，在主頁和類別頁面上觀察到相反的情況，其中大多數(shù)參與者在瀏覽和查看他們可能想要的商品詳情時(shí)，更喜歡用網(wǎng)格視圖。因?yàn)榫W(wǎng)格視圖更突出圖像本身，首先通過對圖像的了解，再查看其它更詳細(xì)的信息，是用戶在電商產(chǎn)品中的主要使用習(xí)慣。

總而言之，我們需要在相關(guān)頁面中給出更加合理的視圖，符合用戶的心理預(yù)期。如，列表視圖讓用戶大致了解了某商品信息，觸發(fā)用戶點(diǎn)擊欲望；網(wǎng)格視圖讓用戶了解某商品詳細(xì)信息，觸發(fā)用戶下單欲望。

2. 盡量減少信息，幫用戶做選擇

許多人認(rèn)為列表視圖具有更多空間，能放置更多信息，其實(shí)不然。用戶很容易被各種各樣的信息淹沒，陷入選擇悖論。如，你在列表視圖上放置了大量信息，用戶就無法一眼辨識出該商品的大體信息，也就被輕易忽略了。

A/B 測試也是一種了解哪些信息會(huì)影響用戶做出決定的好方法。我們發(fā)現(xiàn)標(biāo)題、價(jià)格、評論、位置、商品說明和金額都會(huì)對轉(zhuǎn)化產(chǎn)生一定影響。而這些信息中，標(biāo)題、價(jià)格、評論（數(shù)）是必不可少的。因此它們在兩種視圖中都有一定的比重。其余的信息，就根據(jù)場景來做刪減即可。

3. 讓用戶做選擇

如今，我們?nèi)匀荒芸吹皆S多電商產(chǎn)品在設(shè)計(jì)時(shí)采用列表視圖與網(wǎng)格視圖。這是件好事，我們應(yīng)該根據(jù)每個(gè)頁面的目的，做出相應(yīng)的展示形式。符合用戶當(dāng)時(shí)的場景才最為重要。這句話不僅僅針對兩種視圖的選擇，在其他功能的設(shè)計(jì)上也是如此。

學(xué)會(huì)充分利用兩個(gè)視圖，不要在這兩個(gè)視圖上放置相同的信息，否則就會(huì)導(dǎo)致兩個(gè)視圖失去自身的應(yīng)有價(jià)值。

4. 給用戶展示更好的內(nèi)容

有了以上的視圖選擇建議，之后就是底層邏輯了。

你還記得你看到的眼睛凝視強(qiáng)度從上到下減少的熱圖嗎？通過查看這份熱圖，可以根據(jù)瀏覽歷史記錄、用戶的搜索情況、關(guān)注賣家的行為、喜歡的商品等因素構(gòu)建推薦算法，并使用它來對商品進(jìn)行排序，推給用戶。

再是研究那些銷量很高的產(chǎn)品，除了推廣之外，在設(shè)計(jì)上有什么影響用戶的布局方式？如，假設(shè)顏色是用戶選擇圍巾的關(guān)鍵信息，那么就應(yīng)該在描述的開頭就說明可選顏色的信息。如果仔細(xì)看一些平臺的商品信息，你會(huì)發(fā)現(xiàn)許多這樣的例子。

大致如此了，以上內(nèi)容就是電商產(chǎn)品在視圖選擇上的原因所在。

希望幫助到各位。謝謝閱讀：）

原文：https://uxplanet.org/listview-or-gridview-it-is-not-important-b767d20ec05e

譯文：呆呆丶