保利拍卖APP运营素材与前端展示规范 v1.1

适用范围：首页 Banner、拍卖列表、拍卖日程、随心拍、图录/拍品列表、资讯/专栏/直播/视频列表、个人中心入口等所有由“运营素材 + 前端系统组件”共同构成的页面。

0. 文档目标

本规范不是单纯的“图片尺寸规范”，而是用于解决保利拍卖 APP 后续长期运营中反复出现的视觉和信息展示问题，例如：

• 图片上已有标题、日期，系统又叠加标题、日期，造成信息重复；
• 白色标题、浅色 Logo 叠在浅色图片上，看不清；
• 首页 Banner 文字离顶部 Logo 太近；
• 拍卖列表开拍时间由系统叠加，遮挡运营图片；
• 不同运营位的标题、日期、状态、价格、按钮样式不统一；
• 运营出图时不知道哪里会被前端 Logo、状态标签、收藏/分享按钮遮挡；
• 前端没有配置项，导致运营图片明明已经设计好标题日期，系统仍然重复显示。

本规范的目标是：

1. 让运营知道如何出图；
2. 让设计知道如何定义组件和模板；
3. 让前端知道需要支持哪些展示配置；
4. 让产品和测试知道上线前检查什么；
5. 确保整个 APP 的视觉在可控规范内配置，而不是每次靠临时调整。

---

1. 总原则

1.1 图片不是孤立海报，必须和前端组件一起设计

运营图片上线后会被放入具体页面，页面上可能同时存在：

• 顶部状态栏；
• 顶部 Logo；
• 搜索、消息图标；
• 系统标题；
• 系统日期；
• 状态标签；
• 收藏按钮；
• 分享按钮；
• 播放按钮；
• 倒计时；
• 开拍时间；
• 底部导航栏；
• 不同机型裁切区域。

因此运营出图必须按“页面容器”来设计，而不是按单张海报来设计。

1.2 同一信息只展示一次

同一条信息应明确由“图片承载”或“系统承载”，不要两边重复。

1.3 视觉隐藏不等于数据删除

即使前端在列表中隐藏了开拍时间、标题或日期，后台仍需保留结构化字段，用于：

• 搜索；
• 筛选；
• 排序；
• 提醒；
• 详情页展示；
• 埋点；
• 数据复盘；
• 运营后台管理。

1.4 优先保证可读性，其次才是装饰性

艺术品图片和拍卖海报本身视觉复杂，前端叠字必须谨慎。任何标题、Logo、状态、按钮叠加在图片上，都必须满足：

• 看得清；
• 不遮挡主体；
• 不与图片文字重复；
• 不破坏拍品视觉；
• 在小屏设备上仍然成立。

---

2. 信息承载模式

建议前端和运营后台统一支持以下三种展示模式。

2.1 模式 A：图片承载主信息

适合：

• 首页主 Banner；
• 大型拍卖会主视觉；
• 重点专场推广图；
• 运营活动大图；
• 直播拍卖首页推荐位。

特点：

• 图片中可以包含主标题、日期、开拍时间、宣传语；
• 系统层不重复显示标题、日期；
• 系统层只保留必要标签，例如状态、收藏、分享、播放按钮；
• 需要严格安全区。

前端需要支持：

• 隐藏系统标题；
• 隐藏系统日期；
• 隐藏系统开拍时间；
• 仍保留结构化数据；
• 配置 Logo 显示模式；
• 配置遮罩模式；
• 配置状态标签位置。

运营出图要求：

• 标题、日期、开拍时间必须在图片中排版清晰；
• 不得把核心文字放在顶部 Logo 区、右上角按钮区、底部裁切区；
• 浅色背景需避免承载白字；
• 图片内时间格式需统一。

2.2 模式 B：系统承载主信息

适合：

• 资讯列表；
• 专栏列表；
• 视频列表；
• 普通拍品列表；
• 搜索结果；
• 历史成交列表；
• 信息密度较高的列表页。

特点：

• 图片主要作为视觉缩略图；
• 标题、日期、状态、价格由系统统一展示；
• 图片内尽量不放完整标题和日期；
• 列表视觉更整齐，便于搜索、筛选、快速浏览。

前端需要支持：

• 系统标题最多 2 行，超出省略；
• 日期、状态、标签位置统一；
• 图片裁切规则统一；
• 图片加载失败占位；
• 长标题不撑破布局。

运营出图要求：

• 图片中不要重复放标题和日期；
• 图片中可以保留品牌视觉、拍品、场景、人物、局部文字，但不能与系统标题冲突；
• 不得把重要主体放在会被状态标签或播放按钮遮挡的位置。

2.3 模式 C：混合承载

适合：

• 拍卖列表；
• 拍卖日程；
• 专场卡片；
• 首页二级推荐位。

特点：

• 图片可承载主视觉和部分时间信息；
• 系统承载状态、倒计时、关注、分享、核心结构化字段；
• 需要明确哪些信息由图片展示，哪些由系统展示。

典型规则：

• 开拍时间可由运营在图片中设计；
• 系统列表层可不再叠加开拍时间；
• 系统仍需保存开拍时间，用于排序、提醒、详情页；
• 状态标签建议由系统统一展示，不建议写死在图片里；
• 倒计时必须由系统展示，不应出现在静态图中。

---

3. 页面级规范

3.1 首页 Banner

3.1.1 推荐展示模式

首页首屏 Banner 推荐采用：模式 A：图片承载主信息。

即：运营图片承载主标题、主题视觉、核心时间；系统只叠加必要组件。

3.1.2 运营出图规则

运营图片应预留以下区域：

1. 顶部安全区：给状态栏、Logo、搜索、消息图标预留空间；
2. 右上角安全区：避免与收藏、分享、消息入口冲突；
3. 底部安全区：避免被轮播点、模块标题、底部裁切遮挡；
4. 主体安全区：拍品、人像、佛像、书画主体不要被按钮或文字遮挡。

禁止：

• 把标题顶到 Logo 附近；
• 在顶部浅色背景上放浅色 Logo；
• 在图片右上角放重要文字；
• 图片已有完整标题日期时，系统仍叠加标题日期；
• 时间显示到秒，例如 15:00:00。

建议：

• 首页 Banner 时间显示为 4月29日 15:00 开拍；
• 标题尽量控制在 1-2 行；
• 文字区使用稳定背景或半透明暗色底；
• 主体图尽量放中部或右侧，避开顶部导航。

3.1.3 前端配合要求

前端需要提供 Banner 配置项：

3.1.4 首页直播自动播放

当首页 Banner 或直播模块存在直播内容时，可支持自动播放，但需满足：

• 默认静音；
• 移动网络下可降级为封面；
• 弱网时不自动播放；
• 用户可暂停；
• 不影响 Banner 信息阅读；
• 自动播放失败时显示封面和播放按钮；
• 埋点记录曝光、自动播放开始、播放时长、点击进入直播间。

---

3.2 拍卖列表 / 拍卖日程 / 专场卡片

3.2.1 推荐展示模式

拍卖列表推荐采用：模式 C：混合承载。

其中：

• 运营图可承载专场主视觉、专场名称、开拍时间；
• 系统保留状态、关注、分享、结构化时间、LOT、倒计时等能力；
• 列表层尽量避免系统文字遮挡图片。

3.2.2 关于“开拍时间隐藏”的规则

用户提出的方向是合理的：

拍卖列表页的开拍时间可由运营统一设计在图片中，前端列表层不再强行叠加开拍时间。

但注意：

• 前端可以隐藏展示；
• 后台不能删除字段；
• 详情页仍需系统展示精确时间；
• 排序、筛选、提醒、埋点仍需使用结构化时间；
• 如果运营图片未配置时间，系统应有兜底展示。

建议前端规则：

3.2.3 状态标签规则

状态标签建议由系统统一展示，不建议写死到图片中。

状态枚举建议：

• 预展中；
• 即将开始；
• 正在拍卖；
• 即将截拍；
• 已结束；
• 已成交；
• 已流拍；
• 直播中；
• 回放中。

状态标签需要：

• 颜色统一；
• 位置统一；
• 不遮挡拍品主体；
• 不遮挡图片内标题和时间；
• 支持运营预览。

3.2.4 前端配合要求

拍卖卡片组件需要支持：

• 系统标题显示/隐藏；
• 系统开拍时间显示/隐藏；
• 系统 LOT 范围显示/隐藏；
• 状态标签位置配置；
• 收藏/分享按钮外置或叠加；
• 图片亮度遮罩；
• 图片完整展示/裁切展示；
• 回到列表时保留滚动位置；
• 卡片字段埋点。

---

3.3 资讯 / 专栏 / 视频 / 直播列表

3.3.1 推荐展示模式

内容列表推荐采用：模式 B：系统承载主信息。

原因：

• 内容列表信息密度高；
• 需要快速浏览标题、日期、栏目；
• 图片内再放标题会重复；
• 系统承载更利于搜索和统一样式。

3.3.2 运营出图规则

资讯、专栏、视频列表缩略图：

• 尽量不放完整标题；
• 可以放视觉主图、人物、拍品、场景；
• 如必须放活动文字，应与系统标题互补而不是重复；
• 不要在右下角放关键文字，避免被视频时长遮挡；
• 不要在中间放小字，移动端难以阅读。

3.3.3 前端配合要求

内容卡片需要：

• 系统标题最多 2 行；
• 日期格式统一；
• 栏目标签统一；
• 直播状态统一；
• 视频时长格式统一；
• 播放按钮清晰；
• 图片加载失败占位；
• 收藏按钮不遮挡关键图文；
• 支持内容关联拍卖会/专场/拍品。

---

3.4 随心拍 / 图录 / 拍品列表

3.4.1 推荐展示模式

拍品列表推荐采用：模式 B：系统承载主信息。

原因：

• 拍品图片本身是核心，不应被太多运营文字遮挡；
• 价格、状态、LOT、当前价、成交价必须结构化展示；
• 用户需要对比多个拍品。

3.4.2 运营/图片规则

拍品图片：

• 尽量展示拍品主体；
• 不要在拍品图上硬加标题、价格、日期；
• 保持背景干净；
• 保持同一专场内裁切规则一致；
• 成交/已结束标签应由系统展示，不应压住拍品主体。

3.4.3 前端配合要求

拍品卡片应由系统展示：

• LOT 编号；
• 拍品名称；
• 当前价 / 起拍价 / 成交价；
• 状态；
• 出价次数；
• 剩余时间；
• 收藏状态；
• 保证金/号牌状态，如必要。

---

4. 安全区规范

4.1 顶部安全区

适用于首页 Banner、透明导航页、大图详情页。

顶部安全区内不得放：

• 主标题；
• 日期；
• 开拍时间；
• 重要拍品细节；
• 人脸/佛像脸部/书画款识等关键内容。

顶部安全区应预留给：

• 系统状态栏；
• POLY AUCTION Logo；
• 搜索图标；
• 消息图标；
• 返回按钮。

4.2 右上角安全区

右上角通常会放：

• 收藏；
• 分享；
• 关闭；
• 状态标签；
• 更多操作。

运营图右上角不得放：

• 标题；
• 价格；
• 日期；
• 开拍时间；
• 拍品主体。

4.3 底部安全区

底部可能会有：

• 轮播点；
• 卡片标题；
• 底部 CTA；
• 底部导航栏；
• iPhone Home Indicator。

运营图底部避免放小字和重要信息。

---

5. Logo 与背景适配规范

5.1 当前问题

首页顶部 POLY AUCTION Logo 如果为浅色，遇到浅色运营图时会不清楚。

5.2 解决原则

前端和设计至少提供三种方案：

1. 浅色 Logo：用于深色背景；
2. 深色 Logo：用于浅色背景；
3. 顶部渐变遮罩：用于复杂图片背景。

5.3 推荐前端能力

Logo 显示模式配置：

• 自动：根据图片亮度或后台配置判断；
• 浅色 Logo；
• 深色 Logo；
• 浅色 Logo + 深色渐变遮罩；
• 深色 Logo + 浅色遮罩。

短期可先人工配置，长期可做后台自动检测。

---

6. 文字可读性规范

6.1 白字叠图规则

白字只能叠在满足以下条件的背景上：

• 背景整体偏暗；
• 背景纹理不复杂；
• 文字下方无高亮元素；
• 文字与背景对比明显；
• 小屏下仍可读。

如果不满足，应采用：

• 深色遮罩；
• 文字加投影；
• 文字加半透明底；
• 切换深色字；
• 调整文字位置；
• 更换图片裁切。

6.2 文字层级

建议层级：

1. 主标题：最大，1-2 行；
2. 副标题：较小，可选；
3. 日期/开拍时间：中等，统一格式；
4. 状态标签：系统统一；
5. 说明性小字：尽量避免放在移动端图片上。

6.3 小字限制

移动端运营图中不建议放大量小字，尤其是：

• 电话；
• 地址；
• 长段介绍；
• 规则说明；
• 多行时间地点。

这类信息应由系统结构化展示，支持复制、拨号、导航、搜索。

---

7. 标题、日期、时间、金额格式

7.1 标题

• 系统标题最多 2 行；
• 超出省略；
• 不允许与图片标题完全重复；
• 如果图片已含完整标题，系统标题默认隐藏；
• 如果图片只含主视觉短语，系统可展示完整标题。

7.2 日期 / 时间

建议格式：

7.3 金额

建议统一为：

• ¥5,000
• ¥25,000
• 成交价 ¥15,400

如必须使用 RMB，则全 APP 统一：

• RMB 5,000

不要同一页面混用：

• ￥5000
• ¥5,000
• RMB 5,000

---

8. 运营后台配置建议

为了确保规范能落地，运营后台至少需要支持以下字段。

8.1 基础字段

• 标题；
• 副标题；
• 跳转链接；
• 图片；
• 开始时间；
• 结束时间；
• 状态；
• 拍卖类型；
• LOT 范围；
• 关联专场/拍品/直播/资讯。

8.2 展示配置字段

8.3 预览能力

运营后台建议提供：

• 首页预览；
• 拍卖列表预览；
• 资讯列表预览；
• 小屏 iPhone 预览；
• 大屏 iPhone 预览；
• 深浅 Logo 预览；
• 标题/日期重复提示；
• 安全区提示；
• 浅色图叠白字提醒。

---

9. 前端组件调整清单

9.1 首页 Banner 组件

前端需支持：

• 系统标题显示/隐藏；
• 系统日期显示/隐藏；
• Logo 深浅模式；
• 顶部渐变遮罩；
• 安全区适配；
• 直播静音自动播放；
• 播放失败兜底封面；
• 轮播点不遮挡文字；
• 图片裁切策略配置。

9.2 拍卖卡片组件

前端需支持：

• 开拍时间显示/隐藏；
• 状态标签统一；
• 收藏/分享外置或安全叠加；
• LOT 范围显示；
• 剩余时间/倒计时显示；
• 图片内已有信息时避免重复；
• 结构化时间继续保留。

9.3 内容卡片组件

前端需支持：

• 标题两行省略；
• 日期格式统一；
• 视频时长统一；
• 直播状态统一；
• 播放按钮清晰；
• 收藏按钮不遮挡；
• 图片加载失败占位。

9.4 拍品卡片组件

前端需支持：

• LOT、拍品名、当前价/成交价系统展示；
• 图片尽量不叠文字；
• 已成交/进行中标签不遮挡主体；
• 图片裁切一致；
• 价格、状态、剩余时间实时更新。

9.5 全局样式能力

前端需建立全局规范：

• 金额格式；
• 时间格式；
• 状态标签；
• 字色模式；
• 遮罩样式；
• 图片占位；
• 长标题处理；
• 安全区变量；
• 组件间距。

---

10. 运营出图流程

10.1 出图前确认

运营在设计图片前，需要先确认：

1. 这是哪个页面的哪个位置？
2. 该位置采用图片承载、系统承载还是混合承载？
3. 图片上是否要放标题？
4. 图片上是否要放日期/开拍时间？
5. 前端是否还会显示标题/日期？
6. 顶部是否有 Logo 或透明导航？
7. 右上角是否有收藏/分享/状态标签？
8. 是否需要直播自动播放？
9. 是否需要小屏裁切？
10. 是否需要多尺寸适配？

10.2 出图中检查

设计图片时检查：

• 标题是否在安全区外；
• 日期是否清楚；
• 背景是否支撑白字；
• 主体是否被组件遮挡；
• 顶部是否留够空间；
• 右上角是否留够空间；
• 小屏裁切后是否仍完整；
• 是否与系统字段重复。

10.3 上线前检查

上线前必须检查：

• 首页实际效果；
• 列表实际效果；
• 详情页实际效果；
• 深浅 Logo 是否清晰；
• 标题是否重复；
• 日期是否重复；
• 开拍时间是否重复；
• 状态标签是否遮挡；
• 收藏/分享是否遮挡；
• 小屏是否可读；
• 结构化字段是否仍完整。

---

11. 角色分工

---

12. 上线验收标准

一个运营位上线前，至少满足：

1. 不存在标题重复；
2. 不存在日期/开拍时间重复；
3. Logo 清晰可见；
4. 系统文字清晰可读；
5. 图片主体无遮挡；
6. 状态标签、收藏、分享不压住关键内容；
7. 小屏机型可读；
8. 深浅图片均有适配策略；
9. 结构化数据未丢失；
10. 跳转链接正确；
11. 埋点可记录曝光、点击、播放等关键行为。

---

13. 推荐落地节奏

第一阶段：立即执行

• 建立本规范；
• 首页 Banner 和拍卖列表先按规范调整；
• 一键登录协议重叠等明显问题进入 Bug 修复；
• 运营出图前人工使用检查清单。

第二阶段：组件化调整

• 前端补充标题/日期显示隐藏；
• 补充 Logo 深浅模式；
• 补充遮罩配置；
• 统一状态标签；
• 统一金额、时间、标题样式。

第三阶段：后台工具化

• 增加多机型预览；
• 增加安全区提示；
• 增加标题/日期重复提醒；
• 增加浅色背景叠白字提醒；
• 增加配置模板。

---

14. 快速检查清单

运营提交图片前

• [ ] 确认信息承载模式；
• [ ] 图片内标题与系统标题不重复；
• [ ] 图片内日期与系统日期不重复；
• [ ] 顶部 Logo 区留白足够；
• [ ] 右上角按钮区无关键文字；
• [ ] 白字没有叠在浅色背景上；
• [ ] 小屏裁切后仍可读；
• [ ] 时间格式符合规范；
• [ ] 跳转链接和结构化时间已配置。

前端/测试上线前

• [ ] 系统标题显示/隐藏符合配置；
• [ ] 系统日期显示/隐藏符合配置；
• [ ] Logo 在当前图片上清晰；
• [ ] 遮罩策略生效；
• [ ] 状态标签不遮挡；
• [ ] 收藏/分享不遮挡；
• [ ] 直播自动播放策略符合预期；
• [ ] 结构化字段仍可用于搜索、排序、提醒、埋点；
• [ ] 主流机型适配正常。

---

15. 与需求池的对应关系

本规范建议对应需求池中的以下需求：

• PRD-052：首页 POLY AUCTION Logo 清晰度优化；
• PRD-053：顶部浅色 Logo 与浅色运营图冲突处理；
• PRD-054：首页 Banner 顶部安全区规范；
• PRD-055：拍卖列表开拍时间展示策略调整；
• PRD-056：首页有直播时自动播放；
• PRD-057：图片内文案与系统标题日期重复展示规则；
• PRD-058：运营图片与系统文字对比度校验；
• PRD-059：运营素材制作与配置标准规范建设；
• PRD-060：运营后台素材预览与上线前检查能力。

建议在需求评审时，将 PRD-059 作为总规范任务，其他需求作为具体落地项。