微信小程序装修预约页面,竖版移动端UI界面设计,现代简约家装风… - 图片创意预览

微信小程序装修预约页面,竖版移动端UI界面设计,现代简约家装风…

微信小程序装修预约页面,竖版移动端UI界面设计,现代简约家装风格,主色调原木咖色+白色。页面顶部banner区域,原木咖色渐变背景,白色大字标题文字"免费上门量房 预约设计",副标题小字"专业设计师一

用户头像

高端教学

2026.07.27
微信小程序「美居装修社」的「我的」个人中心页面,手机竖版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手机屏幕比例
微信小程序装修套餐列表页面,竖屏手机端UI界面,375px宽度比例,简约现代风格,白色背景浅灰色卡片。配色方案:主色调蓝色#2B6CB0,辅助色浅灰#F7F8FA,价格色红色#E53E3E,正文深灰#333,辅助文字#999,分割线#EEEEEE。页面布局从上到下:1.顶部导航栏:白色背景,左侧灰色返回箭头图标,中间深灰色文字标题"装修套餐"17px加粗,右侧无按钮,导航栏底部1px浅灰分割线。2.横向滑动分类标签栏:白色背景,横向排列6个分类标签:全部、卫生间、厨房、卧室、客厅、全屋整装;当前选中"全部",蓝色#2B6CB0文字加粗+底部蓝色下划线高亮,未选中灰色#666文字,标签可左右滑动,标签栏底部1px浅灰分割线。3.主体套餐卡片列表:纵向排列多张套餐卡片,每张卡片浅灰色#F7F8FA背景圆角12px,卡片间距12px,左右边距16px,内边距14px;每张卡片左侧是套餐效果图圆角矩形(如卫生间/厨房/卧室实景图),右侧上方套餐名称如"卫生间翻新套餐A"深灰色16px加粗,名称下方一行灰色小字标注面积范围和适用户型如"3-6㎡ · 适用于老房翻新",再下方是2-3个套餐亮点标签小圆角胶囊样式如"防水质保5年""环保材料""7天完工",浅蓝背景蓝色文字;卡片底部左侧套餐价格红色#E53E3E加粗如"¥9,800起"18px,右侧是"查看详情"按钮蓝色#2B6CB0实心圆角按钮白色文字。整体留白充足,信息层次清晰。4.底部TabBar:白色背景顶部1px浅灰分割线,4个Tab等分——首页、套餐、商城、我的;"套餐"Tab当前选中,图标和文字均为蓝色#2B6CB0,未选中图标灰色#999。整体干净简洁,适合28-55岁家装用户群体,高清商用UI设计稿,iPhone手机屏幕比例微信小程序装修套餐列表页面,竖屏手机端UI界面,375px宽度比例,简约现代风格,白色背景浅灰色卡片。配色方案:主色调蓝色#2B6CB0,辅助色浅灰#F7F8FA,价格色红色#E53E3E,正文深灰#333,辅助文字#999,分割线#EEEEEE。页面布局从上到下:1.顶部导航栏:白色背景,左侧灰色返回箭头图标,中间深灰色文字标题"装修套餐"17px加粗,右侧无按钮,导航栏底部1px浅灰分割线。2.横向滑动分类标签栏:白色背景,横向排列6个分类标签:全部、卫生间、厨房、卧室、客厅、全屋整装;当前选中"全部",蓝色#2B6CB0文字加粗+底部蓝色下划线高亮,未选中灰色#666文字,标签可左右滑动,标签栏底部1px浅灰分割线。3.主体套餐卡片列表:纵向排列多张套餐卡片,每张卡片浅灰色#F7F8FA背景圆角12px,卡片间距12px,左右边距16px,内边距14px;每张卡片左侧是套餐效果图圆角矩形(如卫生间/厨房/卧室实景图),右侧上方套餐名称如"卫生间翻新套餐A"深灰色16px加粗,名称下方一行灰色小字标注面积范围和适用户型如"3-6㎡ · 适用于老房翻新",再下方是2-3个套餐亮点标签小圆角胶囊样式如"防水质保5年""环保材料""7天完工",浅蓝背景蓝色文字;卡片底部左侧套餐价格红色#E53E3E加粗如"¥9,800起"18px,右侧是"查看详情"按钮蓝色#2B6CB0实心圆角按钮白色文字。整体留白充足,信息层次清晰。4.底部TabBar:白色背景顶部1px浅灰分割线,4个Tab等分——首页、套餐、商城、我的;"套餐"Tab当前选中,图标和文字均为蓝色#2B6CB0,未选中图标灰色#999。整体干净简洁,适合28-55岁家装用户群体,高清商用UI设计稿,iPhone手机屏幕比例
[第10张] 详情页行动号召-预约方式与服务须知。本张使用【图1】作为底部场景小图参考。 [氛围/风格] 简洁明了、行动导向,京东转化风格,突出预约按钮。 [元素布局] 画面上半部分为预约引导区,有醒目的预约按钮设计;中间部分为服务须知,3条重要说明用图标+文字呈现;底部为小型场景横幅图(参考图1清洁场景,营造专业氛围);整体布局清晰,引导用户下单。 [光影质感] 整体明亮平光,按钮有立体感和点击感,干净清爽。 [配色色系] 全局底色 #F5F8FF浅蓝白;主色 #1E6FFF京东蓝(按钮主色);辅助色 #FF6B00橙色(强调色);文字色 #333333深灰。 [视角构图] 垂直信息流布局,从上到下:标题→预约按钮→服务须知→底部场景图。 [文字版式] 顶部主标题「立即预约 专业上门」,副标题「30秒下单 最快当日上门」;中间大按钮「立即预约」蓝色圆角矩形按钮,按钮内白色文字,按钮下方小字「点击下方链接 即刻预约服务」;服务须知3条:「服务须知」标题下,1.「预约后客服会在30分钟内与您确认服务时间」、2.「服务前请清理好贵重私人物品」、3.「服务面积按建筑面积计算,详情咨询客服」;底部场景图上叠加文字「初开荒保洁 · 让新家焕然一新」。 [比例分辨率] 9:16竖版比例,4K分辨率,文字清晰可辨,高清画质。 [负向提示词] 水印,二维码,微信/QQ等导流信息,京东logo,绝对化用语。[第10张] 详情页行动号召-预约方式与服务须知。本张使用【图1】作为底部场景小图参考。
[氛围/风格] 简洁明了、行动导向,京东转化风格,突出预约按钮。
[元素布局] 画面上半部分为预约引导区,有醒目的预约按钮设计;中间部分为服务须知,3条重要说明用图标+文字呈现;底部为小型场景横幅图(参考图1清洁场景,营造专业氛围);整体布局清晰,引导用户下单。
[光影质感] 整体明亮平光,按钮有立体感和点击感,干净清爽。
[配色色系] 全局底色 #F5F8FF浅蓝白;主色 #1E6FFF京东蓝(按钮主色);辅助色 #FF6B00橙色(强调色);文字色 #333333深灰。
[视角构图] 垂直信息流布局,从上到下:标题→预约按钮→服务须知→底部场景图。
[文字版式] 顶部主标题「立即预约 专业上门」,副标题「30秒下单 最快当日上门」;中间大按钮「立即预约」蓝色圆角矩形按钮,按钮内白色文字,按钮下方小字「点击下方链接 即刻预约服务」;服务须知3条:「服务须知」标题下,1.「预约后客服会在30分钟内与您确认服务时间」、2.「服务前请清理好贵重私人物品」、3.「服务面积按建筑面积计算,详情咨询客服」;底部场景图上叠加文字「初开荒保洁 · 让新家焕然一新」。
[比例分辨率] 9:16竖版比例,4K分辨率,文字清晰可辨,高清画质。
[负向提示词] 水印,二维码,微信/QQ等导流信息,京东logo,绝对化用语。
微信小程序「我的收藏-案例」页面,竖屏手机端UI界面,375px宽度比例,简洁清爽风格,白色为主深灰文字点缀橙红色。配色:主色橙红色#FF6B35,背景白色#FFFFFF,卡片浅灰阴影,正文深灰#333,辅助文字#999。页面布局从上到下:1.顶部导航栏:白色背景,左侧灰色返回箭头图标,中间深灰色文字标题"收藏案例"17px加粗,右侧无按钮,底部1px浅灰分割线。2.横向筛选标签栏:白色背景,横向排列6个标签:全部、客厅、卧室、厨房、卫生间、全屋;选中"全部"用橙红色#FF6B35文字加粗+底部橙红色下划线高亮,未选中灰色#666文字,可左右滑动。3.主体双列瀑布流卡片布局:两列等宽,卡片间距10px,左右边距12px;每张白色圆角卡片带轻微浅灰阴影,上方案例效果图圆角(家装实景图如客厅卧室厨房等),图片左下角浮着装修风格标签如"现代简约"白色文字半透明黑底小圆角;图片下方案例标题如"120㎡三室两厅现代简约"深灰色14px,再下方灰色小字收藏时间如"2026-08-10收藏"12px;卡片右下角有一个实心红色爱心图标表示已收藏。卡片高度错落形成瀑布流效果。4.底部TabBar:白色背景顶部1px浅灰分割线,4个Tab等分——首页、案例、服务、我的;"案例"Tab当前选中,图标和文字均为橙红色#FF6B35,未选中图标灰色#999。整体简洁清爽,留白舒适,高清商用UI设计稿,iPhone手机屏幕比例微信小程序「我的收藏-案例」页面,竖屏手机端UI界面,375px宽度比例,简洁清爽风格,白色为主深灰文字点缀橙红色。配色:主色橙红色#FF6B35,背景白色#FFFFFF,卡片浅灰阴影,正文深灰#333,辅助文字#999。页面布局从上到下:1.顶部导航栏:白色背景,左侧灰色返回箭头图标,中间深灰色文字标题"收藏案例"17px加粗,右侧无按钮,底部1px浅灰分割线。2.横向筛选标签栏:白色背景,横向排列6个标签:全部、客厅、卧室、厨房、卫生间、全屋;选中"全部"用橙红色#FF6B35文字加粗+底部橙红色下划线高亮,未选中灰色#666文字,可左右滑动。3.主体双列瀑布流卡片布局:两列等宽,卡片间距10px,左右边距12px;每张白色圆角卡片带轻微浅灰阴影,上方案例效果图圆角(家装实景图如客厅卧室厨房等),图片左下角浮着装修风格标签如"现代简约"白色文字半透明黑底小圆角;图片下方案例标题如"120㎡三室两厅现代简约"深灰色14px,再下方灰色小字收藏时间如"2026-08-10收藏"12px;卡片右下角有一个实心红色爱心图标表示已收藏。卡片高度错落形成瀑布流效果。4.底部TabBar:白色背景顶部1px浅灰分割线,4个Tab等分——首页、案例、服务、我的;"案例"Tab当前选中,图标和文字均为橙红色#FF6B35,未选中图标灰色#999。整体简洁清爽,留白舒适,高清商用UI设计稿,iPhone手机屏幕比例
[第7屏] 收纳服务规格与适用人群详情页,套餐信息说明。 [氛围/风格] 清晰信息卡片风格,专业明了,日式极简,商业设计质感。 [元素布局] 画面上方是三个套餐卡片横向排列(基础体验、全屋整理、定制规划),卡片有不同颜色边框区分;下方是适用人群和不适用人群两个板块,左右并排;背景浅米色,简约装饰线条。 [光影质感] 平面设计风格,均匀明亮,卡片有轻微阴影增加层次感。 [配色色系] 全局底色 #F7F5F0;卡片白色底;基础款浅灰边框、全屋款抹茶绿边框、定制款金色边框;文字深灰为主。 [视角构图] 上半部分三列套餐卡片,下半部分左右分栏,整体居中对称,阅读动线从上到下。 [文字版式] 顶部主标题「选择适合你的收纳方案」居中加粗;三个套餐卡片分别标注:「基础体验」- 单空间/4小时/适合小范围整理,「全屋整理」- 全屋空间/1-2天/适合整体改造,「定制规划」- 专属方案+上门+30天跟进/适合深度需求;下方左侧「适合人群」:搬家入住、换季整理、空间不够用、想系统学收纳;右侧「暂不适合」:期望当天彻底改变、不愿断舍离、房屋正在装修中;底部有提示「下单前可咨询客服评估方案」。 [比例分辨率] 9:16竖版比例,4K分辨率,文字清晰可辨,高清画质。 [负向提示词] 变形,水印,文字错乱,文字过小,卡片模糊,颜色偏差,信息杂乱。[第7屏] 收纳服务规格与适用人群详情页,套餐信息说明。
[氛围/风格] 清晰信息卡片风格,专业明了,日式极简,商业设计质感。
[元素布局] 画面上方是三个套餐卡片横向排列(基础体验、全屋整理、定制规划),卡片有不同颜色边框区分;下方是适用人群和不适用人群两个板块,左右并排;背景浅米色,简约装饰线条。
[光影质感] 平面设计风格,均匀明亮,卡片有轻微阴影增加层次感。
[配色色系] 全局底色 #F7F5F0;卡片白色底;基础款浅灰边框、全屋款抹茶绿边框、定制款金色边框;文字深灰为主。
[视角构图] 上半部分三列套餐卡片,下半部分左右分栏,整体居中对称,阅读动线从上到下。
[文字版式] 顶部主标题「选择适合你的收纳方案」居中加粗;三个套餐卡片分别标注:「基础体验」- 单空间/4小时/适合小范围整理,「全屋整理」- 全屋空间/1-2天/适合整体改造,「定制规划」- 专属方案+上门+30天跟进/适合深度需求;下方左侧「适合人群」:搬家入住、换季整理、空间不够用、想系统学收纳;右侧「暂不适合」:期望当天彻底改变、不愿断舍离、房屋正在装修中;底部有提示「下单前可咨询客服评估方案」。
[比例分辨率] 9:16竖版比例,4K分辨率,文字清晰可辨,高清画质。
[负向提示词] 变形,水印,文字错乱,文字过小,卡片模糊,颜色偏差,信息杂乱。
[主图-5] 精装房阳台通铺 全屋通铺瓷砖铺贴服务 适用场景与下单说明。 [统一基调] 暖调家居风 卡通工人IP延续 米白+浅木色主背景 深棕色主标题字 橙色强调色 圆润卡通字体 圆角图标卡片 整体温馨专业。 [画面] 画面上方是戴黄色安全帽的卡通工人站在通铺完成的精装房客厅中央,张开手臂展示宽敞的空间,背景是客厅+阳台+餐厅全屋通铺的开阔场景,浅灰色大瓷砖统一地面,阳光从阳台洒入,整个空间明亮通透。画面下方是三个适用场景卡片和一个下单引导区域。左侧卡片:精装房改造;中间卡片:阳台通铺;右侧卡片:全屋翻新。底部有醒目的橙色圆角按钮区域。 [光影质感] 自然光从阳台大面积照入,地面瓷砖反光柔和,空间感强,商业插画质感,温馨明亮,有家装氛围感。 [配色] 主背景米白+浅木色 瓷砖浅灰色 卡片白色底橙色边框 主标题深棕色 按钮橙色底白色字 整体温暖有转化感。 [文字版式] 顶部大标题"这些户型都能做 全屋通铺",下方三张卡片分别写:"精装房改造""阳台通铺""全屋翻新",每张卡片配小图标和简短说明。底部橙色大按钮区域写:"点击咨询 免费上门测量",旁边小字"专业师傅 售后无忧",文字横排,字体圆润卡通,标题最大最粗,按钮文字醒目。 [输出要求] 比例1:1 文字清晰可读 场景明确 人物和场景清晰 无变形 无错字 无水印 无平台Logo 画面整洁有转化感。[主图-5] 精装房阳台通铺 全屋通铺瓷砖铺贴服务 适用场景与下单说明。
[统一基调] 暖调家居风 卡通工人IP延续 米白+浅木色主背景 深棕色主标题字 橙色强调色 圆润卡通字体 圆角图标卡片 整体温馨专业。
[画面] 画面上方是戴黄色安全帽的卡通工人站在通铺完成的精装房客厅中央,张开手臂展示宽敞的空间,背景是客厅+阳台+餐厅全屋通铺的开阔场景,浅灰色大瓷砖统一地面,阳光从阳台洒入,整个空间明亮通透。画面下方是三个适用场景卡片和一个下单引导区域。左侧卡片:精装房改造;中间卡片:阳台通铺;右侧卡片:全屋翻新。底部有醒目的橙色圆角按钮区域。
[光影质感] 自然光从阳台大面积照入,地面瓷砖反光柔和,空间感强,商业插画质感,温馨明亮,有家装氛围感。
[配色] 主背景米白+浅木色 瓷砖浅灰色 卡片白色底橙色边框 主标题深棕色 按钮橙色底白色字 整体温暖有转化感。
[文字版式] 顶部大标题"这些户型都能做 全屋通铺",下方三张卡片分别写:"精装房改造""阳台通铺""全屋翻新",每张卡片配小图标和简短说明。底部橙色大按钮区域写:"点击咨询 免费上门测量",旁边小字"专业师傅 售后无忧",文字横排,字体圆润卡通,标题最大最粗,按钮文字醒目。
[输出要求] 比例1:1 文字清晰可读 场景明确 人物和场景清晰 无变形 无错字 无水印 无平台Logo 画面整洁有转化感。
[详情页-7] 行动号召与保障页,核心任务是促进咨询转化,展示服务保障。 [商品] 使用【图1】鸟瞰图作为背景素材;保留整体厨房布局和3D效果;降低亮度和饱和度作为背景层,突出前景文字和CTA。 [画面] 全屏转化海报构图。背景为半透明处理的商用厨房鸟瞰3D图,整体偏亮偏灰,营造氛围感。前景中央为核心转化区,包含大标题、保障承诺和CTA按钮。底部为服务保障图标栏。整体层次分明,CTA醒目。 [视觉] 套系策略:风格=专业工业风商业3D渲染;标题字=现代无衬线粗黑体;正文字=简洁无衬线体;主色=不锈钢银灰+白色瓷砖;背景延展=浅灰到白色渐变、干净微质感;强调色=活力橙,用于按钮、图标、重点标注;标题色=深炭黑;正文色=中灰色;组件=圆角矩形卡片、细线引线、图标+文字组合;光影=背景图柔和处理,前景文字和按钮清晰突出,按钮有轻微投影。 [文字] 中央大标题"免费获取专属厨房设计方案",黑色超大粗体;副标题"专业设计师一对一服务",深灰色中号字;下方大橙色圆角按钮"立即咨询 免费出方案",白色粗体大字;按钮下方小字"留下联系方式 设计师24小时内联系您",灰色字;底部3个保障图标横向排列:"免费出方案""满意为止""全程跟进",每个配橙色图标+黑色文字;最底部小字"专业商用厨房设计 让您省心又放心",灰色字。 [规格] 图片比例3:4竖版,4K分辨率,避免变形、错字、文字过小、模糊、水印、平台Logo、绝对化用语、联系方式二维码。[详情页-7] 行动号召与保障页,核心任务是促进咨询转化,展示服务保障。
[商品] 使用【图1】鸟瞰图作为背景素材;保留整体厨房布局和3D效果;降低亮度和饱和度作为背景层,突出前景文字和CTA。
[画面] 全屏转化海报构图。背景为半透明处理的商用厨房鸟瞰3D图,整体偏亮偏灰,营造氛围感。前景中央为核心转化区,包含大标题、保障承诺和CTA按钮。底部为服务保障图标栏。整体层次分明,CTA醒目。
[视觉] 套系策略:风格=专业工业风商业3D渲染;标题字=现代无衬线粗黑体;正文字=简洁无衬线体;主色=不锈钢银灰+白色瓷砖;背景延展=浅灰到白色渐变、干净微质感;强调色=活力橙,用于按钮、图标、重点标注;标题色=深炭黑;正文色=中灰色;组件=圆角矩形卡片、细线引线、图标+文字组合;光影=背景图柔和处理,前景文字和按钮清晰突出,按钮有轻微投影。
[文字] 中央大标题"免费获取专属厨房设计方案",黑色超大粗体;副标题"专业设计师一对一服务",深灰色中号字;下方大橙色圆角按钮"立即咨询 免费出方案",白色粗体大字;按钮下方小字"留下联系方式 设计师24小时内联系您",灰色字;底部3个保障图标横向排列:"免费出方案""满意为止""全程跟进",每个配橙色图标+黑色文字;最底部小字"专业商用厨房设计 让您省心又放心",灰色字。
[规格] 图片比例3:4竖版,4K分辨率,避免变形、错字、文字过小、模糊、水印、平台Logo、绝对化用语、联系方式二维码。
生成一张微信小程序竖屏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. 底部固定按钮区:全宽次要按钮“关联订单”,全宽低调警示色按钮“发起争议”。
四个区域用清晰分隔线或卡片间距区分,所有文字清晰可见,使用无衬线字体,整体风格和前序智宅焕设计保持统一。
[详情页-7] 行动号召与保障页,核心任务是促进咨询转化,展示服务保障。 [商品] 使用【图1】鸟瞰图作为背景素材;保留整体厨房布局和3D效果;降低亮度和饱和度作为背景层,突出前景文字和CTA。 [画面] 全屏转化海报构图。背景为半透明处理的商用厨房鸟瞰3D图,整体偏亮偏灰,营造氛围感。前景中央为核心转化区,包含大标题、保障承诺和CTA按钮。底部为服务保障图标栏。整体层次分明,CTA醒目。 [视觉] 套系策略:风格=专业工业风商业3D渲染;标题字=现代无衬线粗黑体;正文字=简洁无衬线体;主色=不锈钢银灰+白色瓷砖;背景延展=浅灰到白色渐变、干净微质感;强调色=活力橙,用于按钮、图标、重点标注;标题色=深炭黑;正文色=中灰色;组件=圆角矩形卡片、细线引线、图标+文字组合;光影=背景图柔和处理,前景文字和按钮清晰突出,按钮有轻微投影。 [文字] 中央大标题"免费获取专属厨房设计方案",黑色超大粗体;副标题"专业设计师一对一服务",深灰色中号字;下方大橙色圆角按钮"立即咨询 免费出方案",白色粗体大字;按钮下方小字"留下联系方式 设计师24小时内联系您",灰色字;底部3个保障图标横向排列:"免费出方案""满意为止""全程跟进",每个配橙色图标+黑色文字;最底部小字"专业商用厨房设计 让您省心又放心",灰色字。 [规格] 图片比例3:4竖版,4K分辨率,避免变形、错字、文字过小、模糊、水印、平台Logo、绝对化用语、联系方式二维码。[详情页-7] 行动号召与保障页,核心任务是促进咨询转化,展示服务保障。
[商品] 使用【图1】鸟瞰图作为背景素材;保留整体厨房布局和3D效果;降低亮度和饱和度作为背景层,突出前景文字和CTA。
[画面] 全屏转化海报构图。背景为半透明处理的商用厨房鸟瞰3D图,整体偏亮偏灰,营造氛围感。前景中央为核心转化区,包含大标题、保障承诺和CTA按钮。底部为服务保障图标栏。整体层次分明,CTA醒目。
[视觉] 套系策略:风格=专业工业风商业3D渲染;标题字=现代无衬线粗黑体;正文字=简洁无衬线体;主色=不锈钢银灰+白色瓷砖;背景延展=浅灰到白色渐变、干净微质感;强调色=活力橙,用于按钮、图标、重点标注;标题色=深炭黑;正文色=中灰色;组件=圆角矩形卡片、细线引线、图标+文字组合;光影=背景图柔和处理,前景文字和按钮清晰突出,按钮有轻微投影。
[文字] 中央大标题"免费获取专属厨房设计方案",黑色超大粗体;副标题"专业设计师一对一服务",深灰色中号字;下方大橙色圆角按钮"立即咨询 免费出方案",白色粗体大字;按钮下方小字"留下联系方式 设计师24小时内联系您",灰色字;底部3个保障图标横向排列:"免费出方案""满意为止""全程跟进",每个配橙色图标+黑色文字;最底部小字"专业商用厨房设计 让您省心又放心",灰色字。
[规格] 图片比例3:4竖版,4K分辨率,避免变形、错字、文字过小、模糊、水印、平台Logo、绝对化用语、联系方式二维码。