第 10 屏 ｜ 通知（ tabBar 核心页 · 全状态画板 ）

微信小程序 tabBar页 · 375 × 812 pt
系统蓝 #007AFF 系统红 #FF3B30 分组底色 #F2F2F7 5 Tab 架构已激活「通知」
严格遵循业务约束：不展示发送者头像，不提供「全部已读」入口 未读标识：标题左侧 6pt 系统蓝小圆点 + 左边缘极浅系统蓝边线 tabBar 通知 Tab 携带红色未读徽标「7」 包含：列表正常态、通知详情二级页面、空态界面
状态 1 · 通知列表正常态 ( tabBar 选中 + 未读数「7」)
9:41
5G
通知
全部
点赞
订单
系统
收到新的点赞
2小时前

你的穿搭「周末休闲通勤套」收到了一个赞

收到新的点赞
4小时前

你的穿搭「法式复古碎花裙搭配」收到了 3 个新点赞

额度包购买成功
昨天 16:40

你已成功购买「AI 抠图识别 20 次额度包」，现已发放至您的账户，可在衣物上传中直接使用。

系统版本更新通知
昨天 10:15

「纸条AI衣橱」v2.4.0 全新上线：支持穿搭社区多维度标签筛选及衣柜加密分享。

收到新的点赞 3天前

你的穿搭「初春干练西装通勤风」收到了 5 个赞

衣柜分享到期提醒 5天前

你于 2025.04.08 创建的「春夏全量衣橱」公开快照已到期失效。

已加载全部通知
发现
衣橱
穿搭
7
通知
我的
二级页面 · 通知详情 (点击后自动标为已读)
9:41
5G
通知详情

收到新的点赞

2025-04-15 14:32

你的穿搭「周末休闲通勤套」收到了一个赞。

提示：持续在社区分享高分穿搭，可获得更多穿搭达人推荐与曝光！

周末休闲通勤套
包含 3 件单品 · AI 推荐
查看穿搭
该条通知已自动标记为已读，返回列表后小蓝点将消失
状态 3 · 空态界面 (暂无通知消息)
9:41
5G
通知
全部
点赞
订单
系统

还没有消息

穿搭被点赞、订单动态都会出现在这里

发现
衣橱
穿搭
通知
我的

第 10 屏 通知规范设计核查表与交互约束

（严格遵守产品约束与微信小程序规范）
1. 明确负向约束恪守

界面中绝不展示发送者头像（仅保留左侧分类圆形图标），且不提供「全部已读」入口，分类栏仅提供「全部、点赞、订单、系统」四项轻量切换。

2. 未读与已读强弱对比

未读项在标题左侧配置 6pt 系统蓝小圆点，卡片左边缘有一条 3.5px 极浅系统蓝高亮线；已读项移除圆点及边线，文字与图标整体转为柔和灰阶，层级分明。

3. 40pt 类型图标配色体系

点赞为心形（浅粉底 #FFE8EC 红字 #FF3B30）、订单为票据（淡蓝底 #E8F2FF 系统蓝）、系统为铃铛（浅灰底 #F2F2F7 灰字）。

4. tabBar 联动与二级页面

tabBar 通知图标右上角显示红色未读数徽标「7」；点击单条可平滑推入「通知详情」二级页面，进入即刻完成状态回写标记为已读。