复评(impeccable critique)全部 Priority Issues 与 Minor Observations 落地: - P0 数字口径:MetricsBasisNote 单一真源 + metrics-basis.test fs 防线,接入 products/solutions/services/home/about;纯渲染端加角注,不动 DB/seed 值 - P1 转化断头路:敬请期待态 + 404 语境出口 + services 空态双出口 - P1 首页并卡:TrustSection 早鸟横幅并入 CasesSection 单张深色共创卡 - P2 CTA 治理:CONSULT_CTA_ALLOWLIST 白名单 + 逐字符扫描器,/contact CTA 全归一 - P3 polish:footer 补 服务/公司列、contact 死三元/空槽/toast、GlobalErrorTracker 幂等日志 - 文档同源:PRODUCT/CONTEXT 动效带统一 180–280ms;DESIGN.md 立 The 10px Floor; font-floor.test 守卫禁止再引入 <10px(保留 10/11px 有意 Bain 微标签) Gates: type-check 0 · jest 1581/132 · lint 0e/126w · contrast 7/7 · headings 10/10
239 lines
22 KiB
Markdown
239 lines
22 KiB
Markdown
# Novalon Website - 领域术语表
|
||
|
||
## 核心实体
|
||
|
||
### 设计 DNA (Design DNA)
|
||
基于 Accenture + Bain + Porsche Consulting 三家顶级咨询公司设计体系分析后,整合出的 Novalon 三维设计基因:
|
||
- **维度一:Design System(设计系统)**:可量化令牌(颜色、排版、间距、布局、形状、阴影、动效、组件)
|
||
- **维度二:Design Style(设计风格)**:定性感知(氛围、视觉语言、构图、图像、交互感、品牌语气)
|
||
- **维度三:Visual Effects(视觉效果)**:特殊渲染(滚动动效、微交互、视差、SVG 动画等)
|
||
|
||
决策状态:✅ 2026-06-28 确认
|
||
|
||
### 咨询专业风(Consulting Professional)
|
||
Novalon 网站的**主体视觉骨架**。核心特征:
|
||
- 墨色为主、留白克制、强对比排版
|
||
- 数据驱动、答案优先的内容策略
|
||
- 模块化网格布局、工业化组件系统
|
||
- 参考对象:Accenture(系统化)+ Bain(品牌清晰度)
|
||
|
||
决策状态:✅ 2026-06-28 确认(作为主体骨架)
|
||
|
||
### ~~水墨文化基因(Ink Cultural DNA)~~ [已移除]
|
||
|
||
已通过 ADR-0006 决定移除。网站设计风格纯化为纯咨询专业风,不再使用任何水墨装饰元素。Logo 中的书法「睿」字保留(属品牌标识,非装饰性元素)。
|
||
|
||
决策状态:❌ 2026-07-10 移除(ADR-0006)
|
||
|
||
### 朱砂点睛
|
||
品牌红 #C41E3A 的使用原则——仅作点缀,不作为主色调。核心约束:
|
||
- 面积占比 ≤ 10%
|
||
- 使用场景:Hero 关键词、CTA 按钮、关键数字、模块标签、链接强调、下划线
|
||
- 用法向 Bain 看齐:精准、克制、有记忆点
|
||
|
||
**品牌红贯穿规则(每页必有品牌红):**
|
||
每页至少 3 处品牌红触达点,确保品牌识别一致性:
|
||
1. **Hero 区域**:1 个 badge 标签或 1 个关键词高亮(二选一,不叠加)
|
||
2. **CTA 区域**:主按钮使用 brand 色
|
||
3. **Section 标签**:Eyebrow 下划线装饰(4px 品牌红短线)
|
||
4. **数据高亮**:关键数字(≤2 个/页)
|
||
5. **链接交互**:hover 态、导航激活态、表单聚焦态统一使用品牌红
|
||
|
||
品牌红禁止使用场景:
|
||
- 禁止作为段落文字颜色
|
||
- 禁止大面积背景(badge 背景除外)
|
||
- 禁止与辅助色(蓝/青/琥珀/紫)在同一卡片内同时出现
|
||
|
||
决策状态:✅ 已确认(2026-06-28 重申约束,2026-06-29 补充贯穿规则)
|
||
|
||
### 品牌色令牌的语义拆分(2026-09-04 新增 · 暗黑模式修复)
|
||
|
||
品牌红必须区分「文字」与「底色」两种用法,二者**不能共用同一个 CSS 变量**:
|
||
|
||
| utility | 变量 | 浅色 | 深色 | 适用 |
|
||
|---|---|---|---|---|
|
||
| `text-brand-ink` | `--color-brand-ink-rgb` | #C41E3A | **#F87171** | 品牌色**文字**:eyebrow、指标数字、标签、链接 hover |
|
||
| `bg-brand` / `border-brand` | `--color-brand-rgb` | #C41E3A | #C41E3A(**不翻转**) | 按钮底色、边框、图标填充 |
|
||
| `bg-brand-bg` | `--color-brand-bg` | #FEF2F4 | **#2A1418** | 品牌浅底块(与 `--color-error-bg` 同口径翻转) |
|
||
| `--badge-accent-text` | `--badge-accent`(组件注入) | accentColor 原色 | `color-mix(accent 45%, white)` | DetailHero 徽章:accentColor 直用作深底文字不可读(#1e3a5f 深底 1.65:1),经 CSS 变量间接引用后按主题自动适配 |
|
||
|
||
依据(WCAG 相对亮度实测,非估算):
|
||
- 红底白字按钮 #C41E3A × #F8FAFC = **5.58:1**;若把按钮底整体换成 #E04A68 会掉到 **3.75:1**
|
||
→ 所以**绝不能**整体提亮 `--color-brand`
|
||
- 深色下品牌文字取 **#F87171**:于 #0A0E14 / #0F1419 / #151B23 分别 **6.99 / 6.69 / 6.26**,全达 AA;
|
||
且它已是深色主题 `--color-error-text` 的既有值,不引入新色值
|
||
|
||
例外 —— 以下场景保持 `bg-white` + `text-brand`(**不**用 brand-ink),因为它们是恒定品牌红/深色
|
||
区块上的**白底反转元素**,白底在两主题下都不翻转:CTA 区块白底主按钮、品牌红指标块上的白底角标、
|
||
Switch / Slider 的白底圆钮。
|
||
|
||
决策状态:✅ 2026-09-04 全站审计后确认(深色对比度违规 683 → 0);
|
||
✅ 2026-09-04 生产构建终验(33 路由 × 双主题 P1=0 / P3=0,剩余 P2 全为 GA 外网噪音)
|
||
|
||
### 动效设计四原则 (Motion Design Principles)
|
||
基于 Porsche Consulting "用动效象征变革"理念,统一全站动效语言:
|
||
1. **Purposeful(有目的)**:每个动效必须服务于内容传达,不做纯装饰动效
|
||
2. **Fast(快节奏)**:入场 180–280ms(`--transition-fast` … `--transition-normal`),hover 150ms,反馈 100ms
|
||
3. **Natural(自然)**:统一使用 `ease-ink` [0.22, 1, 0.36, 1] 作为默认缓动曲线
|
||
4. **Layered(分层)**:子元素入场 stagger 30-60ms,Section 间 stagger 100-150ms
|
||
|
||
动效禁止事项:
|
||
- 禁止连续循环动画(pulse-soft 除外,仅用于骨架屏)
|
||
- 禁止超过 700ms 的入场动效
|
||
- 禁止使用弹性缓动(spring)做内容入场(仅用于按钮按压反馈)
|
||
|
||
决策状态:✅ 2026-06-29 确认
|
||
|
||
### 服务编号+色条编码(Service Number + Color Bar)
|
||
服务模块的区分方式,取代纯颜色编码:
|
||
- **主要区分**:大号数字编号(01、02、03...)
|
||
- **辅助区分**:卡片左侧 4px 细色条
|
||
- 不整卡上色,保持专业感的同时提供快速识别
|
||
|
||
决策状态:✅ 2026-06-28 确认
|
||
|
||
### ~~墨韵流光~~ [已移除]
|
||
|
||
已通过 ADR-0006 移除。原包含旋转渐变边框和鼠标跟随光晕两个子机制,不再使用。
|
||
|
||
决策状态:❌ 2026-07-10 移除(ADR-0006)
|
||
|
||
### HSI 架构 (Hub-Spoke-Independent)
|
||
Novalon 网站的信息架构模型,参考 IHG 洲际酒店集团官网模式设计。三层结构:
|
||
- **Hub(枢纽)**:`/products` 产品目录作为统一入口,内部分为"企业套装区"和"专业产品区"
|
||
- **Spoke(辐条)**:`/solutions` 解决方案作为行业场景入口,每个方案页面以"推荐套装组合 + 服务包"为核心叙事
|
||
- **Independent(独立)**:独立产品(安全/行业特种/硬件)在 Products 的专业产品区内拥有独立展示路径,不强制绑定特定解决方案
|
||
|
||
决策状态:✅ 2026-05-26 确认,见 ADR-0002
|
||
|
||
### 四层叙事模型 (Four-Layer Narrative)
|
||
所有详情页(产品/方案/服务/独立产品)统一采用的分层内容架构:
|
||
- **Layer 1 Hero(情感入口)**:大视觉 + 标题 + 一句话价值主张 + 状态标签。支持色调+背景+布局的有限变化
|
||
- **Layer 2 价值理性支撑**:按页面类型差异化——产品页展示功能模块与优势,方案页展示痛点→架构→组合,服务页展示挑战→成果→流程
|
||
- **Layer 3 信任证明**:案例故事、数据佐证、认证资质、客户评价。当前状态:**全新层,现有页面完全缺失**
|
||
- **Layer 4 CTA 转化**:主行动 + 次行动 + 交叉推荐(方案↔产品↔服务双向链接)
|
||
|
||
决策状态:✅ 2026-05-26 确认
|
||
|
||
### Hero 变化策略 (Hero Variation Strategy)
|
||
详情页 Hero 区域的视觉差异化策略。在保持"水墨雅致"统一品牌的前提下,允许三类变化:
|
||
- **色调变化**:不同产品/方案/服务使用不同的主色调或渐变方向
|
||
- **背景纹理**:ERP 用几何网格、BI 用数据流线条、安全产品用盾牌纹样等语义化背景图案
|
||
- **布局微调**:文字位置、元素排列可有小幅差异(左对齐/居中/右对齐等)
|
||
|
||
约束:Header / Footer / Breadcrumb / 设计令牌全站不变,仅 Hero 区内变化
|
||
|
||
决策状态:✅ 2026-05-26 确认(选型 C:色调+背景+布局)
|
||
|
||
### 企业套装 (Enterprise Suite)
|
||
Novalon 的 6 个核心产品,互为互补关系,常以组合形式出现在解决方案中:
|
||
- ERP 睿新管理系统、CRM 客户管理、BI 数据平台、CMS 内容平台、SDS 供应链决策、OA 协同办公
|
||
|
||
目标客群高度重叠(中大型企业),客户可能同时购买多个套装产品。
|
||
|
||
### 专业产品 (Standalone Products)
|
||
自成体系、不一定依赖企业套装的独立产品线:
|
||
- 安全产品(堡垒机/漏扫/零信任等)
|
||
- 行业特种软件
|
||
- 硬件产品
|
||
|
||
当前状态:近期有规划,需在本次重构中预留完整的模板体系
|
||
|
||
### 特效组件 (Effects)
|
||
`src/components/effects/` 目录下的 24 个视觉特效组件。当前状态:**大部分未被首页使用**,属于技术债务。
|
||
|
||
### Design Tokens
|
||
`.impeccable.md` 中定义的设计令牌系统,包含颜色、排版、间距、卡片系统、Section 背景交替规则。当前状态:**文档已定义,代码中 globals.css 有对应 CSS 变量,但组件层未完全落地**。
|
||
|
||
## 关键决策
|
||
|
||
| 术语 | 含义 | 决策状态 |
|
||
|------|------|---------|
|
||
| 信息架构 | HSI 混合模型(Hub-Spoke-Independent),非纯层级也非纯平级 | ✅ 2026-05-26 确认 |
|
||
| 视觉策略 | 统一品牌"水墨雅致"为底,Hero 区域支持色调+背景+布局变化 | ✅ 2026-05-26 确认 |
|
||
| 叙事结构 | 四层模型(Hero → 价值支撑 → 信任证明 → CTA),全类型页面统一 | ✅ 2026-05-26 确认 |
|
||
| 实施范围 | 全量落地:6产品 + 4方案 + 4服务全部重构,独立产品预留空模板 | ✅ 2026-05-26 确认 |
|
||
| 重构范围 | 保持 Next.js App Router 架构不变,不更换技术栈 | ✅ 已确认(ADR-0001) |
|
||
| 特效取舍 | 逐个评估 24 个特效组件,决定保留/改造/删除 | ✅ 已确认 |
|
||
| 首页 Hero 视觉方向 | 先用原型对比再决定(排版驱动 vs 墨韵背景 vs 中间路线) | ✅ 已确认 |
|
||
| web-design-engineer 定位 | 仅用于 Hero 原型验证,不用于全站重构 | ✅ 已确认 |
|
||
| 运营状态 | 未正式上线,重构风险可控 | ✅ 已确认 |
|
||
| 产品分类对齐 | 代码中 `enterprise`/`growth`/`specialized` 三分类与 CONTEXT.md 矛盾;统一为"企业套装区"(6核心产品)+ "专业产品区"(独立产品),删除 `growth` 分类 | ✅ 2026-06-07 确认 |
|
||
| 解决方案 L3 信任层 | 需补上 `SolutionTrustSection`,但初创阶段案例数据不足,标记为 TODO;空数据时显示"更多案例即将发布"而非空白 | ✅ 2026-06-07 确认(TODO) |
|
||
| 独立产品组件统一 | 独立产品从 V1 组件迁移到 V2/V3 组件体系,通过 hero-themes 差异化(深色调、技术纹理、参数化布局)体现"硬核"风格,不维护独立设计系统;V1 组件迁移完成后删除 | ✅ 2026-06-07 确认 |
|
||
| 方案列表页组合叙事 | 解决方案卡片需展示"推荐组合"(如制造业=ERP+BI+SDS),让用户一眼看出方案=产品组合,体现 IHG Spoke→Hub 连接 | ✅ 2026-06-07 确认 |
|
||
| Hero 视觉方向修正 | 当前深色渐变风格偏离"水墨雅致"品牌定位,需转向浅色/宣纸色底、深色文字、品牌色点缀;通过 web-design-engineer skill 做原型验证后再落地 | ✅ 2026-06-07 确认 |
|
||
| 导航体现 HSI 层级 | Products(Hub)视觉权重最高,Solutions(Spoke)次之,Services 最轻;Products 下拉菜单需展示套装区/专业产品区分区 | ✅ 2026-06-07 确认 |
|
||
| 方案页删除服务方式区域 | Solutions 列表页"服务方式"区域职责越界(属 Services 层),应删除;替换为方案→服务的轻量关联推荐链接 | ✅ 2026-06-07 确认 |
|
||
| L3 信任层内容策略 | 初创阶段无真实案例/数据/资质,L3 暂不渲染;组件结构预留,数据就绪后启用。三档策略:有案例→正常展示;有意向→"正在服务中"标签;无数据→不显示 L3。**阶段 0(2026-08-20)已落地**:信任策略从「结果证据」转向「可验证的过程+能力+治理证据」——首页「共创计划」板块(共创进行中/产品内测中/成果授权公开三档如实状态 + 招募 CTA)、关于页资质区如实「建设中」空态 | ✅ 2026-06-07 确认 / 阶段 0 完成 2026-08-20 |
|
||
| 首页共创计划板块 | 成立 <1 年无真实案例时,以主动板块替代被动标签:`page-copy` 字段 `earlyAccessTitle`/`earlyAccessCtaLabel`/`earlyAccessStatus` 驱动首页「首批客户共创计划」板块,如实呈现共创/内测/授权公开状态并引导转化(成为共创客户 → /contact)。零编造:不虚构客户/数据/资质 | ✅ 2026-08-20 确认 |
|
||
| 组件版本统一 | 独立产品迁移后删除 `detail/`(V1),将 `detail-v2/` 重命名为 `detail/`,组件文件名去掉版本后缀(如 `DetailHeroV3` → `DetailHero`) | ✅ 2026-06-07 确认(待 Phase 0 执行) |
|
||
| 设计定位 | 纯咨询专业风(Accenture + Bain + Porsche 三位一体),水墨元素已移除 | ✅ 2026-07-10 更新(ADR-0006) |
|
||
| 设计 DNA 框架 | 三维度模型:Design System + Design Style + Visual Effects,基于 Accenture+Bain+Porsche 整合 | ✅ 2026-06-28 确认 |
|
||
| 服务区分方式 | 服务编号+色条编码(数字为主,4px 色条为辅),不整卡上色 | ✅ 2026-06-28 确认 |
|
||
| 叙事风格分层 | 首页/Solutions/Services 用咨询风,Products 用产品风为主+咨询风为辅;统一设计令牌,仅内容组织不同 | ✅ 2026-06-28 确认 |
|
||
| 重构实施路径 | Phase 0 对齐清理 → Phase 1 首页与核心模板升级 → Phase 2 动效与体验打磨 | ✅ 2026-06-28 确认 |
|
||
| 品牌人格 | 复合人格:主色调是"专业可靠的老专家",叠加"年轻有为的新锐"的活力,打底是"严谨精密的工程师"气质 | ✅ 2026-06-29 确认 |
|
||
| 品牌完成度自评 | 40/100。原因:只是换了配色和样式(骨架有了),但品牌灵魂、视觉资产、内容深度都严重不足 | ✅ 2026-06-29 确认 |
|
||
| 核心问题诊断 | 品牌定位无误,执行需跟上。通过 ADR-0006 移除水墨元素后,纯化咨询专业风 | ✅ 2026-07-10 更新(ADR-0006) |
|
||
| 品牌提升优先级 | 前三件事:A)重做首页Hero > B)建立完整品牌视觉系统 > E)品牌故事页面(Q12) | ✅ 2026-06-29 确认 |
|
||
| 设计DNA深化方案 | Accenture骨架 + Bain血肉 + Porsche点睛,三阶段落地(地基→品牌→个性) | ✅ 2026-06-29 确认(ADR-0004) |
|
||
| 颜色策略 | 编号为主,色条为辅(保持当前方案) | ✅ 2026-06-29 确认 |
|
||
| 内容策略 | 强借鉴Bain答案优先——首页首屏直接给出核心价值主张 + 量化成果 | ✅ 2026-06-29 确认 |
|
||
| 初创文案真实性 | 公司成立于 2026-01-15,成立不足一年;全站静态文案不再使用「12 年深耕 / 500+ 企业 / 8+ 年核心团队经验 / 大厂背景 / 头部咨询 / 全球顶尖伙伴 / 虚构客户案例 / 未取得资质认证」等无法验证的表述,统一改为「2026 年成立 / 首批客户共创 / 专业核心团队 / 结果导向」;产品种子与 ERP 升级专题页同步清理虚构案例/认证,并已重新执行 `npm run db:seed` | ✅ 2026-08 确认 |
|
||
| 生产部署模式 | 2026-08 切换为混合渲染:`next.config.mjs` 使用 `output: 'standalone'`,`Dockerfile.prod` + `docker-compose.server.yml` 启动 Next.js 容器,Nginx 托管静态资源并代理 `/api/*`、`/admin/*`、ISR 回源;生产 SQLite 位于 `data/prod.db`,通过 `DATABASE_URL=file:/app/data/prod.db` 与 `PRISMA_QUERY_ENGINE_LIBRARY` 运行 | ✅ 2026-08 确认 |
|
||
| 动效强度 | 体验级全场景动效叙事(Porsche Consulting水准,但克制不炫技) | ✅ 2026-06-29 确认 |
|
||
| 排版方向 | Accenture信息密度 + Bain标题对比 + Porsche图文节奏的融合方案 | ✅ 2026-06-29 确认 |
|
||
| 品牌故事页品牌名 | 使用与 footer Logo 完全相同的青柳隶书 SVG path(`BrandCalligraphyName`),不加载 4.4MB 的 AoyagiReisho 字体文件,兼顾品牌一致性与性能 | ✅ 2026-08-18 确认 |
|
||
| 风格主词 | Swiss Modernism 2.0(骨架)+ Bento Box Grid(信息组织)+ Hero-Centric & Conversion-Optimized(首屏转化)+ Trust & Authority & Social Proof(信任层)+ Motion-Driven(差异化记忆点)+ Accessible & Ethical(底线) | ✅ 2026-08-18 确认 |
|
||
| 官网产品模块定位 | **IHG/字节式品牌矩阵**:官网品牌宣传为主,产品矩阵页保留为聚合入口(每产品一句话定位+指标证据+外链独立站);成熟产品 `externalUrl` 外链独立站(NovaVis → novavis.p.novalon.cn 已实践),未成熟产品官网详情页占位,独立站上线后切换外链。参照案例(已核实):IHG 品牌组合页 / 字节跳动 bytedance.com/products / 腾讯 tencent.com/business.html(模式 B:品牌+品牌矩阵聚合页);对照金蝶/用友(模式 C:产品为主,官网承载详情与转化) | ✅ 2026-08-19 确认 |
|
||
| 品牌主口号 | **智连未来 · 成长伙伴 —— 您的数字化转型同行者**(整句全站统一采用)。品牌叙事内核(定位声明 / 承诺 / L0 价值主张 / L1 三支柱 / 语气语调)见 `docs/brand-narrative-core.md`,作为全站文案统一唯一锚点 | ✅ 2026-08-19 确认 |
|
||
| 品牌叙事 CMS 化 | 品牌叙事内核全部下沉到 CMS `site-config` 模型(`slogan` / `valueProposition` / `positioningStatement` / `brandPromise` / `toneOfVoice` / `pillars`),后台可编辑;代码侧 `COMPANY_INFO` 与 `BRAND_NARRATIVE`(`src/lib/constants/company.ts`)作为未配置 CMS 时的兜底唯一真源,`layout.tsx` 读取后经 `SiteConfigProvider` 注入全站 | ✅ 2026-08-19 确认 |
|
||
| 结构性文案 CMS 化 | 新增 `page-copy` 内容模型承载各业务页面章节标题/眉标/描述/CTA/空状态,覆盖首页 + 服务/方案/产品/案例/新闻列表页,seed 写入 6 条(home/services/solutions/products/cases/news)。实现为「CMS 优先 + 硬编码兜底」:CMS 未配置时回退 `TRUST_SIGNALS`/`EARLY_ACCESS`/`NARRATIVE_ACTS` 等常量,保证任何情况不白屏。数据层新增 `getPageCopy(pageCode)` / `getHomePageCopy()`,各 `page.tsx` 读取后以 `pageCopy` props 传入组件。详情页小节标题、页面内嵌业务常量(服务流程/合作模式/产品组合)、Header/Footer 等 UI 外壳按 UI 职责保留代码。数据实体(服务/产品/方案/案例/新闻/指标/Hero)仍由 `data-server` 从 Prisma 读取 | ✅ 2026-08-19 确认 |
|
||
| 首页对标埃森哲重构(scene#16) | **视觉基调:局部深色 Hero(推荐项)**——保持浅色咨询风为底,仅 Hero 升级为全出血深色画布(近黑底 `bg-ink` + 白色 Logo `/logo-white.svg` + 品牌红 #C41E3A 单电压 ≤10%),制造埃森哲式戏剧感;**实施范围:Phase A+B 全量**——①内容支柱补齐:新增 Insights 行业洞察(2×2 gap-px 卡片网格 + 方法论/观点/共创类型标签)、FounderQuote 创始人观点(深红区块 + 白色点阵 + 大引言)、News 新闻动态(最近 3 条 + 查看全部)三个对标埃森哲思想领导力支柱的区块;②Hero 深色化;③CTA 签名符号:全站 Button 组件 `rounded-md` → `rounded-full`(Pill 胶囊化)+ ArrowRight 签名箭头。零编造内容原则:公司 2026-01-15 成立,Insights 兜底 4 条均为可验证方法论内容(不虚构研究报告/人名),FounderQuote 署名兜底「Novalon 创始团队」不虚构具体人名。实现:`home-content-v15.tsx` 替换 v14(9 区块顺序 Hero→Trust→Narrative→Insights→Services→FounderQuote→Cases→News→CTA),CMS 优先 + FALLBACK_INSIGHTS/NEWS 常量兜底;seed page-copy 新增 insights*/founderQuote*/news* 字段(upsert 幂等)。验证:tsc 0 errors / eslint 0 errors / Jest 128 套件 1621 通过 / Playwright 视觉回归 22 passed(macOS 11 限制下用 Chromium 117 兼容配置生成快照) | ✅ 2026-08-31 确认 |
|
||
|
||
## 页面类型与四层映射
|
||
|
||
### 套装产品详情页 (`/products/[id]`)
|
||
| 层 | 内容要点 |
|
||
|---|---------|
|
||
| L1 Hero | 产品名 + 分类 + 状态 + 定位语 + 有限视觉变化(如深蓝调性) |
|
||
| L2 价值 | 核心功能模块 + 产品优势 + 技术规格 + 适用场景 |
|
||
| L3 信任 | 适用行业案例 + 痛点→产品如何解决的故事 |
|
||
| L4 CTA | 预约体验 + 下载资料 + "使用此产品的客户也关注了 XX 方案" |
|
||
|
||
### 解决方案详情页 (`/solutions/[id]`)
|
||
| 层 | 内容要点 |
|
||
|---|---------|
|
||
| L1 Hero | 行业名 + 方案标题 + 副标题 + 行业氛围视觉 |
|
||
| L2 价值 | 行业痛点 → 方案架构图 → 推荐套装组合(核心差异点) |
|
||
| L3 信任 | 同行业标杆客户案例 + 实施效果数据 |
|
||
| L4 CTA | 预约演示 + 下载白皮书 + 相关产品深度卡片 |
|
||
|
||
### 服务详情页 (`/services/[id]`)
|
||
| 层 | 内容要点 |
|
||
|---|---------|
|
||
| L1 Hero | 服务名 + 定位语 + 服务范围标签 |
|
||
| L2 价值 | 挑战→成果 KPI + 服务流程可视化 + 团队/方法论 |
|
||
| L3 信任 | 服务案例 + 客户评价 + SLA 承诺 |
|
||
| L4 CTA | 咨询服务 + 相关方案推荐 |
|
||
|
||
### 独立产品详情页 (`/products/[id]` — 专业产品区)
|
||
| 层 | 内容要点 | 特殊之处 |
|
||
|---|---------|---------|
|
||
| L1 Hero | 产品名 + 类别标签 + 独立视觉调性 | 更"硬核"风格 |
|
||
| L2 价值 | 功能特性 + 技术参数 + 对比优势 | 偏技术/参数导向 |
|
||
| L3 信任 | 认证资质(等保/行业标准)+ 部署案例 + 性能数据 | 合规证明优先 |
|
||
| L4 CTA | 申请试用/演示 + 技术文档 + 可搭配套装推荐 | 不绑定特定方案 |
|
||
|
||
## 歧义已解决
|
||
|
||
- **"重构"≠ 推倒重来**:在现有 Next.js 架构内做系统性清理和提升,不更换技术栈
|
||
- **"web-design-engineer"≠ 代码生成器**:它是设计验证工具,产出原型 HTML,不是最终代码
|
||
- **"克制动效"≠ 零动效**:动效服务于信息传达(hover 反馈、scroll reveal、卡片交互),但不做装饰性粒子/水墨动画
|
||
- **"参考 IHG"≠ 视觉模仿 IHG**:借鉴的是 IHG 的信息架构思维(集团枢纽 + 品牌独立叙事),而非其视觉风格
|
||
- **"产品独立"≠ 官网撤出产品**:独立产品拥有独立子域名与独立叙事(NovaVis → novavis.p.novalon.cn 已实践,走 `externalUrl` 外链);官网仍保留产品矩阵页作为聚合入口(每产品一句话定位+指标+外链),不承载深度详情
|
||
- **"咨询专业风"≠ 丢弃水墨**:水墨已从"整体风格"降级为"文化基因",现通过 ADR-0006 完全移除。网站纯走 Accenture + Bain + Porsche 咨询专业风
|
||
- **"设计 DNA 重构"≠ 从零开始**:是对齐标准 + 清理债务 + 重点升级,而非推倒重来
|
||
- **"Phase 0"≠ 没有产出**:虽然是"脏活累活",但通过组件减少、文件体积下降、测试覆盖率提升等可量化指标体现价值
|