闪购商品卡片一致性专项

用多维研究建立跨场景商品信息优先级，并持续校准商品卡体验。

角色: 项目主 R
落地职责: 负责店内商卡设计
时间: 2026 年

背景与目标

近两年业务高速发展，商品卡新增信息持续增加，视觉层级杂乱，提高用户理解商品和完成选购决策的成本。

不同页面与模块维护多套商品卡模板，信息结构、视觉样式和交互规则差异较大，造成设计与研发重复建设。

四阶段研究路径

先建立现状基线，再理解用户需求，继而形成策略，并以多类证据校准方向。

Step 1
看现状
对比5个重点场景、5个重点品类和9家竞品，盘点本品问题。
Step 2
看需求
通过 Kano 调研确定用户在意的信息及优先级。
Step 3
定策略
结合竞品与 Kano 结论制定策略并产出 Demo。
Step 4
验方向
通过眼动实验、可用性访谈和 A/B 数据覆盖主观感受与客观行为。

现状盘点

对比重点场景、品类与竞品，将体验问题归纳为四个可继续研究的薄弱点。

问题 01
屏效低
搜索和店内首屏展示的商品卡数量少于竞品较优方案。
问题 02
信息密度高
除标题与价格外，本品的信息行数、坑位数量和高亮信息数量偏多。
问题 03
视觉统一性低
颜色和高亮信息数量偏多，视觉重点不清晰。
问题 04
跨场景一致性差
不同场景的信息展示规则、坑位位置与样式不一致。

Kano 研究

不凭经验删减信息，而是从商家与商品两个决策维度判断用户期待。

针对搜索、店内两个场景和3个重点品类进行 Kano 调研，从商家与商品两个决策维度按场景划分信息优先级。

商家维度 · 1

商家认证属于期望属性。

可以适当提升优先级。

商家维度 · 2

配送时间的重要性略高于距离。

在配送信息中优先强调配送时间。

商品维度 · 3

已售和推荐理由整体呈无差异属性。

可适当降低优先级，但需要结合品类继续判断。

商品维度 · 4

售后承诺、增强属性和钻石标签处于期望至魅力属性区间。

保留当前优先级。

商品维度 · 5

分期整体呈无差异属性。

可适当降低优先级。

设计策略

将研究结论转译为统一框架、压缩信息密度和收敛视觉噪声三类跨场景策略。

定规则

建立跨场景统一的信息框架与坑位边界，为搜索结果页和店内货架提供一致的维护基线。

提屏效

重组商品图、商品信息与商家信息的空间关系，在保留关键决策信息的同时提升单位空间的信息效率。

行动 1

优化信息框架：调整搜索商卡的商品图、商品信息与商家信息布局；优化图片尺寸、减少留白；将搜索和店内的商品决策信息由最多4行压缩到最多2行。

行动 2

缩小间距：将卡片间距体系由 10/20 收敛为 8/16，补齐搜索与店内的一致性问题。

精样式

收敛彩色信息与装饰性样式，建立更清晰、可持续维护的视觉层级。

行动 1

推荐理由坑位下颜色收敛统一，且单行内只能出现1个彩色信息。

行动 2

减少不必要的背景色、描边色，降低多余颜色展示面积。

降噪结果总览

搜索优化前颜色数量 11→优化后 8；店内优化前带颜色的色块数量 4→优化后 3。

Demo眼动验证

在最终方案落地前，用眼动实验与可用性访谈验证 Demo 的扫描路径和商品图注意力变化。

眼动实验共招募 35 名参与者，整体覆盖啤酒、水果果切、手机 3 个品类。每位受访用户完成频道、搜索、店内 3 个场景任务，覆盖其中 2 个品类，并分别体验新旧两版；新旧版本的测试顺序随机，以降低顺序效应对结果的干扰。为控制跨品类、跨场景实验中的任务变量与测试口径，我借助 AI Coding 搭建可交互实验素材与标准化任务流程，并在 V1.0—V3.0 的迭代中持续缩短实验周期、提升执行一致性。