电商详情页模板psd

做详情页的人大概都遇到过：别人丢来的 PSD 打开一看，图层全是「图层 12 拷贝 3」，切图要一个个猜；或者自己做完一版，运营要换文案就全崩。这篇不讲审美，只讲文件本身怎么组织——分层命名、字体段落、切图标注、交付前自查，照着做能让改稿成本降下来。

做详情页的人大概都遇到过：别人丢来的 PSD 打开一看，图层全是「图层 12 拷贝 3」，切图要一个个猜；或者自己做完一版，运营要换文案就全崩。这篇不讲审美，只讲文件本身怎么组织——分层命名、字体段落、切图标注、交付前自查。照着做，能让改稿成本降下来。

先想清楚一件事：详情页 PSD 不是一张画，而是一份「可被反复修改的工程文件」。你交出去的不是好看的效果，而是别人能直接改的东西。所以判断一份源文件好不好，不看第一眼视觉，看的是接手的人能不能不看说明就改对地方。

图层怎么组织：从分组逻辑到命名规则

分组逻辑决定改稿效率。按「屏/模块」分大组，不要按元素类型分。一组对应详情页的一段浏览顺序，运营说要换第三段卖点，你直接关掉那一组、换上新组，其余不用动。按「所有文字放一组、所有图片放一组」来分，改一处就得在几百个图层里翻。

• 命名用「模块-元素-状态」，比如「卖点03-标题-中文」「优惠券-按钮-悬停」，从名字能判断在哪、是什么、什么状态
• 文字层保留可编辑状态，别栅格化；只有必须的投影、特效用智能对象或独立层，改字不用重做效果
• 同一模块的底图、装饰、文字分三层放，换背景时不用重新裁切文字
• 大组用统一前缀编号，比如 01_主图、02_卖点、03_参数，顺序和详情页从上到下的浏览顺序一致

字号段落与栅格：定死一套，别每屏重新拍脑袋

详情页最怕的是每屏各自为政。先定一套正文、小标题、大标题的字号阶梯和行距，全篇只从这套里选，不做临时加号。这样别人接手时，看到字号就知道这是哪一级信息，不用猜。中英文混排时统一行高逻辑，中文行距偏紧、英文偏松要分开设，别一套参数硬套所有情况。

宽度按平台主图区常用安全边留白，元素不贴边。不同终端的裁切比例不完全一样，贴边的元素在某些设备上会被切掉一截。关键信息，比如价格、卖点关键词，尽量放在安全区内部。具体每个平台的尺寸口径和规范要求，到 /ai-nav/category/ai-ecommerce 找对应平台条目核对，那里按平台整理过。

字号阶梯

提前定好正文、小标题、大标题各用哪几档，全篇只从这里选

安全边

元素不贴边，避开不同终端裁切差异，关键信息放里侧

行距逻辑

中文和英文分开设，别用同一套参数套所有文字

栅格

按模块对齐，同一层级元素左边界一致，改稿时不跑位

切图、标注与交付：让下游能自己动手

切图不是导出完就完了，命名要带模块前缀和用途。下游拿到「卖点03-图标-分享」比拿到「icon_share_final_v2」更容易放对位置。导出格式按用途分开，纯色图标走一种，带透明度或渐变走另一种，别混着来。具体哪种格式适合什么场景，可以在 /tools/speed-test 一类工具页测一下实际加载表现再定，别凭感觉。

1. 清文件交付前把隐藏层、废弃组、被覆盖的旧版本清掉，源文件体积和打开速度都会好很多
2. 加标注组在文件里留一层标注组，写清可替换文案范围、图片最小尺寸、必须保留的安全区
3. 分开切图纯色、带透明度、带渐变分类导出，命名统一带模块前缀
4. 附说明交付清单固定成几项：源文件、切图包、字体说明、可替换内容说明

• 源文件（清理过的，不含废弃层）
• 切图包（按模块分文件夹，命名规范）
• 字体说明（用了哪些字体、替代方案）
• 可替换内容说明（哪些文案可改、哪些图可换）

交付前自查清单

自查不是走形式，是提前把下游可能要踩的坑踩一遍。下面几条按顺序做，能挡掉大部分返工。注意，这些检查针对的是「可修改性」，不是视觉美观——视觉问题靠评审，可修改性问题靠这套清单。

• 换一遍长文案：把最长的标题和卖点替换进去，看有没有溢出或压到图片
• 关掉所有效果层看裸版：确认信息层级还在，不依赖特效撑结构
• 用非设计同事当小白鼠：让对方不问你，自己找出一处要改的地方，能改成就合格
• 确认所有文字层没被栅格化，改字不用重做
• 确认切图命名和文件夹结构跟标注组里写的一致

这套自查不适用于「只交最终图、不交源文件」的场景。如果对方只要成品图，那重点变成导出尺寸和压缩质量，而不是图层组织。判断标准很简单：交付物里有没有源文件，有就按这套走，没有就别花时间在分层上。

团队共用的模板别只留一份，放统一位置并写一句版本说明，改了什么。具体放在哪个共享盘、怎么命名版本，看团队习惯，但「只有一份、没人知道改过什么」是常见事故源头。想知道各家工具和中转能力对不对得上你的交付流程，可以到 /tools 目录按分类翻一翻。