用途：这是一套移动端电商商品详情页（PDP）的 UI 设计原则，适用于设计、评审、重构或批评商品详情页时参考，目标是让体验一致、可信且易于下单。
核心理念：为商品系统而非单一静态页面设计，图片、图标与布局需在深色、明亮、杂乱或简洁照片以及大量商品中都能成立；强 UI 不仅修复破损元素，也减少购买路径摩擦（滚动时保留上下文、吸底操作、一键常用数量）；优先自然真实的商品摄影与可预测的布局网格。
15 个常见错误与修复：图标直接压在满幅商品图上会不可读，应放入有对比度和细描边的背景容器；商品图应干净自然、背景中性一致，并在网格中同样成立；所有元素对齐统一网格；通过大小、字重、颜色和间距建立清晰层级；增加区块间距并保持相关项分组；标题突出、关键元数据（重量、产地、有机）就近可扫读；价格清晰并与单位（如每公斤）紧密关联，数量变化时显示总价；在顶部紧凑展示评分、评论数与相关徽章；数量选择器内置单位、靠近加购按钮、控件易点；主按钮避免全大写喊叫，保持高对比但视觉柔和，可在按钮内显示总价（如“Add to cart · $X.XX”）；提供收藏、分享等次级操作且不与主 CTA 竞争；将详情、营养、产地、配送等信息分组并统一标题；按钮、标签、卡片、输入框共享一致的圆角、阴影与色彩系统；从设计之初考虑滚动行为；将数量与加购分组、显示实时总价并保持主操作始终可达。
三项高影响改进：可滚动内容卡片，商品详情置于圆角柔和卡片中上滑覆盖商品图，图片滚出主视野后标题转为吸顶栏；吸底操作区，滚动浏览详情与相关商品时数量选择器和加购按钮始终可见或易达；预设数量选项，基于真实购买数据提供 500 g、1 kg、2 kg 等一键标签，同时保留自定义数量。
评审清单：图标与叠加层在任何商品图上可读；商品图跨目录一致且聚焦商品；布局网格与对齐清晰；层级强（标题→价格→CTA）；间距与分组充足；信任信号早出现；数量+单位+总价与主 CTA 紧密耦合；购买控件吸底或始终可达；数据支持时提供预设常用数量；设计作为系统而非一次性页面。
限制：资料未提供具体平台、框架、代码实现或安装方式，也未说明收费与效果数据。