创意预览图

微信小程序「美居装修社」的「我的」个人中心页面,手机竖版UI界面设计,现代简约温暖质感家装风格。配色方案:背景色米白色#F7F5F0,主色调暖橙色#E8873B,辅助色深棕色#5C4A3A,文字主色深

用户头像

高端教学

2026.08.02
微信小程序「美居装修社」的「找工人」列表页面,手机竖版UI界面设计,用户浏览和选择装修工人,现代简约温暖质感家装风格。配色方案:背景色米白色#F7F5F0,主色调暖橙色#E8873B,辅助色深棕色#5C4A3A,文字主色深灰色#333,次要文字浅灰色#999。页面布局从上到下:1.顶部搜索栏:白色背景,圆角搜索框浅灰色背景#F0EDE8,左侧灰色搜索放大镜图标,占位文字「搜索工人姓名或工种」,右侧橙色「筛选」文字按钮。2.工种分类横滑条:白色背景,横向滚动分类标签,包括:全部、泥瓦工、水电工、木工、油漆工、拆除工、保洁;选中态橙色文字加橙色下划线,未选中灰色文字。3.工人卡片列表:每张卡片白色圆角16px,带轻微阴影,卡片间距12px,左右边距16px,内边距16px;每张卡片包含:左侧圆形工人头像(灰色默认人像图标),中间区域上方工人姓名「张师傅」深棕色加粗16px,姓名右侧橙色圆角标签显示工种「泥瓦工」白色文字,下方灰色小字「从业8年 · 完成326单 · 评分4.9」,再下方擅长技能标签「厨卫防水」「瓷砖铺贴」「墙面找平」,浅米色背景#F5F0E8深棕色文字圆角小标签;右侧区域上方橙色星级评分「4.9」加粗带黄色小星星图标,下方灰色「326单」小字,底部橙色描边圆角「预约」按钮(橙色边框橙色文字,透明背景)。4.列表底部居中灰色文字「已加载全部工人」。底部导航栏:白色背景顶部细线分隔,4个Tab等分——首页、商城、安装工、我的;未选中图标灰色#CCC,「安装工」Tab当前选中,图标和文字均为暖橙色#E8873B。设计规范:标题字体16px加粗,正文14px常规,辅助文字12px;整体留白充足,信息清晰易读,扁平化设计,高清商用UI设计稿,iPhone手机屏幕比例微信小程序「美居装修社」的「找工人」列表页面,手机竖版UI界面设计,用户浏览和选择装修工人,现代简约温暖质感家装风格。配色方案:背景色米白色#F7F5F0,主色调暖橙色#E8873B,辅助色深棕色#5C4A3A,文字主色深灰色#333,次要文字浅灰色#999。页面布局从上到下:1.顶部搜索栏:白色背景,圆角搜索框浅灰色背景#F0EDE8,左侧灰色搜索放大镜图标,占位文字「搜索工人姓名或工种」,右侧橙色「筛选」文字按钮。2.工种分类横滑条:白色背景,横向滚动分类标签,包括:全部、泥瓦工、水电工、木工、油漆工、拆除工、保洁;选中态橙色文字加橙色下划线,未选中灰色文字。3.工人卡片列表:每张卡片白色圆角16px,带轻微阴影,卡片间距12px,左右边距16px,内边距16px;每张卡片包含:左侧圆形工人头像(灰色默认人像图标),中间区域上方工人姓名「张师傅」深棕色加粗16px,姓名右侧橙色圆角标签显示工种「泥瓦工」白色文字,下方灰色小字「从业8年 · 完成326单 · 评分4.9」,再下方擅长技能标签「厨卫防水」「瓷砖铺贴」「墙面找平」,浅米色背景#F5F0E8深棕色文字圆角小标签;右侧区域上方橙色星级评分「4.9」加粗带黄色小星星图标,下方灰色「326单」小字,底部橙色描边圆角「预约」按钮(橙色边框橙色文字,透明背景)。4.列表底部居中灰色文字「已加载全部工人」。底部导航栏:白色背景顶部细线分隔,4个Tab等分——首页、商城、安装工、我的;未选中图标灰色#CCC,「安装工」Tab当前选中,图标和文字均为暖橙色#E8873B。设计规范:标题字体16px加粗,正文14px常规,辅助文字12px;整体留白充足,信息清晰易读,扁平化设计,高清商用UI设计稿,iPhone手机屏幕比例
微信小程序「我的收藏-案例」页面,竖屏手机端UI界面,375px宽度比例,简洁清爽风格,白色为主深灰文字点缀橙红色。配色:主色橙红色#FF6B35,背景白色#FFFFFF,卡片浅灰阴影,正文深灰#333,辅助文字#999。页面布局从上到下:1.顶部导航栏:白色背景,左侧灰色返回箭头图标,中间深灰色文字标题"收藏案例"17px加粗,右侧无按钮,底部1px浅灰分割线。2.横向筛选标签栏:白色背景,横向排列6个标签:全部、客厅、卧室、厨房、卫生间、全屋;选中"全部"用橙红色#FF6B35文字加粗+底部橙红色下划线高亮,未选中灰色#666文字,可左右滑动。3.主体双列瀑布流卡片布局:两列等宽,卡片间距10px,左右边距12px;每张白色圆角卡片带轻微浅灰阴影,上方案例效果图圆角(家装实景图如客厅卧室厨房等),图片左下角浮着装修风格标签如"现代简约"白色文字半透明黑底小圆角;图片下方案例标题如"120㎡三室两厅现代简约"深灰色14px,再下方灰色小字收藏时间如"2026-08-10收藏"12px;卡片右下角有一个实心红色爱心图标表示已收藏。卡片高度错落形成瀑布流效果。4.底部TabBar:白色背景顶部1px浅灰分割线,4个Tab等分——首页、案例、服务、我的;"案例"Tab当前选中,图标和文字均为橙红色#FF6B35,未选中图标灰色#999。整体简洁清爽,留白舒适,高清商用UI设计稿,iPhone手机屏幕比例微信小程序「我的收藏-案例」页面,竖屏手机端UI界面,375px宽度比例,简洁清爽风格,白色为主深灰文字点缀橙红色。配色:主色橙红色#FF6B35,背景白色#FFFFFF,卡片浅灰阴影,正文深灰#333,辅助文字#999。页面布局从上到下:1.顶部导航栏:白色背景,左侧灰色返回箭头图标,中间深灰色文字标题"收藏案例"17px加粗,右侧无按钮,底部1px浅灰分割线。2.横向筛选标签栏:白色背景,横向排列6个标签:全部、客厅、卧室、厨房、卫生间、全屋;选中"全部"用橙红色#FF6B35文字加粗+底部橙红色下划线高亮,未选中灰色#666文字,可左右滑动。3.主体双列瀑布流卡片布局:两列等宽,卡片间距10px,左右边距12px;每张白色圆角卡片带轻微浅灰阴影,上方案例效果图圆角(家装实景图如客厅卧室厨房等),图片左下角浮着装修风格标签如"现代简约"白色文字半透明黑底小圆角;图片下方案例标题如"120㎡三室两厅现代简约"深灰色14px,再下方灰色小字收藏时间如"2026-08-10收藏"12px;卡片右下角有一个实心红色爱心图标表示已收藏。卡片高度错落形成瀑布流效果。4.底部TabBar:白色背景顶部1px浅灰分割线,4个Tab等分——首页、案例、服务、我的;"案例"Tab当前选中,图标和文字均为橙红色#FF6B35,未选中图标灰色#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手机屏幕比例
[第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,虚假承诺。