创意预览图

微信小程序装修商品详情页,竖屏手机端UI界面,375px宽度比例,简约现代风格,白色为主背景色,整体干净精致,突出商品质感。主色调微信绿色#07C160,辅助绿色#E8F8EE用于标签背景,正文色#3

用户头像

高端教学

2026.08.03
微信小程序装修案例详情页,竖屏手机端UI界面,375px宽度比例,简约现代风格,白色为主背景色,整体干净通透,图片突出。主色调微信绿色#07C160,正文色#333,辅助文字色#999,分割线色#F0F0F0,卡片圆角12px,模块间距12px。页面从上到下包含以下模块:1.顶部导航栏:左侧白色返回箭头,中间白色文字"案例详情"标题,右侧白色分享图标,导航栏半透明黑色渐变悬浮在图片上方。2.案例封面大图:顶部第一屏大幅轮播图,占满屏幕宽度,高度约300px,展示现代简约北欧风格客厅实景图(原木+白色基调,明亮通透),底部居中白色圆点序号指示器●○○○○,右下角有一个小视频播放角标(白色三角形播放按钮)。3.案例标题:白色背景内边距16px,标题文字"【北欧简约】89㎡两居室温馨小家",字号18px加粗深灰色#333。4.案例简介:标题下方,灰色摘要文字#666,字号14px,内容"全屋采用北欧原木+白色基调,通过合理的收纳设计和灯光布局,让小空间也能拥有大宅的通透感。"。5.设计师信息条:白色卡片,顶部1px浅灰分割线;左侧圆形设计师头像44px,右侧上方"张设计师"加粗,下方灰色小字"从业8年 · 擅长北欧/现代简约",最右侧绿色描边圆角按钮"咨询TA"绿色文字。6.业主评论评价区:标题"业主评价",左侧五星评分全亮黄色星星,右侧评分数字"5.0";下方评论卡片,评论者小头像+昵称+日期,评论内容2-3行灰色正文"设计师很用心,每个细节都反复确认,最终效果超出预期!工期也很准时,推荐!";底部一行小字"查看全部12条评价 >"灰色。7.项目详情卡片:白色圆角12px卡片,标题"项目信息",两列网格布局6项数据:预算"12万"、工期"75天"、户型"两室一厅"、面积"89㎡"、风格"北欧简约"、小区"金山万达府";数字加粗深绿色#07C160,下方小字标签浅灰色。8.更多案例推荐:标题"更多案例",横向滑动卡片,每张卡片宽约160px,上方案例封面缩略图圆角8px,下方案例标题和面积如"现代简约·120㎡三居",卡片间距12px。9.底部固定操作栏:高度56px白色背景,顶部1px浅灰分割线;左侧收藏图标空心爱心和电话图标,右侧占满剩余宽度的绿色实心圆角按钮"免费获取报价"白色文字。整体视觉层次清晰,大图优先,文字克制精炼,留白舒适,高清商用UI设计稿,iPhone手机屏幕比例微信小程序装修案例详情页,竖屏手机端UI界面,375px宽度比例,简约现代风格,白色为主背景色,整体干净通透,图片突出。主色调微信绿色#07C160,正文色#333,辅助文字色#999,分割线色#F0F0F0,卡片圆角12px,模块间距12px。页面从上到下包含以下模块:1.顶部导航栏:左侧白色返回箭头,中间白色文字"案例详情"标题,右侧白色分享图标,导航栏半透明黑色渐变悬浮在图片上方。2.案例封面大图:顶部第一屏大幅轮播图,占满屏幕宽度,高度约300px,展示现代简约北欧风格客厅实景图(原木+白色基调,明亮通透),底部居中白色圆点序号指示器●○○○○,右下角有一个小视频播放角标(白色三角形播放按钮)。3.案例标题:白色背景内边距16px,标题文字"【北欧简约】89㎡两居室温馨小家",字号18px加粗深灰色#333。4.案例简介:标题下方,灰色摘要文字#666,字号14px,内容"全屋采用北欧原木+白色基调,通过合理的收纳设计和灯光布局,让小空间也能拥有大宅的通透感。"。5.设计师信息条:白色卡片,顶部1px浅灰分割线;左侧圆形设计师头像44px,右侧上方"张设计师"加粗,下方灰色小字"从业8年 · 擅长北欧/现代简约",最右侧绿色描边圆角按钮"咨询TA"绿色文字。6.业主评论评价区:标题"业主评价",左侧五星评分全亮黄色星星,右侧评分数字"5.0";下方评论卡片,评论者小头像+昵称+日期,评论内容2-3行灰色正文"设计师很用心,每个细节都反复确认,最终效果超出预期!工期也很准时,推荐!";底部一行小字"查看全部12条评价 >"灰色。7.项目详情卡片:白色圆角12px卡片,标题"项目信息",两列网格布局6项数据:预算"12万"、工期"75天"、户型"两室一厅"、面积"89㎡"、风格"北欧简约"、小区"金山万达府";数字加粗深绿色#07C160,下方小字标签浅灰色。8.更多案例推荐:标题"更多案例",横向滑动卡片,每张卡片宽约160px,上方案例封面缩略图圆角8px,下方案例标题和面积如"现代简约·120㎡三居",卡片间距12px。9.底部固定操作栏:高度56px白色背景,顶部1px浅灰分割线;左侧收藏图标空心爱心和电话图标,右侧占满剩余宽度的绿色实心圆角按钮"免费获取报价"白色文字。整体视觉层次清晰,大图优先,文字克制精炼,留白舒适,高清商用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宽度比例,简约现代风格,白色为主背景色,信息清晰层次分明,突出套餐价值和信任感。主色调微信绿色#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手机屏幕比例
[单张主图] 实木餐桌电商主图,高级氛围感主图,目标展示真实家居环境中的美观效果。 [画面主体] 保持实木餐桌和六把实木餐椅的外观、物理结构、材质质感、原木颜色与输入产品图绝对一致,杜绝任何变形和色差,精细化处理。商品主体占比约65%,45度斜侧平视视角,餐桌居中展示,六把餐椅摆放保持和原图一致结构。 [构图版式] 采用真实使用场景型,产品置于画面中心偏右下,左侧留白,底部添加3个简约线框图标卖点。背景为现代简约家居空间,浅灰色哑光地面,左侧保留原木色开放格墙面,右侧墙面添加一幅简约原木框装饰挂画。 [场景元素] 在餐桌中央靠左位置添加一个简约素色陶瓷花瓶,花瓶中插几支简约鲜切花,搭配自然不遮挡餐桌主体。墙面挂画风格简约北欧,和原木风格和谐统一,配色和整体空间适配。整体搭配美观和谐,无任何文字信息。 [光影质感] 柔和自然光从左侧窗户斜射入空间,主光柔和均匀,阴影过渡自然,形成温馨舒适的家居氛围。商业摄影质感,光线柔和通透,产品纹理清晰真实,画面干净高级,浅景深处理背景突出餐桌主体。 [配色字体] 主色调为原木暖棕+浅灰米白,低饱和度配色,自然和谐。画面无任何文字和文案,纯图片展示。 [比例分辨率] 3:4比例,4K分辨率,画面超高清。 [负向提示词] 变形,水印,文字错乱,产品图模糊,背景杂乱,遮挡餐桌主体,产品颜色不一致,结构变形,文字,水印,错误结构[单张主图] 实木餐桌电商主图,高级氛围感主图,目标展示真实家居环境中的美观效果。
[画面主体] 保持实木餐桌和六把实木餐椅的外观、物理结构、材质质感、原木颜色与输入产品图绝对一致,杜绝任何变形和色差,精细化处理。商品主体占比约65%,45度斜侧平视视角,餐桌居中展示,六把餐椅摆放保持和原图一致结构。
[构图版式] 采用真实使用场景型,产品置于画面中心偏右下,左侧留白,底部添加3个简约线框图标卖点。背景为现代简约家居空间,浅灰色哑光地面,左侧保留原木色开放格墙面,右侧墙面添加一幅简约原木框装饰挂画。
[场景元素] 在餐桌中央靠左位置添加一个简约素色陶瓷花瓶,花瓶中插几支简约鲜切花,搭配自然不遮挡餐桌主体。墙面挂画风格简约北欧,和原木风格和谐统一,配色和整体空间适配。整体搭配美观和谐,无任何文字信息。
[光影质感] 柔和自然光从左侧窗户斜射入空间,主光柔和均匀,阴影过渡自然,形成温馨舒适的家居氛围。商业摄影质感,光线柔和通透,产品纹理清晰真实,画面干净高级,浅景深处理背景突出餐桌主体。
[配色字体] 主色调为原木暖棕+浅灰米白,低饱和度配色,自然和谐。画面无任何文字和文案,纯图片展示。
[比例分辨率] 3:4比例,4K分辨率,画面超高清。
[负向提示词] 变形,水印,文字错乱,产品图模糊,背景杂乱,遮挡餐桌主体,产品颜色不一致,结构变形,文字,水印,错误结构
微信小程序装修套餐选择页,竖屏手机端UI界面,375px宽度比例,简约现代风格,白色为主背景色,突出套餐丰富可选性价比高。主色调微信绿色#07C160,促销红色#FF4D4F,正文色#333,辅助文字色#999,分割线色#F0F0F0,卡片圆角12px,模块间距12px。页面从上到下包含以下模块:1.顶部导航栏:左侧灰色返回箭头,中间深灰色文字"超值套餐"标题,右侧无按钮,白色背景底部1px浅灰分割线。2.顶部Banner区:高度约140px,渐变背景从深绿#07C160到浅绿#38D9A9,中间白色大字"选择你的翻新套餐",下方白色小字"按需选择 · 省心省力 · 质保三年",右下角简约家居线条图标装饰。3.分类Tab栏:白色背景,横向排列5个Tab按钮"全部""卫生间""厨房""卧室""全屋",默认选中"全部",选中项底部绿色下划线文字绿色加粗,未选中文字灰色#666,可左右滑动。4.套餐对比入口:列表上方右侧绿色文字按钮"对比套餐 >"。5.套餐卡片列表:纵向排列多个套餐卡片,每个白色圆角12px带轻微阴影,卡片间距12px左右边距16px;每个卡片左侧100×100px圆角8px套餐缩略图(对应空间实景图),右侧上方套餐名称如"卫生间翻新套餐"16px加粗深灰色,名称下方灰色小字简介"防水+瓷砖+洁具+吊顶,7天完工",简介下方2-3个小标签"含主材""包施工""质保3年",标签背景浅绿色#E8F8EE文字深绿色圆角4px;卡片底部左侧价格如"¥3,999"深绿色加粗18px,右侧绿色文字按钮"查看详情 >"。6.推荐套餐卡片突出显示:第二个套餐卡片右上角红色飘带标签"热门推荐",卡片浅绿色描边2px更突出。7.底部提示条:浅灰色背景条,文字"不确定选哪个?",右侧绿色文字按钮"免费咨询"。8.底部固定操作栏:高度56px白色背景顶部浅灰分割线,左侧客服图标+文字"咨询",右侧深绿色实心按钮"免费获取报价"白色文字。整体套餐卡片信息层次清晰,价格醒目,方便用户快速对比选择,高清商用UI设计稿,iPhone手机屏幕比例微信小程序装修套餐选择页,竖屏手机端UI界面,375px宽度比例,简约现代风格,白色为主背景色,突出套餐丰富可选性价比高。主色调微信绿色#07C160,促销红色#FF4D4F,正文色#333,辅助文字色#999,分割线色#F0F0F0,卡片圆角12px,模块间距12px。页面从上到下包含以下模块:1.顶部导航栏:左侧灰色返回箭头,中间深灰色文字"超值套餐"标题,右侧无按钮,白色背景底部1px浅灰分割线。2.顶部Banner区:高度约140px,渐变背景从深绿#07C160到浅绿#38D9A9,中间白色大字"选择你的翻新套餐",下方白色小字"按需选择 · 省心省力 · 质保三年",右下角简约家居线条图标装饰。3.分类Tab栏:白色背景,横向排列5个Tab按钮"全部""卫生间""厨房""卧室""全屋",默认选中"全部",选中项底部绿色下划线文字绿色加粗,未选中文字灰色#666,可左右滑动。4.套餐对比入口:列表上方右侧绿色文字按钮"对比套餐 >"。5.套餐卡片列表:纵向排列多个套餐卡片,每个白色圆角12px带轻微阴影,卡片间距12px左右边距16px;每个卡片左侧100×100px圆角8px套餐缩略图(对应空间实景图),右侧上方套餐名称如"卫生间翻新套餐"16px加粗深灰色,名称下方灰色小字简介"防水+瓷砖+洁具+吊顶,7天完工",简介下方2-3个小标签"含主材""包施工""质保3年",标签背景浅绿色#E8F8EE文字深绿色圆角4px;卡片底部左侧价格如"¥3,999"深绿色加粗18px,右侧绿色文字按钮"查看详情 >"。6.推荐套餐卡片突出显示:第二个套餐卡片右上角红色飘带标签"热门推荐",卡片浅绿色描边2px更突出。7.底部提示条:浅灰色背景条,文字"不确定选哪个?",右侧绿色文字按钮"免费咨询"。8.底部固定操作栏:高度56px白色背景顶部浅灰分割线,左侧客服图标+文字"咨询",右侧深绿色实心按钮"免费获取报价"白色文字。整体套餐卡片信息层次清晰,价格醒目,方便用户快速对比选择,高清商用UI设计稿,iPhone手机屏幕比例
[第1张] 详情页头图-北欧简约橡木仿皮餐椅主视觉海报。本张使用【图1】作为商品主体,展示灰色仿皮款餐椅全貌。 [氛围/风格] 北欧原木风,暖调自然光,温馨居家餐厅氛围,商业摄影质感,简约高级。 [元素布局] 右侧约60%区域为北欧餐厅实景场景,浅木色餐桌旁摆放两把灰色仿皮橡木餐椅,产品占比约55%;餐椅结构、比例、橡木脚架纹理、仿皮座面质感与输入图一致;左侧约40%留作文案区;场景中加入绿植、陶瓷餐具、米色餐垫、暖光吊灯等软装元素,层次丰富。 [光影质感] 左上方柔和自然光,右侧辅光补亮,餐椅底部自然投影,整体明亮通透,木纹与仿皮质感清晰。 [配色色系] 全局底色 #F5EFE6(米杏色);主色原木暖棕+灰色仿皮;辅助色米白、浅绿点缀。 [视角构图] 45°斜侧视角,产品为视觉中心,阅读动线左上标题→中部卖点→右侧产品→底部信息条。 [文字版式] 左文右景版式。主标题「久坐舒适 颜值在线」,副标题「北欧简约橡木餐椅 餐厅书房都适配」,两行黑体左对齐;标题下方3个胶囊卖点「橡木实木脚架」「仿皮亲肤座面」「人体工学靠背」;底部英文角标「NORDIC DINING CHAIR」;文字不遮挡餐椅主体。 [比例分辨率] 9:16 竖版比例,4K 分辨率,文字清晰可辨,高清画质。 [负向提示词] 餐椅变形,缺件错件,结构错误,颜色偏差,水印,文字错乱,文字过小,产品图模糊,背景杂乱。[第1张] 详情页头图-北欧简约橡木仿皮餐椅主视觉海报。本张使用【图1】作为商品主体,展示灰色仿皮款餐椅全貌。
[氛围/风格] 北欧原木风,暖调自然光,温馨居家餐厅氛围,商业摄影质感,简约高级。
[元素布局] 右侧约60%区域为北欧餐厅实景场景,浅木色餐桌旁摆放两把灰色仿皮橡木餐椅,产品占比约55%;餐椅结构、比例、橡木脚架纹理、仿皮座面质感与输入图一致;左侧约40%留作文案区;场景中加入绿植、陶瓷餐具、米色餐垫、暖光吊灯等软装元素,层次丰富。
[光影质感] 左上方柔和自然光,右侧辅光补亮,餐椅底部自然投影,整体明亮通透,木纹与仿皮质感清晰。
[配色色系] 全局底色 #F5EFE6(米杏色);主色原木暖棕+灰色仿皮;辅助色米白、浅绿点缀。
[视角构图] 45°斜侧视角,产品为视觉中心,阅读动线左上标题→中部卖点→右侧产品→底部信息条。
[文字版式] 左文右景版式。主标题「久坐舒适 颜值在线」,副标题「北欧简约橡木餐椅 餐厅书房都适配」,两行黑体左对齐;标题下方3个胶囊卖点「橡木实木脚架」「仿皮亲肤座面」「人体工学靠背」;底部英文角标「NORDIC DINING CHAIR」;文字不遮挡餐椅主体。
[比例分辨率] 9:16 竖版比例,4K 分辨率,文字清晰可辨,高清画质。
[负向提示词] 餐椅变形,缺件错件,结构错误,颜色偏差,水印,文字错乱,文字过小,产品图模糊,背景杂乱。