想做好電商頁(yè)面設(shè)計(jì)？先了解用戶賣場(chǎng)動(dòng)線需求！

隨著電商的快速發(fā)展，以賣貨為主題的大型活動(dòng)已不僅僅在 618，雙 11 開(kāi)展，對(duì)用戶來(lái)說(shuō)，平臺(tái)級(jí)別的大促越來(lái)越頻繁，逛賣場(chǎng)的機(jī)會(huì)越來(lái)越多，受到大量大促賣場(chǎng)信息的“轟炸”。那么賣場(chǎng)如何能快速引起用戶興趣，抓住用戶的視線，讓其找到想要的商品并點(diǎn)擊購(gòu)買呢，本文根據(jù)以往相關(guān)項(xiàng)目獲取用戶反饋，整理出以下用戶對(duì)于賣場(chǎng)動(dòng)線的主要需求。

更多干貨：

一、核心需求

1. 易讀

會(huì)場(chǎng)活動(dòng)頁(yè)包含的信息對(duì)用戶來(lái)說(shuō)是豐富而復(fù)雜的，用戶瀏覽的場(chǎng)景本身是碎片化的，手拖動(dòng)手機(jī)頻幕，視線跳躍閱讀，呈現(xiàn) Z 字型瀏覽軌跡，視線的停留時(shí)間更短，那么提升進(jìn)行賣場(chǎng)設(shè)計(jì)時(shí)就需要考慮用戶易讀性，降低用戶理解成本，保證信息清晰的展示給用戶，讓其一眼就可以篩選出對(duì)自己最有價(jià)值的產(chǎn)品或者板塊。易讀體現(xiàn)在不同的方面，文字易理解、圖片干凈不雜亂、頁(yè)面展示邏輯易理解，符合用戶的認(rèn)知慣性。

2. 精準(zhǔn)

千萬(wàn)不要忘記賣場(chǎng)的初衷：賣貨。無(wú)論頁(yè)面多么易讀，用戶最關(guān)注的還是賣場(chǎng)中商品能否真正符合自己的需求，商品內(nèi)容的節(jié)奏要把握好，推送要更精準(zhǔn)，用戶不停的往下滑頁(yè)面，就是希望可以看到更多符合自己心意的東西，或者是提供更多與需求匹配的購(gòu)物靈感，在動(dòng)線上給到用戶更多刺激，讓用戶有點(diǎn)擊的欲望。

二、賣場(chǎng)動(dòng)線模塊需求

根據(jù)用戶調(diào)研，針對(duì)會(huì)場(chǎng)頭圖、優(yōu)惠券及商品樓層等動(dòng)線需求做了一些整理，供大家參考：

1. 會(huì)場(chǎng)頭圖：總覽全局，突出重點(diǎn)，尺寸緊湊

總覽全局——對(duì)用戶來(lái)說(shuō)，需要通過(guò)頭圖快速了解會(huì)場(chǎng)頁(yè)面的主題和活動(dòng)力度，頭圖banner提供的內(nèi)容決定了整個(gè)大促頁(yè)面的第一印象，并預(yù)判會(huì)場(chǎng)的其他內(nèi)容是否符合用戶的需求，因此需要降低banner的識(shí)別成本，讓用戶在更短的時(shí)間內(nèi)get到會(huì)場(chǎng)主題，從而激發(fā)顧客點(diǎn)擊的欲望。

“一進(jìn)來(lái)看到這個(gè)圖就知道這個(gè)會(huì)場(chǎng)是干什么的，然后再?zèng)Q定是否繼續(xù)瀏覽。”

突出重點(diǎn)——頭圖Banner無(wú)法承載復(fù)雜宏大的畫(huà)面和大量的信息傳遞，要吸引用戶的注意，并有效的讓用戶了解會(huì)場(chǎng)主題，需要突出Banner重點(diǎn)，明確內(nèi)容核心點(diǎn)，否則沒(méi)有記憶點(diǎn)，也不利于信息傳達(dá)。根據(jù)眼動(dòng)熱力圖來(lái)看，用戶更傾向于通過(guò)文字信息來(lái)獲取信息，重點(diǎn)表現(xiàn)本會(huì)場(chǎng)的主題、平臺(tái)的優(yōu)勢(shì)和用戶在該會(huì)場(chǎng)中可看到的商品和活動(dòng)力度的文案普遍受到用戶關(guān)注。設(shè)計(jì)文字內(nèi)容清晰簡(jiǎn)單直白，讓用戶更好的閱讀信息。

“會(huì)場(chǎng)的大標(biāo)題讓我了解主要是賣什么的，后面的產(chǎn)品會(huì)有哪些類別。”

“吸引眼球的文案，比如秒殺、high 購(gòu)，引爆，視覺(jué)沖擊力很大。”

尺寸緊湊——因?yàn)槠脚_(tái)會(huì)場(chǎng)頁(yè)的活動(dòng)頁(yè)涉及的品牌多，產(chǎn)品多，用戶反饋看到的一些頭圖占用面積大而傳遞的有效信息較少。因此banner需要通過(guò)緊湊的布局來(lái)將首屏空間利用最大化，提高瀏覽效率，窄頭圖設(shè)計(jì)更加符合用戶的需求。

2. 優(yōu)惠券：優(yōu)惠醒目，規(guī)則清晰，化繁為簡(jiǎn)

優(yōu)惠醒目——前面說(shuō)過(guò)，用戶在瀏覽手機(jī)頁(yè)面時(shí)，停留時(shí)間更短，更聚焦，每一模塊不宜有太大的信息量，具體來(lái)說(shuō)仍然是突出核心信息，對(duì)優(yōu)惠券模塊來(lái)說(shuō)，優(yōu)惠力度的突出放大能更好的吸引用戶興趣。

下圖中右側(cè)優(yōu)惠券因利益點(diǎn)更加突出用戶反饋視覺(jué)感受更好，能快速抓取優(yōu)惠信息。

“京東的券太小了，和淘寶相比存在感太弱了。”

規(guī)則清晰——優(yōu)惠券用在哪里，是否通用，用戶期待在領(lǐng)取時(shí)有更加明確的規(guī)則的展示，使用規(guī)則展示清晰，可見(jiàn)。

“之前特意搶了圖書(shū)滿 300 減 150 的券，寫(xiě)著部分圖書(shū)可用，但是不確定有哪些書(shū)可以用，最后發(fā)現(xiàn)只有工具書(shū)使用，是不是可以寫(xiě)清楚一些優(yōu)惠券的適用范圍。”

化繁為簡(jiǎn)——會(huì)場(chǎng)領(lǐng)取的優(yōu)惠券在本會(huì)場(chǎng)可通用，種類簡(jiǎn)單，使用便捷。

“領(lǐng)券太復(fù)雜了，會(huì)場(chǎng)里領(lǐng)的優(yōu)惠券，有店鋪的，有秒殺的，有整點(diǎn)搶的，感覺(jué)比較亂。會(huì)場(chǎng)選到的東西和領(lǐng)的券不能匹配，通常都買不到想買的東西。”

3. 商品樓層：瀏覽連貫，排版透氣，間隔清晰

瀏覽連貫——樓層或者商品的排布需符合用戶的認(rèn)知邏輯，當(dāng)用戶按照品類查找商品時(shí)，在其認(rèn)知中相關(guān)聯(lián)的品類應(yīng)放置在一起，同類商品瀏覽更有連續(xù)性。

如下圖所示，游戲電視，游戲本兩個(gè)板塊未放置在一起，用戶需要跳躍的去尋找相關(guān)聯(lián)的品類板塊，部分用戶可能會(huì)因?yàn)闉g覽不連貫，或不知道頁(yè)面還有相關(guān)板塊而提前離開(kāi)會(huì)場(chǎng)，錯(cuò)過(guò)會(huì)場(chǎng)較靠后位置展示的興趣商品。

“這個(gè)版面的展示就有點(diǎn)跳，這幾個(gè) 3C 品類的應(yīng)該是一類的，比如智能數(shù)碼，游戲電視、游戲本，都是相關(guān)聯(lián)的，但是中間間隔開(kāi)了，我看完游戲電視看到智能家裝就不會(huì)繼續(xù)看了。”

排版透氣——設(shè)計(jì)上賣場(chǎng)頁(yè)面希望最大化的利用版面，但用戶更偏好寬松型的排版方式，讓信息不要一股腦涌到自己面前，缺少視覺(jué)重點(diǎn)。對(duì)比下圖中一行四商品展示案例，一行三和一行一的展示方式，商品內(nèi)容和顏色簡(jiǎn)潔，清晰，重點(diǎn)突出，便于瀏覽。

基于眼動(dòng)實(shí)驗(yàn)和用戶反饋，用戶瀏覽商品時(shí)，一行四個(gè)的展示方式，信息多，用戶對(duì)各商品信息的關(guān)注較為分散，通常一掃而過(guò)；而一行一的展示，商品圖更大，商品標(biāo)題展示更清晰，用戶快速辨別商品后，把更多視覺(jué)關(guān)注點(diǎn)放在商品價(jià)格的判斷與比較。

一行四

一行一

“這種一排放 4 個(gè)商品的就太小太擠了，一大堆信息，字也看得很費(fèi)勁，不夠清楚，就大概看一下，我喜歡一排只有兩個(gè)的，或者只有一排一個(gè)的，文字、圖片、價(jià)格看得清楚，一直下拉也不覺(jué)得累。”

間隔清晰——對(duì)用戶來(lái)說(shuō)商品展示的越多，信息量越大，其分在每一模塊上的停留時(shí)間可能更短，在這種情況下，清晰的間隔能讓用戶更好的“掃描”商品。

間隔的清晰主要表現(xiàn)在商品與商品背景、模塊與頁(yè)面背景上。下（圖一）中商品占據(jù)的位置太滿導(dǎo)致與模塊的名稱及價(jià)格展示區(qū)缺少足夠的間隔，給用戶信息爆炸的感受。而（圖二）的口紅為白色，與白色背景之間也缺乏明顯清晰的界線，區(qū)分不強(qiáng)。而根據(jù)用戶的反饋（圖三）和（圖四）純色背景邊界清晰的展示，觀看更加輕松。

“看圖片不知道是什么，都是紅色的，顏色重復(fù)，眼花繚亂，抓不住重點(diǎn)。”

“喜歡這種背景特別清爽的，一眼就知道是什么。”

這里要提的是，賣場(chǎng)的設(shè)計(jì)邏輯屬于營(yíng)銷學(xué)范疇，對(duì)于設(shè)計(jì)方面的思考是復(fù)雜和專業(yè)的，本篇文章只從用戶瀏覽視角淺其析賣場(chǎng)動(dòng)線需求，希望能對(duì)大家有所啟發(fā)。

歡迎關(guān)注「JellyDesign」的小程序：