角色
独立设计师
时长
16 天
状态
已上线
日期
2026 年 5 月
目录
01
背景
02
调研
03
策略
04
关键决策
05
成果
06
复盘
回到顶部
01
项目背景
1.1 背景
产品概览
Phalcon Compliance 是 BlockSec 旗下的一款加密合规与风险审计 SaaS 产品，支持地址与交易筛查、持续监控和风险报告。它的用户包括独立审计人员、加密原生团队、银行、交易所以及合规咨询机构。
b. 我们为什么要改版
1.2 我的角色
我是这个项目的独立设计师。
🔍 用户体验调研
Claude code ➡️ HTML（交互原型）
🧩 信息架构重构
🎨 设计系统更新与优化
🔗 跨产品对齐
🛠️ 开发交付与 QA
我负责设计了 Pricing Plans、Checkout、Usage & Billing、升级提示以及 Share Result 管理的视觉与交互体验。这部分工作覆盖了 Visitor、Credits、Essential、Scale 和 Custom 等用户状态。同时也处理了套餐额度耗尽、Monitor 容量占满、Top-up、续费和升级等关键场景。
02
调研
2.1 项目范围
研究对象：从查看套餐到购买、用量消耗、续费、升级，以及共享结果管理的完整流程。
页面范围：Pricing、Checkout、Usage & Billing、升级提示、Share Result 管理以及迁移通知。
2.2 定位问题
证据来源：
用户研究数据：
GA / Clarity 的 Pricing 数据
Pricing / Usage / Billing 热力图
Clarity 会话摘要
真实用户反馈：
Telegram 用户群
产品内 AI 助手
销售团队
问题 1：旧版定价体验的核心痛点
关键指标（4 月 20 日 - 5 月 20 日）：
0.0 分钟
页面平均停留时长
0.00%
无效点击率
0.00%
转化率
购买意愿强烈，但很难选对套餐。
b. 这些问题在产品中如何体现：
价格表达不清晰，
用户需要自己计算。
免费套餐区域过大，
抢走了注意力。
CTA 和视觉层级
不够清晰。
重要说明被
埋在页面底部：曝光低，
容易被忽略。
定价层级令人困惑
当前套餐状态缺乏可见性。
问题 2：当前状态识别
旧版 Usage 与 Billing 页面的点击热力图（4 月 20 日 - 5 月 20 日）
b. 通过产品内 AI 助手收集到的常见用户问题
我还剩多少次筛查额度？
我的 Credits 什么时候过期？
我已经订阅了套餐，为什么还需要额外购买 Credits？
c. 关键发现
用户不得不在多个页面之间拼凑自己的账户状态，在需要更多额度时，也常常不确定该购买 Credits、Top-up、续费还是升级。
问题 3：缺少长期管理
a. 来自销售和 Telegram 用户的反馈
希望能找到此前分享过的报告。
希望能撤回已经发出去的链接。
希望知道过期的链接能否恢复。
希望有一个集中视图，查看所有分享链接及其 Active / Expired 状态。
b. 关键发现
用户虽然可以生成分享链接，但目前没有办法管理它们。用户需要了解链接状态、查看过期时间，并在需要时有清晰的机制撤回访问权限。
03
策略
3.1 设计原则
让套餐选择从比价转变为基于用量的决策。
把分散的账户信息整合成一个易于理解的状态视图。
把升级动作放进真实的限额场景中，而不仅仅停留在 Pricing 页面。
3.2 旅程结构
最终的改版落地为一套完整的自助付费旅程，覆盖了从套餐选择、付款、账户状态、限额触发，到扩容与长期管理的关键节点。
3.3 用户状态覆盖
用户状态
主要需求
关键页面
Visitor
决定是否开始使用
Pricing
Free / Trial
了解额度与限制
升级提示
Credits 用户
用量耗尽后购买更多 Credits
Pricing / Usage
Essential
查看订阅与用量
Usage & Billing
Scale
管理更高额度与 Monitor
Usage & Billing
Custom
联系销售并管理权益
Billing / Notification
04
关键决策
4.1 Pricing Plans：把复杂套餐压缩成两步决策
V3 引入了更复杂的定价结构：Plan、Screening 档位和 Monitor 配置需要同时并存。我把决策流程简化为两步：先选择 Plan，再在卡片内选择 Screening 和 Monitor。
4.2 Checkout：用一套订单结构支撑多种付款场景
我把 V3 中六种不同的付款场景统一到了同一套 Checkout 框架下。布局采用两栏结构：左侧是订单明细，右侧是付款。对于升级场景，用户只会看到发生变化的部分。即时扣费与未来的续费费用被分开展示，以厘清按比例计费、抵扣和续费规则。支付方式也以更清晰、更精简的方式呈现。
4.3 Usage & Billing：帮助用户理解额度、账单与下一步操作
把 Usage 和 Billing 合并到带标签页的同一个页面，减少了页面之间的跳转。
Usage：用量展示从「时间进度」改为「用量进度」。面对多种额度来源，页面用表格说明每种来源、过期时间、状态和消耗顺序，最先被消耗的额度排在最上面。用户可以立刻看清自己还剩多少用量，以及下一步该做什么。
Billing：Billing 页面强化了视觉层级，把当前 Plan、Credits、付款状态和账单信息放在更显眼的位置。页面只保留一个主要的 Upgrade CTA，Manage Billing 作为次要操作，以减少操作上的分散。
4.4 Share Result：把分享链接变成可管理的资产
Share Result 的核心工作，是在生成链接之后补上管理能力。
我新增了一个共享结果管理页面，用户可以查看所有分享链接的 Active / Expired 状态，并进行搜索、复制、编辑、批量删除和重新生成。这让「分享」从一次性动作，变成了可追踪的资产。
4.5 Upgrade Prompts：统一升级引导，按场景给出下一步
我统一了升级提示卡片的视觉与交互结构。用户停留在当前场景中、可以继续浏览页面内容，只有当某个具体操作被限制时，升级提示才会出现。这种方式以更低的打扰，帮助用户理解为什么需要升级。
当用户接近额度上限时，会有一条横幅给出轻量提醒，并引导他们进行下一步。
05
成果
上线日期：2026.05.21
对比窗口：2026.04.20-2026.05.20 vs 上线初期数据
+0%
注册用户数
+0%
Pricing 页面访问量
+0%
Credits / Top-up 结账量
−0%
Usage 页面的无效点击
+0%
Usage & Billing 访问量
改版后用户和团队的反馈：
「现在更容易看清还剩多少额度，也更清楚下一步应该是购买 Credits 还是升级套餐。」
Telegram 用户群
「状态矩阵和统一的组件，让未来的 Monitor、Top-up 和升级场景更容易扩展。」
PM / 研发
06
复盘
这个项目让我对复杂的 SaaS 付费旅程有了更深的理解。设计需要把业务规则、用户状态和下一步动作，翻译成可被执行的体验。
关键复盘与改进
设计应该更早介入问题定义
多状态产品要先做状态矩阵，再做页面
增长设计要衡量的是理解，而不只是转化
组件规范应该更早确定
如果这些作品让你产生共鸣或好奇，我很乐意和你聊聊。
© 2026 Tanya Tian