交互与开发
5月. 2026
ClinIQ
ClinIQ 是为 B2C 健康产品打造的、以信任为导向的营销落地页——用通俗语言解读化验与就诊准备，而非医疗诊断。我将页面设计为一条连续叙事：开场预加载、首屏、固定的 How it works、场景故事、定价、联系，以及收尾转化弧线的上传区块。
动效承载叙事而不牺牲可读性。Lenis 负责平滑滚动；GSAP ScrollTrigger 驱动区块揭示、How it works 桌面端 pin（Upload → Understand → Prepare）及故事卡片的磁吸悬停。开场与锚点导航使用幕帘式预加载——跳转 Pricing 或 Stories 无突兀闪现。布局尊重 prefers-reduced-motion。
首屏折叠区——关于健康清晰度的自信标题、跑马灯节奏、指向上传的易扫读 CTA；在进入更深证明区块前的沉稳构图。
How it works——桌面端 pin 滚动走过 Upload、Understand、Prepare；随滚动 copy 与视觉 cross-fade。
Stories——CSS 构建视觉的场景卡片；mock UI 上的磁吸悬停；caregiver 与 labs 叙事建立信任。
Pricing——Free 与 Plus 档位卡片配合 scroll reveal； calm 文案与脚注 disclaimer；无 enterprise 语气的转化。
Contact——Say hello 面板与 email CTA 并列；响应式半圆弧过渡到下方深色 upload 区。
Upload 漏斗——堆叠文件卡片、线型表单字段、成功态；preloader 色调页脚与 compliance disclaimer。
Nav 菜单——侧栏滑入、大号区块链接、 dimmed 遮罩、 curved 面板边缘；hero 滚出视口后 FAB 打开相同路由。