角色
主设计师
时长
14 天
状态
已上线
日期
2026 年 2 月
目录
01
概览
02
为什么改版
03
挑战
04
调研与问题
05
策略
06
成果
07
复盘
回到顶部
+0%
重点产品注册量
+0%
产品页流量
+0%
首页互动
01 项目概览
1.1 背景
BlockSec 是做什么的
BlockSec 是一家拥有多条产品线的 Web3 安全与合规公司，重点产品是 Phalcon Compliance。首页主要服务 B2B 客户，同时也有个人访客和开发者在使用。
B2B
加密支付团队、交易所、钱包、协议和公链项目。他们主要把它用于合规风控、安全审计和实时监控。
B2C
研究人员、开发者和潜在试用用户。他们来到首页，是为了了解产品、查询风险或开始试用。
1.2 我的角色
我在一个两人设计团队里担任主设计师。设计周期为 14 天，改版后的网站于 2026 年 2 月 15 日上线。
🎨 Hero 主视觉与全部插画
🧭 信息层级
✏️ UI/UX 设计
🔗 跨产品对齐
🛠️ 开发交付与 QA
🧩 设计系统更新与优化
02 为什么需要这次改版
旧版首页没能让新访客足够快地走到正确的产品路径上。访客看到很多能力和入口，却仍然要自己弄明白 BlockSec 到底解决什么问题、哪个产品符合自己的需求，以及该直接试用还是联系销售。当 Phalcon Compliance 成为重点产品后，这些额外的决策负担拖累了首页的分流效果。
目标很明确：帮助不同用户按使用场景找到正确的入口。
加密支付团队、交易所、钱包、协议和公链项目。他们主要把它用于合规风控、安全审计和实时监控。
03 挑战
挑战在于讲清产品结构、给重点产品更明确的定位，并把用户引导到正确的路径上。
• 多条业务线仍然需要可见的入口。
• 重点产品需要更高的权重。
• Web3 安全与合规产品需要快速建立信任信号。
• 页面要同时支撑理解、探索和转化。
04 设计调研
发现 1：首页没有起到入口的作用
改版前，Clarity 的数据显示核心 CTA 上的点击非常分散：
用户是有意图的，但首页没能把这种意图转化成一个清晰的下一步。
旧版 Hero 聚焦在公司愿景和宽泛的能力上，重点产品在首屏之上没有清晰的入口。
发现 2：用户得自己拼凑产品之间的关系
旧版首页默认新访客能自己理解产品之间的关系。
BlockSec 主要有哪些产品方向？
哪个产品适合我的使用场景？
我接下来该去哪里？
我梳理出的旧版信息架构
发现 3：过长的页面没有给出方向选择
旧版首页很长，大约有 13 屏。页面顶部没有帮助用户选择方向，所以用户也没什么理由继续往下探索。
05 设计策略
5.1 设计目标
帮助用户快速理解三大业务方向
把重点产品放到更突出的位置
让价值和能力紧密相连，并让试用 / 联系销售更容易被找到
5.2 UX 流程与 原型
新的 UX 流程
原型
5.3 关键决策
5.3.1 把 Hero 从公司介绍改造成重点产品入口
改版后的 Hero 以重点产品作为主角，并用免费试用 CTA 把用户直接引导进产品。
Hero 承载了更多信息，所以我采用了更轻盈、更通透的视觉风格。
5.3.2 在第二屏搭建产品结构总览
第二屏让用户在选择路径之前先快速获得一个总览：一句话概括产品结构，动效视觉则展示各产品之间的关系。这降低了后续分流前的理解成本。
5.3.3 用快速导航把用户分流到三个方向
用户可以根据自己的意图选择方向，直接跳转到对应的产品和能力内容。这缩短了页面长度，也给了用户更明确的继续探索的理由。
5.3.4 用滑动交互和插画来压缩内容长度
每个业务板块都使用滑动交互，把相关内容收纳在同一个区域里，从而减少纵向长度。
我还用插画拆解抽象的技术概念，让用户更快理解每个产品方向。
5.3.5 把产品、能力和下一步动作放进同一个阅读单元
我把每个业务方向都整理成一条更短的决策路径：
• 是什么： 产品卡片
• 解决方案：能力模块
• 行动： CTA 与信任信号
把这些信息放在一起，减少了用户来回串联线索的成本。
06 成果
于 2026 年 2 月 15 日上线。对比口径：上线前基线 vs. 上线初期数据。
+0%
重点产品注册量
+0%
产品页流量
+0%
首页互动
+0%
首页平均滚动深度
−0%
首页跳出率
07 复盘
首页改版需要在早期就对业务优先级、用户路径和团队预期达成一致，视觉执行是后面的事。如果这些定义不清晰，首页就无法成为增长入口。
关键复盘与改进
更早地明确首页最核心的业务目标
在争论模块顺序之前，先区分主路径和次路径
尽早与 PM、市场和销售对齐取舍
在上线前就用预先定义好的埋点确定衡量口径
如果这些作品让你产生共鸣或好奇，我很乐意和你聊聊。
© 2026 Tanya Tian