@Daidai丶呆 ：本周的譯文純粹聊了聊「列表視圖」跟「網格視圖」在電商產品中的應用法則。但這篇在 Medium 上收獲1.5K點贊數的文章，把大家平時經常看到，但很少去思考為什么這么做的視圖，做了一個詳細分析。
一、根據信息選擇合適的視圖
因為從事電商行業已經有一段時間，且在迭代的過程中學到了不少相關知識。所以抽空寫了一篇關于「列表視圖」與「網格視圖」的文章分享給各位。
列表視圖（上圖左）：
- 列表視圖適合許多長文本信息的展示，如標題、描述、評論等，它可以幫助用戶更好的理解商品的相關信息；
- 通過閱讀習慣與眼動模型的研究，列表視圖符合「最重要的內容應該置于左邊，次要的放在右邊」的實驗結果。
網格視圖：
- 網格視圖更多的是突出圖像的。它更適用于文字信息較少，圖像層級更重的頁面。
- 用戶主要以圖像確認網格視圖的信息，所以通常可以一次掃描4-6個視圖。
列表視圖和網格視圖都可以看成是一個組件，組成元素有圖像、標題、評論、位置等。區別就在于將這些元素進行合理的布局或組合，用于頁面的相關信息展示。
二、搜索與查看
通過多次的 A/B 測試表明：列表視圖用于搜索結果展示頁更受用戶的歡迎。但是，在主頁和類別頁面上觀察到相反的情況，其中大多數參與者在瀏覽和查看他們可能想要的商品詳情時，更喜歡用網格視圖。因為網格視圖更突出圖像本身，首先通過對圖像的了解，再查看其它更詳細的信息，是用戶在電商產品中的主要使用習慣。
總而言之，我們需要在相關頁面中給出更加合理的視圖，符合用戶的心理預期。如，網格視圖讓用戶大致了解了某商品信息，觸發用戶點擊欲望；列表視圖讓用戶了解某商品詳細信息，觸發用戶下單欲望。
三、盡量減少信息，幫用戶做選擇
許多人認為列表視圖具有更多空間，能放置更多信息，其實不然。用戶很容易被各種各樣的信息淹沒，陷入選擇悖論。如，你在列表視圖上放置了大量信息，用戶就無法一眼辨識出該商品的大體信息，也就被輕易忽略了。
A/B 測試也是一種了解哪些信息會影響用戶做出決定的好方法。我們發現標題、價格、評論、位置、商品說明和金額都會對轉化產生一定影響。而這些信息中，標題、價格、評論（數）是必不可少的。因此它們在兩種視圖中都有一定的比重。其余的信息，就根據場景來做刪減即可。
如今，我們仍然能看到許多電商產品在設計時采用列表視圖與網格視圖。這是件好事，我們應該根據每個頁面的目的，做出相應的展示形式。符合用戶當時的場景才最為重要。這句話不僅僅針對兩種視圖的選擇，在其他功能的設計上也是如此。
學會充分利用兩個視圖，不要在這兩個視圖上放置相同的信息，否則就會導致兩個視圖失去自身的應有價值。
四、最后給用戶展示更好的內容
有了以上的視圖選擇建議，之后就是底層邏輯了。
你還記得你看到的眼睛凝視強度從上到下減少的熱圖嗎？通過查看這份熱圖，可以根據瀏覽歷史記錄、用戶的搜索情況、關注賣家的行為、喜歡的商品等因素構建推薦算法，并使用它來對商品進行排序，推給用戶。
再是研究那些銷量很高的產品，除了推廣之外，在設計上有什么影響用戶的布局方式？如，假設顏色是用戶選擇圍巾的關鍵信息，那么就應該在描述的開頭就說明可選顏色的信息。如果仔細看一些平臺的商品信息，你會發現許多這樣的例子。
以上內容就是電商產品在視圖選擇上的原因所在。希望幫助到各位。
原文鏈接：《List or Grid, It Is Not Important》? Mei
呆呆是前阿里設計師，自學能力超強，在網絡上輸出過很多干貨。最近他推出了《呆呆郵報》，每周 1 – 2 篇會員期刊，通過郵箱發送，內容涵蓋產品設計、科技、藝術等領域，想和大牛近距離接觸，這可是個絕佳機會 → 訂閱《呆呆郵報》
歡迎關注譯者的微信公眾號：「呆呆U理」
圖片素材作者：ueno.
「細談列表與網格設計」
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
標志設計標準教程
已累計誕生 729 位幸運星
發表評論
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓