![]()
对于电子商务平台而言，潜在的买家主要通过产品详情页获取产品信息、与卖家沟通、进行购买决策。一个设计良好的产品详情页可以创造更友好的使用体验，使商机建立更加顺畅。中国制造网产品详情页在功能、内容、结构、框架、表现等层面均有进一步优化的空间，我们的产品设计团队也在积极探索产品详情页的优化方向，以提升买家使用体验。
今天就和大家分享产品详情页设计改版的思路和解题过程，整体改版过程大致分为五个环节「明确目标、问题聚焦、设计方案、方案验证、上线效果跟进与迭代」，希望为读者提供一些页面改版思路，也欢迎大家留言讨论。
![]()
一直以来产品详情页在页面内容、信息布局、设计风格等方面存在体验问题，且弹出率较高，针对这些问题，我们希望通过对页面进行改版升级，优化整体的使用体验，降低弹出率。
但考虑到弹出率的影响因子有很多（比如用户特性、内容相关性和详细程度、页面加载速度、价格促销信息、界面设计、移动兼容性等），各因子的影响权重视情况不同也存在差异，我们团队结合对时间周期、问题重要性等信息的考量，本次决定重点对结构层、框架层、表现层等设计体验层面的问题进行优化。鉴于提升用户体验和降低弹出的目标仍较为宽泛，不能等同于设计目标，需要制定更具体、可衡量的设计目标来指导设计过程、评估设计成果，因此我们首先对整体目标进行了拆解。![]()
以上拆解出的设计目标仍需要进一步聚焦问题以导出设计策略，我们主要结合「体验走查、内部收集问题反馈、页面行为数据分析、竞品分析、用户研究」等方式有目的性的进行体验和思考，寻找可优化的方向。
a. 体验走查
本次体验走查的维度包括“内容与功能、交互体验、视觉传达、文案、技术性能”，通过走查发现问题、并对问题进行重要性评估。其中“内容及功能层面的问题”可依据项目目标灵活选取。
b. 问题 / 建议收集
通过「查看产品详情页用户研究报告、汇总线上买家的真实反馈数据、整理用户体验活动中大家提出的建议和问题」等方式进行问题收集，并对问题进一步评估。![]()
c. 页面行为数据分析
页面行为数据有助于理解用户在页面的行为、兴趣和偏好，基于数据分析结论做出设计假设可在后续进行验证，也便于前后对照。
我们对页面热力图、触达深度、模块&元素点击、退出率、跳出率、有效操作次数等页面行为数据进行分析，得出的整体结论比较匹配大家认知，如大部分买家进入产品详情页后对当前产品有查看更多详情的诉求，其次愿意查看更多相似或相关产品等。另外也从一些模块的数据点击情况分析出一些现象，比如部分较为隐藏的信息模块买家点击却很多，这些现象也侧面为我们提供了买家偏好及优化的方向。
我们通过调研国内外主流电商平台产品详情页的界面布局、功能、交互、内容、响应方式等，为买家着陆详情页寻找思路参考。
![]()
汇总以上前期挖掘与探索的结果后，提取了重点的共性问题，细化出以下设计策略。
并针对性输出第一版初稿方案，在团队内部进行发散讨论。初版方案主要优化点为放大展示产品图/视频，对信息分类聚合，重新进行模块化布局，突出信息层次，优化整体视觉方案。![]()
![]()
初稿方案输出后为了快速验证设计思路，产品设计团队和用研团队一起合作开展了访谈和用户调研，期望对设计方案进行验证的同时也能挖掘出更多有价值的真实用户反馈，便于后续优化。
a. 设计沟通
我们邀请了著名的设计协会针对优化方案进行了一轮沟通，他们对界面视觉方案表示了肯定，同时也给出了运营及用户层面的相关建议。![]()
b. 调研、访谈、可用性测试
由于我们的买家来自不同国家，因此本次采用线上问卷+访谈的方式，过程中增加了买家“手绘表达想法”以及“可用性测试”的环节。在基础调研后邀请访谈买家手动绘制出他们认为的理想的产品详情页的草图，没有任何要求限制，其次设定场景邀请买家使用我们新版的产品详情页进行页面浏览和操作。以下为买家的手绘草图，从买家的使用反馈及绘制草图的过程中发现，在买家行为偏好层面，国外买家浏览页面时更倾向于更少的点击操作，希望内容更聚焦，不宜有太多干扰性信息，强调即时性。初版方案设计时虽已加强了信息分层呈现，但在买家实际操作使用过程中发现，仍存在无法快速找到对应信息的情况，因此我们考虑在「信息层级」、「页面的浏览路径」上继续提优，提供更聚焦的更沉浸式的使用体验。除了买家行为信息外，也收集到了买家对内容及功能层面的需求及遇到的问题，此类问题和需求也被纳入本次和后续产品版本规划中考虑。
![]()
在调研过程中，设计团队同步考虑新的设计机会点，在最后一位买家结束访谈后优化方案也就基本确定。整体设计点包括：策略1: 页面信息布局优化，提供自上而下的沉浸式浏览体验
为了顺应买家简单直接浏览的路径，采用平铺直叙的方式，将原本的三栏布局调整为单栏+两栏布局，简化页面模块，提供自上而下的沉浸式浏览方式，帮助买家单屏聚焦当前场景下的页面信息内容，减少信息干扰。策略2: 页面信息层次优化，突出核心信息
老版页面的产品图展示区较小，所以本次也希望放大产品大图（后续持续提高产图质量），在买家进入后吸引买家停留并查看更多产品细节。另外对界面信息重新分组，模块化展示，突出产品关键信息，加大字号间距，加强信息层级。
策略3: 更多推荐产品露出，辅助买家快速选品
从买家高效选品以及平台留住买家的角度思考，对买家进行分类，在页面靠前位置提供相似产品推荐，期望让“简单查看了当前产品关键信息但没有产生兴趣的买家”看到更多相关产品推荐。在底部增加产品/视频展示，为详细查看产品信息的买家提供更多产品参考。![]()
本次采用了新老版本AB测试的方式，测试数据结论基本稳定后全量上线。数据显示弹出降低、用户在新版页面中点击操作更多、页面首屏和总停留时长提升，整体数据效果向好。我们也收到了买家的直接反馈，后续我们将继续跟进具体的数据结论、买家反馈、遗留问题持续打磨优化。![]()
- 真实买家反馈 -
以上就是产品详情页的整体改版思路和方案呈现，这是一次集合“背景-明确设计目标-问题挖掘-设计策略-设计方案-方案快速验证-数据效果跟进-问题收集-安排迭代”的完整设计流程。用户体验本就不是一蹴而就的事情，需要我们持续投入关注与努力，未来中国制造网产品设计团队也会持续关注产品详情页各层面的用户体验问题。
