novalon-website/CONTEXT.md

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（快节奏）：入场 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 确认

墨韵流光 [已移除]

已通过 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"≠ 没有产出：虽然是"脏活累活"，但通过组件减少、文件体积下降、测试覆盖率提升等可量化指标体现价值