创意预览图

修改微信小程序装修商城首页UI,保持整体设计风格,9:16竖屏,主色调绿色#23b574,简约扁平商务风,白色干净背景。修改要求:将轮播图下方原有的装修风格分类图标模块,替换为4个功能按钮:预约装修、

用户头像

高端教学

2026.07.20
[第3屏] 家政服务项目总览卡片展示。 [氛围/风格] 清新专业,卡片式布局,图标+文字组合,信息层级清晰,商业设计感。 [元素布局] 画面顶部为标题区,下方是2x3的服务卡片网格,共6张服务项目卡片,每张卡片包含:彩色图标、服务名称、简短说明、价格标签;卡片内容分别为:日常保洁、深度清洁、开荒保洁、家电清洗、玻璃清洁、厨房专项;卡片之间有均匀间距,背景为浅色渐变,底部有「更多服务请咨询」引导。 [光影质感] 卡片有轻微投影和圆角,悬浮感设计,整体光线均匀明亮,无强烈阴影。 [配色色系] 全局底色 #F5F9F7 浅青白;主色 #2BAE8F 清新绿用于标题和重点卡片;辅助色 #4A90D9 蓝、#FFB84D 黄、#FF8A65 橙分别用于不同类别卡片图标;卡片底色为白色。 [视角构图] 垂直排版,从上到下阅读,卡片网格居中对齐,信息密度适中。 [文字版式] 顶部大标题「六大服务 全面守护」,副标题「按需选择 灵活预约」;每张卡片内:上方圆形彩色图标,中间服务名称加粗大字,下方小字说明,右下角小标签价格/起;底部绿色按钮样式文字「立即预约 专属方案」;所有文字清晰可读,无衬线黑体。 [比例分辨率] 9:16 竖版比例,4K 分辨率,文字清晰可辨,高清画质。 [负向提示词] 变形,水印,文字错乱,文字过小,卡片变形,颜色偏差,低俗。[第3屏] 家政服务项目总览卡片展示。
[氛围/风格] 清新专业,卡片式布局,图标+文字组合,信息层级清晰,商业设计感。
[元素布局] 画面顶部为标题区,下方是2x3的服务卡片网格,共6张服务项目卡片,每张卡片包含:彩色图标、服务名称、简短说明、价格标签;卡片内容分别为:日常保洁、深度清洁、开荒保洁、家电清洗、玻璃清洁、厨房专项;卡片之间有均匀间距,背景为浅色渐变,底部有「更多服务请咨询」引导。
[光影质感] 卡片有轻微投影和圆角,悬浮感设计,整体光线均匀明亮,无强烈阴影。
[配色色系] 全局底色 #F5F9F7 浅青白;主色 #2BAE8F 清新绿用于标题和重点卡片;辅助色 #4A90D9 蓝、#FFB84D 黄、#FF8A65 橙分别用于不同类别卡片图标;卡片底色为白色。
[视角构图] 垂直排版,从上到下阅读,卡片网格居中对齐,信息密度适中。
[文字版式] 顶部大标题「六大服务 全面守护」,副标题「按需选择 灵活预约」;每张卡片内:上方圆形彩色图标,中间服务名称加粗大字,下方小字说明,右下角小标签价格/起;底部绿色按钮样式文字「立即预约 专属方案」;所有文字清晰可读,无衬线黑体。
[比例分辨率] 9:16 竖版比例,4K 分辨率,文字清晰可辨,高清画质。
[负向提示词] 变形,水印,文字错乱,文字过小,卡片变形,颜色偏差,低俗。
[第4屏] 家政服务标准化作业流程时间轴。 [氛围/风格] 专业清晰,时间轴流程图设计,图标+步骤说明,信任感强,商业信息图风格。 [元素布局] 画面中央是一条垂直的时间轴线,从上到下串联5个步骤节点;每个节点有圆形序号图标、步骤名称、简短说明和对应的小插图;5个步骤分别为:1.在线预约(手机预约图标)、2.上门确认(家政人员敲门图标)、3.专业清洁(清洁工具+动作图标)、4.现场验收(检查确认图标)、5.售后保障(客服盾牌图标);时间轴两侧交替排列内容,视觉平衡。 [光影质感] 整体光线均匀明亮,节点图标有轻微立体感和投影,干净整洁。 [配色色系] 全局底色 #FFFFFF 纯白;主色 #2BAE8F 清新绿用于时间轴线和当前节点;辅助色 #E8F5F1 浅绿用于节点背景,#666666 深灰用于说明文字。 [视角构图] 垂直居中时间轴布局,从上到下阅读动线,步骤清晰递进。 [文字版式] 顶部大标题「5步标准化服务流程」,副标题「透明化作业 每一步都放心」;每个步骤:圆形序号「1/2/3/4/5」+ 加粗步骤名称 + 小字说明文字;时间轴用绿色实线连接;底部小字「全程可追溯 服务有记录」;文字层级分明,清晰可读。 [比例分辨率] 9:16 竖版比例,4K 分辨率,文字清晰可辨,高清画质。 [负向提示词] 变形,水印,文字错乱,文字过小,线条模糊,颜色偏差,低俗。[第4屏] 家政服务标准化作业流程时间轴。
[氛围/风格] 专业清晰,时间轴流程图设计,图标+步骤说明,信任感强,商业信息图风格。
[元素布局] 画面中央是一条垂直的时间轴线,从上到下串联5个步骤节点;每个节点有圆形序号图标、步骤名称、简短说明和对应的小插图;5个步骤分别为:1.在线预约(手机预约图标)、2.上门确认(家政人员敲门图标)、3.专业清洁(清洁工具+动作图标)、4.现场验收(检查确认图标)、5.售后保障(客服盾牌图标);时间轴两侧交替排列内容,视觉平衡。
[光影质感] 整体光线均匀明亮,节点图标有轻微立体感和投影,干净整洁。
[配色色系] 全局底色 #FFFFFF 纯白;主色 #2BAE8F 清新绿用于时间轴线和当前节点;辅助色 #E8F5F1 浅绿用于节点背景,#666666 深灰用于说明文字。
[视角构图] 垂直居中时间轴布局,从上到下阅读动线,步骤清晰递进。
[文字版式] 顶部大标题「5步标准化服务流程」,副标题「透明化作业 每一步都放心」;每个步骤:圆形序号「1/2/3/4/5」+ 加粗步骤名称 + 小字说明文字;时间轴用绿色实线连接;底部小字「全程可追溯 服务有记录」;文字层级分明,清晰可读。
[比例分辨率] 9:16 竖版比例,4K 分辨率,文字清晰可辨,高清画质。
[负向提示词] 变形,水印,文字错乱,文字过小,线条模糊,颜色偏差,低俗。
生成一张微信小程序竖屏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体系保持一致,为管理员在派单工作台点击“指派师傅”后弹出的底部选择弹窗,弹窗从底部弹出,覆盖页面约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体系保持一致。
创意 × 4