移动端小程序智家页面UI设计,温馨生活风,暖橙色调。顶部导航栏… - 图片创意预览

移动端小程序智家页面UI设计,温馨生活风,暖橙色调。顶部导航栏…

移动端小程序智家页面UI设计,温馨生活风,暖橙色调。顶部导航栏显示"智家"标题,左侧有设备管理图标,右侧有添加设备+号。页面顶部是智能家居场景总控卡片,温馨家居背景图,显示"回家模式"大字,有温度、湿

用户头像

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设计稿,高保真,界面清晰
[第5屏] 详情页核心功能实测-小米智能中控屏多设备一屏操控演示。本屏使用【图1】作为产品主体。 [氛围/风格] 真实家居场景,功能演示风,生活化+科技感结合,商业摄影质感。 [元素布局] 现代简约客厅场景中,小米智能中控屏安装在墙面开关位置,占画面中心偏左,占比约45%;屏幕显示智能家居控制界面,手指正在触控操作;背景中可以看到客厅的智能灯光亮起、智能窗帘正在开合、空调显示屏亮起等联动效果;产品外观、黑色边框、屏幕比例与输入产品图完全一致。 [光影质感] 室内暖光照明,屏幕自发光清晰,手指触控处有轻微光效,整体温馨明亮,产品与场景融合自然。 [配色色系] 全局底色为暖米色家居场景 #F5F0E8;主色科技蓝 #2D5BFF;辅助色暖黄灯光、白色文字、深灰边框。 [视角构图] 正面微侧视角,手部操作与产品同框,阅读动线从手部操作 → 屏幕界面 → 背景联动效果。 [文字版式] 版式为左侧操作场景 + 右侧文案说明。主标题「一屏触控 全屋响应」,副标题「多设备控制 如此简单」;右侧3个功能说明点:「灯光调节 亮度色温随心控」「窗帘控制 开合定时一键搞定」「空调管理 温度模式远程调」,每个配小图标;底部标签「触控响应 < 0.1秒」。 [比例分辨率] 9:16 竖版比例,1K分辨率,文字清晰可辨,高清画质。 [负向提示词] 产品变形,缺件错件,颜色偏差,水印,文字错乱,手部变形,场景不真实。[第5屏] 详情页核心功能实测-小米智能中控屏多设备一屏操控演示。本屏使用【图1】作为产品主体。
[氛围/风格] 真实家居场景,功能演示风,生活化+科技感结合,商业摄影质感。
[元素布局] 现代简约客厅场景中,小米智能中控屏安装在墙面开关位置,占画面中心偏左,占比约45%;屏幕显示智能家居控制界面,手指正在触控操作;背景中可以看到客厅的智能灯光亮起、智能窗帘正在开合、空调显示屏亮起等联动效果;产品外观、黑色边框、屏幕比例与输入产品图完全一致。
[光影质感] 室内暖光照明,屏幕自发光清晰,手指触控处有轻微光效,整体温馨明亮,产品与场景融合自然。
[配色色系] 全局底色为暖米色家居场景 #F5F0E8;主色科技蓝 #2D5BFF;辅助色暖黄灯光、白色文字、深灰边框。
[视角构图] 正面微侧视角,手部操作与产品同框,阅读动线从手部操作 → 屏幕界面 → 背景联动效果。
[文字版式] 版式为左侧操作场景 + 右侧文案说明。主标题「一屏触控 全屋响应」,副标题「多设备控制 如此简单」;右侧3个功能说明点:「灯光调节 亮度色温随心控」「窗帘控制 开合定时一键搞定」「空调管理 温度模式远程调」,每个配小图标;底部标签「触控响应 < 0.1秒」。
[比例分辨率] 9:16 竖版比例,1K分辨率,文字清晰可辨,高清画质。
[负向提示词] 产品变形,缺件错件,颜色偏差,水印,文字错乱,手部变形,场景不真实。