搭投设计改版｜图文评审说明

Review Note

一、评审说明

不是完整 PRD

本页不是完整 PRD，不承载正式评审结论、排期、负责人和版本变更记录。

用于解释原型

本页用于解释在线交互原型中的关键交互、组件边界、UI 标注和易误解点。

Wiki 为准

正式规则以 Wiki PRD 为准；本站只作为在线原型和图文说明入口。

Scope

二、本期目标

1. 原有组件优化

在现有搭投组件基础上补充移动端展示和配置能力，重点覆盖图片、倒计时、搜索框。

2. 新增移动端组件

新增仅用于 APP 移动端搭投页的展示组件，增强活动页结构表达和商品分组切换能力。

3. 老版本 APP 拦截更新

老版本 APP 不兼容新版搭投页，按 Android、iOS、鸿蒙三端分别判断版本能力；不满足要求时提示更新后查看。

页面搭建结构

用于展示顶部导航、左侧组件库、中间手机预览画布和右侧配置面板的整体关系。

Legacy Components

三、原有组件优化

原有与优化组件区域

用于展示活动组件、报名组件、搜索组件，以及图片、倒计时、搜索框等本期优化入口。

图片组件优化

支持单张 Banner、两图左右；Banner 属于图片组件优化，不是新增组件。

倒计时组件优化

原有中台配置，补齐 APP 前端展示，并增加 icon、背景、颜色等配置项。

搜索框组件优化

支持固定头部搜索和内容区域搜索；内容区域搜索支持区域背景、搜索框背景、描边、文字 / 图标色。

Mobile Components

四、新增移动端组件

新增移动端组件区域

用于展示页面背景、状态导航、一级 Tab、商品 Tab、横向商品和返回顶部组件入口。

页面背景

用于配置 APP 搭投页整体背景。

状态栏及导航栏

用于配置 APP 页面顶部区域。

一级 Tab

用于在同一个搭投页内切换不同内容分区。

商品 Tab

新版商品展示承载组件，默认不展示 Tab，可切换为分组 Tab 展示。

横向商品

用于展示重点商品、推荐商品、活动商品。

返回顶部

用于长页面浏览后回到页面顶部或当前 Tab 顶部。

Annotations

五、关键图文标注

图片组件优化

用于说明单张 Banner、两图左右，以及 Banner 归属图片组件优化的边界；三图视觉可通过单图组件和两图组件组合实现。

倒计时组件

用于说明默认 icon、自定义 icon、背景、颜色和倒计时状态。

搜索框组件

用于说明固定头部搜索和内容区域搜索，以及内容区域搜索的颜色作用范围。

页面背景

用于说明背景颜色作为底色、背景图叠加展示和加载失败兜底。

状态栏及导航栏

用于说明状态栏、导航栏、返回箭头、标题和顶部搜索入口。

一级 Tab

用于说明内容分区切换、默认选中态、横向滑动、删除保护和吸顶位置。

商品 Tab

用于说明商品展示承载、分组模式、删除保护、与活动组件互斥、底部固定、数量限制和空状态。

一级 Tab + 商品 Tab 双层吸顶

用于说明状态栏及导航栏、一级 Tab、商品 Tab、商品内容流的吸顶层级；截图为吸顶层级示意。

横向商品

用于说明横向商品背景、商品卡、横向滑动区域和加购入口。

返回顶部

用于说明按钮位置、展示条件、点击后返回位置和不遮挡加购按钮。

老版本 APP 更新提示

用于说明低版本拦截、Android / iOS / 鸿蒙三端更新跳转、更新提示弹窗、立即更新和返回上一页。

预览提交

用于说明移动端真实预览、Tab 可切换、横向商品可滑动和双层吸顶。

Review Rules

六、评审后规则补充

规则项	调整说明
图片跳商品详情	图片组件配置跳转方式为商品详情时，只能关联 1 个商品；点击选择商品打开单商品选择弹窗，不复用多商品选择弹窗。
图片组合	图片组件仅保留单张 Banner 和两图左右；如需三图视觉，可通过一个单图组件和一个两图组件组合实现。
单张 Banner 铺满	单张 Banner 支持“是否铺满”配置，默认否；否时左右保留页面边距，是时横向铺满移动端页面宽度。该配置仅适用于单张 Banner，两图左右不支持。
页面背景	删除运营侧“展示规则”配置。背景颜色作为底色，背景图可叠加展示；未配置背景图、背景图透明区域或加载失败时透出背景颜色。
状态栏及导航栏	状态栏及导航栏为页面顶部固定组件，可在中间画布点击选中查看配置，但不支持上移、下移或画布删除；固定头部搜索样式不在该组件中配置，由搜索框组件单独配置。
一级 Tab 删除	一级 Tab 支持删除，删除前二次确认；删除后该 Tab 下内容同步删除；至少保留一个一级 Tab。
一级 Tab 默认选中	默认选中项在 Tab 项列表后配置；下拉选项来源于 Tab 项列表，默认第一项。新增、改名、删除 Tab 项后同步更新选项；删除当前默认项后自动切换为剩余第一项。
商品组件下线	原商品组件不再支持新增，仅兼容历史已配置数据；新版搭投商品展示统一由商品 Tab 承载。
商品选择弹窗	删除“商品范围 / 部分商品”字段；商品来源统一在弹窗内通过“指定商品 / 商品分类 / 商品标签”单选项配置，默认选中指定商品。
商品分组列表	分组列表不配置商品来源，仅展示分组名称、数量和操作；商品来源在商品选择 / 编辑弹窗中配置。
商品 Tab 默认状态	商品 Tab 默认选择“不展示”，当前组件作为普通商品展示区，仅展示商品选择 / 编辑和商品展示方式；商品数量根据选择结果回填，不作为运营手动输入项。
商品 Tab 展示状态	商品 Tab 选择“展示”时，不展示外层商品选择 / 编辑；商品配置通过商品分组列表中每个分组的“编辑”入口完成。
默认选中 Tab 项	商品 Tab 选择“展示”时展示该配置，并放在商品分组列表后配置；下拉选项来自商品分组列表，默认选中第一个商品分组；修改、新增、删除商品分组后需同步更新选项，删除当前默认项后自动切换为剩余第一个分组。
商品 Tab 展示配置	选择“展示”时先维护商品分组列表和新增商品分组，再配置默认选中 Tab 项，之后配置 Tab 样式和吸顶；商品分组支持删除，删除前二次确认，且至少保留一个商品分组。
商品 Tab 展示样式	商品 Tab 选择“展示”时支持配置展示样式，至少包含“胶囊块”和“下滑块”，规则与一级 Tab 保持一致。下滑块样式下，单个 Tab 背景默认透明且不可配置，仅保留文字颜色、滑块颜色等必要配置。
商品展示方式	商品 Tab 的商品展示方式不包含横向滚动；横向滚动由独立“横向商品”组件承载。
商品 Tab 缺省状态	商品 Tab 需要覆盖加载中、空状态、加载失败、商品图片缺省图、商品分组为空等状态；无库存、已下架、不可售等商品业务状态沿用现有商品卡规则。
横向商品标题类型	横向商品支持“文字标题”和“标题图片”两种标题类型。选择文字标题时仅配置标题文案，标题文案最多 8 个字；选择标题图片时仅配置标题图片。标题文案和标题图片互斥，不同时展示、不同时生效。标题图片以 UI 设计稿为准，支持 JPG / PNG / WebP，单张不超过 300KB。
横向商品缺省状态	横向商品需要覆盖商品图片缺省图、加载中骨架屏、空状态和加载失败兜底；最多展示 20 个有效商品，商品点击、加购、价格、库存、上下架和不可售沿用现有商品卡规则。
活动组件性质	活动组件本质上也是根据活动带出商品，属于商品 / 活动承载组件，不作为普通内容组件与商品 Tab 并存。
商品 / 活动位置	商品 Tab 和活动组件属于底部业务承载区，默认固定在当前页面或当前一级 Tab 内容区域底部；普通组件新增时插入到其之前，返回顶部作为悬浮配置位于最底层。
商品 / 活动数量	同一个内容区域最多只能配置一个商品 / 活动承载组件；商品 Tab 与活动组件互斥，不可同时存在。不同一级 Tab 可分别配置自己的商品 Tab 或活动组件。
一级 Tab 底部规则	当任一一级 Tab 内容中配置了商品 Tab 或活动组件时，页面级一级 Tab 组件需固定在页面底部业务区前方；普通组件新增时插入到一级 Tab 之前，返回顶部作为悬浮组件位于最底层。
搜索入口互斥	页面级搜索与一级 Tab 内搜索全局互斥：页面级搜索存在时，不允许在任一一级 Tab 内新增搜索；任一一级 Tab 已配置搜索时，不允许再新增页面级搜索。多个一级 Tab 可分别配置自己的搜索，但每个 Tab 下最多一个。
搜索范围	页面级搜索范围覆盖当前页面内的商品 Tab、横向商品、活动组件；一级 Tab 内搜索仅检索当前 Tab 内的商品 Tab、横向商品、活动组件。固定头部搜索文案固定为“搜索商品”，内容区域搜索文案可配置。
倒计时展示	倒计时标题最多 10 个字；默认颜色按 UI 标注展示。倒计时单位由系统按剩余时间自动判断：大于等于 24 小时展示天 / 时 / 分 / 秒，不足 24 小时展示时 / 分 / 秒，运营不手动配置时分秒显示格式。
历史地址处理	搭投页编辑保存后生成新的页面地址，历史地址不可访问；保存前后需要提示运营同步更新 APP 图标、Banner、活动入口等外部入口链接，避免继续指向旧地址。
验收补充	需验证商品组件入口为下线态且不可新增；商品 Tab 默认不展示分组 Tab；切换为展示后不显示外层商品选择 / 编辑，并出现分组列表、默认选中 Tab 项、Tab 样式和吸顶配置；商品 Tab 与活动组件重复添加时有明确提示。
客户端类型	版本管理需要将 Android、iOS、鸿蒙作为独立客户端类型维护。鸿蒙版本号、更新方式和跳转地址可能与 Android、iOS 不一致，不能用“其他”或“Android 兼容”代替。
更新跳转	Android 点击更新后返回首页下载或进入 Android 更新流程；iOS 跳转 App Store；鸿蒙跳转鸿蒙应用市场 / 更新渠道。具体跳转地址和更新方式由客户端与版本管理模块确认。
未预埋版本拦截	老版本前端不具备新版搭投识别和提示能力；后端识别该版本不支持新版搭投后返回错误或特定错误码，前端收到后端错误后引导用户更新，不渲染新版搭投内容。
预埋版本拦截	前端已预埋新版搭投识别逻辑；前端识别当前版本不满足新版搭投展示要求时直接提示用户更新，不渲染新版搭投内容。
更新提示弹窗	标题：需要更新 APP；内容：当前版本暂不支持该活动页，请更新至最新版本后查看。按钮：立即更新、返回上一页。
多端适配风险	Android、iOS、鸿蒙三端版本能力、版本号规则、更新渠道和下载地址可能不一致，需要分别配置和验证，避免鸿蒙端漏配导致无法拦截或跳转错误。
验收补充	需分别验证 Android、iOS、鸿蒙老版本拦截、更新提示弹窗、立即更新跳转和返回上一页；同时验证未预埋版本由后端错误触发更新引导，预埋版本由前端直接提示更新。

UI Spec

七、UI 标注标准

标注对象	已确认参数
单张 Banner 图	宽度 1125px，高度根据图片自适应；支持非铺满和铺满两种展示。
两图左右	单张宽度 528px，高度根据图片自适应，左右两张图保持等高。
状态栏及导航栏背景图	1125px × 444px。
内容区域搜索默认区域背景色	#DA2014。
搜索框背景色	#FFFFFF。
搜索框描边	2px #FFFFFF。
默认文案及搜索图标颜色	#7D7D7E。
横向商品模块背景图	1077px × 552px。
商品 Tab 分组模式背景色	#DA2014；仅启用商品分组后展示。
商品 Tab 分组模式选中态背景色	#FFFFFF。
商品 Tab 分组模式选中态文字颜色	#FF6466。
商品 Tab 分组模式未选中态背景色	#FF6466。
商品 Tab 分组模式未选中态文字颜色	#FFFFFF。

图片上传尺寸提示

上传位置	建议尺寸	单张大小限制	说明
状态栏及导航栏背景图	1125 × 444px	以现有上传组件校验为准	用于 APP 顶部状态栏及导航栏背景。
页面背景图	建议宽度 1125px，高度可延展	≤ 1MB	背景颜色作为底色，背景图可叠加展示。
单张 Banner 图	宽度 1125px，高度自适应	≤ 800KB	用于大 Banner、单张活动入口图；非铺满时左右保留边距，铺满时横向贴满页面宽度。
两图左右	单张宽度 528px，高度自适应	≤ 500KB / 张	左右两张图需保持等高和相同视觉比例。
横向商品模块背景图	1077 × 552px	≤ 800KB	用于横向商品模块背景。
横向商品标题图	以 UI 设计稿为准	≤ 300KB	避免标题文字裁切。
倒计时背景图	以 UI 设计稿为准	≤ 500KB	局部组件背景。
倒计时 icon	以 UI 设计稿为准	≤ 100KB	未上传时使用默认红色闹钟 icon。
返回顶部图标	正方形图标，以 UI 设计稿为准	≤ 100KB	未上传时使用默认图标。

本期不做上传后裁剪功能。

所有图片上传入口统一建议支持 JPG、JPEG、PNG、WebP，不建议 GIF；文件名建议使用英文、数字、短横线、下划线，不允许上传损坏图片或空文件。普通活动页图片总大小建议 ≤ 5MB，大型专题页建议 ≤ 8MB；超过建议值时中台提示运营压缩图片，是否强制阻断由研发按现有上传能力评估。图片尺寸不符合建议值时提示，不做自动裁剪、压缩和素材库能力。