创意预览图

家装小程序个人中心UI设计,9:16比例,简约商务风格,包含用户头像区域、我的装修订单、预约记录、收藏案例、优惠券、客服入口入口,采用分区圆角模块设计,浅蓝作为点缀色,排版整洁,家居服务移动端界面,U

用户头像

高端教学

2026.07.20
生成一张微信小程序竖屏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风格保持一致,为客户支付成功后的完整项目看板页面,页面内容可滚动。 从上到下布局: 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. 底部固定按钮区:全宽次要按钮“关联订单”,全宽低调警示色按钮“发起争议”。
四个区域用清晰分隔线或卡片间距区分,所有文字清晰可见,使用无衬线字体,整体风格和前序智宅焕设计保持统一。