改版背景 01 · 结构失序
高频临时迭代导致模块冗长堆叠
商详作为全站流量最高、转化最关键的核心节点，历经多轮临时需求叠加后信息冗杂，首屏与长页重点失焦。
OnePlus Store 商详改版 PDP 3.0 → 3.1
把全球 OnePlus Store 商详从「信息堆叠 + 强制加购打断」收成「按商品类型分 IA、按用户分层排优先级」的可扫读决策页，并统一 CMS/AEM 两套搭建。
PDP 3.0 → 3.1 Core Shift · 从信息堆叠与强制打断到分层可扫读决策页
左栏三痛点保留 HTML 叙述；右栏/下方采用纯净单屏 UI 前后对照
改版背景 02 · 体验垫底
2023 页面净满意度仅 18（全站 NPS 59）
在 2023 年用户体验监测项目中，商详页净满意度得分（18 分）远低于商城整体 NPS（59 分），在全站触点中排倒数第一。
改版背景 03 · 双平台割裂
CMS 与旧版 AEM 并存，跨品类体验不一致
主力手机使用新 CMS 搭建，而 Bundle、配件、IoT 商品仍沿用旧版 AEM，页面结构与组件割裂，跨区域维护成本高。
问题
商详是官网流量与转化的核心节点，但多年迭代后页面积肥、结构乱；2023 体验项目里 PDP 净满意度仅 18，远低于全站 NPS 59，触点里垫底（图 1）。
手机走 CMS、Bundle/配件/IoT 走旧 AEM，布局与组件不统一，运维成本高、体验割裂（图 1）。
移动端点「加购 / 立即购买」会强制弹出 Add-ons，主商品尚未入车；用户若此时离开即未成交。以印度站为例，这一步约 22% 流失（图 8 · GA）。优惠与价格表达也不清，用户反馈里反复出现「价格/优惠看不懂、退换货与缺货焦虑」（图 9）。
痛点 01 · 页面结构
信息结构混乱，低点击模块抢占首屏
首屏同时堆砌促销横幅、3D/Specs/Compare 按钮、邀请码、以旧换新与多类权益复选框；GA 数据显示 Specs（12%）与 Compare（7%）接近 100% 曝光但交互率极低，反而挤压核心选购决策。
痛点 02 · 体验评分
净满意度 18 分 vs 全站 NPS 59 分
2023 年体验调研中，商详页净满意度（NSS）仅 18 分，在全站各触点中排名倒数第一；付费流量占比超 60%，但新用户进入商详后加购率仅为自然流量的约 1/8。
痛点 03 · 平台架构
CMS 与旧 AEM 双轨并行，品类体验割裂
手机（占 73% PV）使用新 CMS 搭建，而 Bundle、耳机（12% PV）、配件（5% PV）与平板（5% PV）仍沿用旧 AEM，跨品类模块无法复用，多语言维护负担重。
关键流失锚点 · 对应图 8（Google Analytics · IN / NA / EU）
主商品未入车即强制唤起 Add-ons，造成无感知丢单
~22%
印度站该步用户放弃比例（78% 完成实际加购）
口径：移动端点击 Buy now / Add to cart 唤起 Add-ons 弹窗至实际入车漏斗
-
触发时机错位：用户在手机商详点击底部
Buy now或Add to cart时，系统并未将主商品直接加入购物车，而是先强制拦截弹出全屏 Add-ons 配件搭售窗。 -
认知落差致流失：用户误以为点击按钮后主商品已入车，或对突如其来的全屏配件列表产生抗拒；必须再次点击底部
Continue或Skip Add-ons才算真正加购成功，中途关闭或离开即直接丢单。 - 决策信息匮乏：旧搭售弹窗仅罗列单 SKU 缩略图与价格，缺少颜色/规格切换与核心卖点，既打断主路径，又难以促成配件随购。
用户反馈原声归类 · 对应图 9（Hotjar 1,154 份问卷与开放评论亲和）
问卷阻塞点投票分布（Top 痛点）
- 产品缺货焦虑（Out of stock · 23%）：热门颜色/配置缺货时缺乏清晰到货预期与替代引导。
- 优惠与折扣信息不清晰（Offer & discount · 12%）：多类券、银行立减与会员权益散乱，不知如何叠加。
- 退换货政策不清晰（Replacement & refund · 10%）：缺乏显式售后保障说明，影响高客单价下单信心。
- 产品亮点查找困难（9%）& 价格信息不清（8%）：到手价与以旧换新抵扣算不明白，赠品规则易漏看。
亲和归类六大体验问题标签
1. 产品缺货问题
2. 优惠与折扣信息不清晰
3. 退换货政策不清晰
4. 产品信息查找困难
5. 价格信息不清晰
6. 赠品未获得
对设计方案的直接指向：不能只做视觉改版，必须把「优惠分类语义化」「加购后可视化算价明细」与「手风琴快速查阅产品/售后信息」作为核心交互抓手。
约束
- 多区域、多品类：IN / NA / EU；手机高配 vs Bundle vs 配件，信息密度差很大，不能一套长页硬套。
- 双平台遗留：CMS + AEM 并存，方案必须能收敛到可落地的统一结构，而不是只做视觉皮。
- 响应式 + 多语言：粘性标签等方案在移动端与多语言下兼容成本高（布局研究结论，图 20–21）。
- 业务不断档：优惠、银行分期、以旧换新、赠品、Bundle 标题动态取值都要能讲清规则，不能为了「干净」砍掉决策信息。
过程
四阶段：前期探索 → 机会点探索 → 设计方案 → 开发与上线验证（图 2）。
探索
内部访谈（层级、Bundle、以旧换新文案、对比模块等，图 3）+ 外部市场/竞品材料（图 4）+ GA 来源与漏斗、模块曝光与热力、区域差异（图 5–7）+ Hotjar/问卷痛点亲和（图 9）。收成四条洞察：新用户吸引力、交互一致性、关键节点转化、体验问题（图 10）。
发散与收敛
HMW 冲刺便签（图 11）→ 亲和图 + 点投票，压到结构 / 业务 / 优惠 / 产品 / 交互 / 视觉六类优先级（图 12）。旅程上区分新手 / 中间 / 专家路径（图 13）。
布局与竞品
拆 Apple / Google / Samsung 购机流与 IA（图 14–16）；对照 Baymard 四模式——水平标签、手风琴、One Long Page、粘性标签（图 17，深挖图 18–21）。结论倾向：信息复杂的消费电子不宜纯长页；进阶信息优先考虑手风琴以兼顾响应式与多语言。
四阶段设计流程总览 · 对应图 2（HTML 结构化拆解）
-
STAGE 01 · 前期探索
多维数据与访谈诊断
改版背景对齐 → 跨职能内部访谈（图 3）→ Statista 市场报告（图 4）→ GA 渠道/热力/漏斗分析（图 5–8）→ Hotjar 用户原声（图 9）→ 提炼四大探索洞察（图 10）。
-
STAGE 02 · 机会点探索
HMW 亲和投票与竞品深挖
HMW 团队发散（图 11）→ 亲和图归类与组内点投排序（图 12）→ 新手/中间/专家旅程地图（图 13）→ Apple/Google/Samsung 购机流与 Baymard 布局模式评估（图 14–21）。
-
STAGE 03 · 设计方案
分品类 IA 与核心模块重构
构建五维设计画布（图 22）→ 拆解三类商品 IA（图 23）→ P1–P4 信息流重排（图 24）→ 橱窗亮点与手风琴进阶信息（图 25–27）→ 优惠语义化、SPU Add-ons 与可视化算价（图 28–33）。
-
STAGE 04 · 开发与上线验证
双平台收束与多区域监测
跨部门方案评审 → 输出响应式与多语言组件规范 → 推进 CMS/AEM 统一落地与开发走查 → 持续追踪 IN / NA / EU 三区域净满意度（NSS）与转化漏斗表现（图 34–35）。
亲和图归类 + 点投票 → 六大模块优先级 · 对应图 12
1. 页面结构
最高票核心告别单套模板硬套：按手机/平板、Bundle、配件拆分差异化 IA；按用户认知路径建立 P1–P4 信息流，将低点击 Specs / Compare 后移折叠。
2. 业务模块
最高票核心消除「主商品未入车即强制弹 Add-ons」阻断；将单 SKU 搭售列表升级为 SPU 选配弹窗；强化以旧换新（Trade-in）、分期与推荐组合触达。
3. 优惠表达
高优攻坚按获取方式将优惠收束为四类卡片；设计语义化优惠明细抽屉（Store offers / RCC / Benefits / EMI），并在模块标题动态带出抵扣金额。
4. 产品信息
重点优化首屏橱窗图整合 SPU 核心权益卡、3D/360° 预览与可交互亮点弹窗（Explore）；图文详情改用手风琴面板，根治多语言文案重叠。
5. 全局交互
重点优化在加购成功抽屉（Item Added to Cart）新增可展开的预估算价明细（Total Savings）与以旧换新补触达，消除结算前价格不确定焦虑。
6. 视觉表达
基础统一对齐 CMS 与 AEM 双平台响应式栅格与组件字阶；为印度 Diwali、欧美 Black Friday 等大促预留可更换氛围背景的限时优惠卡槽。
用户旅程分层（由附录图 13 抬升）· 驱动 P1–P4 信息流权重排序
新手用户 Novice（付费广告占比较高）
- 核心诉求：对品牌有初步认知但对产品了解不完整，需在短时间内快速建立兴趣与信任。
- 关注重点：外观颜值、核心卖点总结、直观到手价、主推优惠与售后保障。
- 设计承接：首屏 P1 橱窗 + SPU 概览卡 + P2 可交互亮点弹窗（Explore），避免首屏被枯燥参数劝退。
中间用户 Intermediate（跨型号比选）
- 核心诉求：已有明确换机意向，正在比对不同存储配置、以旧换新补贴、银行分期与套装划算度。
- 关注重点：选型差价、Trade-in 估值、可叠加优惠券、保险与配件搭售。
- 设计承接：P2 语义化优惠模块 + 动态金额标题 + SPU Add-ons 弹窗 + 加购后可视化算价明细。
专家用户 Expert（极客与老用户）
- 核心诉求：对产品线十分熟悉，直接核验具体硬件参数（屏幕/芯片/频段）、包装清单与真实评测。
- 关注重点：完整 Specs 参数表、机型对比、盒内配件（What’s in the box）、用户与媒体评价。
- 设计承接：将低点击率但高必要性的进阶信息置于 P4 手风琴折叠面板，按需展开快速查阅。
主流 3C 购机流拆解（由附录图 14–16 抬升）· 吸收分步引导与反面阻断教训
Apple · 线性引导 + 80% 大弹窗注解
选型、换新、运营商与保险每步均配约占视口 80% 的详情弹窗与视频解说，降低跳出率；商详页不堆砌冗长 Specs，改用清晰的 Compare 模块辅助决策（图 14）。
Google · 前置产品站 + 极简转化商详
由前置产品站（Overview）承载卖点叙事，商详页（Buy）仅保留选型与下单模块，转化路径极短；但老用户往返核对卖点时需频繁跨页跳转（图 15）。
Samsung · 阻断式二次确认反面案例
曾尝试在点击 Continue 后弹窗二次确认未选换新/保险及未加购配件（仅上线一周即下线），印证阻断主购买流极伤转化；但其底部手风琴目录结构清晰值得借鉴（图 16）。
Baymard 四种布局模式等大线框对照 · 对应图 17–21（决策前铺垫）
水平标签 Horizontal Tabs
局限：移动端与欧洲/印度多语言长词下水平宽度受限，用户极易忽略非激活标签内的关键信息。
单长页 One Long Page
局限：消费电子信息密度高，纯长页无限向下堆叠导致滚动过深，专家用户难以快速定位 Specs 与 FAQ。
粘性标签 Sticky Tabs
局限：PC 端常见，但多语言长词在移动端必须横向滑动标签栏，占用宝贵视口高度且跨平台兼容成本高。
手风琴 Accordion
优势：默认折叠便于一屏概览全局目录，按需展开查阅；桌面与移动端响应式一致，完美兼容多语言长标题。
决策
1. 按商品类型分 IA，而不是一页通吃
Phone·Tablet / Bundle / 配件三套模块树：手机保留 3D/360、亮点、完整服务与进阶信息；配件加重兼容性；公共尾部（FAQ、品牌优势、底栏）复用（图 23）。
三类商品差异化 IA 模块树（由图 23 提炼 · 统一 CMS/AEM 跨品类搭建）
实线蓝标为品类差异化模块；虚线框为跨品类复用模块
手机 · 平板 Phone / Tablet
占全站 73%+ PV · 高客单高决策复杂度主模板
- 商品核心与亮点：SPU 橱窗图 + 360°/3D 预览 + 可交互亮点弹窗（Explore）
- 分层优惠体系：四类优惠卡 + 语义化明细抽屉（Store / RCC / Benefits / EMI）
- SKU 选型：Color + Capacity + 运营商版本
- 高阶服务与搭售：Trade-in 以旧换新 + 赠品（Free Gift）+ 保修计划 + SPU Bundle Add-ons
- 手风琴进阶与公共尾部：Details / Specs / In the box / Reviews + 机型对比 + FAQ + 品牌优势
组合套装 Bundle
主商品 + 配件组合购买 · 聚焦套装子商品选型与总省金额
- 商品核心信息：套装主图轮播 + 套装名称 + 组合立省总价
- 优惠信息：Coupon 领券 + 学生/企业折扣 + 银行分期（EMI）
- 套装子商品选型（核心差异）：逐一选择套装内主商品与附属配件的 Color / Capacity 规格
- 基础服务模块：Trade-in 以旧换新 + 保修计划 + 配送说明
- 手风琴进阶与公共尾部：Details / Specs / In the box / Reviews + FAQ + 品牌优势（复用）
配件商品 耳机 / 壳膜 / 充电器
低决策门槛 · 弱化复杂金融服务，强化机型兼容性
- 商品核心信息：商品图轮播 + 名称与价格（砍除冗余 3D 与复杂换新）
- 精简优惠信息：直减折扣 / 优惠券 + RCC 会员积分权益
- 规格选型：颜色 / 款式切换 + 物流配送时效
- 兼容性模块（Compatibility · 核心差异）：显式标注适配的 OnePlus 手机/平板型号，防买错退货
- 手风琴进阶与公共尾部：Details / Specs / In the box / Reviews + 相似推荐 + FAQ（复用）
2. 优惠可扫读 + Add-ons 减打断 + 算价可见
- Add-ons：从单 SKU 缩略列表改为 SPU 维度弹窗（多图 + 卖点 + 规格选择），少跳转、多决策信息（图 31）。
- 加购后增加可视化算价（预估小计/优惠；非最终结算）并补以旧换新触达，对冲「Buy now → 强制 Add-ons」造成的价格不确定与流失（图 33，对照图 8）。
- 优惠：卡片分类 + 语义化规则映射（弹窗分 Tab、分期明细），分布式标题动态带金额/件数/折扣（图 28–30）。
核心交互重构 · 对应图 31（与问题区图 8 形成前后对照）
Add-ons 从「未入车强制拦截列表」改为「页内非阻断 SPU 选配弹窗」
-
主路径不阻断：搭售模块内嵌于商详选购流（
Bundle add-ons. Up to 70% OFF），用户按需点击Add唤起选配，不再在点击主购买按钮时强制劫持未入车订单。 - SKU 列表升级为 SPU 弹窗：旧版将同一耳机的不同颜色拆成多行重复卡片；新版聚合为 SPU 弹窗，同屏支持多角度图片轮播、Color / Capacity 规格切换与 4 项核心卖点图标（KSP），无需跳转新商详即可完成决策。
- 动态标题传价值：模块标题由后台动态计算并展示当前主商品可享的最高配件折扣百分比（图 30）。
3. 按用户分层排信息流：Specs / Compare 降权
首屏 Specs、Compare 点击与其占位不匹配 → 降到 P4，用可折叠承载。P1 名称/价格/外观；P2 亮点与优惠、选型与服务；P3 图文详情；P4 参数/对比/盒内（图 24）。目标：新手先建立兴趣，专家再核参数。
P1–P4 页面信息流重排 · 对应图 24（按新手 → 中间 → 专家认知路径赋权）
P1 · 核心信息
商品名称 + 价格（含换新前基准价）+ SPU 外观橱窗图：首屏第一眼建立基础认知，移除旧版首屏低点击的 Specs / Compare 占位按钮。
P2 · 决策抓手
商品亮点（3D 预览 / 可交互亮点弹窗）+ 四类优惠信息 + SKU 选型与服务模组（Trade-in / 赠品 / 保险 / Bundle Add-ons）：服务新用户兴趣建立与中间用户比价选配。
P3 · 图文详情
Details 商品图文信息（手风琴首项展开）：将旧版易发生多语言文案重叠的固定卡片改为结构化图文手风琴（图 26）。
P4 · 进阶查阅
Specs 规格参数 + What’s in the box 盒内配件 + Product Reviews 用户评价 + Compare 机型对比：降权至页面中下部手风琴折叠承载，供专家用户按需展开核验。
4. 进阶信息选手风琴，不选粘性标签
竞品阶段两者都可用；最终因响应式与多语言兼容，用手风琴承载 Details / Specs / What’s in the box / Reviews，服务「快速查阅」而非强导航（图 27）。
结果
可讲的设计收获（不依赖未核验数字）：用「商品类型 IA + 用户分层优先级」同时解决结构混乱与双平台不一致；用「SPU Add-ons + 算价可见」对准强制弹窗流失，而不是只做视觉减负。
图上口径 · 待核验：以下图 34、图 35 及摘要数字均为案例汇报归档图上口径（图上口径 · 待核验），对外定稿前待核验；未核验前不重绘可读刻度趋势曲线、不拆分为无标注 KPI 卡片墙，具体统计窗口与细节于面谈确认。
- 净满意度（图 34 · 图上口径 · 待核验）：PDP 3.1 vs 3.0（2024-01-01–2024-09-01，图上口径 · 待核验）——IN ↗ 约 29.5%（图上口径 · 待核验）；NA ↗ 约 2.8%（图上口径 · 待核验）；EU ↗ 约 10.3%（图上口径 · 待核验）。
- 转化与路径（图 35 · 图上口径 · 待核验）：切换后整体加购约 +2.1%（注：11 系曾有绿线问题发券干扰，图上口径 · 待核验）；12 系购机路径耗时约 −9%，自然流量约 −14%（图上口径 · 待核验）；跳出约 −2.8%、互动约 +2.2%（图上口径 · 待核验）；旗舰 Open 样本：加购约 +0.7pp、路径约 −16s、配件占比约 +2.3pp（图上口径 · 待核验）。
加购与搭售路径（Before → After）：从「点 Buy now 主商品未入车即强制弹单 SKU 搭售窗（印度站该步约 22% 放弃 · 图 8 GA 口径 · 图上口径 · 待核验）」收束为「主商品先行入车 + 页内非阻断 SPU Add-ons 选配弹窗（聚合多图/规格/卖点）」。
优惠与算价表达（Before → After）：从「促销信息散落首屏、用户投诉看不懂到手价」收束为「四类优惠卡 + 语义化四 Tab 抽屉 + 加购成功抽屉可展开 Total Savings 算价明细与 Trade-in 补触达」。
页面架构与跨平台（Before → After）：从「CMS 与旧 AEM 双轨割裂、Specs/Compare 占首屏」收束为「手机/Bundle/配件三套差异化 IA + P1–P4 用户分层信息流 + 响应式手风琴进阶面板」。
附录 · 查看全部调研、竞品与方案原始归档图（图 1–图 33 · 按原编号；图 34–35 见结果段） 点击展开 / 收起
注：本案核心结论、四阶段流程（图 2）、亲和图优先级（图 12）、Baymard 布局模式（图 17）、三类商品 IA 树（图 23）、P1–P4 信息流（图 24）、关键单屏 UI 及结果验证原图（图 34–35 · 图上口径 · 待核验）均已提炼或抬升至正文；以下保留项目原始汇报归档图（图 1–图 33）供溯源参考。
背景、流程、调研与数据洞察（图 1–13）
竞品与布局深挖（图 14–22）
方案细节归档（图 23–33）
