创意预览图

地尔卫浴小程序首页UI设计,科技蓝白色调,智能卫浴品牌风格。顶部状态栏。页面顶部是品牌导航栏,左侧地尔卫浴logo,中间搜索框有"搜索智能马桶/卫浴产品"文字,右侧消息图标。下方是大尺寸轮播Banne

用户头像

GD176642723

2026.08.14
地尔卫浴小程序智家页面UI设计,科技蓝白色调,智能卫浴全景场景。顶部导航栏"智家"标题,左侧"设备管理"文字,右侧"+ 添加设备"。页面顶部是大尺寸智能卫生间全景Banner图,画面中同时展示:智能马桶、智能浴室镜带灯带、顶喷花洒淋浴区、智能浴霸在天花板、智能毛巾架,整体是现代轻奢卫浴空间,蓝色科技氛围灯。Banner中央悬浮一个半透明毛玻璃控制面板,显示"卫浴模式"大字标题,副标"智能生活·舒适掌控",下方三个数据:水温38℃、座温36℃、空气质量优,各配图标。Banner底部有轮播指示点。下方"我的设备"标题栏,右侧"设备管理>"。设备区域两行三列共6个卡片:智能马桶(显示座温36℃/水温38℃/风温28℃)、智能浴室镜、智能花洒、智能浴霸、智能晾衣架、空气净化器,每个卡片有设备实物图、名称、绿色在线小点、蓝色开关按钮。中间"场景推荐"标题栏,右侧"更多场景>"。下方三个场景卡片并排:起床模式(自动开盖+预热座圈)、淋浴模式(花洒+浴霸联动)、夜间模式(柔光夜灯),每个卡片有图标、标题、说明、场景小图和播放按钮。底部蓝色大按钮"+ 添加智能设备"。最底部是底部导航栏,5个Tab:首页、积分商城、智家(选中蓝色高亮)、服务、我的,每个Tab有线条图标和文字。整体科技洁净感,蓝白配色,圆角卡片,UI设计稿,高保真,界面清晰地尔卫浴小程序智家页面UI设计,科技蓝白色调,智能卫浴全景场景。顶部导航栏"智家"标题,左侧"设备管理"文字,右侧"+ 添加设备"。页面顶部是大尺寸智能卫生间全景Banner图,画面中同时展示:智能马桶、智能浴室镜带灯带、顶喷花洒淋浴区、智能浴霸在天花板、智能毛巾架,整体是现代轻奢卫浴空间,蓝色科技氛围灯。Banner中央悬浮一个半透明毛玻璃控制面板,显示"卫浴模式"大字标题,副标"智能生活·舒适掌控",下方三个数据:水温38℃、座温36℃、空气质量优,各配图标。Banner底部有轮播指示点。下方"我的设备"标题栏,右侧"设备管理>"。设备区域两行三列共6个卡片:智能马桶(显示座温36℃/水温38℃/风温28℃)、智能浴室镜、智能花洒、智能浴霸、智能晾衣架、空气净化器,每个卡片有设备实物图、名称、绿色在线小点、蓝色开关按钮。中间"场景推荐"标题栏,右侧"更多场景>"。下方三个场景卡片并排:起床模式(自动开盖+预热座圈)、淋浴模式(花洒+浴霸联动)、夜间模式(柔光夜灯),每个卡片有图标、标题、说明、场景小图和播放按钮。底部蓝色大按钮"+ 添加智能设备"。最底部是底部导航栏,5个Tab:首页、积分商城、智家(选中蓝色高亮)、服务、我的,每个Tab有线条图标和文字。整体科技洁净感,蓝白配色,圆角卡片,UI设计稿,高保真,界面清晰
微信小程序装修套餐详情页,竖屏手机端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界面,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手机屏幕比例