手机端小程序UI设计稿，宽度375px比例的竖屏页面（“订单详… - 图片创意预览

手机端小程序UI设计稿，宽度375px比例的竖屏页面（“订单详…

手机端小程序UI设计稿，宽度375px比例的竖屏页面（“订单详情”页），高保真电商小程序截图风格，页面底色为浅灰白。 顶部为大面积从橙色到琥珀色的渐变背景区，左上角一个白色返回箭头图标，右上角一个白色

用户头像

初晴47090

2026.10.08
手机端小程序UI设计稿，宽度375px比例的竖屏页面（“我的订单”列表页），高保真电商小程序截图风格，白色页面底色。顶部为从橙色渐变到琥珀色的弧形（圆角/波浪状底部）背景区，背景区左上为白色粗体大标题“我的订单”；标题下方一排横向排列的状态标签文字，依次为“全部”“待付款”“待发货”“待收货”“待评价”，其中“全部”为当前选中态：白色文字下方带一条橙色下划线，其余标签为白色半透明文字。 下面为圆角卡片式订单列表，共3张白色圆角卡片（带轻微阴影），卡片间距均匀，页面底部保留一段白色空白。每张卡片内容从上到下：卡片顶部一行左侧为店铺名文字“美居装修社”，右侧为橙色订单状态文字（第一张“待付款”、第二张“待发货”、第三张“待收货”）；卡片中部左侧为一个正方形商品缩略图（圆角，图内为家居装饰商品实物，第一张为一幅简约装饰画，第二张为一套浴室置物架，第三张为一块木纹饰面板）；右侧三行文本：第一行商品名称（分别是“北欧风装饰画 客厅挂画”“免打孔浴室置物架 双层”“木纹饰面板 免漆护墙板”），第二行规格（分别是“规格：60×80cm 原木框”“规格：枪灰色 60cm”“规格：桜木纹 1㎡”），第三行价格（分别是“¥129.00”“¥89.00”“¥159.00”）；卡片底部一行左侧为合计文字“共1件商品 合计¥129.00”“共2件商品 合计¥178.00”“共1件商品 合计¥159.00”，右侧两个圆角按钮并排：左侧“取消订单”为白色底加深灰色描边、深灰文字，右侧“去付款”为橙色实心底、白色文字。 整体风格：干净、现代、信息层次清晰，淘宝小程序质感，所有文字为简体中文且全部横向排版（禁止竖排与旋转），字号清晰可读，图片与文字对齐整齐；不出现水印、二维码、平台logo、绝对化用语。手机端小程序UI设计稿，宽度375px比例的竖屏页面（“我的订单”列表页），高保真电商小程序截图风格，白色页面底色。顶部为从橙色渐变到琥珀色的弧形（圆角/波浪状底部）背景区，背景区左上为白色粗体大标题“我的订单”；标题下方一排横向排列的状态标签文字，依次为“全部”“待付款”“待发货”“待收货”“待评价”，其中“全部”为当前选中态：白色文字下方带一条橙色下划线，其余标签为白色半透明文字。 下面为圆角卡片式订单列表，共3张白色圆角卡片（带轻微阴影），卡片间距均匀，页面底部保留一段白色空白。每张卡片内容从上到下：卡片顶部一行左侧为店铺名文字“美居装修社”，右侧为橙色订单状态文字（第一张“待付款”、第二张“待发货”、第三张“待收货”）；卡片中部左侧为一个正方形商品缩略图（圆角，图内为家居装饰商品实物，第一张为一幅简约装饰画，第二张为一套浴室置物架，第三张为一块木纹饰面板）；右侧三行文本：第一行商品名称（分别是“北欧风装饰画 客厅挂画”“免打孔浴室置物架 双层”“木纹饰面板 免漆护墙板”），第二行规格（分别是“规格：60×80cm 原木框”“规格：枪灰色 60cm”“规格：桜木纹 1㎡”），第三行价格（分别是“¥129.00”“¥89.00”“¥159.00”）；卡片底部一行左侧为合计文字“共1件商品 合计¥129.00”“共2件商品 合计¥178.00”“共1件商品 合计¥159.00”，右侧两个圆角按钮并排：左侧“取消订单”为白色底加深灰色描边、深灰文字，右侧“去付款”为橙色实心底、白色文字。 整体风格：干净、现代、信息层次清晰，淘宝小程序质感，所有文字为简体中文且全部横向排版（禁止竖排与旋转），字号清晰可读，图片与文字对齐整齐；不出现水印、二维码、平台logo、绝对化用语。
初晴47090初晴47090
高端教学高端教学
GD449547758GD449547758
1q00sxzxbe-HB1q00sxzxbe-HB
高德崇高德崇
高德崇高德崇
GD720042415GD720042415
高德崇高德崇
高德崇高德崇
1q0cz4ae2e-HB1q0cz4ae2e-HB
微信小程序装修套餐详情页，竖屏手机端UI界面，375px宽度比例，简约现代风格，白色为主背景色，信息清晰层次分明，突出套餐价值和信任感。主色调微信绿色#07C160，促销红色#FF4D4F，正文色#333，辅助文字色#999，分割线色#F0F0F0，卡片圆角12px，模块间距12px。页面从上到下包含以下模块：1.顶部导航栏：左侧灰色返回箭头，中间深灰色文字"套餐详情"标题，右侧灰色分享图标，白色背景底部1px浅灰分割线。2.套餐头图区：顶部大图占满宽度高约220px，展示干净明亮的卫生间翻新完工实景图，图片底部叠加半透明黑色渐变遮罩，白色文字"卫生间翻新套餐"20px加粗，下方白色小字"防水+瓷砖+洁具+吊顶 · 7天完工"。3.价格信息条：白色背景内边距16px，左侧大字"¥3,999"深绿色加粗26px，右侧原价"¥5,800"灰色删除线；价格下方灰色小字"约¥444/㎡ · 按实际面积结算"；右上角红色圆角标签"限时9折"。4.套餐包含清单：白色圆角12px卡片，标题"套餐包含"深灰色加粗；下方纵向列表6项，每项左侧绿色对勾图标✓，中间项目名称+品牌+规格说明，右侧灰色小字单项参考价：防水工程东方雨虹柔性防水刷两遍价值¥800、墙地砖铺贴东鹏300×600瓷片含人工辅料价值¥1,600、吊顶工程铝扣板集成吊顶含LED灯价值¥600、洁具三件套箭牌马桶+浴室柜+花洒价值¥1,800、水电改造局部改造含管线材料价值¥500、竣工保洁+验收价值¥200；列表底部汇总行左侧"套餐总价值 ¥5,500"灰色，右侧红色"套餐价 ¥3,999 省¥1,501"。5.施工流程区：白色圆角12px卡片，标题"施工流程"，横向时间轴样式5个节点从左到右：①上门量房→②方案确认→③材料进场→④施工安装→⑤验收交付，每个节点绿色圆形图标+下方步骤名称，节点之间绿色虚线连接。6.主材品牌区：白色圆角12px卡片，标题"精选主材"，横向滑动4张品牌卡片每张宽约120px，上方品牌logo区域白色背景圆角矩形，下方品牌名称"东鹏瓷砖"+灰色小字"一线品牌·国标品质"，卡片间距8px。7.前后对比区：白色圆角12px卡片，标题"完工效果"，左右对比布局，左侧"施工前"BEFORE标签+旧卫生间偏暗旧照片，右侧"完工后"AFTER标签+翻新后明亮干净照片，两张图等宽并排中间白色竖线分割。8.业主评价区：白色圆角12px卡片，标题"已服务86户"，评分"4.9分"黄色星星；下方2条评论，每条32px圆形用户头像+昵称+评分星星+2行文字内容+2张48px圆角买家秀小图；底部"查看全部评价 >"绿色文字。9.注意事项区：白色圆角12px卡片，标题"温馨提示"，折叠手风琴样式3条："套餐适用于6㎡以内卫生间""超出面积按实际用量补差价""施工期间需业主配合断水断电"，每条右侧向下箭头">"。10.底部固定操作栏：高度64px白色背景顶部1px浅灰分割线，左侧客服图标+文字"咨询"和收藏图标+文字"收藏"，右侧深绿色实心圆角按钮"立即预约 ¥3,999"白色加粗文字。整体视觉重点突出套餐价值感和专业信任感，高清商用UI设计稿，iPhone手机屏幕比例微信小程序装修套餐详情页，竖屏手机端UI界面，375px宽度比例，简约现代风格，白色为主背景色，信息清晰层次分明，突出套餐价值和信任感。主色调微信绿色#07C160，促销红色#FF4D4F，正文色#333，辅助文字色#999，分割线色#F0F0F0，卡片圆角12px，模块间距12px。页面从上到下包含以下模块：1.顶部导航栏：左侧灰色返回箭头，中间深灰色文字"套餐详情"标题，右侧灰色分享图标，白色背景底部1px浅灰分割线。2.套餐头图区：顶部大图占满宽度高约220px，展示干净明亮的卫生间翻新完工实景图，图片底部叠加半透明黑色渐变遮罩，白色文字"卫生间翻新套餐"20px加粗，下方白色小字"防水+瓷砖+洁具+吊顶 · 7天完工"。3.价格信息条：白色背景内边距16px，左侧大字"¥3,999"深绿色加粗26px，右侧原价"¥5,800"灰色删除线；价格下方灰色小字"约¥444/㎡ · 按实际面积结算"；右上角红色圆角标签"限时9折"。4.套餐包含清单：白色圆角12px卡片，标题"套餐包含"深灰色加粗；下方纵向列表6项，每项左侧绿色对勾图标✓，中间项目名称+品牌+规格说明，右侧灰色小字单项参考价：防水工程东方雨虹柔性防水刷两遍价值¥800、墙地砖铺贴东鹏300×600瓷片含人工辅料价值¥1,600、吊顶工程铝扣板集成吊顶含LED灯价值¥600、洁具三件套箭牌马桶+浴室柜+花洒价值¥1,800、水电改造局部改造含管线材料价值¥500、竣工保洁+验收价值¥200；列表底部汇总行左侧"套餐总价值 ¥5,500"灰色，右侧红色"套餐价 ¥3,999 省¥1,501"。5.施工流程区：白色圆角12px卡片，标题"施工流程"，横向时间轴样式5个节点从左到右：①上门量房→②方案确认→③材料进场→④施工安装→⑤验收交付，每个节点绿色圆形图标+下方步骤名称，节点之间绿色虚线连接。6.主材品牌区：白色圆角12px卡片，标题"精选主材"，横向滑动4张品牌卡片每张宽约120px，上方品牌logo区域白色背景圆角矩形，下方品牌名称"东鹏瓷砖"+灰色小字"一线品牌·国标品质"，卡片间距8px。7.前后对比区：白色圆角12px卡片，标题"完工效果"，左右对比布局，左侧"施工前"BEFORE标签+旧卫生间偏暗旧照片，右侧"完工后"AFTER标签+翻新后明亮干净照片，两张图等宽并排中间白色竖线分割。8.业主评价区：白色圆角12px卡片，标题"已服务86户"，评分"4.9分"黄色星星；下方2条评论，每条32px圆形用户头像+昵称+评分星星+2行文字内容+2张48px圆角买家秀小图；底部"查看全部评价 >"绿色文字。9.注意事项区：白色圆角12px卡片，标题"温馨提示"，折叠手风琴样式3条："套餐适用于6㎡以内卫生间""超出面积按实际用量补差价""施工期间需业主配合断水断电"，每条右侧向下箭头">"。10.底部固定操作栏：高度64px白色背景顶部1px浅灰分割线，左侧客服图标+文字"咨询"和收藏图标+文字"收藏"，右侧深绿色实心圆角按钮"立即预约 ¥3,999"白色加粗文字。整体视觉重点突出套餐价值感和专业信任感，高清商用UI设计稿，iPhone手机屏幕比例
高端教学高端教学
微信小程序「美居装修社」的「我的」个人中心页面，手机竖版UI界面设计，现代简约温暖质感家装风格。配色方案：背景色米白色#F7F5F0，主色调暖橙色#E8873B，辅助色深棕色#5C4A3A，文字主色深灰色#333，次要文字浅灰色#999。页面布局从上到下：1.顶部个人信息区：渐变暖橙色背景从#E8873B到#F0A060，左侧白色圆形头像框内灰色默认人像图标，右侧白色文字昵称「微信用户」和手机号后四位，右上角白色消息铃铛图标带红色数字角标。2.我的订单卡片：白色圆角16px卡片，标题栏「我的订单」深棕色加粗，右侧「查看全部」橙色文字带箭头；下方4列网格布局，每列一个橙色线条图标+灰色12px文字：待付款（钱包图标）、待发货（货车图标）、待收货（包裹图标）、待评价（星星图标）。3.装修服务卡片：白色圆角16px卡片，标题栏「我的装修」深棕色加粗，右侧「全部工单」橙色文字带箭头；下方横向5个状态胶囊按钮：待量房、设计中、施工中、待验收、已完成，浅米色背景#F5F0E8，深棕色文字，圆角20px。4.常用功能列表：白色圆角16px卡片，4行功能入口，每行左侧橙色圆形图标背景+白色线性图标，中间功能名称深棕色文字，最右侧灰色箭头；4个功能分别是：预约记录（日历图标）、收藏案例（心形图标）、专属客服（耳机图标，带绿色在线小圆点）、意见反馈（气泡图标）。底部导航栏：白色背景顶部细线分隔，4个Tab等分——首页、商城、安装工、我的；未选中图标灰色#CCC，选中态图标和文字均为暖橙色#E8873B，当前「我的」为选中状态。设计规范：页面左右边距16px，卡片圆角16px，卡片间距12px，卡片内边距16px；标题字体16px加粗，正文14px常规，辅助文字12px；整体留白充足，视觉层次清晰，扁平化设计，高清商用UI设计稿，iPhone手机屏幕比例微信小程序「美居装修社」的「我的」个人中心页面，手机竖版UI界面设计，现代简约温暖质感家装风格。配色方案：背景色米白色#F7F5F0，主色调暖橙色#E8873B，辅助色深棕色#5C4A3A，文字主色深灰色#333，次要文字浅灰色#999。页面布局从上到下：1.顶部个人信息区：渐变暖橙色背景从#E8873B到#F0A060，左侧白色圆形头像框内灰色默认人像图标，右侧白色文字昵称「微信用户」和手机号后四位，右上角白色消息铃铛图标带红色数字角标。2.我的订单卡片：白色圆角16px卡片，标题栏「我的订单」深棕色加粗，右侧「查看全部」橙色文字带箭头；下方4列网格布局，每列一个橙色线条图标+灰色12px文字：待付款（钱包图标）、待发货（货车图标）、待收货（包裹图标）、待评价（星星图标）。3.装修服务卡片：白色圆角16px卡片，标题栏「我的装修」深棕色加粗，右侧「全部工单」橙色文字带箭头；下方横向5个状态胶囊按钮：待量房、设计中、施工中、待验收、已完成，浅米色背景#F5F0E8，深棕色文字，圆角20px。4.常用功能列表：白色圆角16px卡片，4行功能入口，每行左侧橙色圆形图标背景+白色线性图标，中间功能名称深棕色文字，最右侧灰色箭头；4个功能分别是：预约记录（日历图标）、收藏案例（心形图标）、专属客服（耳机图标，带绿色在线小圆点）、意见反馈（气泡图标）。底部导航栏：白色背景顶部细线分隔，4个Tab等分——首页、商城、安装工、我的；未选中图标灰色#CCC，选中态图标和文字均为暖橙色#E8873B，当前「我的」为选中状态。设计规范：页面左右边距16px，卡片圆角16px，卡片间距12px，卡片内边距16px；标题字体16px加粗，正文14px常规，辅助文字12px；整体留白充足，视觉层次清晰，扁平化设计，高清商用UI设计稿，iPhone手机屏幕比例
高端教学高端教学
1q72wqhbbj-HB1q72wqhbbj-HB
1q72wqhbbj-HB1q72wqhbbj-HB
1q72wqhbbj-HB1q72wqhbbj-HB
GD176642723GD176642723
ojxinojxin
1q72wqhbbj-HB1q72wqhbbj-HB
英豪1987英豪1987
LU-LU鹿LU-LU鹿
生成一张微信小程序竖屏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”，右侧主色高亮按钮“提交订单并支付”。 已添加服务卡片为核心信息区，总价视觉突出，所有文字清晰可见，使用无衬线字体，整体风格与前序设计保持统一。
678typ3ch-HB678typ3ch-HB
1q498168uz2l1lng8-HB1q498168uz2l1lng8-HB
1q2rqdj61m-HB1q2rqdj61m-HB
生成一张微信小程序竖屏UI设计图，宽高比9:16，深色专业风，与智宅焕前序关联订单页UI风格保持一致，仅修改区域一为项目筛选，其他区域（简化下单流程、补充信息、底部操作区、关联成功状态示意）保持原有内容不变。 修正后的区域一：关联项目筛选，区域标题“关联至项目”，核心交互为微信小程序标准下拉筛选框，占位文字“请选择要关联的项目”，右侧带向下箭头示意可展开；展开下拉列表后，展示客户名下3个示例项目，每条项目记录格式：项目名称 + 项目地址 + 项目类型 + 面积，示例项目： 1. 张先生家智能改造 - 上海市闵行区 - 平层 120㎡ 2. 李女士家灯光升级 - 上海市浦东新区 - 复式 180㎡ 3. 王总办公室智能化 - 上海市静安区 - 工装 300㎡ 选中项目后，下拉框展示选中项目名称，下方自动填充只读项目基本信息卡片：项目地址「上海市闵行区XX路XX号」、户型面积「120㎡」、项目类型「平层」，卡片底部小字提示“以上信息来自主项目，不可修改”；在页面底部增加黄色警示条提示：“主项目信息不完整，请先返回主项目完善信息后再关联订单”（主项目信息不完整场景示意）。 下拉筛选框要清晰展示展开/收起状态，选中项目信息自动填充且视觉上体现不可修改，所有文字清晰可见，使用无衬线字体，整体风格与原页面保持一致。生成一张微信小程序竖屏UI设计图，宽高比9:16，深色专业风，与智宅焕前序关联订单页UI风格保持一致，仅修改区域一为项目筛选，其他区域（简化下单流程、补充信息、底部操作区、关联成功状态示意）保持原有内容不变。 修正后的区域一：关联项目筛选，区域标题“关联至项目”，核心交互为微信小程序标准下拉筛选框，占位文字“请选择要关联的项目”，右侧带向下箭头示意可展开；展开下拉列表后，展示客户名下3个示例项目，每条项目记录格式：项目名称 + 项目地址 + 项目类型 + 面积，示例项目： 1. 张先生家智能改造 - 上海市闵行区 - 平层 120㎡ 2. 李女士家灯光升级 - 上海市浦东新区 - 复式 180㎡ 3. 王总办公室智能化 - 上海市静安区 - 工装 300㎡ 选中项目后，下拉框展示选中项目名称，下方自动填充只读项目基本信息卡片：项目地址「上海市闵行区XX路XX号」、户型面积「120㎡」、项目类型「平层」，卡片底部小字提示“以上信息来自主项目，不可修改”；在页面底部增加黄色警示条提示：“主项目信息不完整，请先返回主项目完善信息后再关联订单”（主项目信息不完整场景示意）。 下拉筛选框要清晰展示展开/收起状态，选中项目信息自动填充且视觉上体现不可修改，所有文字清晰可见，使用无衬线字体，整体风格与原页面保持一致。
678typ3ch-HB678typ3ch-HB
ojxinojxin