想做好电商页面设计？先了解用户卖场动线需求！

随着电商的快速发展，以卖货为主题的大型活动已不仅仅在 618，双 11 开展，对用户来说，平台级别的大促越来越频繁，逛卖场的机会越来越多，受到大量大促卖场信息的“轰炸”。那么卖场如何能快速引起用户兴趣，抓住用户的视线，让其找到想要的商品并点击购买呢，本文根据以往相关项目获取用户反馈，整理出以下用户对于卖场动线的主要需求。

更多干货：

一、核心需求

1. 易读

会场活动页包含的信息对用户来说是丰富而复杂的，用户浏览的场景本身是碎片化的，手拖动手机频幕，视线跳跃阅读，呈现 Z 字型浏览轨迹，视线的停留时间更短，那么提升进行卖场设计时就需要考虑用户易读性，降低用户理解成本，保证信息清晰的展示给用户，让其一眼就可以筛选出对自己最有价值的产品或者板块。易读体现在不同的方面，文字易理解、图片干净不杂乱、页面展示逻辑易理解，符合用户的认知惯性。

2. 精准

千万不要忘记卖场的初衷：卖货。无论页面多么易读，用户最关注的还是卖场中商品能否真正符合自己的需求，商品内容的节奏要把握好，推送要更精准，用户不停的往下滑页面，就是希望可以看到更多符合自己心意的东西，或者是提供更多与需求匹配的购物灵感，在动线上给到用户更多刺激，让用户有点击的欲望。

二、卖场动线模块需求

根据用户调研，针对会场头图、优惠券及商品楼层等动线需求做了一些整理，供大家参考：

1. 会场头图：总览全局，突出重点，尺寸紧凑

总览全局——对用户来说，需要通过头图快速了解会场页面的主题和活动力度，头图banner提供的内容决定了整个大促页面的第一印象，并预判会场的其他内容是否符合用户的需求，因此需要降低banner的识别成本，让用户在更短的时间内get到会场主题，从而激发顾客点击的欲望。

“一进来看到这个图就知道这个会场是干什么的，然后再决定是否继续浏览。”

突出重点——头图Banner无法承载复杂宏大的画面和大量的信息传递，要吸引用户的注意，并有效的让用户了解会场主题，需要突出Banner重点，明确内容核心点，否则没有记忆点，也不利于信息传达。根据眼动热力图来看，用户更倾向于通过文字信息来获取信息，重点表现本会场的主题、平台的优势和用户在该会场中可看到的商品和活动力度的文案普遍受到用户关注。设计文字内容清晰简单直白，让用户更好的阅读信息。

“会场的大标题让我了解主要是卖什么的，后面的产品会有哪些类别。”

“吸引眼球的文案，比如秒杀、high 购，引爆，视觉冲击力很大。”

尺寸紧凑——因为平台会场页的活动页涉及的品牌多，产品多，用户反馈看到的一些头图占用面积大而传递的有效信息较少。因此banner需要通过紧凑的布局来将首屏空间利用最大化，提高浏览效率，窄头图设计更加符合用户的需求。

2. 优惠券：优惠醒目，规则清晰，化繁为简

优惠醒目——前面说过，用户在浏览手机页面时，停留时间更短，更聚焦，每一模块不宜有太大的信息量，具体来说仍然是突出核心信息，对优惠券模块来说，优惠力度的突出放大能更好的吸引用户兴趣。

下图中右侧优惠券因利益点更加突出用户反馈视觉感受更好，能快速抓取优惠信息。

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

规则清晰——优惠券用在哪里，是否通用，用户期待在领取时有更加明确的规则的展示，使用规则展示清晰，可见。

“之前特意抢了图书满 300 减 150 的券，写着部分图书可用，但是不确定有哪些书可以用，最后发现只有工具书使用，是不是可以写清楚一些优惠券的适用范围。”

化繁为简——会场领取的优惠券在本会场可通用，种类简单，使用便捷。

“领券太复杂了，会场里领的优惠券，有店铺的，有秒杀的，有整点抢的，感觉比较乱。会场选到的东西和领的券不能匹配，通常都买不到想买的东西。”

3. 商品楼层：浏览连贯，排版透气，间隔清晰

浏览连贯——楼层或者商品的排布需符合用户的认知逻辑，当用户按照品类查找商品时，在其认知中相关联的品类应放置在一起，同类商品浏览更有连续性。

如下图所示，游戏电视，游戏本两个板块未放置在一起，用户需要跳跃的去寻找相关联的品类板块，部分用户可能会因为浏览不连贯，或不知道页面还有相关板块而提前离开会场，错过会场较靠后位置展示的兴趣商品。

“这个版面的展示就有点跳，这几个 3C 品类的应该是一类的，比如智能数码，游戏电视、游戏本，都是相关联的，但是中间间隔开了，我看完游戏电视看到智能家装就不会继续看了。”

排版透气——设计上卖场页面希望最大化的利用版面，但用户更偏好宽松型的排版方式，让信息不要一股脑涌到自己面前，缺少视觉重点。对比下图中一行四商品展示案例，一行三和一行一的展示方式，商品内容和颜色简洁，清晰，重点突出，便于浏览。

基于眼动实验和用户反馈，用户浏览商品时，一行四个的展示方式，信息多，用户对各商品信息的关注较为分散，通常一扫而过；而一行一的展示，商品图更大，商品标题展示更清晰，用户快速辨别商品后，把更多视觉关注点放在商品价格的判断与比较。

一行四

一行一

“这种一排放 4 个商品的就太小太挤了，一大堆信息，字也看得很费劲，不够清楚，就大概看一下，我喜欢一排只有两个的，或者只有一排一个的，文字、图片、价格看得清楚，一直下拉也不觉得累。”

间隔清晰——对用户来说商品展示的越多，信息量越大，其分在每一模块上的停留时间可能更短，在这种情况下，清晰的间隔能让用户更好的“扫描”商品。

间隔的清晰主要表现在商品与商品背景、模块与页面背景上。下（图一）中商品占据的位置太满导致与模块的名称及价格展示区缺少足够的间隔，给用户信息爆炸的感受。而（图二）的口红为白色，与白色背景之间也缺乏明显清晰的界线，区分不强。而根据用户的反馈（图三）和（图四）纯色背景边界清晰的展示，观看更加轻松。

“看图片不知道是什么，都是红色的，颜色重复，眼花缭乱，抓不住重点。”

“喜欢这种背景特别清爽的，一眼就知道是什么。”

这里要提的是，卖场的设计逻辑属于营销学范畴，对于设计方面的思考是复杂和专业的，本篇文章只从用户浏览视角浅其析卖场动线需求，希望能对大家有所启发。

欢迎关注「JellyDesign」的小程序：