基礎(chǔ)小科普！淺談「列表視圖」與「網(wǎng)格視圖」的用法

@Daidai丶呆 ：本周的譯文純粹聊了聊「列表視圖」跟「網(wǎng)格視圖」在電商產(chǎn)品中的應(yīng)用法則。但這篇在 Medium 上收獲1.5K點贊數(shù)的文章，把大家平時經(jīng)常看到，但很少去思考為什么這么做的視圖，做了一個細(xì)致分析。

一、根據(jù)信息選擇合適的視圖

由于從事電商行業(yè)已經(jīng)有一段時間，且在迭代的過程中學(xué)到了不少相干知識。所以抽空寫了一篇關(guān)于「列表視圖」與「網(wǎng)格視圖」的文章分享給各位。

列表視圖（上圖左）：

• 列表視圖適合很多長文本信息的展示，如題目、描述、評論等，它可以幫助用戶更好的理解商品的相干信息；
• 通過閱讀風(fēng)俗與眼動模型的研究，列表視圖吻合「最緊張的內(nèi)容應(yīng)該置于左邊，次要的放在右邊」的實驗效果。

網(wǎng)格視圖：

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

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

二、搜索與查看

通過多次的 A/B 測試注解：列表視圖用于搜索效果展示頁更受用戶的迎接。但是，在主頁和類別網(wǎng)頁上觀察到相反的情況，其中大多數(shù)參與者在欣賞和查看他們可能想要的商品詳情時，更喜好用網(wǎng)格視圖。由于網(wǎng)格視圖更凸起圖像自己，首先通過對圖像的了解，再查看其它更細(xì)致的信息，是用戶在電商產(chǎn)品中的重要使用風(fēng)俗。

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

三、盡量削減信息，幫用戶做選擇

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

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

現(xiàn)在，我們?nèi)匀荒芸吹胶芏嚯娚坍a(chǎn)品在設(shè)計時采用列表視圖與網(wǎng)格視圖。這是件好事，我們應(yīng)該根據(jù)每個網(wǎng)頁的目的，做出響應(yīng)的展示情勢。吻合用戶當(dāng)時的場景才最為緊張。這句話不僅僅針對兩種視圖的選擇，在其他功能的設(shè)計上也是如此。

學(xué)會充分行使兩個視圖，不要在這兩個視圖上放置雷同的信息，否則就會導(dǎo)致兩個視圖失去自身的應(yīng)有價值。

四、最后給用戶展示更好的內(nèi)容

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

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

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

以上內(nèi)容就是電商產(chǎn)品在視圖選擇上的緣故原由所在。盼望幫助到各位。

原文鏈接：《List or Grid, It Is Not Important》  Mei

呆呆是前阿里設(shè)計師，自學(xué)能力超強，在網(wǎng)絡(luò)上輸出過許多干貨。最近他推出了《呆呆郵報》，每周 1 – 2 篇會員期刊，通過郵箱發(fā)送，內(nèi)容涵蓋產(chǎn)品設(shè)計、科技、藝術(shù)等領(lǐng)域，想和大牛近距離接觸，這可是個絕佳機(jī)會 → 訂閱《呆呆郵報》

迎接關(guān)注譯者的微信公眾號：「呆呆U理」

圖片素材作者：ueno.