水润天地 · 原型总览 v4.0

/ 01

设计系统

全局色彩体系、字体排版、间距系统、组件规范——所有原型的视觉基础

◇

设计系统总览

色彩、字体、间距、按钮、卡片、表单等全量设计 Token 展示

0_DesignSystem/index.html

查看页面 →

⊚

CSS Design Tokens

可直接引用的 CSS 变量文件，含颜色/字体/间距/阴影完整体系

0_DesignSystem/css/tokens.css

查看文件 →

◈

骨架屏 / Loading 规范

统一骨架屏动画、全页骨架模板、品牌 Loading、内联 Loading 三点脉动

0_DesignSystem/css/skeleton.css

查看文件 →

/ 02

微信小程序端

面向 C 端高净值用户 · 储值会员体系 + 产品购买 + AI 顾问 + 代理入驻

核心购物流程

会员中心

代理功能

内容与帮助

系统页

管理后端

◉

首页

全屏 Hero + 衬线标题 + 品牌叙事 + 储值 CTA + 产品横向滑动

1_MiniProgram/index.html

1_MiniProgram/onboarding.html

1_MiniProgram/login.html

查看页面 →

▤

商城 / 商品列表

双产品分类 + 商品卡片列表 + 筛选排序

1_MiniProgram/shop.html

查看页面 →

◆

商品详情页

沉浸式产品展示 + 用户评价区 + 阶梯价 + 认证墙 + 10箱起售标签

1_MiniProgram/product-detail.html

查看页面 →

▦

储值购买

4档储值方案，清晰展示权益与优惠，深绿余额头

1_MiniProgram/store-buy.html

查看页面 →

✎

订单确认

地址卡 + 商品行 + 费用明细 + 储值抵扣开关 + 提交订单

1_MiniProgram/order-confirm.html

查看页面 →

◉

确认支付

订单摘要 + 订单明细 + 支付方式选择 + 倒计时 + 底部支付栏

1_MiniProgram/payment.html

查看页面 →

✔

支付结果页

支付成功/失败状态展示 + 订单详情入口 + 返回首页

1_MiniProgram/payment-result.html

查看页面 →

☰

订单中心

储值记录/订货记录双Tab + 筛选功能 + 空状态优化

1_MiniProgram/order-center.html

查看页面 →

☊

订单详情

状态头图 + 倒计时支付 + 超时自动切换已关闭状态

1_MiniProgram/order-detail.html

查看页面 →

⇆

兑换区

储值余额兑换商品，Tab切换产品，起兑量优雅提示，数量选择器

1_MiniProgram/exchange.html

查看页面 →

⌕

搜索页

搜索框 + 历史记录 + 热门推荐 + 空状态优化（SVG插画+引导按钮）

1_MiniProgram/search.html

查看页面 →

— 会员中心

☺

会员中心

VIP身份铭牌（4种身份独立配色）+ 余额/积分/余量 + 订单入口 + 等级说明

1_MiniProgram/mypage.html

查看页面 →

◈

会员等级说明

储值会员/普通会员/市级代理/省级代理四档权益对比

1_MiniProgram/member-level.html

查看页面 →

◉

电子名片

深绿名片卡（金色边框头像 + 二维码）+ 4种身份配色 + 推广数据

1_MiniProgram/card.html

查看页面 →

▤

消费记录

储值消费明细列表 + 时间筛选 + 金额汇总

1_MiniProgram/consumption.html

查看页面 →

✔

储值详情 - 成功

储值成功状态页 + 到账金额 + 当前余额 + 完成按钮

1_MiniProgram/deposit-detail-success.html

查看页面 →

✕

储值详情 - 失败

储值失败状态页 + 失败原因 + 重试按钮

1_MiniProgram/deposit-detail-fail.html

查看页面 →

☎

地址管理

收货地址列表 + 新增/编辑/删除 + 默认地址设置

1_MiniProgram/address.html

查看页面 →

↩

退款 / 售后

退款申请流程 + 售后进度追踪 + 退款金额明细

1_MiniProgram/refund.html

查看页面 →

✉

消息中心

粘性Tab + 深绿AI推送Banner + 未读红点 + 消息列表 + 操作按钮

1_MiniProgram/messages.html

1_MiniProgram/message-detail.html

查看页面 →

⚙

设置页

账户安全 + 微信订阅管理入口 + 关于我们 + 退出登录

1_MiniProgram/settings.html

查看页面 →

🔔

微信订阅管理

6个订阅项开关（审核通知/付款提醒/发货通知/促销活动/健康知识/账户变动）

1_MiniProgram/subscribe-settings.html

查看页面 →

— 代理功能

▤

代理购买（小程序端）

暗色头部统计数据 + 市代/省代套餐卡 + 目标进度条 + 区域保护提示

1_MiniProgram/agent-buy.html

查看页面 →

◈

代理申请进度

4步进度条 + 当前状态卡片 + 撤回申请按钮 + 联系顾问入口

1_MiniProgram/agent-apply-progress.html

查看页面 →

▦

代理后台（小程序端）

代理数据概览 + 团队管理入口 + 佣金明细 + 订单管理

1_MiniProgram/agent-dashboard.html

查看页面 →

↑

代理晋升申请

当前等级 + 晋升进度条 + 条件核对（已达成/未完成）+ 补充信息表单

1_MiniProgram/agent-promotion.html

查看页面 →

◉

银行转账（线下支付）

对公账户信息展示 + 上传转账凭证 + 等待审核状态

1_MiniProgram/bank-transfer.html

查看页面 →

— 内容与帮助

◇

AI 健康顾问

AI欢迎语 + 智能选货推荐 + 对话气泡 + 快捷芯片 + 底部输入栏

1_MiniProgram/ai-chat.html

查看页面 →

◌

健康知识列表

今日推荐大卡片 + 分类横向滑动标签 + 文章卡片列表（缩略图+标签+时间）

1_MiniProgram/health-knowledge.html

查看页面 →

☊

健康文章详情

头图+标题+元信息 + 正文排版（引用块/小标题）+ 底部产品推荐 + 分享收藏

1_MiniProgram/health-article.html

查看页面 →

?

帮助中心

常见问题分类 + 搜索功能 + 在线客服入口 + 搜索无结果空状态

1_MiniProgram/help.html

查看页面 →

✎

意见反馈

问题类型选择 + 文字描述 + 图片上传 + 联系方式

1_MiniProgram/feedback.html

查看页面 →

✉

微信订阅消息模板设计

4种模板（审核通过/拒绝/付款提醒/佣金到账）+ 微信消息气泡真实预览 + 字段明细

1_MiniProgram/subscribe-msg-templates.html

查看页面 →

— 系统页

⚠

网络错误页

断网状态插画 + 重试按钮 + 返回首页入口

1_MiniProgram/network-error.html

查看页面 →

◎

关于我们（小程序端）

品牌简介 + 联系方式 + 用户协议 + 隐私政策入口

1_MiniProgram/about.html

查看页面 →

— 管理后端

⚙️

管理后端首页

数据概览 + 功能入口9宫格 + 快捷操作 + 最近操作记录

1_MiniProgram/admin.html

查看页面 →

💰

分润管理

分润总览3数字卡片 + 分润明细列表 + 提现管理（微信自动分账）

1_MiniProgram/profit-share.html

查看页面 →

📢

推广管理

推广链接生成 + UTM追踪数据 + 转化漏斗图 + 渠道效果对比

1_MiniProgram/promotion.html

查看页面 →

📊

数据分析

GMV总览 + 销售趋势 + 用户增长 + 代理业绩排名 + 报表导出

1_MiniProgram/analytics.html

查看页面 →

🚚

发货管理

待发货订单列表 + 发货表单（快递信息+备注+拍照）+ 发货记录

1_MiniProgram/shipping.html

查看页面 →

/ 03

PC 企业官网

品牌叙事 + 水源地故事 + 产品展示 + 认证墙 + 代理合作入口 · 面向高净值访客

○

官网首页

100vh Hero + 水源地故事 + 2款产品大卡 + 数据信任墙 + 品牌实力 + 认证墙 + 小程序引导CTA

2款产品大卡展示 + 成分解读 + 使用场景 + 参数对比表

2_Website/products.html

查看页面 →

▦

企业采购页

企业定制方案 + 采购流程 + 案例展示 + 联系咨询入口

2_Website/enterprise-procurement.html

查看页面 →

/ 04

PC 招商平台

面向企业级潜在代理商 · 数据说话 + 收益计算器 + 等级对比 + 4步申请

▽

招商首页

大字数据 Hero + 双等级对比卡 + 收益计算器 + 4步流程 + CTA

3_AgentPlatform/index.html

查看页面 →

✎

代理申请页（PC端）

4步申请流程 + 独立背景面板步骤指示器（金色渐变激活态）+ 表单 + 资质上传

3_AgentPlatform/apply.html

查看页面 →

↑

代理晋升申请（PC端）

当前等级 + 晋升进度条（78%动态填充）+ 条件核对 + 补充信息表单

3_AgentPlatform/agent-promotion.html

查看页面 →

/ 05

后台管理系统

运营数据大屏 + 订单管理 + 代理审核 + 产品管理 · 深色大屏风格

▦

数据大屏

深色大屏风格，KPI卡片 + 趋势图表 + 实时预警区域 + 地理分布

4_Admin/dashboard.html

查看页面 →

☰

订单管理

侧边栏 + 统计卡片 + 筛选栏 + 订单数据表格 + 详情弹窗

待审/审核中/已通过/已拒绝 + 加急标识 + 操作按钮 + 审核详情弹窗

分润总览3数字卡片 + 分润明细表格 + 状态机步骤条 + 提现管理

4_Admin/profit-share.html

查看页面 →

📢

推广管理

推广链接生成 + UTM追踪数据 + 转化漏斗图 + 内容排期日历

4_Admin/promotion.html

查看页面 →

📊

数据分析

GMV总览 + 销售趋势 + 用户增长 + 代理业绩排名 + 报表导出

4_Admin/analytics.html

查看页面 →

/ 06

手机端官网（H5）

面向高净值访客的移动端品牌官网 · 零外部依赖 · 每页均有小程序CTA引流

◉

首页

全屏Hero + 品牌价值4宫格 + 产品横向滑动 + 数据实力 + 小程序引导CTA

5_MobWebsite/index.html

查看页面 →

◎

品牌故事

时间线历程 + 引言引用块 + 核心理念4宫格 + 两大水源地卡片

5_MobWebsite/about.html

查看页面 →

◆

产品中心

双产品详情页（各含视觉/亮点/成分表/规格选择）+ 底部CTA

5_MobWebsite/products.html

查看页面 →

▦

品牌实力

数据墙 + 国企合作卡片 + 认证4宫格 + 6步生产流程 + 品控报告列表

5_MobWebsite/strength.html

查看页面 →

☎

联系我们

联系方式4项 + 小程序码引导区 + 地图占位 + 商务咨询表单

5_MobWebsite/contact.html

查看页面 →

/ 07

手机端招商平台（H5）

面向高净值潜在代理商 · 数据前置 + 收益计算器 + 4步渐进申请 · 零外部依赖

▽

招商首页

数据墙（30+城市/5000+网点/98%续约）+ 4大优势宫格 + 代理等级预览 + 收益计算器 + 4步流程

6_MobAgentPlatform/index.html

查看页面 →

◈

代理政策

市代/省代双标签切换 + 可展开政策卡片（准入/价格/权益）+ 实时收益计算器

6_MobAgentPlatform/policy.html

查看页面 →

✎

申请入驻

4步渐进表单 + 自定义单选组件 + 步骤导航 + 提交成功页

6_MobAgentPlatform/apply.html

查看页面 →

↑

代理晋升申请

当前等级 + 晋升进度条 + 条件核对（已达成✓/未完成○）+ 晋升后权益预览

6_MobAgentPlatform/promotion.html

查看页面 →

⊕

代理登录

账号登录 + 微信登录双标签 + 忘记密码入口

6_MobAgentPlatform/login.html

查看页面 →

▦

代理后台首页

数据卡片 + 8功能入口 + 3快捷操作 + 底部5栏导航

6_MobAgentPlatform/dashboard.html

查看页面 →

?

常见问题

分类标签 + 6个可展开QA + 搜索过滤 + 联系顾问入口

6_MobAgentPlatform/faq.html

查看页面 →

✉

公告通知

分类标签 + 6条公告列表 + 未读圆点 + 全部/政策/活动/系统过滤

6_MobAgentPlatform/notice.html

查看页面 →

◎

成功案例

3个代理商真实故事 + 关键数据（月销售额/团队规模/续约率）+ 市代/省代过滤

6_MobAgentPlatform/cases.html

查看页面 →

☊

品牌故事（招商H5）

引言引用块 + 水源地卡片 + 数字实力墙 + 品牌发展历程时间线

6_MobAgentPlatform/about.html

查看页面 →

☎

联系我们（招商H5）

4项联系方式卡片 + 地图占位 + 小程序引导 + 商务咨询表单

6_MobAgentPlatform/contact.html

查看页面 →

水润天地 · 全端原型 面向高净值人群

设计系统

微信小程序端

PC 企业官网

PC 招商平台

后台管理系统

手机端官网（H5）

手机端招商平台（H5）

水润天地 · 全端原型
面向高净值人群