🏡 程臻云宿 · 设计系统 V2

七种身份,七种心境
一个沉浸的民宿平台

V2 版本基于「游牧岛」视觉语言,为每一个角色独立调配配色、布局与交互节奏 —— 管家的深海蓝指挥、房东的暮金富足、共建人的荧光生长、预订客的珊瑚日落。从工具到陪伴,从功能到情绪。

375×812 iPhone 原型 7 套角色配色 Glass Morphism 玻璃拟物 Handwritten 手账质感 基于 游牧岛 视觉致敬

已交付原型

点击卡片进入完整页面
🌙 ADMIN · 管家

管家工作台 · 深海指挥中心

实时房态时间线 + AI 智能待办 + 玻璃态指标卡。为一线运营者打造效率与掌控感兼备的深海蓝工作空间。

🔵 深海蓝 #1E3A8A ⚡ 闪电蓝 #4F7CFF
进入页面
👑 LANDLORD · 房东

房东资产 · 暮金托管

大号收益数字 + 房产组合横滑 + 紫金 AI 定价洞察。富足、内敛、值得托付 —— 业主看到的不只是数字,是安心。

🟡 黄昏金 #B8813F 🟣 天鹅绒紫 #6B4E8E
进入页面
🌱 CO-BUILDER · 共建人

共建人社区 · 生长森林

荧光青柠手账质感,致敬「游牧岛」。贡献值、等级徽章、共建项目横滑 —— 把参与感做成一块绿色的日记本。

🟢 手账绿 #52C41A 💚 荧光青柠 #A8E630
进入页面
🌊 BOOKING · 预订客

预订发现 · 珊瑚日落

大覆盖图沉浸卡 + 温暖珊瑚色调 + 主题banner。让订房这件事,从筛选变成一次期待旅行的仪式。

🪸 珊瑚橙 #FF7A59 🍑 蜜桃 #FFB88C
进入页面
💎 FINANCE · 财务

财务主控 · 墨玉账房

渠道对账看板 + 双柱现金流 + 税务开票提醒。墨绿底调配香槟金,表达可信、稳健、专业 —— 每一笔都清明。

🟢 墨绿 #064E3B ✨ 香槟金 #D4AF37
进入页面
🛍️ MALL · 商城

云宿商城 · 莓果嘉年华

民宿货架双列瀑布 + 闪购倒计时 + 嘉年华活动横幅。莓果粉 + 琥珀橙 + 幻紫,活泼、年轻、有惊喜。

🫐 莓果粉 #E94B8F 💜 幻紫 #9B5DE5
进入页面
☁️ SERVICE · 客服

客服陪伴 · 湖畔蓝图

多渠道会话列表 + AI 助手云听 + 快捷话术库。湖水蓝配云朵白,冷静、温和、可依赖 —— 像一片安静的湖面。

💙 湖水蓝 #4A90E2 🤍 云朵 #C7E2F9
进入页面
⚡ ADMIN · 散客入住

散客入住 · 闪电流程

身份核验 → 选房 → 收款 → 发钥匙,四步全沉浸流程页。深海蓝 × 闪电青,前台一键闪充入住。

🔵 深海蓝 ⚡ 4 步闪电
进入页面
🏝️ BOOKING · 房源详情

房源详情 · 沉浸画廊

大图 360° 画廊 + 设施网格 + 评分条 + 真实评价 + 粘性底部下单。让游客爱上这间房。

🪸 珊瑚橙 📸 全屏画廊
进入页面
🏰 LANDLORD · 房产档案

单套房产 · 金箔档案

房间日历 + 收益金箔曲线 + 房客评价 + 托管合同。每一间房都值得一份尊贵档案。

🟡 暮金 🟣 紫丝绒
进入页面
📋 ADMIN · 预订管理

预订管理 · 深海航线

3 格指标条 + 待确认/待付款/待入住筛选 + 订单卡左侧状态色带 + 倒计时条。每一张订单都有呼吸节奏。

🔵 雾霭蓝 ⏱ 倒计时
进入页面
🧹 ADMIN · 保洁任务

保洁任务 · 晨光卷轴

SVG 环形进度 + 任务 Checklist + 阿姨头像 + 紧急/进行中/已完成状态色带。把清洁节奏做成一份工作诗。

🧺 9/14 完成 ⏳ 进行中
进入页面
📊 LANDLORD · 月度收益

月度收益 · 金山账本

58px 金色大数字 + 金箔点粒背景 + 6 月柱状图 + 渠道分布 + 深棕色提现卡。让每一分到账都显得庄重。

💰 ¥64,850 📈 +12.9%
进入页面
🌳 CO-BUILDER · 项目详情

共建项目 · 荧光森林

260px 森林封面 + 68% 筹建进度 + 4 档铜/银/金/林主权益 + 共建者头像叠层。一棵正在生长的云宿树屋。

🌱 ¥340K/¥500K ⏳ 12 天
进入页面
🎫 BOOKING · 订单确认

订单确认 · 珊瑚旅程卡

虚线打孔票根卡 + 入住/离店时间轴 + 优惠券选择 + 三种支付方式。把下单做成撕一张旅行票根。

🎟️ 票根 💳 ¥2,520
进入页面
☕ MALL · 商品详情

商品详情 · 莓果橱窗

360px 画廊 + 限时闪购倒计时 + 规格选择 + 评分分布热标 + 双色拼接买单栏。让咖啡礼盒自己讲故事。

🔥 TOP 1 ⚡ 闪购 02:48
进入页面
🔧 ADMIN · 维修工单

维修工单 · 晨曦薰衣草工单簿

紧急工单 hero + 闪烁 SLA 倒计时 + 故障照片 4 宫格 + 金牌师傅卡(呼叫/定位)+ 6 段进度 timeline + 费用估算 + 标记到场沉浸按钮。

⚡ 紧急 W...028 👷 王建军 14km
进入页面
📄 LANDLORD · 月度报表

月度报表 · 金封蜡印

金色信封 hero + 红蜡认证印 + 4 指标 + 6 月柱状图 + 收支 6 条 + 5 套房源贡献 + 分享会计/PDF 下载。

✉️ 金封 📄 可 PDF
进入页面
💸 CO-BUILDER · 提现申请

申请提现 · 荧光绿账户

可提现余额大号 + 金额光标输入 + 快捷 4 档 + 绿卡银行卡 + 到账预估 + 免手续费标签 + 安全提示。

💳 招商 ••6218 ⚡ 2h 到账
进入页面
🔐 BOOKING · 订单支付

订单支付 · 珊瑚收银台

15 分钟倒计时 hero + 订单摘要 + 费用明细(券/积分)+ 4 种支付方式 + 安心保障 + 锁头支付按钮。

⏳ 14:42:08 💰 ¥2,530
进入页面
📅 ADMIN · 房态日历

房态日历 · 深海横盘

9 间房 × 14 天横向时间轴 + 入住/在住/打扫/空房色带 + 粘性房号列 + 底部图例。一屏掌控整片海。

🔵 雾霭蓝 🗓 14 天
进入页面
👥 ADMIN · 员工管理

员工管理 · 晨班日志

三条甘特排班 + 角色权限胶囊 + 头像状态点 + 在岗/休假/离岗色带 + 工单/评分/薪资迷你行。

👷 12 人 ⏱ 98.2%
进入页面
📜 LANDLORD · 托管合同

托管合同 · 暮金约定

金箔点粒 hero + 打孔票据卡 + 甲方乙方签署栏 + 虚线分隔条款 + 电子签名区 + 底部立即签署按钮。

✍️ 电子签 📆 3 年期
进入页面
📈 CO-BUILDER · 投资分红

投资 & 分红 · 绿野账本

SVG 收益曲线 + 环形资产配置 + 月度分组 + 投资/分红/追加/提现四色图标 + "热"徽标。一本会生长的绿账本。

💹 +8.2% 📒 48 条
进入页面
🛂 BOOKING · 我的行程

我的行程 · 日落护照

云宿护照卡 + 进行中 pulse 红点 + 门锁密码格 + 客服/延住/门锁三键 + 倒计时条 + 待出行/已完成小卡。

🌅 珊瑚日落 🔐 8264#
进入页面
🧾 FINANCE · 渠道对账

渠道对账明细 · 墨绿账簿

日期选择胶囊 + 4 格汇总 + 5 条渠道分组 + 差异订单红渐变标记 + 底部香槟金总额 + 一键导出。每笔清明。

💎 ¥486,240 Δ 17 差异
进入页面
🛒 MALL · 购物车

购物车 · 莓果派对

店铺分组 + 满减提示 + 规格胶囊 + 步进器 + 猜你喜欢双列 + 莓果紫渐变结算栏。一场热闹的夜市。

🫐 4 件 🎁 满减 ¥50
进入页面
💬 SERVICE · 会话详情

会话对话 · 湖蓝倾听

客户信息 4 格 + 消息气泡 + 订单卡片消息 + AI 助理紫色建议气泡 + 快捷话术 + emoji/输入/发送工具栏。

💙 湖水蓝 ✨ AI 助理
进入页面
🏡 BASE · 登录/注册

登录入口 · 云宿问候

品牌绿渐变气泡 + 三页签切换 + 手机号验证码 + 第三方登录三件套 + 底部协议勾选。一次温暖的开门。

🌿 品牌绿 💬 微信 / Apple
进入页面
👤 BASE · 我的中心

我的中心 · 四季档案

深绿英雄卡 + 用户签名 + 等级环形进度 + 四格数据 + 订单五宫格 + 资产列表。一个人的运营档案。

🌕 黄金 LV.4 ⭐ 4.92 评分
进入页面
⚙️ BASE · 个人设置

个人设置 · 静谧旋钮

三联主题预览 + 语言胶囊 + 绿渐变开关 + 通知/安全/通用分组 + 退出登录按钮。把每一处偏好都安置得当。

🌗 浅/深/跟随 🌏 4 种语言
进入页面
🧾 FINANCE · 发票管理

发票管理 · 墨绿账册香槟金

本月开票 hero(¥28.6万渐变金)+ 5 段状态标签(全部/待开/已开/待审/作废)+ 搜索+批量 ops + 一键开票虚线卡 + 5 张发票列表(催单/已开/待审/作废)+ 批量开票流光按钮。

📒 58 张 ⚡ 12 张待开
进入页面
📦 MALL · 订单详情

订单详情 · 莓果物流轨迹

派送中脉冲徽标 + 物流信息卡 + 彩色波浪地址条 + 3 商品列表 + 费用明细 + 订单元信息 + 客服/售后/确认三联操作。

🚚 派送中 💰 ¥480
进入页面
📚 SERVICE · 帮助中心

帮助中心 · 湖蓝百科

搜索 hero + 热词胶囊 + 8 分类宫格 + 热门问答 TOP5 + 最近浏览 + 400 电话/在线咨询底部双入口。

🔍 智能搜索 🔥 TOP5 FAQ
进入页面
🔔 COMMON · 消息中心

消息中心 · 全角色通知

6 类 tab + 未读徽标 + 今日未读总览卡 + 4 宫格快捷入口 + 今天/昨天/更早三分组 + 红点脉冲未读标记 + CTA 去处理。

🔴 12 未读 ⚡ 分组排序
进入页面
👤 ADMIN · 房客档案

房客档案 · 晨曦来访者

会员 hero + 累计 3 宫格 + 当前在住卡 + 5 行身份资料 + 偏好彩色标签 + 4 条入住历史时间线 + 内部备注 + 消息/拨号双按钮。

⭐ 金卡 VIP 🕰️ 历史 7 次
进入页面
📒 LANDLORD · 交易流水

交易流水 · 暮金托管账本

月度净收益烫金数字 + 收入/支出双栏 + 6 个月滑条 + 4 类筛选 + 按日分组账单(入账/分成/佣金/垫付/退款)+ 导出/对账单双按钮。

💰 本月 +¥27k 📊 24 笔
进入页面
✍️ BOOKING · 发布点评

发布点评 · 珊瑚日落留影

入住纪念 hero + 5 星总评 + 5 项分项评分 + 文字点评 textarea + 10 热门亮点标签 + 3/9 晒图宫格 + 匿名/同步/回复 3 开关 + 草稿/发布双按钮。

⭐ 5 星好评 🎁 +60 积分
进入页面
💌 SERVICE · 提交工单

提交工单 · 湖蓝倾听信笺

问候 hero + 3 指标响应数据 + 三步骤条 + 6 类型宫格 + 关联订单快捷 + 描述 textarea + 4 格凭证上传 + 联系方式 + 3 档响应时间 + 协议复选。

⚡ 2 分响应 🎯 98% 当日
进入页面
📗 CO-BUILDER · 分成流水

分成流水 · 青柠手账账簿

Lv.3 徽章 hero + 46px 累计数字 + 19 根柱子 mini 图表 + 项目 tabs(溪畔/松林/月湖)+ 3 状态卡(已到账/冻结/奖励)+ 按日分组流水(含 bonus 金色图标)+ 导出/提现。

📈 本月 +¥8,260 💰 可提现 ¥6,840
进入页面
📦 MALL · 售后申请

售后申请 · 莓紫糖果小票

票据撕口 hero 订单快照 + 3 档售后类型 Tab(仅退款/退货退款/换货)+ 退款金额输入 + 6 宫格申请原因 + 问题描述 textarea + 4 宫格凭证上传 + 寄回地址预览 + 协议 + 双按钮。

💸 退款 ¥368 ⏰ 24h 审核
进入页面
🎟️ BOOKING · 优惠券中心

优惠券中心 · 珊瑚日落票券

珊瑚 hero 可用总额 + 3 tab(可用 9 / 已用 / 过期)+ 5 条筛选 chips + 票据撕口券卡(满减/折扣/赠礼 3 种变种,竖排"立即使用"按钮)+ 领券中心入口 + 规则提示。

💰 可用 ¥1,286 🎁 9 张券
进入页面
🏘️ ADMIN · 房态盘点

房态盘点 · 晨曦矩阵看板

雾霭蓝 hero(78.3% 入住率 + 4 状态宫格)+ 日历/矩阵切换 + 7 天周历(周末红色 + 今日高亮)+ 5 态彩色筛选 + 图例 + 7 房 × 7 天矩阵表格(支持横滑)+ 4 条今日待办 + 3 按钮底栏(记录/批量锁房/一键同步)。

📊 入住率 78.3% 🔧 4 项待办
进入页面
🧾 FINANCE · 税务

税务报表 · 墨绿金库账册

4 段周期切换(月/季/半年/年)+ 深墨绿 hero(¥42,860 应纳税额 + 3 状态 + 2 CTA)+ 香槟金 conic donut(增值税 45%/企业所得税 25%/房产税 20%/其他 10%)+ 6 期缴纳 vs 待缴双柱状趋势 + 7 天申报日历(含 4/30 加急)+ 5 项税种明细 + 金色虚线优惠提示 + 一键生成申报表底栏。

💰 待缴 ¥6,620 🎯 4 张申报表
进入页面
💰 LANDLORD · 分账

分账结算 · 暮金丝绒账本

3 段周期切换 + 暮金紫 hero(¥68,240 季度实际到账 + 4 统计 + 提现 CTA)+ 薰衣草下次结算倒计时 + 70·20·10 三段分账比例条 + 3 张房源分账卡(房费/平台抽成/管家分成三栏 + 已结算/待结算状态)+ 暮金紫银行卡 + 4 行历史账单 + 提现至招行底栏。

🏘️ 23 套房源 💳 3 秒到账
进入页面
🔀 ADMIN · 交接班

交接班 · 晨曦薰衣草交班簿

晨曦雾霭蓝 hero(14:00→22:00 · 8h 班次 + 上下班人卡)+ 65% conic 完成度环 + 6 项 checklist(含 3 项待接班)+ 4 色房态宫格 + 3 张遗留警示卡(04 号空调/周末锁房/VIP 生日 · 含红色动画图标)+ 8 行物品钥匙清点表(含差异标红)+ 荧光笔交接备注 + 签字接班底栏。

✅ 6/9 项 ⚠️ 3 项遗留
进入页面
📋 BOOKING · 订单

订单详情 · 珊瑚日落行程卡

珊瑚日落 hero(入住中状态 + 动效状态圆点 + 5 段 stepper 呼吸光圈)+ 雨林渐变房源封面卡 + 入住/退房日期大卡(含 3 晚圆角箭头)+ 6 行价格明细(含优惠券/积分抵扣 + 24px 渐变总价)+ 微信支付凭证绿条 + 2 位入住人 + 虚线特殊要求卡 + 4 宫格常用操作 + 客服/催单底栏。

🌿 入住中 · 2/3 晚 💳 ¥1,285.80
进入页面
🌱 CO-BUILDER · 邀请

邀请裂变 · 荧光青柠裂变卡

荧光青柠裂变 hero(¥188 奖励 + 3 回报卡 + 3 数据位)+ 邀请码虚线卡(GRW-88CH3N 渐变字 + 复制)+ CSS 画的二维码占位 + 4 宫格分享渠道(微信 HOT 徽章)+ 68% 流光进度条 + 4 段等级梯度(青铜/白银/钻石 now/星耀)+ 4 条邀请记录(直邀/间邀 tag)+ 3 步编号规则 + 底栏立即邀请 lime 渐变 sheen CTA。

🎁 邀一得 ¥188 🏆 Lv.3 钻石
进入页面
🔍 BOOKING · 搜索

搜索结果 · 珊瑚雨林挑房卡

顶部搜索条(目的地 / 日期 / 人数)+ 珊瑚 hero 预订条件 3 格 + 4 色筛选标签 + 综合/价格 ↑↓/距离/好评排序 tabs + 横滑筛选 chips(激活态 × 可撤)+ 4 张房源大卡(雨林/暮金/设计师/江景 4 色封面 + ⭐/📷/❤ 悬浮 + 限时促销绿条)+ 中插地图入口卡 + 右下 ¥188 新人券浮窗。

🏡 86 家可预订 🎟 限时 ¥120 券
进入页面
📅 ADMIN · 价格管理

价格管理 · 晨曦薰衣草调价台

¥ 玻璃光晕 hero(¥184,620 渐变大数字 + 同比 +12.8% pill + 3 指标)+ 房型筛选 chips + 35 格日历(过去/今日/周末/旺季/促销 5 态)+ 4 条智能动态定价规则(入住率/黄金周/雨季/周中)+ 4 渠道价差 +15%~-8% + 批量调价 sheen 底栏。

📅 35 日日历 ⚡ 智能 +15%~+80%
进入页面
🌙 ADMIN · 夜审结账

夜审结账 · 薰衣草夜审台

深紫夜幕 hero(23:42:18 闪烁 live 点 + ¥28,486 金渐变数字 + 75% 进度条)+ 5 项夜审 checklist(含 warn/待核态 + 房号 tag)+ 3 格支付收银(渠道/现金/扫码)+ 总额卡 + 3 张红虚线异常警示 + 确认日结底栏。

🌙 23:42 · 75% 💰 ¥28.4k 待结
进入页面
🔐 ADMIN · IoT 门锁

门锁控制台 · 晨曦密钥台

🔐 hero(全部在线 badge + 23/2/1/46 四宫格)+ 3 段 segmented(全部/科技侠 15/通通锁 8)+ 6 张门锁卡(绿/黄/红状态点 + 电量 %)+ 6 位一次性密码 8-4-2-7-1-6 + 远程开锁/重发/作废 3 按钮 + 5 条彩色事件日志 + 生成密码底栏。

🔐 23 锁在线 🔋 2 低电·1 离线
进入页面
📒 FINANCE · 支出记账

支出记账 · 墨绿账册香槟金

墨绿账册 hero(📒 2026-04 金 badge + ¥86,420 金渐变 + 3 状态)+ 8 彩色类目宫格(🏠租/🧹洁/🔧修/💡水/🛁耗/📣销/🍱餐/🗂他)+ 金色虚线 OCR 快速录入卡 + 4 步审批流 + 6 条支出流水 + 新建支出单金色底栏。

📒 ¥86.4k 支出 🏷 8 大类目
进入页面
💼 FINANCE · 工资核算

工资核算 · 薪酬月结

墨绿薪酬 hero(💼 2026-03 badge + ¥32,860 金渐变 + 8/346/4.86/¥6.82k 四宫格)+ 金虚线阶梯规则卡(4 档 · 2.2% 激活态)+ 5 行管家工资清单(金/银 tier tag + 基+提+奖分解)+ 62% 进度条 + 批量发放 8 人底栏。

💼 8 管家·¥32.8k 🏆 阶梯提成 2.2%
进入页面
📊 FINANCE · 月报导出

月报导出 · 损益月报

墨绿月报 hero(📊 2026-03 + ¥86,420 净利润金渐变 + 同比 +14.2%)+ 7 行 P&L 损益表(营收/支出/分成/税费→净利润)+ 6 月双色堆叠柱状图 + 5 条渠道贡献(途/美/携/直/A46%-6%)+ 3 张房东分成暮金卡 + 4 导出(PDF/Excel/邮件/打印)+ 一键导出底栏。

📊 净利 ¥86.4k 📤 PDF/Excel/邮件
进入页面
📜 CO-BUILDER · 合同协议

合同协议 · 荧光青柠电子签约

青柠电子签约 hero(📜 badge + 待签 pulse 点 + ¥80,000/8.0% 占股)+ 3 方签署卡(甲方平台/乙方房东✅+ 丙方您待签 pulse)+ 6 宫格条款(金额/占股/期限/开始/保底/退出)+ 🌊 4 规则分红瀑布 + 6 条编号条款(资金监管/分红/退出/风险/知情/违约)+ 红印章签署区(CB-2026-0419-0037)+ 人脸核身电子签章底栏。

📜 ¥80k · 8% 占股 ✍ 2/3 方已签
进入页面

🎉 全部沉浸式原型已交付

56 张页面 · 7 个角色身份 + 3 张通用基础页 + 1 张跨角色消息中心 · 持续扩展中