创意预览图

生成一张微信小程序竖屏UI设计图,宽高比9:16,深色专业风,与之前智宅焕UI风格保持一致,为客户提交订单前的最后确认页面,同时包含支付成功反馈状态示意。 从上到下布局: 1. 顶部步骤指示器:步骤条

用户头像

678typ3ch-H...

2026.07.04
生成一张微信小程序竖屏UI设计图,宽高比9:16,深色专业风,与之前智宅焕UI风格保持一致,为客户提交订单前的最后确认页面,同时包含支付成功反馈状态示意。 从上到下布局: 1. 顶部步骤指示器:步骤条为①服务模式 ✓ → ②城市选择 ✓ → ③服务与计价 ✓ → ④确认支付,当前第④步确认支付高亮。 2. 区域一:订单确认信息,区域标题“确认订单”,圆角只读订单信息卡片展示:订单编号(标注:待生成,支付后显示)、项目名称「张先生家智能改造」、项目地址「上海市闵行区XX路XX号」、户型面积「120㎡」、项目类型「平层」、服务模式「现场服务」、预期上门「2026-07-15」。 3. 区域二:服务明细,标题“服务明细”,列表展示:「现场安装调试 ×1 —— ¥800」、「智能方案设计 ×120㎡ —— ¥1,800」,列表底部横线分隔后展示:服务总计¥2,600。 4. 区域三:支付方式,标题“支付方式”,展示默认选中的微信支付(带对勾图标),标注文字“复用产品支付流程,具体支付界面由微信标准组件完成”。 5. 底部固定悬浮操作区:左侧文字“应付总额:¥2,600”,右侧主色高亮大按钮“立即支付”。 在页面下方用虚线框标注支付成功状态:虚线框上方标注“支付成功后 ↓”,框内包含✓支付成功图标、文字“支付成功”、订单编号「ZXH20260703001」、订单状态标签「已支付(待审核)」、按钮“查看项目看板”、小字提示「管理员审核通过后将为您派单,请耐心等待」。 订单信息和服务明细为核心内容,要一目了然,支付成功状态变化清晰,所有文字清晰可见,使用无衬线字体,整体风格和前序设计保持统一。生成一张微信小程序竖屏UI设计图,宽高比9:16,深色专业风,与之前智宅焕UI风格保持一致,为客户提交订单前的最后确认页面,同时包含支付成功反馈状态示意。
从上到下布局:
1. 顶部步骤指示器:步骤条为①服务模式 ✓ → ②城市选择 ✓ → ③服务与计价 ✓ → ④确认支付,当前第④步确认支付高亮。
2. 区域一:订单确认信息,区域标题“确认订单”,圆角只读订单信息卡片展示:订单编号(标注:待生成,支付后显示)、项目名称「张先生家智能改造」、项目地址「上海市闵行区XX路XX号」、户型面积「120㎡」、项目类型「平层」、服务模式「现场服务」、预期上门「2026-07-15」。
3. 区域二:服务明细,标题“服务明细”,列表展示:「现场安装调试 ×1 —— ¥800」、「智能方案设计 ×120㎡ —— ¥1,800」,列表底部横线分隔后展示:服务总计¥2,600。
4. 区域三:支付方式,标题“支付方式”,展示默认选中的微信支付(带对勾图标),标注文字“复用产品支付流程,具体支付界面由微信标准组件完成”。
5. 底部固定悬浮操作区:左侧文字“应付总额:¥2,600”,右侧主色高亮大按钮“立即支付”。
在页面下方用虚线框标注支付成功状态:虚线框上方标注“支付成功后 ↓”,框内包含✓支付成功图标、文字“支付成功”、订单编号「ZXH20260703001」、订单状态标签「已支付(待审核)」、按钮“查看项目看板”、小字提示「管理员审核通过后将为您派单,请耐心等待」。
订单信息和服务明细为核心内容,要一目了然,支付成功状态变化清晰,所有文字清晰可见,使用无衬线字体,整体风格和前序设计保持统一。
生成一张微信小程序竖屏UI设计图,宽高比9:16,深色专业风,与智宅焕前序UI风格保持一致,是下单流程核心页面,客户可在此选配服务、查看计价、填写项目信息,页面内容可滚动。 从上到下布局: 1. 顶部步骤指示器:步骤条为「①服务模式 ✓ → ②城市选择 ✓ → ③服务与计价(当前高亮)→ ④确认支付(置灰)」。 2. 区域一:添加服务与计价,区域标题“选择服务”,全宽虚线边框“+ 添加服务”按钮,下方展示2个已添加服务卡片,核心信息清晰: 服务卡片1:名称“现场安装调试”,标签“按数量计价”,数量选择器[-] 1 [+],单价¥800/次,小计¥800,右侧×删除按钮。 服务卡片2:名称“智能方案设计”,标签“按面积分档”,面积输入框“120 ㎡”,单价¥15/㎡,小计¥1,800,右侧×删除按钮。 卡片下方实时突出展示“服务总计:¥2,600”。 3. 区域二:填写项目信息,区域标题“项目信息”,依次排列表单占位字段: 项目名称输入框(占位“如:张先生家智能改造”),项目地址(已选城市 + 详细地址输入框,占位“请填写详细地址”),户型面积数字输入框(占位“㎡”),项目类型下拉选择(选项:平层/复式/别墅/工装/其他),需求描述多行文本输入框(占位“请描述您的项目需求...”,标注选填),关联已购产品订单下拉选择框(占位“选择历史订单”,标注选填)。 资料上传区:虚线框上传按钮,带“+ 上传文件”图标,提示文字“请上传户型图、清单、现场照片等资料,有助于我们更快审核您的订单”。 4. 底部固定悬浮操作区:左侧突出展示“订单总价:¥2,600”,右侧主色高亮按钮“提交订单并支付”。 已添加服务卡片为核心信息区,总价视觉突出,所有文字清晰可见,使用无衬线字体,整体风格与前序设计保持统一。生成一张微信小程序竖屏UI设计图,宽高比9:16,深色专业风,与智宅焕前序UI风格保持一致,是下单流程核心页面,客户可在此选配服务、查看计价、填写项目信息,页面内容可滚动。
从上到下布局:
1. 顶部步骤指示器:步骤条为「①服务模式 ✓ → ②城市选择 ✓ → ③服务与计价(当前高亮)→ ④确认支付(置灰)」。
2. 区域一:添加服务与计价,区域标题“选择服务”,全宽虚线边框“+ 添加服务”按钮,下方展示2个已添加服务卡片,核心信息清晰:
服务卡片1:名称“现场安装调试”,标签“按数量计价”,数量选择器[-] 1 [+],单价¥800/次,小计¥800,右侧×删除按钮。
服务卡片2:名称“智能方案设计”,标签“按面积分档”,面积输入框“120 ㎡”,单价¥15/㎡,小计¥1,800,右侧×删除按钮。
卡片下方实时突出展示“服务总计:¥2,600”。
3. 区域二:填写项目信息,区域标题“项目信息”,依次排列表单占位字段:
项目名称输入框(占位“如:张先生家智能改造”),项目地址(已选城市 + 详细地址输入框,占位“请填写详细地址”),户型面积数字输入框(占位“㎡”),项目类型下拉选择(选项:平层/复式/别墅/工装/其他),需求描述多行文本输入框(占位“请描述您的项目需求...”,标注选填),关联已购产品订单下拉选择框(占位“选择历史订单”,标注选填)。
资料上传区:虚线框上传按钮,带“+ 上传文件”图标,提示文字“请上传户型图、清单、现场照片等资料,有助于我们更快审核您的订单”。
4. 底部固定悬浮操作区:左侧突出展示“订单总价:¥2,600”,右侧主色高亮按钮“提交订单并支付”。
已添加服务卡片为核心信息区,总价视觉突出,所有文字清晰可见,使用无衬线字体,整体风格与前序设计保持统一。
生成一张微信小程序竖屏UI设计图,宽高比9:16,深色专业风,与智宅焕前序关联订单页UI风格保持一致,仅修改区域一为项目筛选,其他区域(简化下单流程、补充信息、底部操作区、关联成功状态示意)保持原有内容不变。 修正后的区域一:关联项目筛选,区域标题“关联至项目”,核心交互为微信小程序标准下拉筛选框,占位文字“请选择要关联的项目”,右侧带向下箭头示意可展开;展开下拉列表后,展示客户名下3个示例项目,每条项目记录格式:项目名称 + 项目地址 + 项目类型 + 面积,示例项目: 1. 张先生家智能改造 - 上海市闵行区 - 平层 120㎡ 2. 李女士家灯光升级 - 上海市浦东新区 - 复式 180㎡ 3. 王总办公室智能化 - 上海市静安区 - 工装 300㎡ 选中项目后,下拉框展示选中项目名称,下方自动填充只读项目基本信息卡片:项目地址「上海市闵行区XX路XX号」、户型面积「120㎡」、项目类型「平层」,卡片底部小字提示“以上信息来自主项目,不可修改”;在页面底部增加黄色警示条提示:“主项目信息不完整,请先返回主项目完善信息后再关联订单”(主项目信息不完整场景示意)。 下拉筛选框要清晰展示展开/收起状态,选中项目信息自动填充且视觉上体现不可修改,所有文字清晰可见,使用无衬线字体,整体风格与原页面保持一致。生成一张微信小程序竖屏UI设计图,宽高比9:16,深色专业风,与智宅焕前序关联订单页UI风格保持一致,仅修改区域一为项目筛选,其他区域(简化下单流程、补充信息、底部操作区、关联成功状态示意)保持原有内容不变。
修正后的区域一:关联项目筛选,区域标题“关联至项目”,核心交互为微信小程序标准下拉筛选框,占位文字“请选择要关联的项目”,右侧带向下箭头示意可展开;展开下拉列表后,展示客户名下3个示例项目,每条项目记录格式:项目名称 + 项目地址 + 项目类型 + 面积,示例项目:
1. 张先生家智能改造 - 上海市闵行区 - 平层 120㎡
2. 李女士家灯光升级 - 上海市浦东新区 - 复式 180㎡
3. 王总办公室智能化 - 上海市静安区 - 工装 300㎡
选中项目后,下拉框展示选中项目名称,下方自动填充只读项目基本信息卡片:项目地址「上海市闵行区XX路XX号」、户型面积「120㎡」、项目类型「平层」,卡片底部小字提示“以上信息来自主项目,不可修改”;在页面底部增加黄色警示条提示:“主项目信息不完整,请先返回主项目完善信息后再关联订单”(主项目信息不完整场景示意)。
下拉筛选框要清晰展示展开/收起状态,选中项目信息自动填充且视觉上体现不可修改,所有文字清晰可见,使用无衬线字体,整体风格与原页面保持一致。
生成一张微信小程序竖屏UI设计图,宽高比9:16,深色专业风,与智宅焕前序UI风格保持一致,为客户支付成功后的完整项目看板页面,页面内容可滚动。 从上到下布局: 1. 顶部项目状态栏:显示项目名称“张先生家智能改造”,橙色标签“服务中”订单状态,小字灰色订单编号“ZXH20260703001”。 2. 互动沟通区:区域标题“项目沟通”,右侧红点醒目提示“● 2条新消息”,简易留言板样式,展示最近3条对话:左侧师傅消息带“张师傅”标签「我已到现场,开始安装开关面板」,右侧客户消息「好的,客厅的开关请先装」,左侧师傅消息「收到,预计下午3点完成开关安装」;底部有消息输入框、“发送”按钮,输入框旁有📎附件按钮。 3. 验收确认区(当前核心操作区,突出展示):区域标题“验收确认”,当前状态展示“待验收 - 师傅已提交完工资料”,有一个边框样式“查看交付物”按钮,占位展示交付物缩略图区域(几张照片缩略图+文件图标),主色高亮大按钮“确认验收”,下方小字提示“如72小时内未确认且未提出异议,系统将自动完成验收”。 4. 评价区:区域标题“服务评价”,状态提示“验收完成后可进行评价”(当前整体置灰),占位灰色不可点击的五星评价组件和置灰评价文字输入框。 5. 历史订单列表:区域标题“历史订单”,列表展示两条订单:第一条主订单:编号ZXH20260703001,类型现场安装调试,时间2026-07-03,标签状态服务中,金额¥2,600;第二条关联订单:编号ZXH20260705001,类型智能锁安装,时间2026-07-05,标签状态已完成,金额¥350。 6. 底部固定按钮区:全宽次要按钮“关联订单”,全宽低调警示色按钮“发起争议”。 四个区域用清晰分隔线或卡片间距区分,所有文字清晰可见,使用无衬线字体,整体风格和前序智宅焕设计保持统一。生成一张微信小程序竖屏UI设计图,宽高比9:16,深色专业风,与智宅焕前序UI风格保持一致,为客户支付成功后的完整项目看板页面,页面内容可滚动。
从上到下布局:
1. 顶部项目状态栏:显示项目名称“张先生家智能改造”,橙色标签“服务中”订单状态,小字灰色订单编号“ZXH20260703001”。
2. 互动沟通区:区域标题“项目沟通”,右侧红点醒目提示“● 2条新消息”,简易留言板样式,展示最近3条对话:左侧师傅消息带“张师傅”标签「我已到现场,开始安装开关面板」,右侧客户消息「好的,客厅的开关请先装」,左侧师傅消息「收到,预计下午3点完成开关安装」;底部有消息输入框、“发送”按钮,输入框旁有📎附件按钮。
3. 验收确认区(当前核心操作区,突出展示):区域标题“验收确认”,当前状态展示“待验收 - 师傅已提交完工资料”,有一个边框样式“查看交付物”按钮,占位展示交付物缩略图区域(几张照片缩略图+文件图标),主色高亮大按钮“确认验收”,下方小字提示“如72小时内未确认且未提出异议,系统将自动完成验收”。
4. 评价区:区域标题“服务评价”,状态提示“验收完成后可进行评价”(当前整体置灰),占位灰色不可点击的五星评价组件和置灰评价文字输入框。
5. 历史订单列表:区域标题“历史订单”,列表展示两条订单:第一条主订单:编号ZXH20260703001,类型现场安装调试,时间2026-07-03,标签状态服务中,金额¥2,600;第二条关联订单:编号ZXH20260705001,类型智能锁安装,时间2026-07-05,标签状态已完成,金额¥350。
6. 底部固定按钮区:全宽次要按钮“关联订单”,全宽低调警示色按钮“发起争议”。
四个区域用清晰分隔线或卡片间距区分,所有文字清晰可见,使用无衬线字体,整体风格和前序智宅焕设计保持统一。
生成一张微信小程序竖屏UI设计图,宽高比9:16,深色专业风,与智宅焕前序UI风格保持一致,为师傅登录后看到的任务管理中心首页。 从上到下布局: 1. 顶部师傅身份标识:显示“您好,张师傅” + 圆形头像占位,下方小字“今日待处理:2单”。 2. Tab切换栏:三个Tab横向排列,当前选中的Tab高亮+下划线,分别为:待接单(当前高亮,带红色数字角标“2”)、进行中、已完成,Tab切换为核心交互,当前选中Tab醒目。 3. 当前展示Tab内容区:待接单列表,包含两张圆角带阴影任务卡片: 卡片1:橙色标签“现场安装调试”,客户城市“上海”,项目面积“120㎡”,预计上门时间“2026-07-15”,绿色标签“时间可协商”,醒目突出展示本单佣金“¥560”,不展示客户支付总价,底部左侧主色高亮“接单”按钮,右侧灰色边框“拒绝”按钮,按钮操作突出。 卡片2:蓝色标签“智能方案设计”,客户城市“上海”,项目面积“90㎡”,预计上门时间“2026-07-18”,橙色标签“时间定死”,醒目突出展示本单佣金“¥350”,底部操作按钮同卡片1。 4. 用虚线框标注切换至进行中Tab的内容示意:标注“切换至‘进行中’Tab ↓”,包含两张任务卡片,分别为:现场安装调试,上海,140㎡,蓝色标签“待上门”,佣金¥800,主色按钮“进入工作台”;灯具安装,上海,140㎡,橙色标签“服务中”,佣金¥300,主色按钮“进入工作台”。 5. 用虚线框标注切换至已完成Tab的内容示意:标注“切换至‘已完成’Tab ↓”,包含一张任务卡片:智能锁安装,上海,100㎡,完成时间“2026-06-28”,佣金¥200,灰色边框按钮“查看详情”。 佣金金额醒目展示,不展示客户支付总价,所有文字清晰可见,使用无衬线字体,整体风格与前序智宅焕深色专业设计保持一致。生成一张微信小程序竖屏UI设计图,宽高比9:16,深色专业风,与智宅焕前序UI风格保持一致,为师傅登录后看到的任务管理中心首页。
从上到下布局:
1. 顶部师傅身份标识:显示“您好,张师傅” + 圆形头像占位,下方小字“今日待处理:2单”。
2. Tab切换栏:三个Tab横向排列,当前选中的Tab高亮+下划线,分别为:待接单(当前高亮,带红色数字角标“2”)、进行中、已完成,Tab切换为核心交互,当前选中Tab醒目。
3. 当前展示Tab内容区:待接单列表,包含两张圆角带阴影任务卡片:
卡片1:橙色标签“现场安装调试”,客户城市“上海”,项目面积“120㎡”,预计上门时间“2026-07-15”,绿色标签“时间可协商”,醒目突出展示本单佣金“¥560”,不展示客户支付总价,底部左侧主色高亮“接单”按钮,右侧灰色边框“拒绝”按钮,按钮操作突出。
卡片2:蓝色标签“智能方案设计”,客户城市“上海”,项目面积“90㎡”,预计上门时间“2026-07-18”,橙色标签“时间定死”,醒目突出展示本单佣金“¥350”,底部操作按钮同卡片1。
4. 用虚线框标注切换至进行中Tab的内容示意:标注“切换至‘进行中’Tab ↓”,包含两张任务卡片,分别为:现场安装调试,上海,140㎡,蓝色标签“待上门”,佣金¥800,主色按钮“进入工作台”;灯具安装,上海,140㎡,橙色标签“服务中”,佣金¥300,主色按钮“进入工作台”。
5. 用虚线框标注切换至已完成Tab的内容示意:标注“切换至‘已完成’Tab ↓”,包含一张任务卡片:智能锁安装,上海,100㎡,完成时间“2026-06-28”,佣金¥200,灰色边框按钮“查看详情”。
佣金金额醒目展示,不展示客户支付总价,所有文字清晰可见,使用无衬线字体,整体风格与前序智宅焕深色专业设计保持一致。
生成一张微信小程序竖屏UI设计图,宽高比9:16,深色专业风,与智宅焕前序UI风格保持一致,为客户在已有项目下追加购买新服务的简化下单页面,页面内容可滚动。 从上到下布局: 1. 顶部导航:左上角“← 返回项目看板”,页面标题“关联订单”。 2. 区域一:项目信息(自动复用只读),区域标题“关联至项目”,灰色底色只读卡片展示从主项目复用的信息:项目名称「张先生家智能改造」、项目地址「上海市闵行区XX路XX号」、户型面积「120㎡」、项目类型「平层」,卡片底部小字提示“以上信息来自主项目,不可修改。如需修改,请返回主项目编辑”,清晰展示不可修改状态。 3. 区域二:简化下单流程,简化步骤条「①选择服务模式 → ②添加服务与计价 → ③确认支付」,服务模式选择为两个互斥卡片,和前序设计风格一致:当前选中卡片A“远程服务”,未选中卡片B“现场服务”;“+ 添加服务”按钮,下方展示一个已添加服务卡片:服务名称“智能锁安装”,计价方式一口价,单价¥350/次,小计¥350。下单流程比主项目简化,保留核心步骤。 4. 区域三:补充信息,选填多行文本需求描述输入框(占位“补充说明...”),选填虚线框资料上传区域。 5. 底部固定悬浮操作区:左侧“应付总额:¥350”,右侧主色高亮按钮“提交并支付”。 页面下方用虚线框标注支付成功状态:标注“支付成功后 ↓”,框内说明新订单自动关联至主项目,展示订单编号,提示文字“该订单已关联至‘张先生家智能改造’项目”,通过标注和文字清晰表达关联逻辑。 所有文字清晰可见,使用无衬线字体,整体风格与前序智宅焕深色专业设计保持一致。生成一张微信小程序竖屏UI设计图,宽高比9:16,深色专业风,与智宅焕前序UI风格保持一致,为客户在已有项目下追加购买新服务的简化下单页面,页面内容可滚动。
从上到下布局:
1. 顶部导航:左上角“← 返回项目看板”,页面标题“关联订单”。
2. 区域一:项目信息(自动复用只读),区域标题“关联至项目”,灰色底色只读卡片展示从主项目复用的信息:项目名称「张先生家智能改造」、项目地址「上海市闵行区XX路XX号」、户型面积「120㎡」、项目类型「平层」,卡片底部小字提示“以上信息来自主项目,不可修改。如需修改,请返回主项目编辑”,清晰展示不可修改状态。
3. 区域二:简化下单流程,简化步骤条「①选择服务模式 → ②添加服务与计价 → ③确认支付」,服务模式选择为两个互斥卡片,和前序设计风格一致:当前选中卡片A“远程服务”,未选中卡片B“现场服务”;“+ 添加服务”按钮,下方展示一个已添加服务卡片:服务名称“智能锁安装”,计价方式一口价,单价¥350/次,小计¥350。下单流程比主项目简化,保留核心步骤。
4. 区域三:补充信息,选填多行文本需求描述输入框(占位“补充说明...”),选填虚线框资料上传区域。
5. 底部固定悬浮操作区:左侧“应付总额:¥350”,右侧主色高亮按钮“提交并支付”。
页面下方用虚线框标注支付成功状态:标注“支付成功后 ↓”,框内说明新订单自动关联至主项目,展示订单编号,提示文字“该订单已关联至‘张先生家智能改造’项目”,通过标注和文字清晰表达关联逻辑。
所有文字清晰可见,使用无衬线字体,整体风格与前序智宅焕深色专业设计保持一致。
生成一张微信小程序竖屏UI设计图,宽高比9:16,深色专业风,与智宅焕整套UI体系保持一致,为客户在自动验收前24小时收到的全屏强制提醒弹窗,全屏半透明深色遮罩,中央居中展示圆角带阴影弹窗卡片,宽度占屏幕80%,必须点击按钮才能关闭。 弹窗从上到下布局: 1. 顶部:中央醒目的⏰提醒图标,图标下方橙色警示色标题“自动验收提醒”。 2. 中部核心信息:展示订单信息:订单编号“ZXH20260703001”,项目名称“张先生家智能改造”,服务内容“现场安装调试”,分隔线后居中大字核心提示“您的订单将于24小时后自动完成验收”,下方小字“如对交付结果有异议,请及时处理”,再下方小字“超时未处理,系统将自动完成验收,订单状态变更为‘已完成’”,时间信息大而清晰,弹窗醒目有紧迫感。 3. 底部操作区:纵向排列两个按钮,间距适中:主色高亮大按钮“确认验收”(点击进入验收确认流程),警示色边框按钮“发起争议”(点击进入争议发起页面),按钮下方灰色弱化文字链接“稍后处理”(点击关闭弹窗,系统将持续提醒)。 页面底部虚线框标注关闭弹窗后的状态:标注“关闭弹窗后 ↓”,框内示意:弹窗关闭后,项目看板顶部展示黄色提示条“您的订单将于24小时后自动验收,如有问题请及时处理”,提示条右侧有“立即处理”按钮。 两个核心操作按钮提供明确下一步路径,稍后处理为低优先级选项视觉弱化,所有文字清晰可见,使用无衬线字体,整体风格与智宅焕深色专业UI体系保持一致。生成一张微信小程序竖屏UI设计图,宽高比9:16,深色专业风,与智宅焕整套UI体系保持一致,为客户在自动验收前24小时收到的全屏强制提醒弹窗,全屏半透明深色遮罩,中央居中展示圆角带阴影弹窗卡片,宽度占屏幕80%,必须点击按钮才能关闭。
弹窗从上到下布局:
1. 顶部:中央醒目的⏰提醒图标,图标下方橙色警示色标题“自动验收提醒”。
2. 中部核心信息:展示订单信息:订单编号“ZXH20260703001”,项目名称“张先生家智能改造”,服务内容“现场安装调试”,分隔线后居中大字核心提示“您的订单将于24小时后自动完成验收”,下方小字“如对交付结果有异议,请及时处理”,再下方小字“超时未处理,系统将自动完成验收,订单状态变更为‘已完成’”,时间信息大而清晰,弹窗醒目有紧迫感。
3. 底部操作区:纵向排列两个按钮,间距适中:主色高亮大按钮“确认验收”(点击进入验收确认流程),警示色边框按钮“发起争议”(点击进入争议发起页面),按钮下方灰色弱化文字链接“稍后处理”(点击关闭弹窗,系统将持续提醒)。
页面底部虚线框标注关闭弹窗后的状态:标注“关闭弹窗后 ↓”,框内示意:弹窗关闭后,项目看板顶部展示黄色提示条“您的订单将于24小时后自动验收,如有问题请及时处理”,提示条右侧有“立即处理”按钮。
两个核心操作按钮提供明确下一步路径,稍后处理为低优先级选项视觉弱化,所有文字清晰可见,使用无衬线字体,整体风格与智宅焕深色专业UI体系保持一致。
创意 × 4
生成一张微信小程序竖屏UI设计图,宽高比9:16,深色专业风,参考上传图片风格与智宅焕前序UI体系保持一致,为师傅点击进入工作台后的订单核心操作面板,内容较多可上下滚动。 从上到下布局: 1. 顶部导航:左上角“← 返回”,页面标题“订单工作台”,橙色标签“服务中”订单状态。 2. 区域一:项目信息区,区域标题“项目信息”,灰色底只读信息卡片:项目名称「张先生家智能改造」、项目地址「上海市闵行区XX路XX号」、项目概述「全屋智能开关安装,窗帘电机安装」、户型面积「120㎡」、项目类型「平层」、预期上门时间「2026-07-15」、标签「时间可协商」、可展开链接「关联产品订单:查看产品清单」。 3. 区域二:服务清单与佣金信息区,区域标题“服务与佣金”,服务明细卡片:服务名称「现场安装调试」、数量「1次」、佣金单价「¥560」、小计「¥560」,下方绿色文字展示“含远程补贴:¥80”,底部大字橙色突出展示“本单总佣金:¥640”,小字标注“此为完成本单后可获得的全部佣金”,佣金信息醒目展示。 4. 区域三:资料互动区,区域标题“资料与沟通”,子Tab切换:客户资料 | 我的上传 | 沟通记录,当前展示客户资料:文件列表占位示意:📄 户型图.pdf、🖼️ 客厅照片.jpg、🖼️ 开关位置图.png,每个文件右侧有“下载”按钮;虚线框示意切换至我的上传:“+ 上传文件”按钮,上传可选标签:户型图/现场照片/方案图纸/验收单/其他,占位已上传文件列表;虚线框示意切换至沟通记录:“+ 发起资料请求”,输入框+发送按钮,占位对话记录列表。 5. 区域四:关键操作区,区域标题“操作”,当前为安装调试师傅,全宽按钮依次展示:主色“预约客户”按钮,下方标注“已预约:2026-07-15 9:00”;主色“到达签到”按钮,下方标注“签到时间:9:03”;次要全宽按钮“签退及日志”,下方标注“填写今日工作概要(选填)”;高亮警示色全宽按钮“提交验收”,下方标注“上传完工照片或视频”;虚线框标注:“如角色为项目经理,额外展示 ↓”,额外展示按钮“项目经理审核”。 操作按钮清晰,状态明确,资料互动子Tab切换用虚线框示意即可,所有文字清晰可见,使用无衬线字体,整体风格与上传参考图及前序设计保持一致。生成一张微信小程序竖屏UI设计图,宽高比9:16,深色专业风,参考上传图片风格与智宅焕前序UI体系保持一致,为师傅点击进入工作台后的订单核心操作面板,内容较多可上下滚动。
从上到下布局:
1. 顶部导航:左上角“← 返回”,页面标题“订单工作台”,橙色标签“服务中”订单状态。
2. 区域一:项目信息区,区域标题“项目信息”,灰色底只读信息卡片:项目名称「张先生家智能改造」、项目地址「上海市闵行区XX路XX号」、项目概述「全屋智能开关安装,窗帘电机安装」、户型面积「120㎡」、项目类型「平层」、预期上门时间「2026-07-15」、标签「时间可协商」、可展开链接「关联产品订单:查看产品清单」。
3. 区域二:服务清单与佣金信息区,区域标题“服务与佣金”,服务明细卡片:服务名称「现场安装调试」、数量「1次」、佣金单价「¥560」、小计「¥560」,下方绿色文字展示“含远程补贴:¥80”,底部大字橙色突出展示“本单总佣金:¥640”,小字标注“此为完成本单后可获得的全部佣金”,佣金信息醒目展示。
4. 区域三:资料互动区,区域标题“资料与沟通”,子Tab切换:客户资料 | 我的上传 | 沟通记录,当前展示客户资料:文件列表占位示意:📄 户型图.pdf、🖼️ 客厅照片.jpg、🖼️ 开关位置图.png,每个文件右侧有“下载”按钮;虚线框示意切换至我的上传:“+ 上传文件”按钮,上传可选标签:户型图/现场照片/方案图纸/验收单/其他,占位已上传文件列表;虚线框示意切换至沟通记录:“+ 发起资料请求”,输入框+发送按钮,占位对话记录列表。
5. 区域四:关键操作区,区域标题“操作”,当前为安装调试师傅,全宽按钮依次展示:主色“预约客户”按钮,下方标注“已预约:2026-07-15 9:00”;主色“到达签到”按钮,下方标注“签到时间:9:03”;次要全宽按钮“签退及日志”,下方标注“填写今日工作概要(选填)”;高亮警示色全宽按钮“提交验收”,下方标注“上传完工照片或视频”;虚线框标注:“如角色为项目经理,额外展示 ↓”,额外展示按钮“项目经理审核”。
操作按钮清晰,状态明确,资料互动子Tab切换用虚线框示意即可,所有文字清晰可见,使用无衬线字体,整体风格与上传参考图及前序设计保持一致。
创意 × 4
生成一张微信小程序竖屏UI设计图,宽高比9:16,深色专业风,参考上传图片风格与智宅焕前序UI体系保持一致,为师傅端个人中心页面,管理个人信息、查看收入和提现,内容可上下滚动。 从上到下布局: 1. 顶部师傅身份卡片:圆形头像占位,师傅姓名“张建国”,蓝色标签“智能安装及调试师傅”,入驻时间“2025年3月通过认证”。 2. 区域一:收入概览,两个数据卡片横向排列,卡片1大字突出“累计收入 ¥48,560”,卡片2“累计接单 328单”,卡片下方链接“查看收入明细 →”,收入数据醒目展示。 3. 区域二:收入明细列表,区域标题“近期收入”,列表展示2条记录:第一条,订单编号ZXH20260628001,服务类型智能锁安装,完成时间2026-06-28,本单佣金¥200,绿色标签“已结算”;第二条,订单编号ZXH20260625001,服务类型现场安装调试,完成时间2026-06-25,本单佣金¥800,橙色标签“待结算”。 4. 区域三:提现操作,区域标题“提现”,突出展示“可提现金额:¥12,350”,主色高亮“申请提现”按钮,入口链接“提现记录 →”,提现入口清晰。 5. 区域四:账户与设置,列表菜单形式,包含:“个人信息 → 可点击进入编辑”、“接单偏好设置 → 标签“敬请期待”(初期预留)”、“服务区域管理 →”、“资质证明管理 →”、“通知设置 →”、“联系管理员 →”。 6. 区域五:个人信息编辑区,虚线框标注:“点击‘个人信息’后展开 ↓”,框内展示:姓名张建国(灰色,说明管理员维护不可修改)、手机号138****5678(灰色,管理员维护不可修改)、角色类型智能安装及调试师傅(管理员维护)、擅长品类标签组(管理员维护)、从业时间2016年(管理员维护)、居住城市上海(管理员维护)、服务区域上海市(管理员维护),底部按钮“申请修改个人信息”(提交后需管理员审核),明确区分管理员维护字段和师傅可申请修改字段。 预留功能用“敬请期待”标签示意,所有文字清晰可见,使用无衬线字体,整体风格与上传参考图及前序设计保持一致。生成一张微信小程序竖屏UI设计图,宽高比9:16,深色专业风,参考上传图片风格与智宅焕前序UI体系保持一致,为师傅端个人中心页面,管理个人信息、查看收入和提现,内容可上下滚动。
从上到下布局:
1. 顶部师傅身份卡片:圆形头像占位,师傅姓名“张建国”,蓝色标签“智能安装及调试师傅”,入驻时间“2025年3月通过认证”。
2. 区域一:收入概览,两个数据卡片横向排列,卡片1大字突出“累计收入 ¥48,560”,卡片2“累计接单 328单”,卡片下方链接“查看收入明细 →”,收入数据醒目展示。
3. 区域二:收入明细列表,区域标题“近期收入”,列表展示2条记录:第一条,订单编号ZXH20260628001,服务类型智能锁安装,完成时间2026-06-28,本单佣金¥200,绿色标签“已结算”;第二条,订单编号ZXH20260625001,服务类型现场安装调试,完成时间2026-06-25,本单佣金¥800,橙色标签“待结算”。
4. 区域三:提现操作,区域标题“提现”,突出展示“可提现金额:¥12,350”,主色高亮“申请提现”按钮,入口链接“提现记录 →”,提现入口清晰。
5. 区域四:账户与设置,列表菜单形式,包含:“个人信息 → 可点击进入编辑”、“接单偏好设置 → 标签“敬请期待”(初期预留)”、“服务区域管理 →”、“资质证明管理 →”、“通知设置 →”、“联系管理员 →”。
6. 区域五:个人信息编辑区,虚线框标注:“点击‘个人信息’后展开 ↓”,框内展示:姓名张建国(灰色,说明管理员维护不可修改)、手机号138****5678(灰色,管理员维护不可修改)、角色类型智能安装及调试师傅(管理员维护)、擅长品类标签组(管理员维护)、从业时间2016年(管理员维护)、居住城市上海(管理员维护)、服务区域上海市(管理员维护),底部按钮“申请修改个人信息”(提交后需管理员审核),明确区分管理员维护字段和师傅可申请修改字段。
预留功能用“敬请期待”标签示意,所有文字清晰可见,使用无衬线字体,整体风格与上传参考图及前序设计保持一致。
创意 × 4
生成一张网页端后台管理UI设计图,宽高比16:9,深色专业风格,深蓝灰底色,与后台管理端风格统一。 页面布局: 1. 左侧侧边导航栏,布局内容与第一张后台页面保持一致:顶部平台Logo+“智宅焕管理后台”,菜单项:订单管理(当前选中项,高亮显示)、服务产品配置、师傅管理、提现审核、系统设置。 2. 右侧为派单工作台内容区,分为三个区域: - 顶部订单概要区:标题文字“派单工作台”,下方以横向卡片形式展示只读订单概要信息:项目名称XXX,客户姓名/手机号,项目城市上海,项目地址上海市闵行区XX路XX号,预期上门时间2026-07-15,时间灵活性标签“时间可协商”,订单总服务数3项,订单总金额¥2,580;卡片右上角有一个低调样式“追加远程费”按钮。 - 中部任务拆分区:标题文字“任务拆分与指派”,下方纵向排列展示3个系统自动拆分的任务卡片,每个任务卡片:左侧信息区包含服务名称(如现场安装调试)、数量、服务城市、预期上门时间、时间灵活性标签、客户支付单价(灰色小字并标注“仅管理员可见”)、指派状态标签;右侧操作区包含“指派师傅”主色高亮按钮,“修改佣金”低调样式按钮,已指派时显示佣金金额。三个任务卡片分别是第一个“待指派”、第二个“已指派”、第三个“待指派”,状态区分清晰,任务拆分卡片为核心交互区需要突出展示。 - 底部操作区:固定悬浮在底部,包含“一键通知师傅”主色高亮按钮(提示所有任务已指派才可点击,否则置灰)和“返回订单列表”次要按钮,旁边附带提示文字“请先完成所有任务指派后,再通知师傅”,底部操作区始终可见。 所有文字清晰可见,使用无衬线字体,UI风格专业整洁,整体与上一张智宅焕管理后台设计风格保持统一。生成一张网页端后台管理UI设计图,宽高比16:9,深色专业风格,深蓝灰底色,与后台管理端风格统一。
页面布局:
1. 左侧侧边导航栏,布局内容与第一张后台页面保持一致:顶部平台Logo+“智宅焕管理后台”,菜单项:订单管理(当前选中项,高亮显示)、服务产品配置、师傅管理、提现审核、系统设置。
2. 右侧为派单工作台内容区,分为三个区域:
- 顶部订单概要区:标题文字“派单工作台”,下方以横向卡片形式展示只读订单概要信息:项目名称XXX,客户姓名/手机号,项目城市上海,项目地址上海市闵行区XX路XX号,预期上门时间2026-07-15,时间灵活性标签“时间可协商”,订单总服务数3项,订单总金额¥2,580;卡片右上角有一个低调样式“追加远程费”按钮。
- 中部任务拆分区:标题文字“任务拆分与指派”,下方纵向排列展示3个系统自动拆分的任务卡片,每个任务卡片:左侧信息区包含服务名称(如现场安装调试)、数量、服务城市、预期上门时间、时间灵活性标签、客户支付单价(灰色小字并标注“仅管理员可见”)、指派状态标签;右侧操作区包含“指派师傅”主色高亮按钮,“修改佣金”低调样式按钮,已指派时显示佣金金额。三个任务卡片分别是第一个“待指派”、第二个“已指派”、第三个“待指派”,状态区分清晰,任务拆分卡片为核心交互区需要突出展示。
- 底部操作区:固定悬浮在底部,包含“一键通知师傅”主色高亮按钮(提示所有任务已指派才可点击,否则置灰)和“返回订单列表”次要按钮,旁边附带提示文字“请先完成所有任务指派后,再通知师傅”,底部操作区始终可见。
所有文字清晰可见,使用无衬线字体,UI风格专业整洁,整体与上一张智宅焕管理后台设计风格保持统一。
生成一张微信小程序竖屏UI设计图,宽高比9:16,深色专业风,与智宅焕整套UI体系保持一致,为管理员在派单工作台点击“指派师傅”后弹出的底部选择弹窗,弹窗从底部弹出,覆盖页面约85%高度,背景为半透明黑色遮罩,弹窗顶部带圆角浅灰色标题栏。 弹窗布局: 1. 弹窗顶部:左侧标题“选择师傅”,右侧“×”关闭按钮。 2. 区域一:筛选条件区,紧凑排列三个筛选框:角色类型下拉选择框(占位“角色类型”,展开选项:智能安装及调试师傅 / 项目经理 / 方案设计师 / 照明设计师 / 售后师傅 / 专项电动窗帘师傅 / 专项智能锁师傅 / 专项电工师傅 / 专项空调暖通安调师傅 / 其他),擅长品类下拉多选框(占位“擅长品类”,展开选项:全屋调试 / 智能开关 / 窗帘电机 / 空调暖通 / 传感器 / 网络设备 / 灯具安装 / 其他),服务城市下拉选择框(默认选中“上海”,对应任务城市),筛选条件下方小尺寸主色“筛选”按钮,筛选条件紧凑不占过多空间。 3. 区域二:师傅列表,上下排列可滚动,展示至少3位师傅卡片,每张卡片: 师傅卡片1:左侧信息区:师傅姓名“张建国”,蓝色小标签“智能安装及调试师傅”,小号横排擅长品类标签“智能开关 / 窗帘电机 / 全屋调试”,服务区域“上海市”,累计接单量“328单”;右侧信息区:灰色小字“默认佣金比例:70%”(标注仅管理员可见),橙色突出展示“预计佣金:¥560”,旁边“修改”小按钮;卡片右侧主色高亮“选择”按钮。 师傅卡片2:左侧信息区:师傅姓名“李国强”,蓝色小标签“智能安装及调试师傅”,小号横排标签“智能开关 / 灯具安装 / 网络设备”,服务区域“上海市、苏州市”,累计接单量“156单”;右侧信息区:灰色小字“默认佣金比例:65%”,突出展示“预计佣金:¥520”,旁边“修改”小按钮;卡片右侧主色高亮“选择”按钮。 师傅卡片3:占位展示第三位师傅信息,保持同卡片格式。 4. 选中确认:点击选择后,对应师傅卡片增加高亮边框,弹窗底部出现确认条“已选择:张建国 | 佣金:¥560”,附带主色高亮“确认指派”按钮;点击确认后弹窗关闭,任务指派状态更新。 佣金金额醒目展示,仅管理员可见字段用灰色小字区分,所有文字清晰可见,使用无衬线字体,整体风格与智宅焕深色专业UI体系保持一致。生成一张微信小程序竖屏UI设计图,宽高比9:16,深色专业风,与智宅焕整套UI体系保持一致,为管理员在派单工作台点击“指派师傅”后弹出的底部选择弹窗,弹窗从底部弹出,覆盖页面约85%高度,背景为半透明黑色遮罩,弹窗顶部带圆角浅灰色标题栏。
弹窗布局:
1. 弹窗顶部:左侧标题“选择师傅”,右侧“×”关闭按钮。
2. 区域一:筛选条件区,紧凑排列三个筛选框:角色类型下拉选择框(占位“角色类型”,展开选项:智能安装及调试师傅 / 项目经理 / 方案设计师 / 照明设计师 / 售后师傅 / 专项电动窗帘师傅 / 专项智能锁师傅 / 专项电工师傅 / 专项空调暖通安调师傅 / 其他),擅长品类下拉多选框(占位“擅长品类”,展开选项:全屋调试 / 智能开关 / 窗帘电机 / 空调暖通 / 传感器 / 网络设备 / 灯具安装 / 其他),服务城市下拉选择框(默认选中“上海”,对应任务城市),筛选条件下方小尺寸主色“筛选”按钮,筛选条件紧凑不占过多空间。
3. 区域二:师傅列表,上下排列可滚动,展示至少3位师傅卡片,每张卡片:
师傅卡片1:左侧信息区:师傅姓名“张建国”,蓝色小标签“智能安装及调试师傅”,小号横排擅长品类标签“智能开关 / 窗帘电机 / 全屋调试”,服务区域“上海市”,累计接单量“328单”;右侧信息区:灰色小字“默认佣金比例:70%”(标注仅管理员可见),橙色突出展示“预计佣金:¥560”,旁边“修改”小按钮;卡片右侧主色高亮“选择”按钮。
师傅卡片2:左侧信息区:师傅姓名“李国强”,蓝色小标签“智能安装及调试师傅”,小号横排标签“智能开关 / 灯具安装 / 网络设备”,服务区域“上海市、苏州市”,累计接单量“156单”;右侧信息区:灰色小字“默认佣金比例:65%”,突出展示“预计佣金:¥520”,旁边“修改”小按钮;卡片右侧主色高亮“选择”按钮。
师傅卡片3:占位展示第三位师傅信息,保持同卡片格式。
4. 选中确认:点击选择后,对应师傅卡片增加高亮边框,弹窗底部出现确认条“已选择:张建国 | 佣金:¥560”,附带主色高亮“确认指派”按钮;点击确认后弹窗关闭,任务指派状态更新。
佣金金额醒目展示,仅管理员可见字段用灰色小字区分,所有文字清晰可见,使用无衬线字体,整体风格与智宅焕深色专业UI体系保持一致。
生成一张网页端后台管理UI设计图,宽高比16:9,深色专业风格,深蓝灰底色,整体为AI写作工作台的设计体系,是偏数据管理和控制感的管理员后台页面。 页面布局: 1. 左侧宽度占15%,为侧边导航栏,顶部显示平台Logo和“智宅焕管理后台”文字,菜单项依次为:订单管理、服务产品配置(当前选中项,高亮显示)、师傅管理、提现审核、系统设置。 2. 右侧为内容区,分为上下两个区域: - 上半部分为服务列表:顶部标题文字“服务产品管理”,右侧有一个主色高亮的“+ 新增服务”按钮;下方是服务列表表格,列标题为:服务名称 | 服务模式 | 计价方式 | 单价 | 开放城市 | 状态 | 操作;表格内展示3-4条示例数据行,每行右侧有“编辑”和“停用/启用”按钮,服务模式列使用蓝色标签“远程服务”、橙色标签“现场服务”区分。 - 下半部分为编辑表单区,标题文字“新增/编辑服务产品”;表单字段从上到下依次为:服务名称输入框,服务模式下拉选择框(选项:远程服务、现场服务),远程费开关(标注仅选择“现场服务”时出现,含开关按钮和说明文字输入框),开放城市城市选择器(标注仅现场服务时必填,远程服务时自动隐藏),计价方式下拉选择框(选项:一口价/按面积分档/按城市分档/按城市+面积分档/按次/按周期/阶梯计价/按数量),单价数字输入框,计价单位输入框(占位示例:套/次/天),数量选择开关按钮,服务详情大高度富文本编辑区;表单底部有“保存”按钮和“取消”按钮。 通过标注文字示意表单区域的字段联动关系,整体要体现功能完整的配置后台,所有文字清晰可见,使用无衬线字体,UI风格专业整洁。生成一张网页端后台管理UI设计图,宽高比16:9,深色专业风格,深蓝灰底色,整体为AI写作工作台的设计体系,是偏数据管理和控制感的管理员后台页面。
页面布局:
1. 左侧宽度占15%,为侧边导航栏,顶部显示平台Logo和“智宅焕管理后台”文字,菜单项依次为:订单管理、服务产品配置(当前选中项,高亮显示)、师傅管理、提现审核、系统设置。
2. 右侧为内容区,分为上下两个区域:
- 上半部分为服务列表:顶部标题文字“服务产品管理”,右侧有一个主色高亮的“+ 新增服务”按钮;下方是服务列表表格,列标题为:服务名称 | 服务模式 | 计价方式 | 单价 | 开放城市 | 状态 | 操作;表格内展示3-4条示例数据行,每行右侧有“编辑”和“停用/启用”按钮,服务模式列使用蓝色标签“远程服务”、橙色标签“现场服务”区分。
- 下半部分为编辑表单区,标题文字“新增/编辑服务产品”;表单字段从上到下依次为:服务名称输入框,服务模式下拉选择框(选项:远程服务、现场服务),远程费开关(标注仅选择“现场服务”时出现,含开关按钮和说明文字输入框),开放城市城市选择器(标注仅现场服务时必填,远程服务时自动隐藏),计价方式下拉选择框(选项:一口价/按面积分档/按城市分档/按城市+面积分档/按次/按周期/阶梯计价/按数量),单价数字输入框,计价单位输入框(占位示例:套/次/天),数量选择开关按钮,服务详情大高度富文本编辑区;表单底部有“保存”按钮和“取消”按钮。
通过标注文字示意表单区域的字段联动关系,整体要体现功能完整的配置后台,所有文字清晰可见,使用无衬线字体,UI风格专业整洁。
生成一张微信小程序竖屏UI设计图,宽高比为9:16,深色专业风,与智宅焕后台管理端深蓝灰色调统一,是客户点击开始下单后进入的下单选择页面。 从上到下布局: 1. 顶部步骤指示器:显示下单流程步骤条「①服务模式 → ②城市选择 → ③服务与计价 → ④确认支付」,当前①服务模式和②城市选择高亮,后续步骤置灰。 2. 区域一:选择服务模式,区域标题文字“选择服务模式”,两个大卡片上下排列,互斥选择,点击后切换选中状态: 卡片A(当前选中,带高亮边框):标题“远程服务”,副标题“无需师傅上门”,描述“适用于方案设计、远程技术支持等”,图标用💻示意; 卡片B(未选中):标题“现场服务”,副标题“需师傅上门”,描述“适用于需要师傅到现场的服务”,图标用🔧示意;两个决策卡片醒目,互斥关系清晰。 3. 区域二:选择服务城市,当前选中远程服务,因此用虚线框+文字标注“选择‘现场服务’后将显示城市选择”,示意条件触发状态切换;若选择现场服务,将展示区域标题“选择服务城市”、占位选择框“请选择项目所在城市”和对应提示文字。 4. 底部操作区:固定在底部,显示“下一步:选择服务”按钮,标注说明“当前选择为远程服务,城市选择步骤自动跳过,已完成当前步骤,按钮高亮可点击”。 整体风格清晰专业,所有文字清晰可见,使用无衬线字体,和已有智宅焕UI风格保持统一。生成一张微信小程序竖屏UI设计图,宽高比为9:16,深色专业风,与智宅焕后台管理端深蓝灰色调统一,是客户点击开始下单后进入的下单选择页面。
从上到下布局:
1. 顶部步骤指示器:显示下单流程步骤条「①服务模式 → ②城市选择 → ③服务与计价 → ④确认支付」,当前①服务模式和②城市选择高亮,后续步骤置灰。
2. 区域一:选择服务模式,区域标题文字“选择服务模式”,两个大卡片上下排列,互斥选择,点击后切换选中状态:
卡片A(当前选中,带高亮边框):标题“远程服务”,副标题“无需师傅上门”,描述“适用于方案设计、远程技术支持等”,图标用💻示意;
卡片B(未选中):标题“现场服务”,副标题“需师傅上门”,描述“适用于需要师傅到现场的服务”,图标用🔧示意;两个决策卡片醒目,互斥关系清晰。
3. 区域二:选择服务城市,当前选中远程服务,因此用虚线框+文字标注“选择‘现场服务’后将显示城市选择”,示意条件触发状态切换;若选择现场服务,将展示区域标题“选择服务城市”、占位选择框“请选择项目所在城市”和对应提示文字。
4. 底部操作区:固定在底部,显示“下一步:选择服务”按钮,标注说明“当前选择为远程服务,城市选择步骤自动跳过,已完成当前步骤,按钮高亮可点击”。
整体风格清晰专业,所有文字清晰可见,使用无衬线字体,和已有智宅焕UI风格保持统一。
生成一张微信小程序竖屏UI设计图,宽高比为9:16,深色专业风,与智宅焕后台管理端深蓝灰色调统一,是客户点击开始下单后进入的下单选择页面。 从上到下布局: 1. 顶部步骤指示器:显示下单流程步骤条「①服务模式 → ②城市选择 → ③服务与计价 → ④确认支付」,当前①服务模式和②城市选择高亮,后续步骤置灰。 2. 区域一:选择服务模式,区域标题文字“选择服务模式”,两个大卡片上下排列,互斥选择,点击后切换选中状态: 卡片A(当前选中,带高亮边框):标题“远程服务”,副标题“无需师傅上门”,描述“适用于方案设计、远程技术支持等”,图标用💻示意; 卡片B(未选中):标题“现场服务”,副标题“需师傅上门”,描述“适用于需要师傅到现场的服务”,图标用🔧示意;两个决策卡片醒目,互斥关系清晰。 3. 区域二:选择服务城市,当前选中远程服务,因此用虚线框+文字标注“选择‘现场服务’后将显示城市选择”,示意条件触发状态切换;若选择现场服务,将展示区域标题“选择服务城市”、占位选择框“请选择项目所在城市”和对应提示文字。 4. 底部操作区:固定在底部,显示“下一步:选择服务”按钮,标注说明“当前选择为远程服务,城市选择步骤自动跳过,已完成当前步骤,按钮高亮可点击”。 整体风格清晰专业,所有文字清晰可见,使用无衬线字体,和已有智宅焕UI风格保持统一。生成一张微信小程序竖屏UI设计图,宽高比为9:16,深色专业风,与智宅焕后台管理端深蓝灰色调统一,是客户点击开始下单后进入的下单选择页面。
从上到下布局:
1. 顶部步骤指示器:显示下单流程步骤条「①服务模式 → ②城市选择 → ③服务与计价 → ④确认支付」,当前①服务模式和②城市选择高亮,后续步骤置灰。
2. 区域一:选择服务模式,区域标题文字“选择服务模式”,两个大卡片上下排列,互斥选择,点击后切换选中状态:
卡片A(当前选中,带高亮边框):标题“远程服务”,副标题“无需师傅上门”,描述“适用于方案设计、远程技术支持等”,图标用💻示意;
卡片B(未选中):标题“现场服务”,副标题“需师傅上门”,描述“适用于需要师傅到现场的服务”,图标用🔧示意;两个决策卡片醒目,互斥关系清晰。
3. 区域二:选择服务城市,当前选中远程服务,因此用虚线框+文字标注“选择‘现场服务’后将显示城市选择”,示意条件触发状态切换;若选择现场服务,将展示区域标题“选择服务城市”、占位选择框“请选择项目所在城市”和对应提示文字。
4. 底部操作区:固定在底部,显示“下一步:选择服务”按钮,标注说明“当前选择为远程服务,城市选择步骤自动跳过,已完成当前步骤,按钮高亮可点击”。
整体风格清晰专业,所有文字清晰可见,使用无衬线字体,和已有智宅焕UI风格保持统一。
微信小程序装修套餐详情页,竖屏手机端UI界面,375px宽度比例,简约现代风格,白色为主背景色,信息清晰层次分明,突出套餐价值和信任感。主色调微信绿色#07C160,促销红色#FF4D4F,正文色#333,辅助文字色#999,分割线色#F0F0F0,卡片圆角12px,模块间距12px。页面从上到下包含以下模块:1.顶部导航栏:左侧灰色返回箭头,中间深灰色文字"套餐详情"标题,右侧灰色分享图标,白色背景底部1px浅灰分割线。2.套餐头图区:顶部大图占满宽度高约220px,展示干净明亮的卫生间翻新完工实景图,图片底部叠加半透明黑色渐变遮罩,白色文字"卫生间翻新套餐"20px加粗,下方白色小字"防水+瓷砖+洁具+吊顶 · 7天完工"。3.价格信息条:白色背景内边距16px,左侧大字"¥3,999"深绿色加粗26px,右侧原价"¥5,800"灰色删除线;价格下方灰色小字"约¥444/㎡ · 按实际面积结算";右上角红色圆角标签"限时9折"。4.套餐包含清单:白色圆角12px卡片,标题"套餐包含"深灰色加粗;下方纵向列表6项,每项左侧绿色对勾图标✓,中间项目名称+品牌+规格说明,右侧灰色小字单项参考价:防水工程东方雨虹柔性防水刷两遍价值¥800、墙地砖铺贴东鹏300×600瓷片含人工辅料价值¥1,600、吊顶工程铝扣板集成吊顶含LED灯价值¥600、洁具三件套箭牌马桶+浴室柜+花洒价值¥1,800、水电改造局部改造含管线材料价值¥500、竣工保洁+验收价值¥200;列表底部汇总行左侧"套餐总价值 ¥5,500"灰色,右侧红色"套餐价 ¥3,999 省¥1,501"。5.施工流程区:白色圆角12px卡片,标题"施工流程",横向时间轴样式5个节点从左到右:①上门量房→②方案确认→③材料进场→④施工安装→⑤验收交付,每个节点绿色圆形图标+下方步骤名称,节点之间绿色虚线连接。6.主材品牌区:白色圆角12px卡片,标题"精选主材",横向滑动4张品牌卡片每张宽约120px,上方品牌logo区域白色背景圆角矩形,下方品牌名称"东鹏瓷砖"+灰色小字"一线品牌·国标品质",卡片间距8px。7.前后对比区:白色圆角12px卡片,标题"完工效果",左右对比布局,左侧"施工前"BEFORE标签+旧卫生间偏暗旧照片,右侧"完工后"AFTER标签+翻新后明亮干净照片,两张图等宽并排中间白色竖线分割。8.业主评价区:白色圆角12px卡片,标题"已服务86户",评分"4.9分"黄色星星;下方2条评论,每条32px圆形用户头像+昵称+评分星星+2行文字内容+2张48px圆角买家秀小图;底部"查看全部评价 >"绿色文字。9.注意事项区:白色圆角12px卡片,标题"温馨提示",折叠手风琴样式3条:"套餐适用于6㎡以内卫生间""超出面积按实际用量补差价""施工期间需业主配合断水断电",每条右侧向下箭头">"。10.底部固定操作栏:高度64px白色背景顶部1px浅灰分割线,左侧客服图标+文字"咨询"和收藏图标+文字"收藏",右侧深绿色实心圆角按钮"立即预约 ¥3,999"白色加粗文字。整体视觉重点突出套餐价值感和专业信任感,高清商用UI设计稿,iPhone手机屏幕比例微信小程序装修套餐详情页,竖屏手机端UI界面,375px宽度比例,简约现代风格,白色为主背景色,信息清晰层次分明,突出套餐价值和信任感。主色调微信绿色#07C160,促销红色#FF4D4F,正文色#333,辅助文字色#999,分割线色#F0F0F0,卡片圆角12px,模块间距12px。页面从上到下包含以下模块:1.顶部导航栏:左侧灰色返回箭头,中间深灰色文字"套餐详情"标题,右侧灰色分享图标,白色背景底部1px浅灰分割线。2.套餐头图区:顶部大图占满宽度高约220px,展示干净明亮的卫生间翻新完工实景图,图片底部叠加半透明黑色渐变遮罩,白色文字"卫生间翻新套餐"20px加粗,下方白色小字"防水+瓷砖+洁具+吊顶 · 7天完工"。3.价格信息条:白色背景内边距16px,左侧大字"¥3,999"深绿色加粗26px,右侧原价"¥5,800"灰色删除线;价格下方灰色小字"约¥444/㎡ · 按实际面积结算";右上角红色圆角标签"限时9折"。4.套餐包含清单:白色圆角12px卡片,标题"套餐包含"深灰色加粗;下方纵向列表6项,每项左侧绿色对勾图标✓,中间项目名称+品牌+规格说明,右侧灰色小字单项参考价:防水工程东方雨虹柔性防水刷两遍价值¥800、墙地砖铺贴东鹏300×600瓷片含人工辅料价值¥1,600、吊顶工程铝扣板集成吊顶含LED灯价值¥600、洁具三件套箭牌马桶+浴室柜+花洒价值¥1,800、水电改造局部改造含管线材料价值¥500、竣工保洁+验收价值¥200;列表底部汇总行左侧"套餐总价值 ¥5,500"灰色,右侧红色"套餐价 ¥3,999 省¥1,501"。5.施工流程区:白色圆角12px卡片,标题"施工流程",横向时间轴样式5个节点从左到右:①上门量房→②方案确认→③材料进场→④施工安装→⑤验收交付,每个节点绿色圆形图标+下方步骤名称,节点之间绿色虚线连接。6.主材品牌区:白色圆角12px卡片,标题"精选主材",横向滑动4张品牌卡片每张宽约120px,上方品牌logo区域白色背景圆角矩形,下方品牌名称"东鹏瓷砖"+灰色小字"一线品牌·国标品质",卡片间距8px。7.前后对比区:白色圆角12px卡片,标题"完工效果",左右对比布局,左侧"施工前"BEFORE标签+旧卫生间偏暗旧照片,右侧"完工后"AFTER标签+翻新后明亮干净照片,两张图等宽并排中间白色竖线分割。8.业主评价区:白色圆角12px卡片,标题"已服务86户",评分"4.9分"黄色星星;下方2条评论,每条32px圆形用户头像+昵称+评分星星+2行文字内容+2张48px圆角买家秀小图;底部"查看全部评价 >"绿色文字。9.注意事项区:白色圆角12px卡片,标题"温馨提示",折叠手风琴样式3条:"套餐适用于6㎡以内卫生间""超出面积按实际用量补差价""施工期间需业主配合断水断电",每条右侧向下箭头">"。10.底部固定操作栏:高度64px白色背景顶部1px浅灰分割线,左侧客服图标+文字"咨询"和收藏图标+文字"收藏",右侧深绿色实心圆角按钮"立即预约 ¥3,999"白色加粗文字。整体视觉重点突出套餐价值感和专业信任感,高清商用UI设计稿,iPhone手机屏幕比例
微信小程序装修套餐列表页面,竖屏手机端UI界面,375px宽度比例,简约现代风格,白色背景浅灰色卡片。配色方案:主色调蓝色#2B6CB0,辅助色浅灰#F7F8FA,价格色红色#E53E3E,正文深灰#333,辅助文字#999,分割线#EEEEEE。页面布局从上到下:1.顶部导航栏:白色背景,左侧灰色返回箭头图标,中间深灰色文字标题"装修套餐"17px加粗,右侧无按钮,导航栏底部1px浅灰分割线。2.横向滑动分类标签栏:白色背景,横向排列6个分类标签:全部、卫生间、厨房、卧室、客厅、全屋整装;当前选中"全部",蓝色#2B6CB0文字加粗+底部蓝色下划线高亮,未选中灰色#666文字,标签可左右滑动,标签栏底部1px浅灰分割线。3.主体套餐卡片列表:纵向排列多张套餐卡片,每张卡片浅灰色#F7F8FA背景圆角12px,卡片间距12px,左右边距16px,内边距14px;每张卡片左侧是套餐效果图圆角矩形(如卫生间/厨房/卧室实景图),右侧上方套餐名称如"卫生间翻新套餐A"深灰色16px加粗,名称下方一行灰色小字标注面积范围和适用户型如"3-6㎡ · 适用于老房翻新",再下方是2-3个套餐亮点标签小圆角胶囊样式如"防水质保5年""环保材料""7天完工",浅蓝背景蓝色文字;卡片底部左侧套餐价格红色#E53E3E加粗如"¥9,800起"18px,右侧是"查看详情"按钮蓝色#2B6CB0实心圆角按钮白色文字。整体留白充足,信息层次清晰。4.底部TabBar:白色背景顶部1px浅灰分割线,4个Tab等分——首页、套餐、商城、我的;"套餐"Tab当前选中,图标和文字均为蓝色#2B6CB0,未选中图标灰色#999。整体干净简洁,适合28-55岁家装用户群体,高清商用UI设计稿,iPhone手机屏幕比例微信小程序装修套餐列表页面,竖屏手机端UI界面,375px宽度比例,简约现代风格,白色背景浅灰色卡片。配色方案:主色调蓝色#2B6CB0,辅助色浅灰#F7F8FA,价格色红色#E53E3E,正文深灰#333,辅助文字#999,分割线#EEEEEE。页面布局从上到下:1.顶部导航栏:白色背景,左侧灰色返回箭头图标,中间深灰色文字标题"装修套餐"17px加粗,右侧无按钮,导航栏底部1px浅灰分割线。2.横向滑动分类标签栏:白色背景,横向排列6个分类标签:全部、卫生间、厨房、卧室、客厅、全屋整装;当前选中"全部",蓝色#2B6CB0文字加粗+底部蓝色下划线高亮,未选中灰色#666文字,标签可左右滑动,标签栏底部1px浅灰分割线。3.主体套餐卡片列表:纵向排列多张套餐卡片,每张卡片浅灰色#F7F8FA背景圆角12px,卡片间距12px,左右边距16px,内边距14px;每张卡片左侧是套餐效果图圆角矩形(如卫生间/厨房/卧室实景图),右侧上方套餐名称如"卫生间翻新套餐A"深灰色16px加粗,名称下方一行灰色小字标注面积范围和适用户型如"3-6㎡ · 适用于老房翻新",再下方是2-3个套餐亮点标签小圆角胶囊样式如"防水质保5年""环保材料""7天完工",浅蓝背景蓝色文字;卡片底部左侧套餐价格红色#E53E3E加粗如"¥9,800起"18px,右侧是"查看详情"按钮蓝色#2B6CB0实心圆角按钮白色文字。整体留白充足,信息层次清晰。4.底部TabBar:白色背景顶部1px浅灰分割线,4个Tab等分——首页、套餐、商城、我的;"套餐"Tab当前选中,图标和文字均为蓝色#2B6CB0,未选中图标灰色#999。整体干净简洁,适合28-55岁家装用户群体,高清商用UI设计稿,iPhone手机屏幕比例
请生成一张“智宅焕·调度管家服务”宣传海报,中文,竖版,A4比例,背景纯白,主色调为深蓝与金橙。整体风格:极简商务、高信任感、信息清晰。 一、顶部标题区 主标题,大号粗体,深蓝色:“智宅焕·调度管家服务” 副标题,中号字体,深灰色:“您的专属项目管家 | 把‘操心’交给我,把‘赚钱’留给您” 底部用极细的金橙色线分割 二、核心价值区(三个并列图标卡片) 三个卡片横向排列,浅灰底,圆角 卡片1:图标(大脑图形),标题“帮您记着”,描述“所有项目节点,管家主动提醒” 卡片2:图标(调度图形),标题“帮您协调”,描述“您只需回复一个字,派单全搞定” 卡片3:图标(闭环图形),标题“帮您盯着”,描述“完工同步结果,进度一目了然” 三、职责边界区(用对比表格) 左侧深蓝色圆角矩形,白字:“管家做什么(核心职责)” 下方列表,左侧绿色小对勾图标: 建群梳理,输出《项目推进清单》 进度提醒,每个节点提前通知 按需派单,给出清晰选项和报价 完工闭环,回收结果同步进度 右侧深灰色圆角矩形,白字:“管家不做什么(责任边界)” 下方列表,左侧红色小叉图标: 不去现场(100%远程) 不做技术判断(由现场人员负责) 不为别人兜底(谁执行,谁负责) 四、服务流程区(用S形曲线串联6个节点) 标题:中号粗体,深蓝:“一个项目,管家怎么陪您走完?” 用一条S形虚线箭头串联6个图标和文字节点: 节点1“项目启动”(文档图标)→ 节点2“水电交底”(工具图标)→ 节点3“水电验收”(放大镜图标)→ 节点4“设备安装”(齿轮图标)→ 节点5“调试收尾”(扳手图标)→ 节点6“项目完工”(奖杯图标) 五、定价区(醒目的金橙色高亮卡片) 圆角矩形卡片,极浅金橙底色,深蓝色边框 主标题:“内测体验价(仅限首批客户)” 下方两行并列: “平层项目(200㎡以下):200元/项目” “别墅/复杂项目(200㎡以上):500元/项目” 最底部用极小号灰色字体注明:“*此价格为内测体验价,未来正式版将根据实际服务价值调整” 六、底部行动区 居中,一行大字,深蓝色:“让专业的管家,帮您管好每一个项目。” 最底部,公司名与联系方式占位符:“智宅焕 | 怕翻车,找智宅焕” 全局要求:所有图标简洁线性风格,文字清晰可读,版面疏密有致,信息层级分明,整体传递“严谨、可靠、不扯皮”的视觉感受。请生成一张“智宅焕·调度管家服务”宣传海报,中文,竖版,A4比例,背景纯白,主色调为深蓝与金橙。整体风格:极简商务、高信任感、信息清晰。

一、顶部标题区

主标题,大号粗体,深蓝色:“智宅焕·调度管家服务”

副标题,中号字体,深灰色:“您的专属项目管家 | 把‘操心’交给我,把‘赚钱’留给您”

底部用极细的金橙色线分割

二、核心价值区(三个并列图标卡片)

三个卡片横向排列,浅灰底,圆角

卡片1:图标(大脑图形),标题“帮您记着”,描述“所有项目节点,管家主动提醒”

卡片2:图标(调度图形),标题“帮您协调”,描述“您只需回复一个字,派单全搞定”

卡片3:图标(闭环图形),标题“帮您盯着”,描述“完工同步结果,进度一目了然”

三、职责边界区(用对比表格)

左侧深蓝色圆角矩形,白字:“管家做什么(核心职责)”

下方列表,左侧绿色小对勾图标:

建群梳理,输出《项目推进清单》

进度提醒,每个节点提前通知

按需派单,给出清晰选项和报价

完工闭环,回收结果同步进度

右侧深灰色圆角矩形,白字:“管家不做什么(责任边界)”

下方列表,左侧红色小叉图标:

不去现场(100%远程)

不做技术判断(由现场人员负责)

不为别人兜底(谁执行,谁负责)

四、服务流程区(用S形曲线串联6个节点)

标题:中号粗体,深蓝:“一个项目,管家怎么陪您走完?”

用一条S形虚线箭头串联6个图标和文字节点:

节点1“项目启动”(文档图标)→ 节点2“水电交底”(工具图标)→ 节点3“水电验收”(放大镜图标)→ 节点4“设备安装”(齿轮图标)→ 节点5“调试收尾”(扳手图标)→ 节点6“项目完工”(奖杯图标)

五、定价区(醒目的金橙色高亮卡片)

圆角矩形卡片,极浅金橙底色,深蓝色边框

主标题:“内测体验价(仅限首批客户)”

下方两行并列:

“平层项目(200㎡以下):200元/项目”

“别墅/复杂项目(200㎡以上):500元/项目”

最底部用极小号灰色字体注明:“*此价格为内测体验价,未来正式版将根据实际服务价值调整”

六、底部行动区

居中,一行大字,深蓝色:“让专业的管家,帮您管好每一个项目。”

最底部,公司名与联系方式占位符:“智宅焕 | 怕翻车,找智宅焕”

全局要求:所有图标简洁线性风格,文字清晰可读,版面疏密有致,信息层级分明,整体传递“严谨、可靠、不扯皮”的视觉感受。
微信小程序装修套餐选择页,竖屏手机端UI界面,375px宽度比例,简约现代风格,白色为主背景色,突出套餐丰富可选性价比高。主色调微信绿色#07C160,促销红色#FF4D4F,正文色#333,辅助文字色#999,分割线色#F0F0F0,卡片圆角12px,模块间距12px。页面从上到下包含以下模块:1.顶部导航栏:左侧灰色返回箭头,中间深灰色文字"超值套餐"标题,右侧无按钮,白色背景底部1px浅灰分割线。2.顶部Banner区:高度约140px,渐变背景从深绿#07C160到浅绿#38D9A9,中间白色大字"选择你的翻新套餐",下方白色小字"按需选择 · 省心省力 · 质保三年",右下角简约家居线条图标装饰。3.分类Tab栏:白色背景,横向排列5个Tab按钮"全部""卫生间""厨房""卧室""全屋",默认选中"全部",选中项底部绿色下划线文字绿色加粗,未选中文字灰色#666,可左右滑动。4.套餐对比入口:列表上方右侧绿色文字按钮"对比套餐 >"。5.套餐卡片列表:纵向排列多个套餐卡片,每个白色圆角12px带轻微阴影,卡片间距12px左右边距16px;每个卡片左侧100×100px圆角8px套餐缩略图(对应空间实景图),右侧上方套餐名称如"卫生间翻新套餐"16px加粗深灰色,名称下方灰色小字简介"防水+瓷砖+洁具+吊顶,7天完工",简介下方2-3个小标签"含主材""包施工""质保3年",标签背景浅绿色#E8F8EE文字深绿色圆角4px;卡片底部左侧价格如"¥3,999"深绿色加粗18px,右侧绿色文字按钮"查看详情 >"。6.推荐套餐卡片突出显示:第二个套餐卡片右上角红色飘带标签"热门推荐",卡片浅绿色描边2px更突出。7.底部提示条:浅灰色背景条,文字"不确定选哪个?",右侧绿色文字按钮"免费咨询"。8.底部固定操作栏:高度56px白色背景顶部浅灰分割线,左侧客服图标+文字"咨询",右侧深绿色实心按钮"免费获取报价"白色文字。整体套餐卡片信息层次清晰,价格醒目,方便用户快速对比选择,高清商用UI设计稿,iPhone手机屏幕比例微信小程序装修套餐选择页,竖屏手机端UI界面,375px宽度比例,简约现代风格,白色为主背景色,突出套餐丰富可选性价比高。主色调微信绿色#07C160,促销红色#FF4D4F,正文色#333,辅助文字色#999,分割线色#F0F0F0,卡片圆角12px,模块间距12px。页面从上到下包含以下模块:1.顶部导航栏:左侧灰色返回箭头,中间深灰色文字"超值套餐"标题,右侧无按钮,白色背景底部1px浅灰分割线。2.顶部Banner区:高度约140px,渐变背景从深绿#07C160到浅绿#38D9A9,中间白色大字"选择你的翻新套餐",下方白色小字"按需选择 · 省心省力 · 质保三年",右下角简约家居线条图标装饰。3.分类Tab栏:白色背景,横向排列5个Tab按钮"全部""卫生间""厨房""卧室""全屋",默认选中"全部",选中项底部绿色下划线文字绿色加粗,未选中文字灰色#666,可左右滑动。4.套餐对比入口:列表上方右侧绿色文字按钮"对比套餐 >"。5.套餐卡片列表:纵向排列多个套餐卡片,每个白色圆角12px带轻微阴影,卡片间距12px左右边距16px;每个卡片左侧100×100px圆角8px套餐缩略图(对应空间实景图),右侧上方套餐名称如"卫生间翻新套餐"16px加粗深灰色,名称下方灰色小字简介"防水+瓷砖+洁具+吊顶,7天完工",简介下方2-3个小标签"含主材""包施工""质保3年",标签背景浅绿色#E8F8EE文字深绿色圆角4px;卡片底部左侧价格如"¥3,999"深绿色加粗18px,右侧绿色文字按钮"查看详情 >"。6.推荐套餐卡片突出显示:第二个套餐卡片右上角红色飘带标签"热门推荐",卡片浅绿色描边2px更突出。7.底部提示条:浅灰色背景条,文字"不确定选哪个?",右侧绿色文字按钮"免费咨询"。8.底部固定操作栏:高度56px白色背景顶部浅灰分割线,左侧客服图标+文字"咨询",右侧深绿色实心按钮"免费获取报价"白色文字。整体套餐卡片信息层次清晰,价格醒目,方便用户快速对比选择,高清商用UI设计稿,iPhone手机屏幕比例