创意预览图

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

用户头像

高端教学

2026.07.20
微信小程序装修套餐列表页面,竖屏手机端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手机屏幕比例
微信小程序「美居装修社」的「我的」个人中心页面,手机竖版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手机屏幕比例
[第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宽度比例,简约现代风格,白色为主背景色,信息清晰层次分明,突出套餐价值和信任感。主色调微信绿色#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手机屏幕比例