{ "_description": "本文件由 data/ 生成：请改动来源文件，不要改这里。各字段的证据边界见接入指南。", "schemaVersion": "1.0.0", "kind": "entry", "locale": "zh-CN", "id": "product-detail-page", "name": { "zh": "商品详情页", "en": "Product Detail Page" }, "page": "https://designvocabulary.com/zh/entries/product-detail-page/", "self": "https://designvocabulary.com/zh/entries/product-detail-page.json", "alternates": { "zh-CN": "https://designvocabulary.com/zh/entries/product-detail-page.json", "en": "https://designvocabulary.com/en/entries/product-detail-page.json" }, "site": { "catalogSchemaVersion": "0.1.0", "entries": 158, "index": "https://designvocabulary.com/zh/entries/index.json", "query": "https://designvocabulary.com/api/query?lang=zh", "guide": "https://designvocabulary.com/zh/agents/", "llms": "https://designvocabulary.com/llms.txt" }, "provenance": { "sourceBacked": [ "entry.definition" ], "editorial": [ "entry.boundary", "entry.signature", "entry.when", "entry.when_not", "entry.tradeoff", "entry.comparison", "entry.rules", "entry.relations", "entry.implementationNote", "entry.behavior" ], "scope": "定义参考以上来源；数字界面示例、选择建议、条件关系及配方由本样例编辑，尚未经用户研究验证。", "editorialStatus": "drafted", "specimenData": "fictional", "specimenNote": "示例为原创虚构界面；定义附来源，用法与配方为编辑建议。", "sources": [ { "id": "pdp-baymard-research", "url": "https://baymard.com/research/product-page", "title": "Baymard Institute · Product Page UX research", "checkedAt": "2026-10-20", "archive": { "status": "unconfirmed", "confirmed": false, "url": null, "capturedAt": null, "lookupUrl": "https://web.archive.org/web/20261020*/https://baymard.com/research/product-page" } }, { "id": "pdp-baymard-tabs", "url": "https://baymard.com/blog/avoid-horizontal-tabs", "title": "Baymard Institute · Avoid Using \"Horizontal Tabs\" for the Main Product Page Sections", "checkedAt": "2026-10-20", "archive": { "status": "unconfirmed", "confirmed": false, "url": null, "capturedAt": null, "lookupUrl": "https://web.archive.org/web/20261020*/https://baymard.com/blog/avoid-horizontal-tabs" } } ], "lists": [], "ordered": false, "listDisclaimer": "席位号是编辑位置，不是评分、排名或人气统计；清单未收满时保持原样，不补足。" }, "entry": { "id": "product-detail-page", "type": "layout", "name": { "zh": "商品详情页", "en": "Product Detail Page" }, "aliases": [ "PDP", "Product Page", "产品详情页", "商品页" ], "granularity": "page", "intents": [ "browse-detail", "find-option" ], "tags": [ "电商", "商品图", "购买区", "规格", "评价" ], "definition": "电商站点中呈现单件商品全部信息并完成购买决定的页面：通常由商品图片区、包含价格与加入购物车按钮的购买区、颜色尺码等规格选择、商品描述与参数、配送与退货说明、用户评价以及相关商品等部分组成。", "boundary": "判定标准是\"一件商品、讲完它的全部属性、并在页内完成选择与加购\"。它不是着陆页：着陆页只讲支撑一次转化所需的部分，并按说服顺序编排；详情页要回答购买前的各种疑问，用户会按自己的顺序跳读。它也不是主从布局：主从布局在同一屏同时保留可选列表与详情；详情页通常是从商品列表进入的独立页面，列表并不同屏保留。商品列表与对比表负责在多件商品之间挑选，详情页负责确认一件。页面上的价格、库存与评价必须真实：隐藏必然产生的费用、虚构的稀缺提示或伪造的评价属于反模式，不在本词条的做法之内。", "signature": [ "商品图片区与购买区（价格、规格选择、加入购物车）并置在页面上部", "描述、参数、配送退货与评价等分成若干有标题的区块", "规格选择改变时，图片、价格与库存随之更新" ], "when": [ "用户要在购买前确认一件商品的外观、规格、价格与配送条件", "商品有颜色、尺码等需要在购买前选定的变体", "其他买家的评价与问答对决定有实际帮助" ], "when_not": [ "目标是为一次推广活动说服新访客，而不是讲完一件商品的属性", "用户需要在多件商品之间横向比较，此时应先提供列表或对比表", "商品只有一种规格且信息很少，独立页面只是多了一次跳转" ], "tradeoff": "把一件商品的所有信息集中到一页，用户无需离开就能回答购买前的疑问；代价是页面很长，信息区块如何排列与折叠会直接影响用户能否找到评价、配送等关键内容，而同一模板要套用在信息量差别很大的商品上。", "comparison": { "focus": "在购买前确认一件商品", "mechanism": "图片与购买区居上，描述、参数、配送与评价分区块呈现", "cost": "页面很长，区块排列不当会让关键信息被错过" }, "sources": [ { "id": "pdp-baymard-research", "title": "Baymard Institute · Product Page UX research", "url": "https://baymard.com/research/product-page", "claim": "Baymard 的公开研究介绍页称几乎所有用户在购买前都会经过商品页，并说明其研究据大规模可用性测试整理出 110 余条商品页指南，涵盖页面版式、商品图片、视频与 360 度视图、包含加入购物车按钮与价格的\"购买\"区、配送与退货、规格变体选择、商品描述、参数表、用户评价、问答等辅助内容以及交叉推荐等主题；详细结论多需付费访问。本词条的组成部分据此列出，不引用付费内容。", "checkedAt": "2026-10-20", "archive": { "lookupUrl": "https://web.archive.org/web/20261020*/https://baymard.com/research/product-page", "status": "unconfirmed", "checkedAt": "2026-10-20T07:58:27.934Z", "error": "save-request-failed" } }, { "id": "pdp-baymard-tabs", "title": "Baymard Institute · Avoid Using \"Horizontal Tabs\" for the Main Product Page Sections", "url": "https://baymard.com/blog/avoid-horizontal-tabs", "claim": "Alan Blackwood 的这篇文章（2018 年 10 月 17 日发布，2026 年 7 月 8 日更新）报告，测试中用户常错过放在横向标签页里的评价、配送与参数等核心内容，因此建议商品页的主要区块不用横向标签页：桌面端用展开的纵向区块，内容较长的移动端页面可用可折叠区块。本词条的版式规则据此转述，标签页仍可用于某一区块内部的子分区。", "checkedAt": "2026-10-20", "archive": { "lookupUrl": "https://web.archive.org/web/20261020*/https://baymard.com/blog/avoid-horizontal-tabs", "status": "unconfirmed", "checkedAt": "2026-10-20T07:58:30.031Z", "error": "save-request-failed" } } ], "relations": [ { "target": "landing-page", "kind": "alternative", "condition": "一件商品需要一个对外的落地页面", "reason": "着陆页按说服顺序只讲支撑转化的部分，详情页要讲完一件商品并接受跳读；推广活动用前者，常设的商品目录用后者。", "basis": "editorial" }, { "target": "master-detail", "kind": "related", "condition": "用户从商品列表进入一件商品", "reason": "两者都是\"列表选中一项、查看其详情\"，但主从布局同屏保留列表，详情页通常是独立的一页；需要频繁在商品间切换时可考虑前者。", "basis": "editorial" }, { "target": "comparison-table", "kind": "composes_with", "condition": "用户在几件相近的商品之间犹豫", "reason": "详情页负责确认一件商品，对比表负责在少数候选之间权衡；从详情页提供加入对比的入口，可以避免用户开多个标签页来回记忆。", "basis": "editorial" }, { "target": "hidden-costs", "kind": "conflicts_when", "condition": "运费、税费等必然产生的费用要到结账时才出现", "reason": "详情页是用户做购买决定的地方；把必然发生的费用留到最后，会让这里的价格失去作为决策依据的意义。", "basis": "editorial" } ], "rules": [ { "when": "安排描述、参数、配送与评价等主要区块", "instruction": "把这些区块做成可纵向浏览的有标题段落（长页面在移动端可折叠），不要把它们放进横向标签页让用户错过。", "strength": "recommend", "basis": "editorial" }, { "when": "用户选择颜色、尺码等规格", "instruction": "让图片、价格与库存随选择同步更新，缺货的规格要明确标示，而不是等到加入购物车时才报错。", "strength": "recommend", "basis": "editorial" }, { "when": "页面显示库存、折扣或评价", "instruction": "只呈现真实的数据，不虚构稀缺提示、倒计时或评价。", "strength": "must", "basis": "editorial" } ], "behavior": { "states": [ "wide", "compact", "expanded", "collapsed" ], "a11y": [ "商品图片有说明内容的替代文本，图库可用键盘切换", "规格选择控件有可朗读的名称与当前选中值，缺货状态不只靠颜色表达", "价格或库存随选择变化时，以状态消息告知" ], "motion": "图库切换可以有短暂过渡；减弱动态偏好下直接切换" }, "demo": null, "version": "0.1.0", "editorialStatus": "drafted", "requirements": [], "demoCapabilities": [], "implementationNote": "本词条尚无可操作示例；插画为编辑示意，展示图片区、购买区与下方信息区块的关系，其中的商品、价格与评价均为虚构，不代表已验证的实现。应用到产品前仍须用真实商品数据检查各区块在信息量差异很大时是否仍然可读。", "image": { "src": "/images/product-detail-page.webp", "alt": "一张名为 FIELDNOTES 的虚构商品页示意：左上是一张大幅的笔记本插图和一排小缩略图，右上是购买区，包含标题与价格占位条、一排颜色圆点、一排尺码方块和一个陶土色的加购按钮；下方依次是带标题占位条的描述、参数、配送和带星级的评价区块。" }, "searchTerms": [ "e-commerce", "product images", "buy box", "specifications", "reviews" ] } }