物业小程序登录切换账号页面UI设计,主色调简约蓝色,包含手机号… - 图片创意预览

物业小程序登录切换账号页面UI设计,主色调简约蓝色,包含手机号…

物业小程序登录切换账号页面UI设计,主色调简约蓝色,包含手机号输入框、验证码输入框,楼栋单元房号绑定区域,获取验证码按钮和登录按钮,顶部显示小程序logo和欢迎语,现代简约UI设计风格,微信小程序移动

用户头像

乐清_

2026.06.05
微信小程序装修套餐列表页面,竖屏手机端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设计图,宽高比9:16,深色专业风,与智宅焕整套UI体系保持一致,为客户在自动验收前24小时收到的全屏强制提醒弹窗,全屏半透明深色遮罩,中央居中展示圆角带阴影弹窗卡片,宽度占屏幕80%,必须点击按钮才能关闭。 弹窗从上到下布局: 1. 顶部:中央醒目的⏰提醒图标,图标下方橙色警示色标题“自动验收提醒”。 2. 中部核心信息:展示订单信息:订单编号“ZXH20260703001”,项目名称“张先生家智能改造”,服务内容“现场安装调试”,分隔线后居中大字核心提示“您的订单将于24小时后自动完成验收”,下方小字“如对交付结果有异议,请及时处理”,再下方小字“超时未处理,系统将自动完成验收,订单状态变更为‘已完成’”,时间信息大而清晰,弹窗醒目有紧迫感。 3. 底部操作区:纵向排列两个按钮,间距适中:主色高亮大按钮“确认验收”(点击进入验收确认流程),警示色边框按钮“发起争议”(点击进入争议发起页面),按钮下方灰色弱化文字链接“稍后处理”(点击关闭弹窗,系统将持续提醒)。 页面底部虚线框标注关闭弹窗后的状态:标注“关闭弹窗后 ↓”,框内示意:弹窗关闭后,项目看板顶部展示黄色提示条“您的订单将于24小时后自动验收,如有问题请及时处理”,提示条右侧有“立即处理”按钮。 两个核心操作按钮提供明确下一步路径,稍后处理为低优先级选项视觉弱化,所有文字清晰可见,使用无衬线字体,整体风格与智宅焕深色专业UI体系保持一致。生成一张微信小程序竖屏UI设计图,宽高比9:16,深色专业风,与智宅焕整套UI体系保持一致,为客户在自动验收前24小时收到的全屏强制提醒弹窗,全屏半透明深色遮罩,中央居中展示圆角带阴影弹窗卡片,宽度占屏幕80%,必须点击按钮才能关闭。
弹窗从上到下布局:
1. 顶部:中央醒目的⏰提醒图标,图标下方橙色警示色标题“自动验收提醒”。
2. 中部核心信息:展示订单信息:订单编号“ZXH20260703001”,项目名称“张先生家智能改造”,服务内容“现场安装调试”,分隔线后居中大字核心提示“您的订单将于24小时后自动完成验收”,下方小字“如对交付结果有异议,请及时处理”,再下方小字“超时未处理,系统将自动完成验收,订单状态变更为‘已完成’”,时间信息大而清晰,弹窗醒目有紧迫感。
3. 底部操作区:纵向排列两个按钮,间距适中:主色高亮大按钮“确认验收”(点击进入验收确认流程),警示色边框按钮“发起争议”(点击进入争议发起页面),按钮下方灰色弱化文字链接“稍后处理”(点击关闭弹窗,系统将持续提醒)。
页面底部虚线框标注关闭弹窗后的状态:标注“关闭弹窗后 ↓”,框内示意:弹窗关闭后,项目看板顶部展示黄色提示条“您的订单将于24小时后自动验收,如有问题请及时处理”,提示条右侧有“立即处理”按钮。
两个核心操作按钮提供明确下一步路径,稍后处理为低优先级选项视觉弱化,所有文字清晰可见,使用无衬线字体,整体风格与智宅焕深色专业UI体系保持一致。
创意 × 4