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

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

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

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

列表視圖（上圖左）：

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

網(wǎng)格視圖：

• 網(wǎng)格視圖更多的是凸起圖像的。它更適用于筆墨信息較少，圖像層級(jí)更重的網(wǎng)頁(yè)。
• 用戶重要以圖像確認(rèn)網(wǎng)格視圖的信息，所以通?？梢砸淮螔呙?-6個(gè)視圖。

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

二、搜索與查看

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

圖片素材作者：ueno.