首页/文档中心/设计文档/设计规格文档

排面 ShelfCheck 设计规格文档

B 端产品设计规格 · v1.0 | 更新日期 2026-09-04 | 关联:PRD 需求文档 · 功能结构图

快消品牌零售陈列智能巡检平台。业务员拍一张货架照片,AI 自动判定陈列是否合规,总部实时掌握全国门店的执行情况。

01角色模型

B 端产品的第一性原理:使用方、付费方、决策方不是同一个人。设计时必须同时满足三方,任何一方的诉求被忽略都会导致项目失败。

角色是谁核心诉求关键痛点(设计要解决的问题)
使用方 业务员 / 巡店督导
日均 15–30 家门店
10 秒完成一次巡检,别让我填表 门店常在地下室没信号;单手操作还要扶货架;原有流程要填 12 个字段;拍完不知道合不合格,白跑一趟
付费方 品牌市场部 / 渠道部 拿到真实的全国陈列数据,用于考核与决策 业务员用旧照片造假;总部人工审照片成本极高;数据滞后一个月,等发现问题时活动已结束
决策方 品牌 IT / 采购 数据安全、能对接现有系统、可审计 担心门店数据出内网;要求 SSO 单点登录;要求数据可对接现有 BI;要求离职员工权限可回收
设计推论:移动端一切围绕「业务员省时间」——能自动识别的就绝不手填、必须离线可用、结果要当场给。Web 端一切围绕「总部防造假 + 看得清」——照片要带水印时间戳和 GPS、异常要主动推给督导、数据要能筛能导。

02用户故事

按角色拆解,每条都对应一个具体的设计决策。

业务员(移动端)

  1. 作为业务员,我希望打开 App 就看到今天要跑哪几家店,不用自己记行程 → 首页任务列表 + 地图视图
  2. 我希望拍照后自动识别,不用手填任何表单 → AI 识别结果页,补充信息全部选填
  3. 我希望没网也能用,到有信号的地方自动上传 → 本地队列 + 弱网同步 + 同步状态可见
  4. 我希望当场就知道合不合格,不合格能立刻整改重拍 → 识别结果页给结论 + 整改建议 + 一键重拍
  5. 我希望知道照片有没有传成功,别让我背锅 → 明确的同步状态标识

督导(移动端 + Web)

  1. 作为督导,我希望只看到异常门店,不用翻几百条正常记录 → 异常告警列表为默认入口
  2. 我希望看到业务员的历史轨迹和拍照元数据,判断是否存在造假 → 详情页展示 GPS、设备型号、时间戳、连拍数量
  3. 我希望一键派发整改任务给对应业务员 → 异常详情内直接派单

市场部(Web)

  1. 作为市场部,我希望按区域 / 渠道 / 时间多维看排面达标率 → 数据看板 + 交叉筛选
  2. 我希望一键导出报表给领导汇报 → 全站统一的导出入口
  3. 我希望自己配置什么叫「达标」,不用每次找厂商改代码 → 规则配置页

IT(Web 后台)

  1. 作为 IT,我希望用企业微信 / 钉钉扫码登录,不要再维护一套账号密码 → SSO 集成
  2. 我希望数据存在境内且可私有化部署 → 部署方案说明(销售侧)
  3. 我希望所有操作留痕,出事能追溯 → 操作日志

03核心业务流程

业务员主流程(移动端)

登录→今日任务列表→到店打卡(GPS 校验 + 拍照水印)→ 拍摄货架(取景引导 + 实时质量检测)→本地缓存(离线队列)→ AI 识别→结果页→ 合格 → 提交 / 不合格 → 整改后重拍→ 提交→后台同步(弱网自动重试)→完成

总部复核流程(Web)

登录→数据看板→异常告警列表(系统自动标记疑似造假 / 严重不达标)→ 巡检详情(照片 + AI 标注图层 + 元数据)→ 人工复核:通过 / 驳回(必填原因)/ 标记存疑→ 驳回则生成整改任务→推送给业务员
关键的异常分支(设计别漏):① 拍照时 AI 实时提示「画面模糊 / 偏斜 / 过暗」,在上传前就拦截废片;② GPS 与门店坐标偏差超过 500 米时,打卡标记「位置异常」并强制填写说明;③ 检测到与历史照片高度相似时,自动标记「疑似复用照片」并进入人工复核队列。这三条是防造假的核心。

04信息架构

移动端 App · 业务员 / 督导
首页 · 今日巡检 · 进度摘要条(完成 / 剩余) · 筛选 Tab(全部·待巡检·已完成·已逾期) · 门店卡片列表 / 地图视图切换 巡检执行 · 到店打卡 · 拍照引导 (取景框·示例图·实时质量提示·连拍) · AI 识别中 · 识别结果 (结论·标注图·问题清单·整改建议) · 补充信息 (竞品活动拍照·备注,均选填) · 提交成功 历史记录 · 我的巡检列表 · 详情 · 同步状态 我的 · 个人信息 · 数据同步 · 设置 · 帮助
Web 管理后台 · 督导 / 市场部 / IT
数据看板 · 核心指标卡 ×4 · 达标率趋势(折线) · 区域对比(条形) · 异常门店 Top10 巡检记录 · 筛选(区域·门店·业务员·时间·状态) · 批量通过 / 驳回 / 导出 · 列表 → 详情(照片·标注·元数据·复核) 异常告警 · 待处理列表 · 派发整改任务 · 处理记录 门店管理 · 门店列表 · 批量导入 · 编辑 · 坐标维护 人员管理 · 账号 · 角色权限 · 区域分配 规则配置 · 陈列标准(排面数·位置·价签·竞品) · 达标阈值 · 告警规则 系统设置 · SSO 集成 · 操作日志 · 数据导出

05逐页设计规格

移动端以 375 × 812 pt(iPhone X 基准)设计,8pt 栅格;Web 端以 1440px 为基准,内容区最大宽度 1280px。

M1 · 今日任务列表(移动端首页)

M1 今日任务列表375 × 812 · 滚动列表
  • 顶栏(高 88,含状态栏):标题「今日巡检」17px/600 居左;右侧日历图标(切换日期)
  • 进度摘要条(高 56,主色浅底 #E6F1FB,圆角 8,左右边距 16):左侧「今日 8 家 · 已完成 3」14px;右侧进度环 24px
  • 筛选 Tab(高 44):全部 / 待巡检 / 已完成 / 已逾期,选中态下划线 2px 主色
  • 门店卡片(高 104,圆角 12,白底 + 1px 边框,间距 12):
    • 左侧状态色条 4px 宽通高:待巡检 #888780 / 进行中 #185FA5 / 已完成 #0F6E56 / 已逾期 #A32D2D
    • 第一行:门店名 16px/600 + 右侧距离标签 12px/次要(如「1.2km」)
    • 第二行:地址 13px/次要 + 渠道标签(便利店 / 商超 / 夫妻店,浅底圆角标签)
    • 第三行:计划时间 + 上次达标率 12px/次要
    • 右侧 chevron 图标
  • 底部悬浮按钮:选中门店后显示「开始巡检」,距底 24,左右边距 16,高 48,主色实心
  • 空状态:插画 + 「今天没有巡检任务」+ 次要按钮「查看历史」

M2 · 拍照引导(核心页面)

M2 拍照引导375 × 812 · 相机全屏
  • 顶栏:返回箭头 + 标题「拍摄货架」+ 右侧文字按钮「看示例」
  • 取景框:居中 3:4 矩形(宽 281 × 高 375),四角 L 型描边 3px 主色;框外半透明黑蒙版 rgba(0,0,0,.45)
  • 引导文案(取景框上方 16,居中 13px 白字):「请将整个货架排面完整放入框内」
  • 实时质量提示(取景框下方 16,高 28 的胶囊):
    • 检测中:灰底「正在检测画面…」
    • 已对齐:绿底「画面清晰,可以拍摄」
    • 有问题:琥珀底「画面偏斜,请正对货架」/「光线过暗,请开闪光灯」/「距离过近」
  • 底部操作区(高 120):
    • 中央快门按钮:直径 72,白色圆环 + 主色实心圆,长按连拍
    • 左侧:相册图标(导入已有照片)44×44
    • 右侧:闪光灯开关 44×44
  • 张数指示(快门按钮上方):「已拍 2/3 张」,13px 白字
  • 拍摄完成:底部上滑出缩略图列(可删可重拍)+「开始识别」主按钮

M3 · AI 识别中

M3 AI 识别中375 × 812 · 过渡态
  • 全屏浅底,中央进度环 96px(主色描边 + 百分比数字 20px/600)
  • 下方文案 15px:「正在识别货架…」
  • 分步骤子文案 13px/次要,每步约 1 秒依次点亮:① 矫正透视 ② 识别商品 ③ 比对陈列标准 ④ 生成结论
  • 已完成的步骤前方显示主色对勾
  • 离线降级:无网时提示「当前离线,将在联网后自动识别」,照片进入本地队列,任务卡片显示「待识别」

M4 · 识别结果(最核心页面)

M4 识别结果375 × 812 · 滚动页 + 固定底栏
  • 结果卡片(高 132,圆角 12,边距 16):
    • 达标:浅绿底 #E1F5EE,主文案「陈列达标」16px/600
    • 未达标:浅琥珀底 #FAEEDA,主文案「未达标,建议整改」
    • 达标率大字:32px/600,右侧,如「85%」
    • 一句话结论 13px:「排面数不足,缺少 2 个 SKU」
  • AI 标注图(高 240,圆角 12,可点击全屏查看):原图 + 彩色描边方框标注识别到的商品与问题区域;右上角开关「显示标注」
  • 问题清单(每项错误卡片高 72,间距 8):
    • 左侧语义色圆点 + 问题标题 14px/600
    • 说明 13px/次要(如「第 3 层缺货,标准 6 个排面,实际 4 个」)
    • 右侧严重程度标签:一般(灰)/ 较重(琥珀)/ 严重(红)
  • 整改建议卡片(灰底 #F7F6F2,圆角 8):标题「建议动作」+ 编号列表,13px
  • 固定底栏(高 88,白底 + 顶部分隔线 + 安全区内边距):
    • 达标时:次要按钮「重新拍摄」+ 主按钮「提交结果」(各占一半)
    • 未达标时:次要按钮「直接提交」+ 主按钮「整改后重拍」

M5 · 补充信息(提交前)

M5 补充信息375 × 812 · 表单页
  • B 端原则:能自动采集的绝不手填,此页字段全部选填
  • 竞品活动拍照:加号上传区 96×96 虚线框,最多 3 张,文案「发现竞品促销?拍一张(选填)」
  • 现场备注:多行输入框,高 96,占位符「其他需要说明的情况(选填)」,右下角字数 0/200
  • 同步状态提示条(顶部,若离线):琥珀底「当前离线,提交后将自动上传」
  • 底栏:主按钮「提交」,高 48
  • 提交成功页:主色对勾动画 + 「提交成功」+ 次要信息「本次巡检已同步 / 待联网同步」+ 两个文字按钮「查看记录」「返回首页」

W1 · 数据看板(Web)

W1 数据看板1440 · 内容区 1280
  • 页头(高 64):标题「数据看板」20px/600;右侧:时间范围选择器(今日 / 近 7 天 / 近 30 天 / 自定义)+ 区域筛选 + 渠道筛选 + 「导出」次要按钮
  • 指标卡区(4 张横排,各高 112,间距 16,圆角 12,白底 + 1px 边框):
    • 结构:指标名 13px/次要 → 数值 28px/600 → 环比 12px
    • 四张:今日巡检数 / 排面达标率 / 异常门店数 / 门店覆盖率
    • 环比配色:正向绿色 #0F6E56,负向红色 #A32D2D,持平灰色
  • 图表区(两列,各高 320,间距 16):左「达标率趋势」折线图(近 30 天,带目标线虚线);右「各区域达标率」横向条形图(降序)
  • 异常门店 Top10:紧凑表格,列 = 排名 / 门店 / 区域 / 业务员 / 达标率 / 状态 / 操作
  • 所有图表支持 hover 显示明细;点击图表元素可下钻到巡检记录列表(带上筛选条件)

W2 · 巡检记录列表(Web)

W2 巡检记录列表1440 · 表格页
  • 筛选栏(可折叠,展开高 88):区域 / 门店 / 业务员 / 时间范围 / 状态 + 「查询」「重置」
  • 批量操作栏(选中行后出现在表格上方,高 48,浅底):「已选 12 条」+ 「批量通过」「批量驳回」「导出选中」+ 「取消选择」
  • 数据表格:
    • 列:缩略图(64×64) / 门店 / 业务员 / 提交时间 / 达标率 / 状态 / 操作
    • 行高 64(含缩略图),分隔线 1px,hover 行浅底
    • 状态列彩色标签:待复核(灰)/ 已通过(绿)/ 已驳回(红)/ 存疑(琥珀)/ 疑似造假(红 + 图标)
    • 达标率、提交时间列支持排序
    • 操作列:查看 / 通过 / 驳回(文字按钮,间距 12)
    • 分页:每页 20 / 50 / 100 可选,位于右下
  • 空状态 / 无结果:插画 + 「没有符合条件的记录」+ 「清空筛选」

W3 · 巡检详情(Web,复核主页面)

W3 巡检详情1440 · 双栏 60/40
  • 左栏 60%(照片区):
    • 主图区(高 480,圆角 12,浅灰底):照片居中,支持滚轮缩放、拖拽平移
    • 顶部浮层开关:「显示 AI 标注」默认开启
    • 底部缩略图列:本次巡检的多角度照片,可切换
    • 右下角:原图下载按钮
  • 右栏 40%(信息区,可独立滚动):
    • 基础信息块:门店名 / 地址 / 业务员 / 提交时间 / 渠道类型(键值对,行高 32)
    • 防造假元数据块(灰底卡片,标题「拍摄信息」):GPS 坐标 + 与门店距离 / 设备型号 / 拍摄时间戳 / 连拍张数 / 网络状态。距离异常时该行标红并显示告警图标
    • AI 判定明细表:列 = 检查项 / 标准要求 / 实际 / 结果。行 = 排面数 / 陈列位置 / 价签 / 竞品挤压 / 缺货情况
    • 人工复核操作区(页面底部固定):「通过」主按钮 + 「驳回」危险按钮(点击弹出对话框,必填驳回原因)+ 「标记存疑」文字按钮
    • 操作日志(折叠面板):谁在什么时间做了什么

06设计规范

色彩(语义化,勿滥用)

主色 Primary
#185FA5
浅底 #E6F1FB
成功 Success
#0F6E56
浅底 #E1F5EE
警告 Warning
#854F0B
浅底 #FAEEDA
危险 Danger
#A32D2D
浅底 #FCEBEB
主文字
#2C2C2A
次要 #5F5E5A
辅助文字
#888780
边框 #D3D1C7
页面底色
#F1EFE8
卡片 #FFFFFF

字体与间距

层级字号 / 字重用途
页面标题20px / 600Web 页头;移动端顶栏用 17px/600
卡片标题16px / 600门店名、区块标题
正文14px / 400列表项、表格内容、说明文字
次要信息13px / 400地址、时间、辅助说明
标签 / 提示12px / 400状态标签、距离、字数统计
数值强调28–32px / 600指标卡数值、达标率

字体栈:-apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;正文行高 1.6。

间距基于 8pt 栅格:4 / 8 / 12 / 16 / 24 / 32 / 48。页面左右边距移动端 16、Web 24。圆角:小组件 8,卡片 12,按钮与标签全圆。

组件清单(画设计稿前先建这套组件库)

基础

按钮(主/次/文字/危险/禁用)
输入框 · 选择器 · 日期范围
复选框 · 单选 · 开关

数据展示

状态标签(5 态)
指标卡 · 数据表格 · 分页
进度环 · 进度条 · 空状态

反馈

Toast · 对话框 · 抽屉
加载骨架屏 · 结果页
告警条 · 操作日志

导航

底部 Tab(移动端)
侧边导航(Web)
筛选 Tab · 面包屑

业务组件

门店卡片 · 巡检结果卡
问题清单项 · 标注图查看器
拍照引导框 · 同步状态条

图表

折线(趋势 + 目标线)
横向条形(区域对比)
环形(覆盖率)

07Pixso AI 提示词

下面三段提示词可直接粘进 Pixso 的 AI 生成。建议一次只生成一页,生成后发我文件链接,我用 MCP 读回来逐条审查。

提示词 A · 移动端首页(今日任务列表)
请生成一个移动端 App 页面设计稿,尺寸 375×812 pt。

产品名称:排面 ShelfCheck(快消品牌零售陈列巡检工具)
页面名称:今日任务列表(首页)

整体风格:专业 B 端工具风格,干净克制,主色为深蓝 #185FA5,辅助色使用绿色 #0F6E56 表示完成、琥珀色 #854F0B 表示警告、红色 #A32D2D 表示逾期。背景浅灰 #F1EFE8,卡片白色圆角 12pt。中文字体使用苹方/微软雅黑。

页面从上到下包含:
1. 顶部导航栏,高度 88,白色背景,左侧标题「今日巡检」17pt 加粗,右侧一个日历图标按钮
2. 进度摘要条,高度 56,浅蓝底 #E6F1FB,圆角 8,距左右各 16。左侧文字「今日 8 家 · 已完成 3」14pt,右侧一个 24pt 的环形进度指示器
3. 筛选 Tab 栏,高度 44,四个选项横向排列:全部、待巡检、已完成、已逾期,「全部」为选中态(下方有 2pt 主色下划线,文字主色)
4. 门店卡片列表,卡片之间间距 12,每张卡片高度 104,白色圆角 12,1pt 浅灰边框,内容分为三行:
   - 第一张卡片左侧有 4pt 宽的灰色竖条,标题「美宜佳(科技园店)」16pt 加粗,右侧灰色小字「1.2km」
   - 第二行灰色 13pt 小字「南山区科技园南区 A 座 1 楼」,右侧一个浅灰圆角标签写着「便利店」
   - 第三行灰色 12pt 小字「计划 09:30 · 上次达标 92%」
   - 最右侧一个灰色右箭头 chevron
   - 第二张卡片左侧竖条为蓝色 #185FA5,第三张为绿色 #0F6E56,第四张为红色 #A32D2D
5. 页面底部悬浮一个主色实心按钮,高度 48,距底部 24,距左右各 16,文字「开始巡检」

要求:所有文字使用简体中文,内容真实可信,不要出现占位符或 lorem ipsum。间距遵循 8pt 栅格。
提示词 B · 识别结果页(移动端最核心页面)
请生成一个移动端 App 页面设计稿,尺寸 375×812 pt。

产品名称:排面 ShelfCheck(快消品牌零售陈列巡检工具)
页面名称:AI 识别结果页

整体风格:专业 B 端工具风格,主色深蓝 #185FA5,成功绿 #0F6E56,警告琥珀 #854F0B,危险红 #A32D2D。页面背景浅灰 #F1EFE8,白色卡片圆角 12pt。中文字体使用苹方/微软雅黑。

页面从上到下包含:
1. 顶部导航栏,标题「识别结果」17pt 加粗,左侧返回箭头
2. 结果卡片,高度 132,琥珀色浅底 #FAEEDA,圆角 12,距左右 16。左侧大字「未达标,建议整改」16pt 加粗,下方 13pt 说明文字「排面数不足,缺少 2 个 SKU」。右侧超大数字「85%」32pt 加粗,下方小字「达标率」12pt 灰色
3. AI 标注图区域,高度 240,圆角 12,内容为一张超市饮料货架的照片示意图,照片上有若干彩色矩形描边标注框(蓝色框标注正常商品,红色框标注问题区域),右上角有一个小开关标签「显示标注」
4. 问题清单,标题「发现 3 处问题」14pt 加粗。下面三张问题卡片,每张高度 72,间距 8,白色圆角 8,内含:
   - 左侧一个 8pt 圆点(第一张红色、第二张琥珀色、第三张灰色)
   - 标题 14pt 加粗,如「排面缺货」「陈列位置偏移」「价签缺失」
   - 下方 13pt 灰色说明,如「第 3 层缺货,标准 6 个排面,实际 4 个」
   - 右侧一个小圆角标签:严重(红底)、较重(琥珀底)、一般(灰底)
5. 整改建议卡片,浅灰底 #F7F6F2,圆角 8,标题「建议动作」13pt 加粗,下方编号列表 13pt:「1. 补充 2 个 SKU 至第 3 层」「2. 将主推品调整至黄金视线层」「3. 补齐价签」
6. 页面底部固定操作栏,高度 88,白色背景,顶部 1pt 分隔线,内含两个并排按钮:左侧次要按钮「直接提交」(白底主色边框),右侧主色实心按钮「整改后重拍」

要求:所有文字使用简体中文,内容真实可信。间距遵循 8pt 栅格。
提示词 C · Web 数据看板
请生成一个 Web 管理后台页面设计稿,尺寸 1440×900 px,内容区最大宽度 1280 居中。

产品名称:排面 ShelfCheck(快消品牌零售陈列巡检平台)
页面名称:数据看板

整体风格:专业 B 端数据看板,干净克制,主色深蓝 #185FA5,正向指标绿色 #0F6E56,负向指标红色 #A32D2D。页面背景浅灰 #F1EFE8,卡片白色圆角 12pt,1pt 浅灰边框。中文字体使用苹方/微软雅黑。

页面从上到下包含:
1. 左侧固定侧边导航栏,宽度 208,白色背景,顶部有产品 Logo「排面 ShelfCheck」,下方六个导航项:数据看板(选中态)、巡检记录、异常告警、门店管理、人员管理、规则配置,最底部是「系统设置」
2. 右侧内容区,页头高度 64:左侧标题「数据看板」20pt 加粗,右侧依次是时间范围选择器「近 30 天」、区域下拉「全部区域」、渠道下拉「全部渠道」,最右侧一个次要按钮「导出」
3. 四个指标卡片横排,每张高度 112,间距 16,白色圆角 12,内部从上到下:13pt 灰色指标名、28pt 加粗数值、12pt 环比(上升绿色配向上箭头,下降红色配向下箭头):
   - 「今日巡检数」1,284,环比「较昨日 +12%」绿色
   - 「排面达标率」86.5%,环比「较上周 +3.2%」绿色
   - 「异常门店数」37,环比「较昨日 -8%」绿色
   - 「门店覆盖率」78.2%,环比「较上周 -1.5%」红色
4. 两个图表卡片并排,各占一半宽度,高度 320,间距 16,白色圆角 12:
   - 左侧「达标率趋势」折线图,横轴为最近 30 天日期,纵轴为百分比 60%–100%,有一条虚线目标线标注「目标 85%」,折线为主色,下方带浅色渐变面积
   - 右侧「各区域达标率」横向条形图,从上到下 6 个区域(华东、华南、华北、华中、西南、东北),条形按达标率降序排列,达标率高于 85% 的条形为绿色,低于 85% 为琥珀色
5. 底部一个卡片,标题「异常门店 Top 10」,高度 320,内部为紧凑数据表格,列依次为:排名、门店名称、区域、业务员、达标率、状态标签、操作。状态标签使用彩色圆角标签:已通过(绿)、已驳回(红)、待复核(灰)、疑似造假(红)

要求:所有文字使用简体中文,数值真实可信。间距遵循 8pt 栅格。图表使用示意数据,不要出现乱码。
生成建议:Pixso AI 一次生成一页效果最好。先跑提示词 A,生成后把文件链接发我,我用 MCP 读回来检查布局、间距、配色、组件命名是否规范,给你具体的修改清单,然后我们再跑 B 和 C。别贪多一次生成三页——AI 生成复杂页面时越贪心越容易糊。
页面数据均为模拟 · 照片与 IP 形象由 AI 生成 · 设计稿在 Pixso 以可编辑图层交付(含组件库页)