创意预览图

生成一张网页端后台管理UI设计图,宽高比16:9,深色专业风格,深蓝灰底色,与后台管理端风格统一。 页面布局: 1. 左侧侧边导航栏,布局内容与第一张后台页面保持一致:顶部平台Logo+“智宅焕管理后

用户头像

678typ3ch-H...

2026.07.04
生成一张网页端后台管理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,深色专业风,参考上传图片风格与智宅焕前序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. 顶部师傅身份标识:显示“您好,张师傅” + 圆形头像占位,下方小字“今日待处理: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,灰色边框按钮“查看详情”。
佣金金额醒目展示,不展示客户支付总价,所有文字清晰可见,使用无衬线字体,整体风格与前序智宅焕深色专业设计保持一致。
创意 × 4
生成一张网页端UI设计图,宽高比为16:9。整体风格为深色专业风,与之前所有页面保持完全一致的视觉体系,左侧侧边导航栏当前“⚙️ 设置”菜单项高亮显示,所有导航栏文字全部替换为中文,不得出现英文,右侧为内容区。侧边栏所有文字均为中文,内容与之前保持一致,仅切换选中态到设置。右侧内容区:顶部页面标题“系统设置”字体稍大,采用分组卡片形式,每组一个设置区域:分组1账户信息,包含当前头像缩略图+“更换头像”按钮、昵称输入框默认显示“吴建旭”、登录邮箱输入框默认显示“xxx@example.com”、“🔒 修改密码”按钮;分组2品牌信息,右上角小标签“💡 未来版本:您的品牌信息将用于文章的品牌露出”,包含品牌名称输入框默认显示“智宅焕”、品牌Logo上传区域+当前Logo缩略图、品牌简介多行文本输入框默认显示示例简介;分组3写作偏好,包含默认写作语气下拉框选项“深度专业”“通俗易懂”“犀利直接”、默认文章长度下拉框选项“短文(800字)”“中长文(1500字)”“长文(2500字)”、自动保存频率下拉框选项“每30秒”“每1分钟”“每5分钟”;分组4数据与存储,显示当前存储用量“已使用 156MB / 总计 1GB”、“📤 导出全部数据”按钮、“🗑️ 清空缓存”低调灰色按钮。底部操作区为主按钮高亮样式“💾 保存设置”。设置页信息层级清晰分组明确,品牌信息扩展点低调可见,所有中文文字清晰可见,字体使用无衬线体,整个页面所有文字均为中文,不得保留任何英文导航项。生成一张网页端UI设计图,宽高比为16:9。整体风格为深色专业风,与之前所有页面保持完全一致的视觉体系,左侧侧边导航栏当前“⚙️ 设置”菜单项高亮显示,所有导航栏文字全部替换为中文,不得出现英文,右侧为内容区。侧边栏所有文字均为中文,内容与之前保持一致,仅切换选中态到设置。右侧内容区:顶部页面标题“系统设置”字体稍大,采用分组卡片形式,每组一个设置区域:分组1账户信息,包含当前头像缩略图+“更换头像”按钮、昵称输入框默认显示“吴建旭”、登录邮箱输入框默认显示“xxx@example.com”、“🔒 修改密码”按钮;分组2品牌信息,右上角小标签“💡 未来版本:您的品牌信息将用于文章的品牌露出”,包含品牌名称输入框默认显示“智宅焕”、品牌Logo上传区域+当前Logo缩略图、品牌简介多行文本输入框默认显示示例简介;分组3写作偏好,包含默认写作语气下拉框选项“深度专业”“通俗易懂”“犀利直接”、默认文章长度下拉框选项“短文(800字)”“中长文(1500字)”“长文(2500字)”、自动保存频率下拉框选项“每30秒”“每1分钟”“每5分钟”;分组4数据与存储,显示当前存储用量“已使用 156MB / 总计 1GB”、“📤 导出全部数据”按钮、“🗑️ 清空缓存”低调灰色按钮。底部操作区为主按钮高亮样式“💾 保存设置”。设置页信息层级清晰分组明确,品牌信息扩展点低调可见,所有中文文字清晰可见,字体使用无衬线体,整个页面所有文字均为中文,不得保留任何英文导航项。
生成一张微信小程序竖屏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. 区域一:订单确认信息,区域标题“确认订单”,圆角只读订单信息卡片展示:订单编号(标注:待生成,支付后显示)、项目名称「张先生家智能改造」、项目地址「上海市闵行区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体系保持一致,为客户在自动验收前24小时收到的全屏强制提醒弹窗,全屏半透明深色遮罩,中央居中展示圆角带阴影弹窗卡片,宽度占屏幕80%,必须点击按钮才能关闭。 弹窗从上到下布局: 1. 顶部:中央醒目的⏰提醒图标,图标下方橙色警示色标题“自动验收提醒”。 2. 中部核心信息:展示订单信息:订单编号“ZXH20260703001”,项目名称“张先生家智能改造”,服务内容“现场安装调试”,分隔线后居中大字核心提示“您的订单将于24小时后自动完成验收”,下方小字“如对交付结果有异议,请及时处理”,再下方小字“超时未处理,系统将自动完成验收,订单状态变更为‘已完成’”,时间信息大而清晰,弹窗醒目有紧迫感。 3. 底部操作区:纵向排列两个按钮,间距适中:主色高亮大按钮“确认验收”(点击进入验收确认流程),警示色边框按钮“发起争议”(点击进入争议发起页面),按钮下方灰色弱化文字链接“稍后处理”(点击关闭弹窗,系统将持续提醒)。 页面底部虚线框标注关闭弹窗后的状态:标注“关闭弹窗后 ↓”,框内示意:弹窗关闭后,项目看板顶部展示黄色提示条“您的订单将于24小时后自动验收,如有问题请及时处理”,提示条右侧有“立即处理”按钮。 两个核心操作按钮提供明确下一步路径,稍后处理为低优先级选项视觉弱化,所有文字清晰可见,使用无衬线字体,整体风格与智宅焕深色专业UI体系保持一致。生成一张微信小程序竖屏UI设计图,宽高比9:16,深色专业风,与智宅焕整套UI体系保持一致,为客户在自动验收前24小时收到的全屏强制提醒弹窗,全屏半透明深色遮罩,中央居中展示圆角带阴影弹窗卡片,宽度占屏幕80%,必须点击按钮才能关闭。
弹窗从上到下布局:
1. 顶部:中央醒目的⏰提醒图标,图标下方橙色警示色标题“自动验收提醒”。
2. 中部核心信息:展示订单信息:订单编号“ZXH20260703001”,项目名称“张先生家智能改造”,服务内容“现场安装调试”,分隔线后居中大字核心提示“您的订单将于24小时后自动完成验收”,下方小字“如对交付结果有异议,请及时处理”,再下方小字“超时未处理,系统将自动完成验收,订单状态变更为‘已完成’”,时间信息大而清晰,弹窗醒目有紧迫感。
3. 底部操作区:纵向排列两个按钮,间距适中:主色高亮大按钮“确认验收”(点击进入验收确认流程),警示色边框按钮“发起争议”(点击进入争议发起页面),按钮下方灰色弱化文字链接“稍后处理”(点击关闭弹窗,系统将持续提醒)。
页面底部虚线框标注关闭弹窗后的状态:标注“关闭弹窗后 ↓”,框内示意:弹窗关闭后,项目看板顶部展示黄色提示条“您的订单将于24小时后自动验收,如有问题请及时处理”,提示条右侧有“立即处理”按钮。
两个核心操作按钮提供明确下一步路径,稍后处理为低优先级选项视觉弱化,所有文字清晰可见,使用无衬线字体,整体风格与智宅焕深色专业UI体系保持一致。
创意 × 4
全场景智慧培训预约系统 - 功能介绍 系统概述 全场景智慧培训预约系统是一套面向线下服务型门店的 SaaS 管理插件,集课程培训管理、场馆场地预约、教练管理、学员管理、优惠券营销和数据统计分析于一体,支持多门店/多站点独立运营。 无论是健身房私教课、培训机构团课、瑜伽馆小班课,还是球场/舞蹈室按小时出租,都能通过本系统实现从线上展示→下单支付→预约核销→售后评价的完整业务闭环。 核心功能模块 一、课程管理 课程信息管理:课程名称、封面图、简介、课程形式(私教/团课)、时长、最大人数等完整信息管理 课程分类:支持多级分类,便于用户按分类浏览和筛选课程 课程类型:自定义课程类型(如私教课、团课、体验课等),满足不同业务场景 多规格定价:支持单规格/多规格模式,每个规格独立设置价格与原价,灵活适配不同课时套餐 排课管理:按日期+时间段排课,关联教练和场地,支持批量排课与周期性排课 库存管理:排课自动关联库存,下单锁定库存,取消释放库存,防止超卖 课程评价:用户完成课程后可进行1-5星评分+文字+图片评价,管理员可回复管理 课程收藏:用户可收藏心仪课程,支持收藏列表管理 二、教练管理 教练档案:教练姓名、头像、证书图片、课时费标准、个人简介等完整信息 教练等级:自定义教练等级体系(如初级教练、高级教练、认证讲师等) 教练类型:按专业领域分类教练(如力量训练、瑜伽、舞蹈等) 教练标签:多标签体系,灵活标注教练特长(如"增肌""减脂""产后恢复"等) 教练结算:按排课自动生成结算记录,支持批量结算与打款,结算流程:待结算→已结算→已打款 教练人气排行:基于授课数据自动生成教练人气排行榜 三、学员管理 学员档案:关联平台会员,记录学员姓名、紧急联系人及电话、入学日期等信息 课时统计:自动统计总购买课时、已消耗课时、剩余课时,数据一目了然 消费统计:累计报课数、累计消费金额,支持消费行为分析 状态管理:停课/在读/结业三种状态,支持生命周期管理 统计看板:管理员端学员概览卡片、30天趋势图、状态分布饼图 四、场馆场地管理 场馆管理:场馆名称、封面图、详细地址(省市区+经纬度)、联系电话、营业时间、场馆介绍 场地管理:每个场馆可管理多个场地(如1号场、2号场、VIP室等),含场地图片、容纳人数、设施配置、每小时单价 时段预约:按日期+时间段进行预约,支持独占模式和共享模式 营业时间:每个场馆独立设置营业时间,系统自动校验预约时段是否在营业时间范围内 时段可用性:实时查询场地各时段占用情况,冲突检测防止重复预约 五、课程预约 在线下单:选课程→选规格→选排课→使用优惠券→下单支付,流程顺畅 自动预约:支付成功后自动创建预约记录,无需人工干预 核销管理:自动生成预约核销码和二维码,管理员扫码签到/签退 库存流转:锁定库存→签到确认→签退完成,全流程库存精确管控 预约提醒:课程开始前2小时自动推送预约提醒通知 六、场馆预约 在线选场:选场馆→选场地→选日期时段→下单支付,操作直观 超时保护:下单后15分钟未支付自动取消订单并释放时段,避免资源浪费 自动预约:支付成功自动生成预约记录和核销码 签到签退:支持管理员扫码完成签到和签退操作 七、优惠券营销 券类型:支持满减券(满X减Y)和折扣券(X折),满足不同营销策略 发放控制:总量限制、每人限领张数、领取时间窗口,精细化管控 有效期:支持固定时间段有效 or 领取后N天内有效两种模式 适用场景:按指定课程ID列表限制使用范围 自动发放:注册赠送、购买成功后赠送,通过事件机制自动触发 手动发放:管理员指定用户手动发放优惠券 统计看板:发放量/领取量/使用量数据一目了然 过期提醒:每日自动扫描24小时内即将过期优惠券并推送提醒 八、订单管理 课程订单:完整订单生命周期(待支付→已支付→已完成→已取消) 场馆订单:完整订单生命周期 + 超时自动取消机制 退款取消:支持订单退款和取消操作 优惠券抵扣:下单时自动计算优惠券抵扣金额 九、数据统计 运营概览:总营收、今日营收、营收增长率、今日订单数、今日预约数、新增学员数 营收趋势:按日期范围查询课程+场馆合并营收趋势 课程销量排行:热销课程排行榜 教练人气排行:教练受欢迎程度排行 预约趋势:预约量随时间的趋势变化 十、消息通知 课程支付成功通知:订单号、课程名、金额、支付时间 场馆支付成功通知:订单号、场馆名、日期、时段、金额 预约即将开始提醒:课程名、日期时间、教练、地点 优惠券过期提醒:券名称、过期时间 DIY 页面装修 系统提供3个自定义装修组件,支持拖拽式页面搭建: 课程列表组件:展示课程卡片,支持分类筛选、排序(综合/最新/人气/价格)、显示教练/价格/简介 教练列表组件:展示教练卡片,支持类型/等级筛选 场馆列表组件:展示场馆卡片,支持显示地址、场地、标签信息 适用场景 行业 典型应用 健身房/私教工作室 私教课预约、团课管理、教练排课、会员课时管理 培训机构 课程发布报名、班级管理、学员档案、课时消耗 瑜伽馆/舞蹈室 小班课排期、场馆时段出租、会员签到 球类运动场馆 球场按小时预约、场地管理、会员体系 游泳馆 课程培训 + 泳道预约双模式 综合运动中心 课程+场馆全场景覆盖 基于此内容生成一个详情长图全场景智慧培训预约系统 - 功能介绍
系统概述
全场景智慧培训预约系统是一套面向线下服务型门店的 SaaS 管理插件,集课程培训管理、场馆场地预约、教练管理、学员管理、优惠券营销和数据统计分析于一体,支持多门店/多站点独立运营。

无论是健身房私教课、培训机构团课、瑜伽馆小班课,还是球场/舞蹈室按小时出租,都能通过本系统实现从线上展示→下单支付→预约核销→售后评价的完整业务闭环。

核心功能模块
一、课程管理
课程信息管理:课程名称、封面图、简介、课程形式(私教/团课)、时长、最大人数等完整信息管理

课程分类:支持多级分类,便于用户按分类浏览和筛选课程

课程类型:自定义课程类型(如私教课、团课、体验课等),满足不同业务场景

多规格定价:支持单规格/多规格模式,每个规格独立设置价格与原价,灵活适配不同课时套餐

排课管理:按日期+时间段排课,关联教练和场地,支持批量排课与周期性排课

库存管理:排课自动关联库存,下单锁定库存,取消释放库存,防止超卖

课程评价:用户完成课程后可进行1-5星评分+文字+图片评价,管理员可回复管理

课程收藏:用户可收藏心仪课程,支持收藏列表管理

二、教练管理
教练档案:教练姓名、头像、证书图片、课时费标准、个人简介等完整信息

教练等级:自定义教练等级体系(如初级教练、高级教练、认证讲师等)

教练类型:按专业领域分类教练(如力量训练、瑜伽、舞蹈等)

教练标签:多标签体系,灵活标注教练特长(如"增肌""减脂""产后恢复"等)

教练结算:按排课自动生成结算记录,支持批量结算与打款,结算流程:待结算→已结算→已打款

教练人气排行:基于授课数据自动生成教练人气排行榜

三、学员管理
学员档案:关联平台会员,记录学员姓名、紧急联系人及电话、入学日期等信息

课时统计:自动统计总购买课时、已消耗课时、剩余课时,数据一目了然

消费统计:累计报课数、累计消费金额,支持消费行为分析

状态管理:停课/在读/结业三种状态,支持生命周期管理

统计看板:管理员端学员概览卡片、30天趋势图、状态分布饼图

四、场馆场地管理
场馆管理:场馆名称、封面图、详细地址(省市区+经纬度)、联系电话、营业时间、场馆介绍

场地管理:每个场馆可管理多个场地(如1号场、2号场、VIP室等),含场地图片、容纳人数、设施配置、每小时单价

时段预约:按日期+时间段进行预约,支持独占模式和共享模式

营业时间:每个场馆独立设置营业时间,系统自动校验预约时段是否在营业时间范围内

时段可用性:实时查询场地各时段占用情况,冲突检测防止重复预约

五、课程预约
在线下单:选课程→选规格→选排课→使用优惠券→下单支付,流程顺畅

自动预约:支付成功后自动创建预约记录,无需人工干预

核销管理:自动生成预约核销码和二维码,管理员扫码签到/签退

库存流转:锁定库存→签到确认→签退完成,全流程库存精确管控

预约提醒:课程开始前2小时自动推送预约提醒通知

六、场馆预约
在线选场:选场馆→选场地→选日期时段→下单支付,操作直观

超时保护:下单后15分钟未支付自动取消订单并释放时段,避免资源浪费

自动预约:支付成功自动生成预约记录和核销码

签到签退:支持管理员扫码完成签到和签退操作

七、优惠券营销
券类型:支持满减券(满X减Y)和折扣券(X折),满足不同营销策略

发放控制:总量限制、每人限领张数、领取时间窗口,精细化管控

有效期:支持固定时间段有效 or 领取后N天内有效两种模式

适用场景:按指定课程ID列表限制使用范围

自动发放:注册赠送、购买成功后赠送,通过事件机制自动触发

手动发放:管理员指定用户手动发放优惠券

统计看板:发放量/领取量/使用量数据一目了然

过期提醒:每日自动扫描24小时内即将过期优惠券并推送提醒

八、订单管理
课程订单:完整订单生命周期(待支付→已支付→已完成→已取消)

场馆订单:完整订单生命周期 + 超时自动取消机制

退款取消:支持订单退款和取消操作

优惠券抵扣:下单时自动计算优惠券抵扣金额

九、数据统计
运营概览:总营收、今日营收、营收增长率、今日订单数、今日预约数、新增学员数

营收趋势:按日期范围查询课程+场馆合并营收趋势

课程销量排行:热销课程排行榜

教练人气排行:教练受欢迎程度排行

预约趋势:预约量随时间的趋势变化

十、消息通知
课程支付成功通知:订单号、课程名、金额、支付时间

场馆支付成功通知:订单号、场馆名、日期、时段、金额

预约即将开始提醒:课程名、日期时间、教练、地点

优惠券过期提醒:券名称、过期时间

DIY 页面装修
系统提供3个自定义装修组件,支持拖拽式页面搭建:

课程列表组件:展示课程卡片,支持分类筛选、排序(综合/最新/人气/价格)、显示教练/价格/简介

教练列表组件:展示教练卡片,支持类型/等级筛选

场馆列表组件:展示场馆卡片,支持显示地址、场地、标签信息

适用场景
行业	典型应用
健身房/私教工作室	私教课预约、团课管理、教练排课、会员课时管理
培训机构	课程发布报名、班级管理、学员档案、课时消耗
瑜伽馆/舞蹈室	小班课排期、场馆时段出租、会员签到
球类运动场馆	球场按小时预约、场地管理、会员体系
游泳馆	课程培训 + 泳道预约双模式
综合运动中心	课程+场馆全场景覆盖
基于此内容生成一个详情长图
生成一张网页端UI设计图,宽高比为16:9。整体风格为深色专业风,与之前所有页面保持完全一致的视觉体系,左侧侧边导航栏当前“📚 知识库”菜单项高亮显示,右侧为内容区。侧边栏内容与之前保持一致,保持知识库选中态。右侧内容区:顶部面包屑导航显示路径“知识库 > 案例库 > 智能锁售后铁律(50块钱买来的规则)”,面包屑下方为左右两栏布局,左栏约占60%宽度为结构化字段编辑区,是可滚动表单区域,展示该案例所有可编辑结构化字段,字段及示例内容:案例标题输入框“智能锁售后铁律(50块钱买来的规则)”、日期选择器“2026-03-15”、类别下拉框“售后与规则博弈”、核心摘要多行文本框“一次混乱的智能锁售后处理,师傅垫钱买锁体,最终我自己承担了50元损失,由此定下售后铁律:任何售后必须先确认责任归属。”、案例背景多行文本框“客户报修智能锁故障,因流程混乱,师傅自行垫钱购买锁体上门更换...”、案例冲突多行文本框“责任归属未明确,客户催得急,师傅为省事直接处理,结果费用无人承担...”、案例结果多行文本框“我承担了50元锁体费用,并定下死规矩:任何产品售后,必须厂家或供货人提前或现场确认责任归属...”、关键应用点多行文本框“适用于论证规则至上、售后流程标准化、用规则保护双方利益等主题”;字段区域下方两个操作按钮:“💾 保存修改”主按钮高亮、“🗑️ 删除此条目”灰色次按钮。右栏约占35%宽度为原文预览与关联区:顶部醒目高亮边框按钮“📄 查看完整原文”,按钮下方展示带排版标记的原文片段,字体略小内容“那次之后我定下一条死规矩:任何产品售后,必须厂家或供货人提前或者现场确认责任归属。质量问题厂家兜,非质量问题客户兜。不能因为客户催的急就匆忙处理。这条规则,是用50块钱买来的,但它帮我避免了未来无数个500块、5000块的损失。”,原文预览区底部链接样式按钮“🔗 跳转到原文对应段落”;原文下方关联条目区域展示:“关联金句:规则不是限制,是保护 →”、“关联案例:蒲总网关退货事件 →”、“关联框架:痛点-归因-解法 →”。左栏表单清晰可编辑,右栏原文和关联提供完整上下文,“查看完整原文”按钮体现结构化拆解和完整原文互相跳转的设计,所有中文文字清晰可见,字体使用无衬线体。生成一张网页端UI设计图,宽高比为16:9。整体风格为深色专业风,与之前所有页面保持完全一致的视觉体系,左侧侧边导航栏当前“📚 知识库”菜单项高亮显示,右侧为内容区。侧边栏内容与之前保持一致,保持知识库选中态。右侧内容区:顶部面包屑导航显示路径“知识库 > 案例库 > 智能锁售后铁律(50块钱买来的规则)”,面包屑下方为左右两栏布局,左栏约占60%宽度为结构化字段编辑区,是可滚动表单区域,展示该案例所有可编辑结构化字段,字段及示例内容:案例标题输入框“智能锁售后铁律(50块钱买来的规则)”、日期选择器“2026-03-15”、类别下拉框“售后与规则博弈”、核心摘要多行文本框“一次混乱的智能锁售后处理,师傅垫钱买锁体,最终我自己承担了50元损失,由此定下售后铁律:任何售后必须先确认责任归属。”、案例背景多行文本框“客户报修智能锁故障,因流程混乱,师傅自行垫钱购买锁体上门更换...”、案例冲突多行文本框“责任归属未明确,客户催得急,师傅为省事直接处理,结果费用无人承担...”、案例结果多行文本框“我承担了50元锁体费用,并定下死规矩:任何产品售后,必须厂家或供货人提前或现场确认责任归属...”、关键应用点多行文本框“适用于论证规则至上、售后流程标准化、用规则保护双方利益等主题”;字段区域下方两个操作按钮:“💾 保存修改”主按钮高亮、“🗑️ 删除此条目”灰色次按钮。右栏约占35%宽度为原文预览与关联区:顶部醒目高亮边框按钮“📄 查看完整原文”,按钮下方展示带排版标记的原文片段,字体略小内容“那次之后我定下一条死规矩:任何产品售后,必须厂家或供货人提前或者现场确认责任归属。质量问题厂家兜,非质量问题客户兜。不能因为客户催的急就匆忙处理。这条规则,是用50块钱买来的,但它帮我避免了未来无数个500块、5000块的损失。”,原文预览区底部链接样式按钮“🔗 跳转到原文对应段落”;原文下方关联条目区域展示:“关联金句:规则不是限制,是保护 →”、“关联案例:蒲总网关退货事件 →”、“关联框架:痛点-归因-解法 →”。左栏表单清晰可编辑,右栏原文和关联提供完整上下文,“查看完整原文”按钮体现结构化拆解和完整原文互相跳转的设计,所有中文文字清晰可见,字体使用无衬线体。