逛
商家首页
- 核心任务
- 帮助用户发现内容，同时支持商家表达品牌与日常经营
- 体验问题
- 已有首页表达形式单一、内容维度较少，难以适配不同品类、经营场景与运营投入
- 设计策略
- 建设灵活、可组合的店铺装修能力
闪购商家页体验优化
从商家页“逛买”体验，到整站商卡治理
- 角色
- 交互设计师
- 项目范围
- 以商家页为起点，延伸至整站商卡治理
- 核心职责
- 商家与用户研究、体验策略、方案设计、验证落地
01
背景与挑战
闪购商家页已经包含首页与全部商品货架。随着商家和经营品类不断丰富，用户既需要通过首页了解商家、发现内容，也需要在全部商品中快速比较和选择；与此同时，商家的线上经营意愿持续提升，希望通过首页表达品牌、活动与商品内容。
原有体验难以同时承接“逛”与“买”：首页表达形式单一、内容维度较少，难以覆盖不同品类和经营场景；全部商品货架则面临信息持续叠加、商品卡重点不清的问题。进一步盘点发现，同类信息在搜索、频道和店内的展示位置、样式与规则也不一致，货架问题由此延伸为整站商卡治理问题。
02
整体策略
核心命题
如何让首页更值得逛，让全部商品更容易买？
买
全部商品货架
- 核心任务
- 帮助用户快速比较商品，同时提升商品曝光效率与交易转化
- 体验问题
- 货架信息持续叠加、商品重点不清，同类信息在整站的展示规则也不一致
- 设计策略
- 以货架为首个落地场景，建立可复用的整站商卡信息规则
两类任务采用相反但互补的治理方式：首页通过组件化能力扩大商家表达空间，货架通过统一信息规则收敛无序叠加。
03
首页：建设内容经营能力
扩展首页内容维度，让商家能够持续经营。
已有首页能够承载基础信息，但表达形式单一、内容维度较少，难以支持商家持续经营，也不足以形成丰富的浏览内容。要让首页更值得逛，需要将商家的品牌、活动与商品内容转化为可持续配置的经营能力。
项目难点
商家经营差异大，能力定义又涉及多方视角。
Challenge 01
商家运营能力差异大，项目复杂，如何进行规划？
闪购缺少成熟的电商经营范式，而商家体量与品类差异巨大：数码3C强调爆品，美妆强调系列表达，商超强调大促氛围，无法用同一套方式满足。
由我发起商家走访，摸清能力差异，再据此规划能力范围和建设节奏。
Challenge 02
经营能力横跨B、C两端，需要多方共同定义
商家首页装修既包含商家侧的配置与运营，也影响用户侧的浏览与选购。业务、商家运营、B端产品和C端团队分别掌握经营诉求、平台规则与用户体验，单一视角无法独立完成能力定义。
围绕同一套商家经营能力组织协作，共同校准经营诉求、配置方式与C端体验。
共同建立目标：与B、C端产品及业务持续对齐，将商家经营诉求与用户浏览体验纳入同一套产品策略和设计目标
共同定义能力：结合商家走访与运营访谈，让商家的实际经营方式进入方案讨论，并由各方同步校准能力范围、配置规则与前台呈现
商家研究与分层
先理解不同商家如何经营，建立商家分层与建设顺序。
调研聚焦
1.发现现有页面的问题2.了解商家、业务与运营对自运营阵地的诉求3.通过业务与运营摸底不同商家的实际运营能力
了解商家诉求
走访4个品类、9家头部商家，并访谈业务与商家运营。
推商品
单品、场景、品牌、品类、新品
搞营销
活动、优惠、大促、会员
塑品牌
品宣、服务、品牌调性
查看访谈结论摘要
受访的关键非食KA商家普遍具备独立运营能力。目前线上版本存在模块组件少、不能自定义顺序等问题，同时店铺页的视觉呈现也不能多样化地满足商家诉求。
| 数码3C | 美妆 | 母婴 | 商超 | ||||
|---|---|---|---|---|---|---|---|
| 现有店铺不能满足的地方 | 1、模块组件较少；2、对外观有要求；3、商家对自定义模块／商品顺序有强烈诉求 | ||||||
| 场景概述 | 品 | 常规推品 | P0 | 部分品类、爆品推荐（非折扣）。 | 品类、场景（如季节）、品牌、系列、品效合一大图、图片视频素材、品牌墙。 | 品类、场景（如季节）、精细喂养、品牌。推品模块的背景图增加品牌元素透传。 | 大促、品类、场景等较多样性。希望对应的推品模块有完整的视觉氛围呈现。 |
| 新品发售 | P1 | 重（目前 banner 承载，因为没有别的）。单品、多品、多物料，一般有主推品。 | 有。单品、多品、多物料。 | 无 | 分重磅上新和日常批量上新。可考虑动态图／视频，物料较丰富。 | ||
| 营销 | 会员 | P0 | 无 | 重点。重拉新。 | 重点 | 重点 | |
| 推活动 | P0 | 重单品活动＆活动预告 | 突出大促氛围 | 活动丰富 | 活动氛围更有优势一点。 | ||
| 其他场景 | P1 | 线下门店服务类、售后类、分期免息、买赠 | 礼赠、商家服务（新品试用、包装礼盒－O2O 优势） | 品牌商新客 | 菜谱、预售、门店新人 | ||
| 模块诉求 | P1 | 多增加物料承载容器。banner 可以直接跳商品。 | 多增加物料（视频）承载容器。 | 楼层背景图想加些品牌元素、氛围表达。 | 楼层背景图想加自定义氛围、大图海报想要动态图视频、落地页想要场景化方案。 | ||
| 大促换肤 | P0 | 可以考虑，突出调性为主。 | 大促以氛围为主，品牌店以调性为主。 | 认为有必要，但是不太强。大背景想改。 | 强诉求：主体化的场景统一视觉，比如圣诞一套。 | ||
分层结果
综合头部商家走访与业务、运营对全量商家的认知，根据运营能力、素材生产能力与自主经营意愿建立分层，为项目优先级和能力开放范围提供依据。
头部商家
运营与内容生产能力强，自运营意愿强
作为重点验证对象，优先验证品牌表达与自主配置诉求
腰部商家
具备一定运营能力，自运营意愿较强
兼顾基础配置能力与日常内容运营效率
尾部商家
运营及内容生产能力有限，自运营意愿相对较弱
优先降低配置门槛与素材生产压力
核心产出
从经营场景与运营介入程度定义能力范围，再沉淀为可组合的装修组件。
能力范围定义
商家分层适合用于项目规划，但不能直接代替方案分层。即使是头部商家，也会存在运营资源投入较低的场景；因此在具体方案中，需要根据经营场景与实际运营介入程度共同定义能力范围。
| 高运营介入（重大节日／节点／强调性商家） | 中运营介入（主题运营／较强调性商家） | 低运营介入（日常更迭） | |||
|---|---|---|---|---|---|
| 概述 | 组件以商家做图为主，有最强的整体性 | 组件部分元素为平台默认，部分坑位支持商家传图以营造较强氛围，便于单／多场景塑造 | 平台默认，无需素材支持，提升商家配置灵活性 | ||
| 场景概述 | 品 | 常规推品－单品 | 01 自定义热区图片组件 new 02 大图海报组件（已有）－可轮播 优化 单品－图片／视频拼图后续考虑 营销：08 图片领券相关下期；09 大图组件局部弹窗下期 10 店铺宣传／直播组件 后续支持 | 03 单品图／视频组件 new banner／大图（已有） 无修改 | banner（已有） 无修改 |
| 常规推品－多品 | 04 少 SPU－商品楼层－平铺（已有） 优化－背景图可选 05 多 SPU－商品楼层－横滑 new－背景图可选－组件内 tab 可选 | ||||
| 特殊场景（新品发售／礼赠／分发） | |||||
| 营销 | 会员 | 06 会员组件 new－根据是否有会员活动／商家选择是否展示 | |||
| 推活动 | 券－商品楼层（已有） 无修改；活动－商品楼层（已有） 无修改 | ||||
| 其他场景（品宣／服务） | － | ||||
| 大促 | 大促商品楼层（商品楼层－横滑）下期；原有坑位（头部背景、商家 tab）无修改 | ||||
组件定义原则
场景优先
围绕推商品、搞营销、塑品牌等真实经营场景定义能力。
灵活组合
将共性诉求沉淀为标准组件，支持不同品类、活动和运营投入自由组合。
持续运营
兼顾默认能力与商家自定义，降低素材和配置成本，让首页内容能够长期更新。
组件沉淀
01
自定义热区图片组件
new
以图片热区覆盖多类经营场景
- 适用场景
- 高运营介入｜以商家做图为主，作为推品、活动、券和瓷片式入口等多类经营内容的通用载体。
- 核心设计
- 将能力抽象为自定义图片与可配置热区，同一组件既可以被商家绘制成商品集合，也可以承载活动、优惠券或导航瓷片，并为不同区域配置对应跳转。
02
大图海报组件
优化
大图海报的轮播承载
- 适用场景
- 高运营介入｜延续商家整图表达，用于承载多组品牌内容、活动素材与高氛围经营场景。
- 核心设计
- 在已有大图海报能力上增加轮播，让多组图片素材在同一内容位置内依次呈现。
03
单品图／视频组件
new
单品的图片与视频表达
- 适用场景
- 中运营介入｜针对新品发布、爆品推荐等单品场景，由平台提供基础结构，商家补充图片或视频素材。
- 核心设计
- 以单品为内容单位，支持图片与视频表达，让商家在统一结构中突出重点商品。
04
少 SPU－商品楼层－平铺
优化
少SPU商品完整曝光
- 适用场景
- 中／低运营介入｜面向少量商品的常规推品场景，以平台基础能力保证商品直接曝光。
- 核心设计
- 采用平铺方式完整展示少量商品，并支持根据经营场景配置楼层背景图。
05
多 SPU－商品楼层－横滑
new
多SPU商品横滑浏览
- 适用场景
- 中／低运营介入｜面向多商品与多分组的常规推品场景，在平台基础结构上提供有限的氛围与组织能力。
- 核心设计
- 采用横滑展示多商品，并按场景支持背景图与组件内Tab，扩展同一楼层的内容容量。
06
会员组件
new
会员能力按需出现
- 适用场景
- 中／低运营介入｜面向会员营销场景，由平台提供基础组件，仅在商家具备会员活动时承载对应内容。
- 核心设计
- 根据是否存在会员活动及商家选择决定组件是否展示，让会员内容只在真实经营场景中出现。
01 / 06
Showcase
通过改造前后对比与多品类实践，展示组件能力的应用效果。
Before纵向滚动查看
After纵向滚动查看
Category 01 · 鲜花纵向滚动查看
Category 02 · 数码纵向滚动查看
Category 03 · 服饰纵向滚动查看
Category 04 · 母婴纵向滚动查看
Category 05 · 美妆纵向滚动查看
Category 06 · 百货纵向滚动查看
01 / 08
项目结果
以业务效果与配置规模验证装修能力。
业务效果
4.5%
首轮配置门店上线后访购率提升最高
应用规模
10700+
上线约1个月完成店铺配置的门店
04
全部商品：从货架优化到整站商卡治理
从店内货架的问题出发，将研究扩展至整站，并以货架作为首个落地场景。
项目最初聚焦商家页的全部商品货架。在盘点货架商品卡时，我发现问题并非只存在于单页：同一类信息在搜索、频道和店内的展示位置、样式与规则不一致。若只优化店内货架，仍会继续维护多套商品卡；因此研究范围进一步扩展至整站，并以店内货架作为首个落地场景，建立可复用的商卡信息框架。
Step 1
看现状
对比5个重点场景、5个重点品类和9家竞品，盘点本品问题。
Step 2
看需求
通过 Kano 调研确定用户在意的信息及优先级。
Step 3
定策略
结合竞品与 Kano 结论制定策略并产出 Demo。
Step 4
验方向
通过眼动实验、可用性访谈和 A/B 数据覆盖主观感受与客观行为。
看现状
盘点重点场景、品类与竞品，识别信息增长对浏览与选购效率的影响。
- 问题 01
屏效低
搜索和店内首屏展示的商品卡数量少于竞品较优方案。
- 问题 02
信息密度高
除标题与价格外，本品的信息行数、坑位数量和高亮信息数量偏多。
- 问题 03
视觉统一性低
颜色和高亮信息数量偏多，视觉重点不清晰。
- 问题 04
跨场景一致性差
不同场景的信息展示规则、坑位位置与样式不一致。
看需求
盘点全量商卡信息，校准不同场景与品类下的用户优先级，为信息归类和缩减提供依据。
先汇总搜索与店内商品卡的全量信息，再针对3个重点品类进行 Kano 调研，从商家与商品两个决策维度比较用户优先级。通过校准不同场景与品类之间的共性和差异，判断哪些信息应共用、保留、降级或按场景展示。
商家维度：商家认证属于期望属性。 可以适当提升优先级。
商家维度：配送时间的重要性略高于距离。 在配送信息中优先强调配送时间。
商品维度：已售和推荐理由整体呈无差异属性。 可适当降低优先级，但需要结合品类继续判断。
商品维度：售后承诺、增强属性和钻石标签处于期望至魅力属性区间。 保留当前优先级。
商品维度：分期整体呈无差异属性。 可适当降低优先级。
定策略
将研究结论转译为定规则、提屏效、理层级三类策略。
定规则
建立跨场景统一的信息框架与坑位边界，为搜索结果页和店内货架提供一致的维护基线。
提屏效
重组商品图、商品信息与商家信息的空间关系，优化图片尺寸、减少留白，并将搜索与店内的商品决策信息由最多4行压缩至2行，在保留关键决策信息的同时提升单位空间的信息效率。
理层级
将信息进行归类，在明确优先级与层级关系的基础上精简并优化样式，减少无效强调与视觉噪声。
验方向
在落地前通过 Demo 眼动实验与可用性访谈校准浏览路径。
眼动实验共招募 35 名参与者，整体覆盖啤酒、水果果切、手机 3 个品类。每位受访用户完成频道、搜索、店内 3 个场景任务，覆盖其中 2 个品类，并分别体验新旧两版；新旧版本的测试顺序随机，以降低顺序效应对结果的干扰。为控制跨品类、跨场景实验中的任务变量与测试口径，我借助 AI Coding 搭建可交互实验素材与标准化任务流程，并在 V1.0—V3.0 的迭代中持续缩短实验周期、提升执行一致性。
浏览动线与顺序变化
浏览动线：旧版视线轨迹呈散点分布，频繁在图片、标题与价格间横向跳跃；新版收束为 F 型垂直扫描，视觉重心向头部商品、图片角标与价格区域聚拢。
浏览顺序：旧版为标题→辅助描述→价格→商品图；新版为商品图→标题→辅助描述→价格，形成先聚焦图片、再检索文字的路径。
旧版热力图
新版热力图
最终方案落地
以店内货架为主线，并将规则扩展至搜索场景。
店内旧版
店内新版
搜索旧版
搜索新版
项目结果
核心业务指标保持轻微波动，屏效与视觉感受得到提升。
核心业务指标
轻微波动
新旧方案验证中，搜索与店内业务结果均处于轻微波动范围。
人均浏览个数（屏效）
+7.80%
新旧方案验证中，单位浏览空间内可看到的商品数量提升。
用户美观度评分
+14.38%
新旧方案对比中，用户对商品卡整体视觉观感的评分提升。
05
体系沉淀
项目最终沉淀两套可持续维护的体系：面向首页装修的组件维护分层依据，以及面向整站商卡的一致性防劣化规范。
组件维护分层体系
将首页组件方案沉淀为持续维护机制，支持后续需求判断与能力演进。
能力分层依据
延续前文的组件能力范围，区分商家全自定义、平台基础结构与商家素材组合、平台默认三类能力，作为后续维护的统一基线。
组件维护方式
根据经营场景的覆盖范围与现有能力匹配程度，判断组件应新建、优化或复用，避免每个业务诉求都形成独立组件。
商卡一致性防劣化规范
建立信息基线与准入规则，避免新增信息自由叠加和多套商品卡再次分化。
全量信息看板统一共用、店外与店内的信息范围；商卡规范进一步明确框架、坑位、优先级与场景边界，为新增信息和后续迭代提供共同的设计与评审依据。
