01 · BACKGROUND
从一份需求表，
到一套完整的会员资产系统
项目始于德庭花园《酒店会员小程序需求表》。方案围绕"让门店流量资产化 · 让会员资产可经营 · 让前后台可闭环"三个目标展开，
在东方雅致的气质下，建立一套既具品牌辨识度、又能规模化复用的界面系统。
问题 · PROBLEM
流量沉淀薄弱
门店客群停留在"到店一次"，缺乏持续复购与社交裂变抓手。散客到会员的转化路径模糊，老客价值难以沉淀。
机会 · OPPORTUNITY
付费会员 + 多层权益
以"云庭 ¥99 / 年"为主售卡种，建立知庭 · 云庭 · 御德三层会员体系，叠加积分、专属房价与会员特权。
解法 · SOLUTION
C+B 一体化产品
C 端小程序服务会员全生命周期；B 端管理后台覆盖房态、房价、订单、会员、营销、权限、数据七大业务域。
02 · DESIGN LANGUAGE
霁蓝雅致 · 以色载道
色彩取自雨后青天的霁蓝釉色 —— 天青的清透、碧蓝的温润、霁蓝的沉稳、靛蓝的厚重；
字体以思源宋体与系统宋体为主导，承担标题与情绪表达；细节使用园林纹样与留白韵律。
COLOR · 色
朱砂 #B23A29 · 警示/价格
雾白 #D8E8F0 · 次背景
靛黑 #0F2A3F · 正文/御德会员
衬线 · Songti SC / Noto Serif SC
PingFang SC
无衬线 · 正文与功能
MOTIF · 纹
冰裂斜格
取自青瓷冰裂纹与苏式漏窗，用于弱背景层的纹理底板。
SEAL · 印
青黛钤印
重要动作或身份标识处使用，青黛沉静，替代红朱传达含蓄仪式感。
LINE · 线
留白 · 细线
以极细分隔线与大量留白组织信息，强调秩序感与克制。
03 · INFORMATION ARCHITECTURE
双端协同 · 九个业务域
C 端承担用户旅程，B 端承担经营治理。两端共享会员、订单两条核心数据流。
C SIDE · 用户端
会员小程序
发现与预订 09
首页
门店列表
酒店详情
房型 / 筛选
房间详情
专题
预订确认
会员资产 06
入会购买
会员中心
等级对比
我的
卡券
积分商城
B SIDE · 管理端
商家后台
门店经营 05
登录
运营概况
门店管理
房态看板
房价日历
订单 · 会员 03
酒店订单
会员列表
数据分析
04 · C-SIDE HIGHLIGHTS
会员视角的
五个关键时刻
从首次到达、房型决策、入会成交、到积分经营与离店复购 —— 每一屏都被当作一次品牌叙事来设计。
01
DISCOVER · 首页
"庭院深处 · 暂别城市喧嚣"
用一幅水墨庭院场景 + 一句情绪化文案建立品牌第一印象；下方聚焦日期预订与会员折扣氛围，把"来得了 / 买得起"同时讲清。
- 情绪 Hero · 庭院实景 + 会员折扣角标
- 一键日期 + 房型检索，转化路径最短
- 三宫格快捷入口（会员卡 · 积分商城 · 邀请有礼）
02
CONVERT · 房间详情
会员价逻辑可视化
把"散客价 / 云庭价 / 御德价"三档并列展示，让非会员在决策现场看到升级动机；配合权益解释层，加速入会转化。
- 三档价格对比 + 升级提示条
- 权益模块图示化（早餐 · 延迟退房 · 免费取消）
- 底部双按钮：直接预订 / 加入会员后更优
03
UPGRADE · 入会购买
¥ 99 云庭 · 一张卡面讲完故事
用一张铜金质感的实体卡面承载数字会员身份，权益以可验证的量化字段呈现，而非虚头巴脑的文案。
- 一卡多权 · 入会即享 12 项核心权益
- 权益量化：回本节点 · 使用场景 · 失效规则
- 支付浮层前置：减少意向流失
04
RETAIN · 会员中心
把会员身份当作可把玩的资产
云庭卡面采用可翻转交互，正面呈身份，背面露权益进度；积分、卡券、年度报告围绕卡面呈卫星式布局。
- 动态卡面 · 米金烫金质感
- 近一次住宿、积分变动、到期提醒聚合
- 等级进度条引导消费至下一等级
05
ENGAGE · 积分商城
积分不该是"虚拟"
把积分落地为客房升级、早餐、延迟退房等可感知权益；顶部签到条形成日活触点，让每日回来都有收益。
- 换房 · 换餐 · 权益升级三大场景并列
- 每日签到 × 7 天递增积分 × 生日双倍
- 透明余额：下一档阈值 + 过期时间
05 · B-SIDE HIGHLIGHTS
管理端 · 以数据为绳
后台延续东方雅致的语言，但强化密度与可操作性 —— 让店长、运营、客服、财务都能在同一套系统里作业。
06 · OUTCOME
方案交付 · 可直接进入开发
全部页面均以 1:1 像素级 HTML 组件交付，可作为开发对接的视觉规范基底。
29
设计页面
C 端 19 屏 + B 端 10 屏，覆盖核心业务全链路。
7
业务分区
按用户旅程与后台职能切分，结构清晰便于维护。
12
共享组件
按钮 · 输入 · 卡面 · 徽章 · 弹层 · 房态块等。
1
设计语言
东方雅致 · 可延伸至官网、印刷品与室内标识系统。