创意预览图

再根据上一条信息中的要求多生成几张不同的H5页面

用户头像

1qnfsl7h5pP...

2026.01.04
生成一张微信小程序竖屏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”,右侧主色高亮按钮“提交订单并支付”。
已添加服务卡片为核心信息区,总价视觉突出,所有文字清晰可见,使用无衬线字体,整体风格与前序设计保持统一。
[第7屏] 收纳服务套餐对比页面,展示不同档位选择。 [氛围/风格] 清晰信息图表风格,专业简洁,日系简约,商业设计质感。 [元素布局] 画面展示三个套餐卡片横向并排,从左到右依次为「基础体验」「标准全屋」「深度定制」,中间的标准套餐高亮突出(有推荐标签和金色边框);每个卡片内包含套餐名称、价格、适用户型、服务内容清单;卡片底部有「立即预约」按钮样式。背景为浅米色,卡片为白色底带轻微阴影。 [光影质感] 均匀柔和光线,卡片有轻微投影增加立体感,整体干净明亮。 [配色色系] 全局底色 #F7F5F0 米白色;卡片白色底;推荐套餐用浅绿边框+顶部「人气推荐」橙色标签;文字深灰为主,价格用橙色强调。 [视角构图] 三栏卡片横向对比布局,顶部标题区,底部有补充说明文字。 [文字版式] 顶部主标题「选择适合你的套餐」,黑体加粗居中;每个套餐卡片:顶部套餐名称「基础体验」「标准全屋」「深度定制」;价格区「¥xxx起」大号橙色字;适用户型「适合1室/小户型」「适合2-3室」「适合4室+大户型」;服务内容用对勾图标+文字列出3-4项:「空间诊断」「分类整理」「收纳建议」「后续指导」等;底部按钮文字「立即咨询」。 [比例分辨率] 9:16竖版比例,4K分辨率,文字清晰可辨,高清画质。 [负向提示词] 变形,水印,文字错乱,文字过小,卡片变形,价格模糊,颜色偏差。[第7屏] 收纳服务套餐对比页面,展示不同档位选择。
[氛围/风格] 清晰信息图表风格,专业简洁,日系简约,商业设计质感。
[元素布局] 画面展示三个套餐卡片横向并排,从左到右依次为「基础体验」「标准全屋」「深度定制」,中间的标准套餐高亮突出(有推荐标签和金色边框);每个卡片内包含套餐名称、价格、适用户型、服务内容清单;卡片底部有「立即预约」按钮样式。背景为浅米色,卡片为白色底带轻微阴影。
[光影质感] 均匀柔和光线,卡片有轻微投影增加立体感,整体干净明亮。
[配色色系] 全局底色 #F7F5F0 米白色;卡片白色底;推荐套餐用浅绿边框+顶部「人气推荐」橙色标签;文字深灰为主,价格用橙色强调。
[视角构图] 三栏卡片横向对比布局,顶部标题区,底部有补充说明文字。
[文字版式] 顶部主标题「选择适合你的套餐」,黑体加粗居中;每个套餐卡片:顶部套餐名称「基础体验」「标准全屋」「深度定制」;价格区「¥xxx起」大号橙色字;适用户型「适合1室/小户型」「适合2-3室」「适合4室+大户型」;服务内容用对勾图标+文字列出3-4项:「空间诊断」「分类整理」「收纳建议」「后续指导」等;底部按钮文字「立即咨询」。
[比例分辨率] 9:16竖版比例,4K分辨率,文字清晰可辨,高清画质。
[负向提示词] 变形,水印,文字错乱,文字过小,卡片变形,价格模糊,颜色偏差。
[第5屏] 模式特色-四大核心优势卖点展示。 [氛围/风格] 卖点卡片展示页,四个卖点卡片排列,活泼清晰,延续整体设计风格。 [元素布局] 顶部大标题,下方2行2列排列四个卖点卡片,每个卡片独立展示一个特色,卡片带圆角和浅边框。每个卡片包含图标+标题+简短说明,信息完整。整体留白均匀,呼吸感好。 [光影质感] 卡片带轻微投影,和背景层次分明,每个卡片内光照均匀,文字清晰。 [配色色系] 全局底色 #F5F8FC;主色 #165DFF(浅蓝);辅助色 #333333(深灰正文);每个卡片图标用不同浅色系区分,强调色 #FF7D00保留。延续第一屏配色方案。 [视角构图] 网格排版,标题在上,四个卡片等分空间,居中对齐。 [文字版式] 顶部标题:"模式核心特色",蓝色加粗居中;四个卡片内容: 卡片1:图标低门槛,标题"低门槛入驻",说明"消费即送代理 不囤货不压货" 卡片2:图标提现,标题"每日可提现",说明"奖金每天可提 可提现多次" 卡片3:图标福利,标题"每月领福利",说明"免费领取0元福利区产品" 卡片4:图标裂变,标题"快速升最高级",说明"直推2单即升级 老板享直推300+间推200" 每个卡片标题加粗,说明文字行高适中,移动端单卡片文字清晰不拥挤。 [比例分辨率] 宽高比 3:4,宽度1080像素,高度1440像素,2K分辨率。 [负向提示词] 变形,水印,文字错乱,卡片排列歪斜,文字重叠,背景杂乱。[第5屏] 模式特色-四大核心优势卖点展示。
[氛围/风格] 卖点卡片展示页,四个卖点卡片排列,活泼清晰,延续整体设计风格。
[元素布局] 顶部大标题,下方2行2列排列四个卖点卡片,每个卡片独立展示一个特色,卡片带圆角和浅边框。每个卡片包含图标+标题+简短说明,信息完整。整体留白均匀,呼吸感好。
[光影质感] 卡片带轻微投影,和背景层次分明,每个卡片内光照均匀,文字清晰。
[配色色系] 全局底色 #F5F8FC;主色 #165DFF(浅蓝);辅助色 #333333(深灰正文);每个卡片图标用不同浅色系区分,强调色 #FF7D00保留。延续第一屏配色方案。
[视角构图] 网格排版,标题在上,四个卡片等分空间,居中对齐。
[文字版式] 顶部标题:"模式核心特色",蓝色加粗居中;四个卡片内容:
卡片1:图标低门槛,标题"低门槛入驻",说明"消费即送代理 不囤货不压货"
卡片2:图标提现,标题"每日可提现",说明"奖金每天可提 可提现多次"
卡片3:图标福利,标题"每月领福利",说明"免费领取0元福利区产品"
卡片4:图标裂变,标题"快速升最高级",说明"直推2单即升级 老板享直推300+间推200"
每个卡片标题加粗,说明文字行高适中,移动端单卡片文字清晰不拥挤。
[比例分辨率] 宽高比 3:4,宽度1080像素,高度1440像素,2K分辨率。
[负向提示词] 变形,水印,文字错乱,卡片排列歪斜,文字重叠,背景杂乱。