创意预览图

参考图片风格,生成移动端小程序企业需求提交表单页UI设计稿,蓝色主色调,主色#165DFF,简洁政务风格,现代扁平化UI,白色背景,浅蓝色卡片分区。页面从上到下布局:1.顶部导航栏,左侧返回箭头,中间

用户头像

1q2c8q3vwt2...

2026.07.10
生成一张微信小程序竖屏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风格,设计一个钥匙归还办理弹窗。弹窗居中显示在台账页面上方,背景有半透明遮罩层,整体版式与钥匙领用弹窗完全统一。 弹窗采用三段式标准布局: 1. 顶部标题栏:左侧显示"钥匙归还办理"标题,右侧有X关闭按钮。 2. 中部表单展示与填报区,两列布局: - 第一行左:钥匙编号(只读,灰色背景,显示KEY2024050003) - 第一行右:钥匙名称(只读,灰色背景,显示化学水车间大门钥匙) - 第二行左:存放位置(只读,灰色背景,显示化学水车间钥匙柜02号) - 第二行右:当前状态(只读,红色标签显示"已借出(未归还)") - 第三行左:借用人(只读,灰色背景,显示张三) - 第三行右:借用时间(只读,灰色背景,显示2024-05-20 08:30) - 第四行:借用用途(只读,灰色背景,占满整行,显示日常巡检) 分隔线后是核心业务选择区: - 归还状态选择(带红色*号必填):两个单选按钮选项横向排列 - ○ 按期正常归还(默认选中,绿色圆点) - ○ 未按期归还(橙色/红色圆点,选中后下方出现提示文字:将自动记录异常并写入运行日志) - 归还备注(选填,文本域/多行输入框,占位文字:请填写归还情况、异常说明、延期原因等(选填)) - 归还操作时间(只读,灰色背景,显示"提交时自动获取当前时间") - 操作人(只读,灰色背景,显示"当前登录用户自动获取") 3. 底部操作按钮区:右侧排列两个按钮,【取消】灰色按钮在左,【确认提交】蓝色主按钮在右。 整体风格与参考图一致:蓝色主题色,简洁专业的后台管理系统风格,左侧深蓝色导航栏和台账页面作为背景被半透明遮罩覆盖。基于参考图的火电厂生产管理系统UI风格,设计一个钥匙归还办理弹窗。弹窗居中显示在台账页面上方,背景有半透明遮罩层,整体版式与钥匙领用弹窗完全统一。

弹窗采用三段式标准布局:

1. 顶部标题栏:左侧显示"钥匙归还办理"标题,右侧有X关闭按钮。

2. 中部表单展示与填报区,两列布局:
   - 第一行左:钥匙编号(只读,灰色背景,显示KEY2024050003)
   - 第一行右:钥匙名称(只读,灰色背景,显示化学水车间大门钥匙)
   - 第二行左:存放位置(只读,灰色背景,显示化学水车间钥匙柜02号)
   - 第二行右:当前状态(只读,红色标签显示"已借出(未归还)")
   - 第三行左:借用人(只读,灰色背景,显示张三)
   - 第三行右:借用时间(只读,灰色背景,显示2024-05-20 08:30)
   - 第四行:借用用途(只读,灰色背景,占满整行,显示日常巡检)
   
   分隔线后是核心业务选择区:
   - 归还状态选择(带红色*号必填):两个单选按钮选项横向排列
     - ○ 按期正常归还(默认选中,绿色圆点)
     - ○ 未按期归还(橙色/红色圆点,选中后下方出现提示文字:将自动记录异常并写入运行日志)
   
   - 归还备注(选填,文本域/多行输入框,占位文字:请填写归还情况、异常说明、延期原因等(选填))
   
   - 归还操作时间(只读,灰色背景,显示"提交时自动获取当前时间")
   - 操作人(只读,灰色背景,显示"当前登录用户自动获取")

3. 底部操作按钮区:右侧排列两个按钮,【取消】灰色按钮在左,【确认提交】蓝色主按钮在右。

整体风格与参考图一致:蓝色主题色,简洁专业的后台管理系统风格,左侧深蓝色导航栏和台账页面作为背景被半透明遮罩覆盖。