Flux

六版设计记录了产品重点如何移动

Figma V1–V6 与线上 V7 记录了完整演化：Portfolio 长页、首页营销引导、Slogan、品牌故事、KPI Dashboard 与多种操作面板都出现过。按顺序放大这些桌面稿，可以看到首页在操作、叙事与产品数据之间反复调整。最终 V7 没有继续把所有信息堆在首页：Overview 负责产品介绍、参与指引和 KPI 总进度，KPIs 独立页面负责每个 KPI 的进度。

我按用户任务提出主方案与备选调整

针对 V6，我在 1 月 29 日提出页面职责、信息权重和概念暴露的具体建议：先考虑拆出介绍页，若保留原结构，再调整首页重点。TL 与 PM 回应，这些判断与投资人反馈和本轮修改目标几乎一致；最终页面则形成了 Overview 与 KPIs 的分工。

• 优先把 introduction 抽离到独立页面，让 Home 聚焦全局 KPI；Portfolio 先回答个人质押、预估奖励和已获得奖励
• 如果不抽离 introduction，再考虑用 Active KPIs 替换右侧 Updates，把影响判断的进度放进首屏
• 奖励按 MEGA 的质押时间分配：质押越久，maturity 与奖励权重越高
• 每次质押形成一个 Position，多笔 Position 再按 MEGA 数量汇总为加权成熟度
• 主路径只暴露质押 / 解押；Position 与 maturity 留在 How It Works、质押弹层和 My Commitments 中按需解释

UI 跟着设计落地，UX 需要额外定义

设计稿持续变化，只解释了为什么 UI 需要反复追齐，并不是 UX 决策的来源。我同步完成整套 UI 重写；与此同时，在设计稿之外定义信息层级、Drawer / Modal 的路由状态、移动端 Back、标题与视觉锚点、动画节奏和同尺寸 Skeleton。

把每个弹出层变成一条可返回的路径

用 Terminal 中保留的 useRouteStack 作为实现示例，说明这套交互的组织方式：createRouteStack("drawer") 创建独立的 Context、Provider 和 hooks，让 URL、React 状态与浏览器历史共用一套栈。弹层不再只是 open 布尔值，而是可返回、可恢复的路径。影片中的 URL 与抽屉变化用截图动画示意。

• URLSearchParams.getAll / append：重复的 drawer 参数按顺序编码每一层
• stack + stackRef + pushedDepthRef：即时更新界面，并识别哪些历史条目由弹层创建
• pushState / replaceState / back / go：打开、替换、只退一层或一次清空
• usePathname / useSearchParams + Credenza：恢复 URL 状态，桌面渲染 Modal，移动端渲染全屏 Drawer

一致性不只是一套颜色

我统一了同类弹层的标题文案、标题区、内容区、CTA 与关闭语义。桌面 Modal 和移动端 Drawer 使用不同容器，但承载同一份内容和状态；切换弹层内容或步骤时，标题与主体的视觉锚点保持不动，用户不需要重新寻找“现在在哪里、下一步在哪”。

动画和加载也要守住布局

标题逐字出现，Progress 从初始值过渡到目标值，组件进入也保持统一节奏。每个异步内容区域都预留了与最终内容相同的尺寸，Skeleton 消失时只替换内容、不重新分配空间，因此数据返回不会推动周围布局。