你是一名资深产品经理 + UI/UX 原型设计师。请基于我上传的图片,生成一张中文产品需求示意图 / 原型说明图,用于说明「小票打印模板选择优化」。 【输入图片】 我会上传以下图片: 1. 后台系统「编辑设备」弹窗截图; 2. 「小票模板」下拉框展开截图; 3. 四张小票实物图,或四张单独的小票图。 【背景问题】 当前「小票模板」有 4 种打印模式。是否带二维码比较容易理解,但“字体大号 / 字体小号”用户不看小票实物很难判断效果。因此需要在选择模板时增加可视化预览,让用户做到「所见即所得」。 【整体输出】 请生成专业、清晰、可直接放进 PRD / 需求评审文档 / 研发说明文档中的中文需求示意图。 整体风格参考企业后台系统:白色 / 浅灰背景,蓝色用于当前选择和流程指引,红色只用于标注模板差异。 【画面结构】 画面上半部分:展示「编辑设备」弹窗,保留现有系统风格和主要字段: - 设备名称 - 设备编号 - 设备类型 - 设备SN - 固定型号 - 小票模板 - 打印张数 - 设备地址 - 配对码 - 关联档口 - 取消按钮 - 保存按钮 重点展示「小票模板」下拉框。下拉框选项需要重新命名为: A. 二维码小字版(带二维码·字体小号) B. 二维码大字版(带二维码·字体大号) C. 无二维码大字版(不带二维码·字体大号) D. 无二维码小字版(不带二维码·字体小号) 画面下半部分:增加「小票预览(4 种打印模式对比)」区域。请将 4 张小票并排展示,形成横向对比卡片。 【四种模板和小票实物的映射关系,必须严格遵守】 A = 编号 002 的小票:带二维码,字体小号,信息更紧凑。 B = 编号 004 的小票:带二维码,字体大号,核心信息更醒目。 C = 编号 001 的小票:不带二维码,字体大号,票面更短。 D = 编号 003 的小票:不带二维码,字体小号,信息更紧凑,票面更短。 注意: - A 必须对应编号 002。 - B 必须对应编号 004。 - C 必须对应编号 001。 - D 必须对应编号 003。 - 不要把 A 和 B 的小票样式复制混用。 - 不要把有二维码的小票做成无二维码。 - 不要把无二维码的小票凭空加上二维码。 【当前选择高亮规则】 请输出两个场景,可以是两张图,也可以是一张图里包含两个示意区。 场景 1: 标题:需求示意图 01|选择 A 时的所见即所得效果 要求: - 下拉框当前选中 A. 二维码小字版(带二维码·字体小号) - 小票预览区中,A 小票用蓝色边框高亮 - A 小票上方加蓝色标签「当前选择」 - B、C、D 小票保持普通灰色边框,不要高亮 场景 2: 标题:需求示意图 02|选择 B 时的所见即所得效果 要求: - 下拉框当前选中 B. 二维码大字版(带二维码·字体大号) - 小票预览区中,B 小票用蓝色边框高亮 - B 小票上方加蓝色标签「当前选择」 - A、C、D 小票保持普通灰色边框,不要高亮 【红色差异标注规则】 请把 4 张小票之间真正影响模板理解的差异用红色标出来,方便研发、测试、业务方快速理解。 必须标红的差异: 1. 二维码差异 - A、B:用红色框线圈出二维码区域,并标注「有二维码」。 - C、D:不要凭空画二维码;可以在底部或二维码对应位置画红色虚线框,并标注「无二维码,票面更短」。 2. 字体大小差异 请重点用红框或红色标签标注这些位置: - 取餐号 / 序号区域,例如 001、002、003、004; - 「取餐方式:堂食」这一行; - 菜品名称区域; - 「实付金额:1.00元」区域。 在 B、C 上标注:大字号 / 核心信息更醒目。 在 A、D 上标注:小字号 / 信息更紧凑。 3. 票面长度和内容疏密差异 - A、B 因为带二维码,底部二维码区域占空间,小票更长; - C、D 因为不带二维码,底部区域更短,票面更短; - 可以用红色括号、红色箭头或红色虚线框说明。 不要标红的内容: - 订单时间 - 订单编号 - 订单人 - 支付时间 - 取餐号数字本身的不同 - 菜品名称具体内容差异 这些属于样例数据差异,不是模板差异。 【右侧说明卡片】 请在画面右侧增加 3 到 4 个说明卡片,使用蓝色图标 + 中文说明。 建议内容: 卡片 1:命名优化 内容:用 A/B/C/D + 清晰描述,避免用户只看到“字体大/小”而难以判断。 卡片 2:所见即所得 内容:用户选择某个模板后,下方同步展示 4 种小票样式,并高亮当前选择。 卡片 3:差异标红 内容:把二维码、字号、票面长度等关键差异标红,帮助用户快速理解。 卡片 4:交互目标 内容:降低选择成本,让用户保存前就能确认实际打印效果。 【视觉规范】 - 蓝色 = 当前选择、流程箭头、主操作按钮。 - 红色 = 模板差异标注。 - 灰色 = 未选中状态。 - 红色标注不要遮挡小票核心内容。 - 4 张小票必须并排展示。 - 每张小票上方必须有 A/B/C/D 名称。 - 当前选择必须非常明显。 - 中文文字尽量清晰,不要乱码。 - 不要添加人物、卡通元素、无关装饰。 最终效果要让别人一眼看懂: 1. 下拉框有 4 种小票模板; 2. A/B/C/D 分别代表什么; 3. 选择 A 或 B 后,哪张小票会被高亮; 4. 4 种小票到底哪里不一样; 5. 红色代表差异,蓝色代表当前选择。