zhangxiang
08f19ad6ca
记录 vibe 设计优化封版：README/CONTEXT 同步设计规范（Swiss Modernism 2.0 + Bento Box + Hero-Centric + Motion-Driven）、依赖漏洞处置结论与质量标准；新增 实施计划与用户旅程验收报告。
19 KiB
19 KiB
Novalon 官网设计优化实施计划
依据：人人都是产品经理《AI 时代 Vibe Design 必备的 50 种 UI 风格名词！》（https://www.woshipm.com/share/6446559.html） 日期：2026-08-18 状态：✅ 已完成封版（Phase 1-3 实现 + 质量门禁 + 用户旅程测试 UJ-01~11 61 passed + impeccable critique 三轮 31→26→34 + CMS 内容层收尾） 执行原则：按
AGENTS.md工作流，先文档共识 → 任务拆解 → TDD 实现 → 质量门禁 → 文档同步。
1. 背景与目标
当前 Novalon 官网已有「白底 + 墨色 + 朱砂红 + 克制动效」的咨询专业风骨架（Swiss Modernism 2.0 雏形），但存在以下问题：
- 首页 Hero 只有文字，没有产品视觉，首屏说服力弱。
- 列表页全部是等尺寸卡片墙，信息层级扁平，缺乏记忆点。
- 四层叙事模型中的 L3 信任层基本缺失，Social Proof / Trust & Authority 未落地。
- 首页是并列区块，不是「痛点 → 方案 → 结果」的章节叙事。
- 动效全部是统一 fade-up，缺少首屏编排与差异化微交互。
- 品牌视觉资产（朱砂下划线、数字编号、点阵纹理、数据可视化）未形成统一系统。
目标
在不改变「咨询专业风 + 品牌红点缀」定位的前提下：
- 首屏从「文字海报」升级为「价值 + 产品视觉 + 单一 CTA」的转化型 Hero。
- 产品/服务/方案列表从「均匀卡片」升级为「Bento Box 非对称网格」，主次分明。
- 补齐可验证的信任层与章节式叙事。
- 建立统一动效语言与品牌视觉资产。
- 通过全部质量门禁（type-check / lint / unit / e2e / visual / lighthouse / a11y）。
2. 设计方向（风格定位）
一句话定位：
Swiss Modernism 2.0（骨架） + Bento Box Grid（信息组织） + Hero-Centric & Conversion-Optimized（首屏转化） + Trust & Authority & Social Proof（信任层） + Interactive Product Demo / Motion-Driven（差异化记忆点） + Accessible & Ethical（底线）
从文章借用的风格标签
| 风格 | 用途 | 落地位置 |
|---|---|---|
| Swiss Modernism 2.0 | 全站网格、字阶、留白基线 | globals.css、所有页面 |
| Hero-Centric Design | 首屏单一价值主张 + 单一主 CTA | 首页、产品/方案/服务列表页 Hero |
| Conversion-Optimized | 围绕「预约咨询/演示」优化路径 | 所有 CTA 区、Contact 页 |
| Bento Box Grid | 功能多时用非对称模块拉开主次 | 产品矩阵、服务、方案列表 |
| Feature-Rich Showcase | 产品功能分组展示，避免同尺寸卡片 | 产品详情页 |
| Trust & Authority | 真实可验证的信任信号 | 首页信任区、详情页 L3、About |
| Social Proof-Focused | 首批客户共创、真实 quote | 首页/About/详情页 L3 |
| Storytelling-Driven | 章节化叙事，替代并列卡片 | 首页、About、详情页 L2 |
| Interactive Product Demo | 产品界面/数据可视化直接展示 | 首页 Hero、产品详情页 |
| Micro-interactions / Motion-Driven | 有目的的短动效，避免统一反射 | 全站交互反馈、首屏入场 |
| Accessible & Ethical / Inclusive Design | WCAG 2.1 AA 底线 | 全站 |
明确不采用的风格
- ❌ Glassmorphism / Liquid Glass（背景一乱文字糊，性能开销大）
- ❌ Neumorphism / Claymorphism / Skeuomorphism（对比度与专业感风险）
- ❌ Y2K / Vaporwave / Cyberpunk / Memphis / Brutalism（与咨询品牌人格冲突）
- ❌ 大面积渐变、发光边框、连续循环动画
- ❌ 虚构案例、客户 logo、资质、数据（零编造原则）
3. 范围与不在范围内
在范围内
- 首页 Hero 重做。
- 产品矩阵页 Bento Box 化。
- 服务/方案列表页信息层级优化（与产品矩阵共用组件模式）。
- 详情页 L3 信任层组件启用（数据就绪时）。
- 首页/About 章节式叙事改造。
- 动效语言统一（首屏编排、微交互、reduced-motion）。
- 品牌视觉资产统一（数字编号、色条、点阵、数据可视化插画）。
- 相关单测 / E2E / 视觉回归 / Lighthouse 更新。
不在范围内
- ❌ 更换技术栈（保持 Next.js App Router + React + Tailwind）。
- ❌ 重构 CMS / Admin / 后端 API。
- ❌ 引入新 UI 框架或重型动效库。
- ❌ 重做 Logo / 品牌色 / 字体（身份保留优先）。
- ❌ 编造真实案例、资质、客户数据。
- ❌ 全站深色模式大改版。
4. 阶段总览
| 阶段 | 内容 | 预估工期 |
|---|---|---|
| Phase 0 | 基线对齐：设计令牌、组件现状盘点、测试基线 | 0.5–1 天 |
| Phase 1 | P0：首页 Hero + 产品矩阵 Bento Box | 2–3 天 |
| Phase 2 | P1：信任层 + 章节式叙事 | 2–3 天 |
| Phase 3 | P2：动效统一 + 品牌视觉资产 + 无障碍收尾 | 1–2 天 |
| Phase 4 | 全量验证 + 文档同步 | 1 天 |
5. Phase 0：基线对齐
目标： 确认现状、锁定设计令牌、建立可回滚基线。
- 盘点当前所有页面 Hero / 卡片 / CTA 组件，输出「同构组件清单」。
- 确认
globals.css设计令牌与CONTEXT.md/PRODUCT.md一致（品牌红 ≤10%、动效 200-300ms、ease-ink）。 - 运行
npm run type-check、npm run lint、npm run test:unit、npm run test:visual记录基线。 - 更新
docs/plans/2026-08-18-vibe-design-optimization-plan.md中受影响文件清单（如实现过程中有增删）。
6. Phase 1：P0 首屏与信息架构
6.1 首页 Hero 重做（Hero-Centric + Conversion-Optimized + Interactive Product Demo）
文件：
- 修改：
src/app/(marketing)/home-content-v14.tsx - 可能新增：
src/components/sections/hero-product-visual.tsx、src/components/sections/hero-data-visual.tsx
任务：
- 首屏布局改为左右分栏（桌面）：左侧价值主张 + 单一主 CTA，右侧产品界面/数据看板可视化。
- 主 CTA 保留「预约咨询」；次级 CTA 降级为文字链接（如「查看产品矩阵」）。
- 数据条（stats）保留但压缩为 3 个以内，不与 CTA 抢注意力；数字使用 tabular-nums。
- 产品视觉采用 React/CSS/SVG 高保真产品界面 Mockup（
hero-product-visual.tsx）：应用窗口 + 侧边导航 + KPI + 趋势图 + 待办预警 + 商机表，内容使用真实产品模块命名，标注「产品界面示意」与「示例数据」避免误导。 - 若后续有已脱敏的真实产品截图，可替换 SVG 示意；禁止使用虚构客户数据的截图。
- 移动端：视觉图置于价值主张下方，CTA 保持首屏可达。
- 新增
@media (prefers-reduced-motion: reduce)降级路径（沿用现有 ScrollReveal / useReducedMotion）。 - 新增
src/app/(marketing)/home-content-v14.test.tsx覆盖 Hero 产品视觉、单一 CTA、stats 断言。
验收标准：
- 首屏出现真实产品视觉（非纯文字）。
- 首屏只有一个主 CTA 按钮。
- 首屏高度不超 100vh（桌面 90vh 左右）。
- 移动端 375px 无横向滚动，CTA 首屏可见。
6.2 产品矩阵页 Bento Box（Bento Box Grid + Feature-Rich Showcase）
文件：
- 修改：
src/app/(marketing)/products/products-content-v3.tsx - 可能新增：
src/components/sections/bento-product-card.tsx
任务：
- 将「企业套装」6 款产品改为非对称 Bento 网格：ERP（睿新管理系统）占 2×2 大卡（当前旗舰），BI（睿新商业智能分析平台）占 1×2 次大卡（呼应「数据到决策」品牌主张），其余产品 1×1。
featured优先级先写死为 ERP + BI，后续有真实咨询/转化数据后可改为 CMS 可配置字段。- 大卡展示：产品名 + 定位语 + 核心指标 + 推荐组合；小卡保持轻量快照。
- 保留「企业套装 / 专业产品」分区，但删除同尺寸重复卡片。
- 复用服务编号 + 4px 色条编码体系，不整卡上色。
- 卡片 hover：上移 4px + 底部品牌色条延展 + 箭头位移，统一 200-300ms。
- 更新
src/app/(marketing)/products/products-content-v3.test.tsx（新增 ERP large / BI wide 断言）。
验收标准：
- 产品网格存在至少两种卡片尺寸（非对称）。
- 每个产品卡片仍能在一屏内识别名称、场景、关键指标。
- 品牌红面积 ≤10%。
6.3 服务/方案列表页对齐（共用 Bento 模式）
文件：
- 修改：
src/app/(marketing)/services/services-content-v3.tsx - 修改：
src/app/(marketing)/solutions/solutions-content-v3.tsx
任务：
- 服务页：核心服务大卡（含指标、能力清单），辅助服务小卡；删除等宽四卡（首个服务
md:col-span-2大卡，其余 1 列）。 - 方案页：行业卡片保留「痛点 + 推荐产品组合 + 成果」，但用 2+1 非对称布局突出重点行业（首个方案
md:col-span-2大卡，其余 1 列）。 - 与产品矩阵共用
BentoProductCard/ 通用 Bento 容器（抽到src/components/ui/bento-grid.tsx或src/components/sections/bento-grid.tsx）。
验收标准：
- 服务/方案页不再出现全等尺寸卡片墙。
- 页面首屏到内容区的视觉节奏有主次。
7. Phase 2：P1 信任与叙事
7.1 信任层（Trust & Authority + Social Proof-Focused）
文件：
- 修改：
src/app/(marketing)/home-content-v14.tsx（TrustSection） - 修改：
src/app/(marketing)/products/product-detail-content-v3.tsx（CaseStudiesSection / CertificationsSection） - 修改：
src/app/(marketing)/solutions/solution-detail-content-v3.tsx - 修改：
src/app/(marketing)/services/service-detail-content-v4.tsx - 修改：
src/lib/constants/*（products.ts / solutions.ts / services.ts / company.ts / stats.ts）
任务：
- 将首页 TrustSection 从「4 个数据卡」升级为「数据条 + 可验证信任信号」组合：成立时间、核心团队、自研产品、私有化部署、首批客户共创。
- 真实数据才展示；无真实案例时显示「首批客户共创中」标签，不渲染空白 L3。
- 若已有真实 quote / 共创伙伴，使用
Testimonial组件（现有src/components/content/testimonials.tsx）。 - 详情页 L3：有数据 → 正常展示；有意向 → 「正在服务中」；无数据 → 不显示（沿用 CONTEXT.md 三档策略）。
- 确保所有数字、资质、案例可追溯来源，禁止编造。
验收标准：
- 首页信任区全部内容可验证（来源注释或数据文件）。
- 无虚构客户 logo / 案例 / 资质。
- 详情页 L3 空数据时不出现空白区块。
7.2 章节式叙事（Storytelling-Driven）
文件：
- 修改：
src/app/(marketing)/home-content-v14.tsx - 修改：
src/app/(marketing)/about/about-content-v4.tsx - 修改：详情页 L2 组件（
product-detail-content-v3.tsx、solution-detail-content-v3.tsx、service-detail-content-v4.tsx）
任务：
- 首页新增「问题 → 方法 → 结果」三幕叙事区，替代/重组现有服务卡片并列结构。
- 使用章节编号（01 诊断 / 02 设计 / 03 交付 / 04 陪伴）强化节奏。
- About 页把「公司简介」改为「为什么成立 → 怎么做事 → 走到哪里」的故事线。
- 详情页 L2 使用「痛点 → 架构 → 组合 → 成果」的线性叙事，而不是纯功能卡片堆叠。
- 每章保留一个「快速查看详情」入口，避免长文淹没。
验收标准：
- 首页存在至少一个非卡片式的叙事区块。
- 所有叙事内容与现有数据一致，不新增虚构事实。
8. Phase 3：P2 动效、品牌资产与无障碍
8.1 动效统一（Motion-Driven + Micro-interactions）
文件：
- 修改：
src/app/(marketing)/home-content-v14.tsx - 修改：
src/app/(marketing)/products/products-content-v3.tsx - 修改：
src/app/(marketing)/solutions/solutions-content-v3.tsx - 修改：
src/app/(marketing)/services/services-content-v3.tsx - 修改：
src/components/ui/scroll-reveal.tsx（如需要） - 修改：
src/components/ui/button.tsx、src/components/ui/card.tsx（如需要）
任务：
- 首页首屏做一次有编排的入场：Logo → 标题逐行 → 数据 → 产品视觉 → CTA，各元素 stagger 30-60ms。
- 列表页统一卡片 hover：
translateY(-4px)+ 色条/箭头反馈，150-300ms。 - 保留数字 count-up，但确保 reduced-motion 下直接显示最终值。
- 移除「每个 section 都 fade-up」的机械反射；不同区块使用不同入场方式（clip-path、位移、透明度组合）。
- 所有动画遵守：200-300ms 入场、150ms hover、100ms 反馈、ease-ink、禁止 >700ms、禁止弹性入场。
验收标准：
prefers-reduced-motion: reduce下无位移/闪烁动画，内容完整可见。- 无连续循环装饰动画。
8.2 品牌视觉资产
文件：
- 修改：
src/app/globals.css - 修改：
tailwind.config.js - 可能新增：
src/components/ui/data-visual.tsx、src/components/ui/brand-motif.tsx
任务：
- 把「朱砂下划线 + 数字编号 + 极淡点阵 + 数据可视化风格」固化为可复用组件/工具类（
bento-grid.tsx新增，brand-visuals.tsx已有 GeometricDecoration / DataBar 覆盖点阵与数据可视化）。 - 产品/方案/服务详情页使用同一套数据可视化插画语言（图表、架构图、仪表盘）。
- 在
CONTEXT.md记录风格主词：Swiss Modernism 2.0 + Bento Box + Hero-Centric + Motion-Driven。
验收标准：
- 全站至少 3 个页面出现可识别的同一品牌视觉资产。
- 品牌红面积 ≤10%，每页 ≥3 处触达点。
8.3 无障碍与性能收尾（Accessible & Ethical）
任务：
- 全站焦点态检查：
:focus-visible统一为品牌红描边。 - 新增视觉元素补充 aria-label / role / alt（hero-product-visual 已有「产品界面示意」「示例数据」标注与 aria-hidden）。
- 运行
npm run check:contrast、npm run check:headings。 - 运行 Lighthouse mobile + desktop，性能 ≥ 90（在现有基线基础上不退化）。[环境受限：TRAE 沙箱拦截 Chrome Crashpad 目录，需在沙箱外运行]
- 若引入 SVG 数据可视化，确认不阻塞 LCP、不增加明显 bundle 体积（纯 CSS/SVG 组件实现，无图片资源）。
验收标准：
npm run check:contrast通过。npm run check:headings通过。- Lighthouse 各项较当前基线不下降（或按 lhci 断言通过）。
9. 受影响文件清单（预计）
修改
| 文件 | 变更 |
|---|---|
src/app/(marketing)/home-content-v14.tsx |
Hero 重做、Trust 升级、叙事区、动效 |
src/app/(marketing)/products/products-content-v3.tsx |
Bento 网格 |
src/app/(marketing)/solutions/solutions-content-v3.tsx |
非对称布局 |
src/app/(marketing)/services/services-content-v3.tsx |
非对称布局 |
src/app/(marketing)/products/product-detail-content-v3.tsx |
L3 信任层、叙事 |
src/app/(marketing)/solutions/solution-detail-content-v3.tsx |
L3 信任层、叙事 |
src/app/(marketing)/services/service-detail-content-v4.tsx |
L3 信任层、叙事 |
src/app/(marketing)/about/about-content-v4.tsx |
故事化叙事 |
src/app/globals.css |
品牌视觉资产、焦点态 |
tailwind.config.js |
如有新工具类/令牌 |
src/lib/constants/*.ts |
信任数据、内容字段 |
相关 *.test.tsx / E2E / 视觉快照 |
同步更新 |
可能新增
| 文件 | 用途 |
|---|---|
src/components/sections/bento-grid.tsx |
✅ 已新增：通用 Bento 容器 |
src/components/sections/bento-product-card.tsx |
未新增（由 BentoItem + 现有 ProductCard 承担） |
src/components/sections/hero-product-visual.tsx |
✅ 已存在（Phase 1） |
src/components/ui/data-visual.tsx |
未新增（brand-visuals.tsx 的 DataBar 已覆盖） |
src/components/ui/brand-motif.tsx |
未新增（brand-visuals.tsx 已覆盖） |
10. 质量门禁（每个 Phase 结束必须执行）
| 检查 | 命令 | 通过标准 |
|---|---|---|
| 类型检查 | npm run type-check |
无错误 |
| Lint | npm run lint |
无错误、无警告 |
| 单元测试 | npm run test:unit |
全部通过 |
| 覆盖率 | npm run test:coverage |
不低于 jest.config.js 阈值 |
| E2E | npm run test:e2e:fast |
全部通过 |
| 视觉回归 | npm run test:visual |
快照通过（必要时更新并人工确认） |
| 对比度 | npm run check:contrast |
WCAG 2.1 AA |
| 标题层级 | npm run check:headings |
通过 |
| 性能 | npm run lighthouse |
lhci 断言通过 |
11. 风险与规避
| 风险 | 规避 |
|---|---|
| 视觉改版破坏现有测试/快照 | 每个 Phase 先跑基线，快照更新需人工确认 |
| 产品视觉素材缺失 | 优先用真实产品截图 / SVG 数据可视化；禁止占位色块 |
| 初创期无真实案例 | 三档信任策略：有数据展示 / 有意向打标签 / 无数据不渲染 |
| 动效过度 | 遵守动效四原则；reduced-motion 全覆盖 |
| 品牌红失控 | 每次合并前用脚本/目视检查面积与触达点 |
| 范围蔓延 | 严格按本计划 Phase 执行，超出范围需重新评审 |
12. 执行顺序建议
- 先做 Phase 1 首页 Hero（tracer-bullet：首页 Hero → 产品视觉 → 单一 CTA → 测试通过）。
- 再横向复制到产品/方案/服务列表页。
- 再补信任层与叙事。
- 最后统一动效与无障碍。
- 每阶段结束更新本计划勾选项与
README.md/CONTEXT.md/CLAUDE.md文档同步。
13. 已确认决策
- Hero 产品视觉素材：使用 React/CSS/SVG 高保真产品界面 Mockup（
hero-product-visual.tsx，标注「产品界面示意」+「示例数据」）。理由：- 无真实客户数据，避免虚构截图；
- 高保真应用窗口（侧边导航 + 顶部操作栏 + KPI + 图表 + 预警 + 商机表）比纯示意更有真实产品感；
- 纯组件实现，轻量、响应式、不依赖图片资源，符合性能约束；
- 数据看板是 B2B 决策者最易感知的「产品价值」载体，与「从数据到决策」定位一致。
- 首批客户 quote：暂无。信任层按「无数据不渲染 L3」策略处理；首页信任区只展示可验证事实（成立时间、核心团队、自研产品、私有化部署、首批客户共创中）。
- Bento 大卡优先级：ERP 2×2 大卡 + BI 1×2 次大卡。理由：
- ERP 是「核心系统升级」入口与套装组合枢纽；
- BI 呼应品牌主张「从数据到决策」；
- 后续有真实转化数据后改为 CMS 可配置
featured字段动态决定。