张翔
cf99e7556c
- 更新 CI/CD 子域名反向代理配置 - 调整 Nginx 静态文件服务器配置 - 更新 CONTEXT.md 领域共享语言文档 - 添加 CLAUDE.md 代理工作指南 - 更新 Playwright E2E 测试配置
213 lines
15 KiB
Markdown
213 lines
15 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）
|
||
Novalon 网站的**差异化点缀元素**。从"水墨雅致"降级而来，不再是整体风格定位，而是作为文化基因出现在关键细节处：
|
||
- Logo（书法睿字 + 印章）
|
||
- 页面分隔线、装饰纹样
|
||
- 过渡动画的水墨感
|
||
- 页脚角落的水墨纹理
|
||
|
||
使用原则：**远看专业沉稳，近看有文化韵味**。清单式管理，总数不超过 6 处。
|
||
|
||
决策状态：✅ 2026-06-28 确认（降级为点缀元素）
|
||
|
||
### 朱砂点睛
|
||
品牌红 #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 补充贯穿规则）
|
||
|
||
### 动效设计四原则 (Motion Design Principles)
|
||
基于 Porsche Consulting "用动效象征变革"理念，统一全站动效语言：
|
||
1. **Purposeful（有目的）**：每个动效必须服务于内容传达，不做纯装饰动效
|
||
2. **Fast（快节奏）**：入场 200-300ms，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 确认
|
||
|
||
### 墨韵流光
|
||
Novalon 网站的特效组件之一，包含两个子机制：
|
||
- **旋转渐变边框 (ink-glow-border)**：卡片边框使用旋转的 conic-gradient，产生墨韵流动感
|
||
- **鼠标跟随光晕 (mouse-follow)**：卡片内跟随鼠标的 radial-gradient 光晕，产生交互反馈
|
||
|
||
当前状态：.impeccable.md 已定义规范，待 Phase 0 评估是否保留/改造/删除。
|
||
|
||
### 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。当前全部标记为 TODO | ✅ 2026-06-07 确认（TODO） |
|
||
| 组件版本统一 | 独立产品迁移后删除 `detail/`（V1），将 `detail-v2/` 重命名为 `detail/`，组件文件名去掉版本后缀（如 `DetailHeroV3` → `DetailHero`） | ✅ 2026-06-07 确认（待 Phase 0 执行） |
|
||
| 设计定位 | 咨询专业风为主体骨架，水墨文化基因为差异化点缀（咨询为骨，水墨为魂） | ✅ 2026-06-28 确认 |
|
||
| 设计 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 确认 |
|
||
| 核心问题诊断 | "咨询为骨，水墨为魂"的定位没错，是执行没跟上。尤其是"水墨为魂"停留在概念层面，没有系统的落地方法 | ✅ 2026-06-28 确认 |
|
||
| 水墨元素认知 | 完全没概念，不知道水墨风在咨询网站上应该怎么呈现（Q10=C） | ✅ 2026-06-29 确认 |
|
||
| 水墨元素必要性 | 完全可以接受拿掉水墨。专业感才是第一位的，水墨是锦上添花，没有也无所谓（Q11=C） | ✅ 2026-06-29 确认 |
|
||
| 品牌提升优先级 | 前三件事：A重做首页Hero > B建立完整品牌视觉系统 > E品牌故事页面（Q12） | ✅ 2026-06-29 确认 |
|
||
| 设计DNA深化方案 | Accenture骨架 + Bain血肉 + Porsche点睛，三阶段落地（地基→品牌→个性） | ✅ 2026-06-29 确认（ADR-0004） |
|
||
| 颜色策略 | 编号为主，色条为辅（保持当前方案） | ✅ 2026-06-29 确认 |
|
||
| 内容策略 | 强借鉴Bain答案优先——首页首屏直接给出核心价值主张 + 量化成果 | ✅ 2026-06-29 确认 |
|
||
| 动效强度 | 体验级全场景动效叙事（Porsche Consulting水准，但克制不炫技） | ✅ 2026-06-29 确认 |
|
||
| 排版方向 | Accenture信息密度 + Bain标题对比 + Porsche图文节奏的融合方案 | ✅ 2026-06-29 确认 |
|
||
|
||
## 页面类型与四层映射
|
||
|
||
### 套装产品详情页 (`/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 的信息架构思维（集团枢纽 + 品牌独立叙事），而非其视觉风格
|
||
- **"产品独立"≠ 子站分裂**：独立产品有独立的展示空间和叙事自由度，但不创建独立子域名或独立设计系统
|
||
- **"咨询专业风"≠ 丢弃水墨**：水墨从"整体风格"降级为"文化基因"，作为点缀元素存在，而非消失
|
||
- **"设计 DNA 重构"≠ 从零开始**：是对齐标准 + 清理债务 + 重点升级，而非推倒重来
|
||
- **"Phase 0"≠ 没有产出**：虽然是"脏活累活"，但通过组件减少、文件体积下降、测试覆盖率提升等可量化指标体现价值
|