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

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

移动端小程序服务页面UI设计,温馨生活风,暖橙色调。顶部导航栏显示"服务"标题,左侧返回箭头,右侧有客服图标。页面上方是两个大的服务入口卡片,左右并排:左侧"安装服务"卡片,有安装工人图标和"预约安装

用户头像

GD176642723

2026.08.14
微信小程序「美居装修社」的「我的」个人中心页面,手机竖版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手机屏幕比例
[第12张] 售后保障与行动号召页——服务承诺与立即预约。本张使用【图1】作为服务品质背景图参考(半透明背景叠加)。 [氛围/风格] 信任保障+行动号召,稳重有力,京东服务保障风格,渐变背景+图标组合。 [元素布局] 画面背景为淡蓝色渐变,叠加半透明安装场景(参考输入图中师傅与幕布,作为氛围背景);中上部为4大售后保障图标横向排列:「质保服务」「快速响应」「免费返工」「全程保险」;中下部为大号行动号召按钮区;底部为客服与联系方式提示。 [光影质感] 背景柔和朦胧,前景图标与文字清晰突出,按钮有光泽感和立体感,整体温暖可信。 [配色色系] 全局底色浅蓝渐变 #E3F2FD → #BBDEFB;主色深蓝 #1F3A5F;行动按钮橙色渐变 #F5A623 → #E67E22;图标蓝色填充;保障标签白色底。 [视角构图] 正面平视,居中对称布局,阅读动线顶部标语 → 4大保障 → 行动按钮 → 底部客服提示。 [文字版式] 顶部主标题「售后无忧 安心之选」,副标题「多重保障 让您安装无后顾之忧」;4个保障图标下方对应文字:「质保服务」「快速响应」「不满意返工」「安全保障」;中间大号橙色按钮「立即预约上门安装」,按钮内白色粗体字;按钮下方小字「点击咨询客服 获取专属安装方案」;最底部标注「全国主要城市可上门服务 详情咨询在线客服」。 [比例分辨率] 9:16 竖版比例,4K 分辨率,文字清晰可辨,高清画质。 [负向提示词] 按钮诱导点击感过强,文字错乱,文字过小,水印,京东logo,虚假承诺。[第12张] 售后保障与行动号召页——服务承诺与立即预约。本张使用【图1】作为服务品质背景图参考(半透明背景叠加)。
[氛围/风格] 信任保障+行动号召,稳重有力,京东服务保障风格,渐变背景+图标组合。
[元素布局] 画面背景为淡蓝色渐变,叠加半透明安装场景(参考输入图中师傅与幕布,作为氛围背景);中上部为4大售后保障图标横向排列:「质保服务」「快速响应」「免费返工」「全程保险」;中下部为大号行动号召按钮区;底部为客服与联系方式提示。
[光影质感] 背景柔和朦胧,前景图标与文字清晰突出,按钮有光泽感和立体感,整体温暖可信。
[配色色系] 全局底色浅蓝渐变 #E3F2FD → #BBDEFB;主色深蓝 #1F3A5F;行动按钮橙色渐变 #F5A623 → #E67E22;图标蓝色填充;保障标签白色底。
[视角构图] 正面平视,居中对称布局,阅读动线顶部标语 → 4大保障 → 行动按钮 → 底部客服提示。
[文字版式] 顶部主标题「售后无忧 安心之选」,副标题「多重保障 让您安装无后顾之忧」;4个保障图标下方对应文字:「质保服务」「快速响应」「不满意返工」「安全保障」;中间大号橙色按钮「立即预约上门安装」,按钮内白色粗体字;按钮下方小字「点击咨询客服 获取专属安装方案」;最底部标注「全国主要城市可上门服务 详情咨询在线客服」。
[比例分辨率] 9:16 竖版比例,4K 分辨率,文字清晰可辨,高清画质。
[负向提示词] 按钮诱导点击感过强,文字错乱,文字过小,水印,京东logo,虚假承诺。
基于参考图的养老服务平台小程序首页,保持整体橙色系风格、布局结构、底部双tab、关爱版悬浮按钮不变,进行以下修改:1. 页面中完全不出现任何老年人形象或老年相关元素,整体视觉年轻化;2. 腰通大banner的「养老补贴券 限时领取」改为「新人专享福利」主题,主标题改为「新人专享 注册即领」,副标题改为「新用户注册立享300元新人礼包」,按钮改为「立即领取」,右侧红包/券元素保留但改为新人礼包风格,突出新用户注册领取的刺激感;3. 下方四个服务商品卡片全部替换为具体的服务和商品:左上卡片改为「家庭保洁服务」,配图为干净明亮的家居清洁场景,价格¥99/次起,标签改为「热门服务」,副标题为「专业保洁 上门服务」;右上卡片改为「助浴服务」,配图为浴室适老化设备场景(无人物),价格¥158/次起,标签改为「贴心服务」,副标题为「专业助浴 安全舒适」;左下卡片改为「适老化扶手」,配图为卫生间安装扶手的适老化产品场景图,价格¥299,标签改为「适老优选」,副标题为「安全防滑 安装简便」;右下卡片改为「智能按摩椅」保留但配图更年轻化,或改为「老年智能手表」配图为智能手表产品图,价格¥599,标签改为「包邮到家」,副标题为「健康监测 一键呼救」;4. 顶部窄版banner的「乐享银龄 活力每一天」文案调整为更年轻化的表达,如「品质生活 用心守护」,整体氛围更贴近年轻用户为家人选购的视角。基于参考图的养老服务平台小程序首页,保持整体橙色系风格、布局结构、底部双tab、关爱版悬浮按钮不变,进行以下修改:1. 页面中完全不出现任何老年人形象或老年相关元素,整体视觉年轻化;2. 腰通大banner的「养老补贴券 限时领取」改为「新人专享福利」主题,主标题改为「新人专享 注册即领」,副标题改为「新用户注册立享300元新人礼包」,按钮改为「立即领取」,右侧红包/券元素保留但改为新人礼包风格,突出新用户注册领取的刺激感;3. 下方四个服务商品卡片全部替换为具体的服务和商品:左上卡片改为「家庭保洁服务」,配图为干净明亮的家居清洁场景,价格¥99/次起,标签改为「热门服务」,副标题为「专业保洁 上门服务」;右上卡片改为「助浴服务」,配图为浴室适老化设备场景(无人物),价格¥158/次起,标签改为「贴心服务」,副标题为「专业助浴 安全舒适」;左下卡片改为「适老化扶手」,配图为卫生间安装扶手的适老化产品场景图,价格¥299,标签改为「适老优选」,副标题为「安全防滑 安装简便」;右下卡片改为「智能按摩椅」保留但配图更年轻化,或改为「老年智能手表」配图为智能手表产品图,价格¥599,标签改为「包邮到家」,副标题为「健康监测 一键呼救」;4. 顶部窄版banner的「乐享银龄 活力每一天」文案调整为更年轻化的表达,如「品质生活 用心守护」,整体氛围更贴近年轻用户为家人选购的视角。