Visual AssetsSmoFan
统一保存可复用视觉资产
这里放项目级视觉资产,当前包括区域经营伙伴后台头图、宠粉现场权益券资产和底部导航图标 / 托底 PNG。权益券和底部导航结构已沉淀为 SmoUI 组件,PNG 资产继续在这里统一管理。
头部视觉资产
杭州城市剪影插画
draft用于区域经营伙伴入口、后台页头和运营位的温暖城市氛围图。
文件/assets/regional-partner-visuals/hangzhou-night-shadow.png
格式PNG
尺寸1600 x 900
用途适合作为 Header / Banner 背景,建议搭配白色蒙层和轻量业务卡片。
宠粉现场权益券资产
小魔咖啡
拿铁半价券
到店可用
出示
组件与资产同源
卡券质感来自真实小程序校准
当前券左侧异形色块、咖啡 / 预约 / 口腔 / 通用图标进入统一资产包;组件只负责单张券本体,滚轮和筛选由页面组合。
权益券左侧异形色块
ready场景当前选中权益券左侧凸出色块
角色Active benefit pass rail
文件/assets/smofan-benefit-pass/benefit-pass-rail.png
尺寸138 x 300 transparent PNG
备注来自 SmoFan 小程序已校准券组件,保留凸出承托和上下留缝。
咖啡权益图标
ready场景咖啡、拿铁等到店出示权益
角色Coffee benefit icon
文件/assets/smofan-benefit-pass/coupon-cup-symbol.png
尺寸96 x 96 transparent PNG
备注用于左侧白色图标承托内。
预约动作图标
ready场景预约、已预约、护理类权益
角色Booking and care icon
文件/assets/smofan-benefit-pass/service-calendar.png
尺寸96 x 96 transparent PNG
备注可用于左侧权益类型,也用于右侧预约动作图形。
通用券图标
ready场景无法归类的通用权益券
角色Generic ticket icon
文件/assets/smofan-benefit-pass/service-ticket.png
尺寸96 x 96 transparent PNG
备注作为 ticket 类型默认图标。
口腔权益图标
ready场景牙齿、口腔、洁牙、涂氟权益
角色Dental benefit icon
文件/assets/smofan-benefit-pass/service-tooth.png
尺寸96 x 96 transparent PNG
备注用于 dental 类型默认图标。
宠粉现场底部导航图标
用户态 / 商家态可切换
轻量立体、不要低幼
图标方向采用厚涂 2D 贴纸感:有轻微体积、边缘高光和投影,但不做重 3D。人物只表达用户身份,“我是商家”通过后置店铺和切换标识表达入口变化。
首页 / 未选中
ready场景底部导航首页未选中态
角色Home tab inactive
文件/assets/smofan-bottom-nav-icons/home-inactive.png
尺寸512 x 512 transparent PNG
备注低饱和马戏棚入口符号,保留趣味但不做低幼表情。
首页 / 选中
ready场景底部导航首页选中态
角色Home tab active
文件/assets/smofan-bottom-nav-icons/home-active.png
尺寸512 x 512 transparent PNG
备注红粉主色填充,和底部导航选中态保持一致。
发起按钮
ready场景底部导航中间发起按钮
角色Center publish action
文件/assets/smofan-bottom-nav-icons/publish.png
尺寸512 x 512 transparent PNG
备注亮红圆形加号,用于中心悬浮动作按钮。
我的 / 未选中
ready场景底部导航我的未选中态
角色Profile tab inactive
文件/assets/smofan-bottom-nav-icons/profile-inactive.png
尺寸512 x 512 transparent PNG
备注人物表示用户身份,未选中时降低饱和度。
我的 / 选中
ready场景底部导航我的选中态
角色Profile tab active
文件/assets/smofan-bottom-nav-icons/profile-active.png
尺寸512 x 512 transparent PNG
备注人物为用户 / 玩家,不用于表达商家身份。
我是商家 / 选中
ready场景我的页底部导航商家入口选中态
角色Merchant switch active state
文件/assets/smofan-bottom-nav-icons/profile-merchant-active.png
尺寸512 x 512 transparent PNG
备注人物在前、淡店铺在后,加轻量切换标识表达身份切换。
问号奖励块
ready场景奖励、抽奖、互动状态的辅助点缀
角色Playful reward accent
文件/assets/smofan-bottom-nav-icons/mystery-cube.png
尺寸512 x 512 transparent PNG
备注问号面正方体,表达未知奖励和互动感。
底部导航托底
ready场景底部导航白色背景和中间轻凸托底
角色Bottom nav white surface
文件/assets/smofan-bottom-nav-icons/bottom-nav-surface.png
尺寸750 x 220 transparent PNG
备注用于中间发起按钮背后的轻凸白色托底,和 SmoFan 小程序当前校准版本一致。
使用规则
区域经营伙伴后台
同一张图在 SmoUI、SmoFan 小程序和后续运营物料中复用,避免多套城市视觉各自漂移。
后台入口保持业务优先,插画只作为氛围层,不遮挡 CTA、指标、审核状态等关键内容。
优先使用矢量源文件;若小程序端需要位图,可从此资产统一导出 WebP / PNG。
权益券资产
当前券左侧色块使用 benefit-pass-rail.png,不在业务页面临时用 CSS 重画异形结构。
右侧动作区是卡券本体的一部分,不能做成独立浮层或独立卡片。
字重遵循 SmoFan 小程序文字规范:券标题默认 600/700,不使用 900。
滚轮、筛选 tab 和核销弹层由业务页面组合;单张券的质感、描边、动作区和图标由组件负责。
底部导航图标
人物图标始终表达用户 / 玩家身份,不表达商家身份。
“我是商家”只在我的页商家入口态出现,使用人物后方更淡、更小的店铺图标表达可切换身份。
问号奖励块是可复用的互动符号,可以用于抽奖、奖励和惊喜感场景。
底部导航白色托底使用 bottom-nav-surface.png,不在业务侧临时用 CSS 曲线重画。
工程接入优先使用 512 x 512 透明 PNG,按底部导航目标尺寸等比缩放。