微信小程序UI设计规范稿,宠物APP「宠伴」会员中心页,750… - 图片创意预览

微信小程序UI设计规范稿,宠物APP「宠伴」会员中心页,750…

微信小程序UI设计规范稿,宠物APP「宠伴」会员中心页,750x1334px竖屏,严格微信小程序规范。顶部会员头区高400rpx,黑金渐变,标题「宠伴VIP会员」40rpx加粗白色,徽章图标120rp

用户头像

南枝12624

2026.09.29
设计移动端宠物APP附近门店页面,整体背景是浅奶油白#FEF9E7到白色渐变,营造温暖放心氛围。顶部导航区左侧黄色返回箭头,中间标题"附近门店"加粗18px深灰色,右上角横向排列黄色地图切换按钮和黄色筛选漏斗按钮。定位与搜索栏下方是组合功能条,左侧黄色定位图标加文字"朝阳区 · 建国路"14px深灰,右侧浅灰色圆角搜索条占位文字"搜索门店或服务"配黄色搜索图标。下方是横向滚动服务分类筛选胶囊:默认选中"全部"黄色背景白色文字,其他分类有"🏪 宠物用品""✂️ 洗护美容""🏠 寄养""🦷 洁牙""📸 宠物摄影""🎂 宠物蛋糕",选中态黄色填充,未选中浅灰边框加灰色文字。默认列表视图,顶部黄色细条切换开关,"列表"黄色选中态,"地图"浅灰色。核心区域是门店卡片列表,每个门店为白色背景圆角16px卡片,每个卡片包含:左侧80x80px圆角12px门店图片,16px加粗深灰色门店名称如"宠爱宠物生活馆(朝阳店)",黄色星标"4.8分"加灰色小字"(128评价)",浅黄圆形背景黄色标签"距您 1.2km",横向排列服务标签胶囊,绿色圆点加"营业中 09:00-21:00",灰色小字地址"朝阳区建国路88号SOHO现代城B1",右侧黄色圆形电话按钮,卡片底部右侧两个胶囊按钮"导航"黄色边框黄色文字,"进店"黄色填充白色文字,整体符合移动端UI设计规范,清晰美观。设计移动端宠物APP附近门店页面,整体背景是浅奶油白#FEF9E7到白色渐变,营造温暖放心氛围。顶部导航区左侧黄色返回箭头,中间标题"附近门店"加粗18px深灰色,右上角横向排列黄色地图切换按钮和黄色筛选漏斗按钮。定位与搜索栏下方是组合功能条,左侧黄色定位图标加文字"朝阳区 · 建国路"14px深灰,右侧浅灰色圆角搜索条占位文字"搜索门店或服务"配黄色搜索图标。下方是横向滚动服务分类筛选胶囊:默认选中"全部"黄色背景白色文字,其他分类有"🏪 宠物用品""✂️ 洗护美容""🏠 寄养""🦷 洁牙""📸 宠物摄影""🎂 宠物蛋糕",选中态黄色填充,未选中浅灰边框加灰色文字。默认列表视图,顶部黄色细条切换开关,"列表"黄色选中态,"地图"浅灰色。核心区域是门店卡片列表,每个门店为白色背景圆角16px卡片,每个卡片包含:左侧80x80px圆角12px门店图片,16px加粗深灰色门店名称如"宠爱宠物生活馆(朝阳店)",黄色星标"4.8分"加灰色小字"(128评价)",浅黄圆形背景黄色标签"距您 1.2km",横向排列服务标签胶囊,绿色圆点加"营业中 09:00-21:00",灰色小字地址"朝阳区建国路88号SOHO现代城B1",右侧黄色圆形电话按钮,卡片底部右侧两个胶囊按钮"导航"黄色边框黄色文字,"进店"黄色填充白色文字,整体符合移动端UI设计规范,清晰美观。
[第7张] 会员充值营销页——会员活动弹窗展示。本张使用【图6】作为会员充值弹窗主体展示。 [氛围/风格] 喜庆营销活动风,突出优惠力度与充值吸引力,商业营销海报质感。 [元素布局] 中心展示红色会员充值弹窗,占比约50%,弹窗顶部金币/红包/票券装饰、「会员充值」大标题、「充100.00元送10.00元」核心优惠、「去充值」按钮、底部关闭按钮;弹窗背后隐约透出点餐界面背景(做暗化模糊处理);四周配营销卖点文字与图标;整体氛围喜庆热烈。 [光影质感] 弹窗带发光效果与悬浮感,金币红包有高光点缀,中心亮四周暗,突出弹窗主体。 [配色色系] 全局底色 #1A1A2E 深暗底(衬托弹窗);主色 #FF3B30 大红色(弹窗主体);辅助色 #FFD700 金色(装饰/按钮)、#FFFFFF 白色文字;点缀色金币黄。 [视角构图] 正面平视,弹窗居中为视觉焦点,四周环绕卖点文字,阅读动线从中心弹窗 → 四周卖点。 [文字版式] 弹窗内文案保持原图信息:「会员充值」「充100.00元送10.00元」「去充值」;弹窗上方主标题「会员充值 锁客增收」,副标题「充得多送得多 提升复购与客单价」;弹窗下方三个卖点:「锁定顾客消费」「提升复购率」「增加预存收入」,横向排列配金色图标;右下角标注页码「07」;文字清晰醒目。 [比例分辨率] 9:16 竖版比例,4K 分辨率,文字清晰可辨,高清画质。 [负向提示词] 金额错误,文字错乱,弹窗变形,颜色偏差,水印,装饰元素缺失。[第7张] 会员充值营销页——会员活动弹窗展示。本张使用【图6】作为会员充值弹窗主体展示。
[氛围/风格] 喜庆营销活动风,突出优惠力度与充值吸引力,商业营销海报质感。
[元素布局] 中心展示红色会员充值弹窗,占比约50%,弹窗顶部金币/红包/票券装饰、「会员充值」大标题、「充100.00元送10.00元」核心优惠、「去充值」按钮、底部关闭按钮;弹窗背后隐约透出点餐界面背景(做暗化模糊处理);四周配营销卖点文字与图标;整体氛围喜庆热烈。
[光影质感] 弹窗带发光效果与悬浮感,金币红包有高光点缀,中心亮四周暗,突出弹窗主体。
[配色色系] 全局底色 #1A1A2E 深暗底(衬托弹窗);主色 #FF3B30 大红色(弹窗主体);辅助色 #FFD700 金色(装饰/按钮)、#FFFFFF 白色文字;点缀色金币黄。
[视角构图] 正面平视,弹窗居中为视觉焦点,四周环绕卖点文字,阅读动线从中心弹窗 → 四周卖点。
[文字版式] 弹窗内文案保持原图信息:「会员充值」「充100.00元送10.00元」「去充值」;弹窗上方主标题「会员充值 锁客增收」,副标题「充得多送得多 提升复购与客单价」;弹窗下方三个卖点:「锁定顾客消费」「提升复购率」「增加预存收入」,横向排列配金色图标;右下角标注页码「07」;文字清晰醒目。
[比例分辨率] 9:16 竖版比例,4K 分辨率,文字清晰可辨,高清画质。
[负向提示词] 金额错误,文字错乱,弹窗变形,颜色偏差,水印,装饰元素缺失。