novalon-website/CONTEXT.md

Novalon Website - 领域术语表

核心实体

墨韵流光

Novalon 网站的核心视觉系统，包含两个子机制：

• 旋转渐变边框 (ink-glow-border)：卡片边框使用旋转的 conic-gradient，产生墨韵流动感
• 鼠标跟随光晕 (mouse-follow)：卡片内跟随鼠标的 radial-gradient 光晕，产生交互反馈

当前状态：.impeccable.md 已定义规范，但首页组件未实现。

水墨雅致

Novalon 的整体设计风格定位。核心原则：以留白和排版取胜，特效点到为止。参考 Apple 中国官网。

朱砂点睛

品牌红 #C41E3A 的使用原则——仅作点缀，不作为主色调。标题中关键词用 font-calligraphy 突出。

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 确认

页面类型与四层映射

套装产品详情页 (/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 的信息架构思维（集团枢纽 + 品牌独立叙事），而非其视觉风格。Novalon 保持"水墨雅致"自身品牌语言
• "产品独立"≠ 子站分裂：独立产品有独立的展示空间和叙事自由度，但不创建独立子域名或独立设计系统