● UI/UX 交互设计稿 V1.0 · 2026-09-06 · 高保真 HTML 原型(不含业务代码)

星悦会员通 — 单门店会员卡管理系统

参考 FastAdmin「youyimember 多门店会员管理系统」,面向单门店场景重新设计:裁剪多门店/钱包提现/预约等能力, 聚焦储值卡 · 计次卡 · 期限卡 + 积分 + 优惠券 + 收银核销六大主线。含商家管理后台(桌面 1440)与会员 H5(390×844)两端,共 16 屏。

设计交付:HTML 可点原型(浏览器直接打开) 后台演示账号:admin / 123456 会员演示账号:13800000001 / 123456 配套文档:设计方案.md

1设计原则

收银效率优先、账目可对账、营销可配置、会员零学习成本。
30 秒收银

核销码/扫码枪识别 → 点项目 → 抵扣 → 结账,四步完成;高频动作都有一键入口。

笔笔留痕

充值、消费、划次、积分全部进统一台账,余额可追溯到每一笔流水。

营销可配

卡种、充值套餐(充X送Y)、优惠券全部后台配置,无需改代码。

两端同构

会员 H5 按小程序习惯设计,后续平移 uniapp/微信小程序零改稿。

2设计系统 · 色彩

品牌主色靛紫渐变传递「会员尊享感」,金色只用于积分/赠送等增值语义。
品牌主色#4F46E5 → #7C3AED
增值金#F59E0B
成功 / 入账#10B981
支出 / 强调#EF4444
墨色文本#0F172A
页面底色#F4F6FB

3设计系统 · 字体与卡面

系统字体栈(PingFang SC / 微软雅黑);数字统一 tabular-nums,金额大号加粗。
¥86,054.50统计大数字 / 26px / 700
应收金额 ¥401.00页标题 / 结账金额 20px
会员储值卡 · NO.000156卡片标题 15px / 600
正文 13–14px,辅助说明 12px 灰 #64748B正文 / 辅助
储值卡 · 靛紫(默认)
¥860.50
计次卡 · 青碧
6 / 10 次
期限卡 · 曜黑
365 天

4信息架构

角色权限:管理员=全部;收银员=工作台 + 收银核销 + 会员管理。
▦ 商家管理后台(桌面)
  • 工作台统计卡 / 7日趋势 / 卡构成 / 最新流水 / 快捷入口
  • 收银 · 核销识别会员 → 选消费 → 券/积分/卡抵扣 → 回单
  • 会员管理列表 / 筛选 / 详情(档案·卡包·券·流水)/ 开卡 / 充值
  • 卡种 · 项目三类卡种 / 充值套餐 / 消费项目
  • 优惠券券类型(满减·折扣·次卡)/ 发放 / 核销记录
  • 流水中心充值 / 消费 / 开卡 / 积分,筛选 + 导出 CSV
  • 系统设置店铺信息 / 积分规则 / 店员管理(2 角色)
▭ 会员 H5(手机 390)
  • 登录手机号 + 密码(初始 123456)/ 正式版微信一键登录
  • 首页 · 卡包余额/积分/券汇总 / 卡横滑 / 快捷宫格 / 公告 / 热门项目
  • 卡详情(二级)大卡面 / 充值套餐 / 本卡流水 / 使用须知
  • 在线充值(二级)套餐选择 / 微信支付 / 到账浮层
  • 优惠券可用 / 已使用 / 已过期
  • 核销码二维码 + 8 位数字码,双通道供商家识别
  • 明细消费 / 充值 / 积分,按日分组

5核心业务流程

① 开卡流程后台 05 屏演示
新增/选择会员 选卡种(储值/计次/期限) 支付(现金/微信/余额) 生成卡号+到期日 告知会员账号密码 → 登录 H5
② 充值流程后台 05 / H5-04 演示
进入会员卡详情 选「充X送Y」套餐或自定义 收款(现金/微信/支付宝) 本金+赠送实时到账 生成充值流水 + 通知
③ 收银核销流程(核心)后台 03 屏演示
会员出示核销码 / 手机号检索 点选消费项目(或自定义金额) 先券 → 再积分 → 后卡扣(计次划次/期限打卡) 差额现金/微信补收 回单:余额/次数/积分快照 + 小票
④ 卡有效期规则全局规则
储值卡:长期有效,余额随消费递减· 计次卡:按项目划次,到期失效· 期限卡:有效期内不限次打卡· 到期前 7 天双端提醒,过期实时校验拦截

6屏幕清单 · 商家管理后台

桌面 1440×900 · 点击卡片打开对应设计稿。
01
admin/01登录页

品牌展示 + 账号登录,双演示账号。

打开设计稿 →
02
admin/02工作台看板

经营统计、趋势图、卡构成、最新流水。

打开设计稿 →
03
admin/03收银 · 核销 ★核心

识别会员、项目点选、券/积分/卡抵扣、回单弹窗。

打开设计稿 →
04
admin/04会员列表

搜索筛选、等级标签、新增会员弹窗。

打开设计稿 →
05
admin/05会员详情

档案、卡包(开卡/充值/调整)、券、流水、三个弹窗。

打开设计稿 →
06
admin/06卡种 · 项目配置

三类卡种卡片、编辑抽屉、充值套餐、消费项目。

打开设计稿 →
07
admin/07优惠券

券类型、发放弹窗、发放与核销记录。

打开设计稿 →
08
admin/08流水中心

四类台账、筛选、合计、导出 CSV。

打开设计稿 →
09
admin/09系统设置

店铺信息、积分规则、店员与角色权限。

打开设计稿 →

7屏幕清单 · 会员 H5

390 × 844 · 带手机机身与右侧交互说明,可直接换算微信小程序页面。
H5-01
portal/01登录

手机号 + 密码,初始密码引导。

打开设计稿 →
H5-02
portal/02首页 · 卡包

汇总悬浮卡、卡横滑、快捷宫格。

打开设计稿 →
H5-03
portal/03卡详情(二级)

大卡面、充值套餐、本卡流水。

打开设计稿 →
H5-04
portal/04在线充值(二级)

套餐选择、模拟支付、到账浮层。

打开设计稿 →
H5-05
portal/05我的优惠券

票券样式,可用/已用/过期三态。

打开设计稿 →
H5-06
portal/06核销码

二维码+数字码,供商家双通道识别。

打开设计稿 →
H5-07
portal/07明细

消费/充值/积分,按日分组对账。

打开设计稿 →

8交付说明

本稿定位

纯静态 HTML/CSS/JS 交互设计稿,无后端与数据库;所有数据为演示示意。交互演示包括:弹窗(开卡/充值/发券/结账回单)、抽屉(编辑卡种)、标签页切换、收银项目点选。

评审通过后进入开发

按《设计方案.md》实施:Node.js + SQLite 单机版起步(零依赖、双击即跑),接口按 RESTful 设计,前端可平移 uniapp 打包微信小程序;微信支付在「在线充值」标注位接入。

标注约定

H5 页右侧为该屏交互要点;后台页脚浮标可返回本总览;所有「演示原型」徽标处为可点击的示意交互。

待确认项

① 积分比例默认 1元=1分、100分抵1元;② 券与积分可叠加,先券后分后卡;③ 会员初始密码策略;④ 是否需要预约模块(本期不做)。