@Daidai丶呆 ：本周的譯文純粹聊了聊「列表視圖」跟「網(wǎng)格視圖」在電商產(chǎn)品中的應(yīng)用法則。但這篇在 Medium 上收獲1.5K點贊數(shù)的文章，把大家平時經(jīng)?？吹剑苌偃ニ伎紴槭裁催@么做的視圖，做了一個詳細分析。
一、根據(jù)信息選擇合適的視圖
因為從事電商行業(yè)已經(jīng)有一段時間，且在迭代的過程中學(xué)到了不少相關(guān)知識。所以抽空寫了一篇關(guān)于「列表視圖」與「網(wǎng)格視圖」的文章分享給各位。
列表視圖（上圖左）：
- 列表視圖適合許多長文本信息的展示，如標(biāo)題、描述、評論等，它可以幫助用戶更好的理解商品的相關(guān)信息；
- 通過閱讀習(xí)慣與眼動模型的研究，列表視圖符合「最重要的內(nèi)容應(yīng)該置于左邊，次要的放在右邊」的實驗結(jié)果。
網(wǎng)格視圖：
- 網(wǎng)格視圖更多的是突出圖像的。它更適用于文字信息較少，圖像層級更重的頁面。
- 用戶主要以圖像確認網(wǎng)格視圖的信息，所以通?？梢砸淮螔呙?-6個視圖。
列表視圖和網(wǎng)格視圖都可以看成是一個組件，組成元素有圖像、標(biāo)題、評論、位置等。區(qū)別就在于將這些元素進行合理的布局或組合，用于頁面的相關(guān)信息展示。
二、搜索與查看
通過多次的 A/B 測試表明：列表視圖用于搜索結(jié)果展示頁更受用戶的歡迎。但是，在主頁和類別頁面上觀察到相反的情況，其中大多數(shù)參與者在瀏覽和查看他們可能想要的商品詳情時，更喜歡用網(wǎng)格視圖。因為網(wǎng)格視圖更突出圖像本身，首先通過對圖像的了解，再查看其它更詳細的信息，是用戶在電商產(chǎn)品中的主要使用習(xí)慣。
總而言之，我們需要在相關(guān)頁面中給出更加合理的視圖，符合用戶的心理預(yù)期。如，網(wǎng)格視圖讓用戶大致了解了某商品信息，觸發(fā)用戶點擊欲望；列表視圖讓用戶了解某商品詳細信息，觸發(fā)用戶下單欲望。
三、盡量減少信息，幫用戶做選擇
許多人認為列表視圖具有更多空間，能放置更多信息，其實不然。用戶很容易被各種各樣的信息淹沒，陷入選擇悖論。如，你在列表視圖上放置了大量信息，用戶就無法一眼辨識出該商品的大體信息，也就被輕易忽略了。
A/B 測試也是一種了解哪些信息會影響用戶做出決定的好方法。我們發(fā)現(xiàn)標(biāo)題、價格、評論、位置、商品說明和金額都會對轉(zhuǎn)化產(chǎn)生一定影響。而這些信息中，標(biāo)題、價格、評論（數(shù)）是必不可少的。因此它們在兩種視圖中都有一定的比重。其余的信息，就根據(jù)場景來做刪減即可。
如今，我們?nèi)匀荒芸吹皆S多電商產(chǎn)品在設(shè)計時采用列表視圖與網(wǎng)格視圖。這是件好事，我們應(yīng)該根據(jù)每個頁面的目的，做出相應(yīng)的展示形式。符合用戶當(dāng)時的場景才最為重要。這句話不僅僅針對兩種視圖的選擇，在其他功能的設(shè)計上也是如此。
學(xué)會充分利用兩個視圖，不要在這兩個視圖上放置相同的信息，否則就會導(dǎo)致兩個視圖失去自身的應(yīng)有價值。
四、最后給用戶展示更好的內(nèi)容
有了以上的視圖選擇建議，之后就是底層邏輯了。
你還記得你看到的眼睛凝視強度從上到下減少的熱圖嗎？通過查看這份熱圖，可以根據(jù)瀏覽歷史記錄、用戶的搜索情況、關(guān)注賣家的行為、喜歡的商品等因素構(gòu)建推薦算法，并使用它來對商品進行排序，推給用戶。
再是研究那些銷量很高的產(chǎn)品，除了推廣之外，在設(shè)計上有什么影響用戶的布局方式？如，假設(shè)顏色是用戶選擇圍巾的關(guān)鍵信息，那么就應(yīng)該在描述的開頭就說明可選顏色的信息。如果仔細看一些平臺的商品信息，你會發(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)域，想和大牛近距離接觸，這可是個絕佳機會 → 訂閱《呆呆郵報》
歡迎關(guān)注譯者的微信公眾號：「呆呆U理」
圖片素材作者：ueno.
「細談列表與網(wǎng)格設(shè)計」
復(fù)制本文鏈接 文章為作者獨立觀點不代表優(yōu)設(shè)網(wǎng)立場，未經(jīng)允許不得轉(zhuǎn)載。
發(fā)評論！每天贏獎品
點擊 登錄 后，在評論區(qū)留言，系統(tǒng)會隨機派送獎品
2012年成立至今，是國內(nèi)備受歡迎的設(shè)計師平臺，提供獎品贊助 聯(lián)系我們
AI輔助海報設(shè)計101例
已累計誕生 753 位幸運星
發(fā)表評論
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓