张翔
fe6e4b1c54
- Remove TestimonialSection from homepage (no customers yet) - Footer: dark theme, NAVIGATION_V2 + MEGA_DROPDOWN_DATA links - Mobile Menu: NAVIGATION_V2 with collapsible dropdown support
6.6 KiB
6.6 KiB
Atlassian 风格品牌融合重构设计规格
日期: 2026-04-30 状态: 已审批 参考: Atlassian 官网设计思路 × Novalon 水墨科技品牌基因
1. 概述
1.1 目标
借鉴 Atlassian 官网的信息架构和交互模式，重构 Novalon 官网首页，实现"收敛但保留印记"的品牌升级——在保持朱砂红品牌色和书法标题辨识度的前提下，采用更专业、更清晰的白底信息展示风格。
1.2 范围
- Phase 1：首页重构 + 设计系统基础（本次规格范围）
- Phase 2：产品页/服务页迁移（后续）
- Phase 3：其余页面 + 设计系统完善（后续）
1.3 设计决策
| 决策项 | 选择 | 理由 |
|---|---|---|
| 品牌方向 | B — 收敛但保留印记 | 专业感与品牌特色兼顾 |
| 交付节奏 | A+C 混合 — 首页驱动的设计系统 | 用实际页面需求驱动组件设计 |
| 首页布局 | 方案二 — 品牌融合重构 | Atlassian 架构 + Novalon 叙事 |
| 动效策略 | 大幅收敛 | 移除粒子/水墨，保留微交互 |
| 导航结构 | 4核心+2下拉 | 减少认知负担，产品矩阵预览 |
2. 品牌视觉规范
2.1 色彩（保留现有体系，新增场景色）
/* 保留 */
--color-primary: #1C1C1C;
--color-brand-primary: #C41E3A;
--color-bg-secondary: #FFFBF5;
--color-bg-tertiary: #F5F5F5;
/* 新增场景色 */
--color-challenge-isolation: #FEF2F4; /* 系统孤岛 - 红底 */
--color-challenge-growth: #FFFBEB; /* 增长瓶颈 - 黄底 */
--color-challenge-compliance: #F0FDF4; /* 合规风险 - 绿底 */
2.2 动效策略
| 组件 | 策略 | 说明 |
|---|---|---|
| InkBackground | ❌ 废弃 | 水墨背景不再使用 |
| DataParticleFlow | ❌ 废弃 | 粒子动效过于花哨 |
| ParticleGalaxy | ❌ 废弃 | 粒子星河 |
| MouseInteractiveParticles | ❌ 废弃 | 鼠标交互粒子 |
| FluidWaveBackground | ❌ 废弃 | 流体波浪 |
| GeometricAbstract | ❌ 废弃 | 几何抽象 |
| GridLines | ❌ 废弃 | 网格线 |
| AdvancedFloatingEffects | ❌ 废弃 | 高级浮动效果 |
| SubtleDots | ✅ 保留 | 微妙圆点符合收敛方向 |
| GradientFlow | 🔧 简化 | 保留但降低强度，Hero极淡背景 |
| ScrollReveal/FadeUp | ✅ 保留 | 核心滚动交互 |
| AnimatedNumber | ✅ 保留 | 数据统计动画 |
| SealAnimation | 🔄 重构 | 仅用于品牌标题区 |
2.3 排版
- 品牌标题：青柳隶书（保留）
- 正文/导航：Geist Sans（保留）
- 代码/数字：Geist Mono（保留）
3. 首页结构
3.1 整体布局
Navigation Logo + 产品▾ + 解决方案▾ + 服务 + 案例 + 关于我们
Section 1 Hero（暖白 + 书法标题 + 双CTA + 极简装饰）
Section 2 社会证明数据条（三列数字 + 客户Logo墙）
Section 3 核心产品矩阵（2×2 卡片 + 朱砂红左边框）
Section 4 挑战与场景入口（"您面临什么挑战？"三列痛点卡片）
Section 5 客户成果（深墨色背景 + 引言 + 量化数据）
Section 6 CTA（朱砂红渐变 + 行动号召）
Footer 品牌信息 + 导航 + 联系方式
视觉节奏：暖白 → 浅灰 → 白 → 暖白 → 深墨 → 朱砂红 → 浅灰
3.2 导航重设计
当前：8项平铺（首页/核心业务/解决方案/产品服务/成功案例/关于我们/新闻动态/联系）
新导航：
- Logo（睿新致遠）
- 产品 ▾ → 下拉展示 ERP/CRM/BI/CMS 四产品矩阵
- 解决方案 ▾ → 下拉展示制造业/零售/教育/医疗四行业
- 服务
- 案例
- 关于我们（含团队/新闻）
- 联系我们
3.3 Section 详细设计
Section 1: Hero
- 背景：暖白
#FFFBF5→#FFFFFF渐变 + 极简装饰圆圈（1px border, rgba(#C41E3A, 0.08)） - 内容：
- 品牌标签：
NOVALON · 睿新致遠（8px, letter-spacing: 2px, #C41E3A） - 主标题：
智连未来，成长伙伴（青柳隶书, 大号, #1C1C1C） - 副标题：
从战略规划到系统落地，陪伴企业完成数字化转型的每一步（14px, #5C5C5C） - 双CTA：
预约演示（朱砂红实心）+了解方案（墨黑描边）
- 品牌标签：
- 动效：入场 FadeUp + 极淡 GradientFlow 背景
Section 2: 社会证明
- 背景：浅灰
#F5F5F5 - 内容：三列数字（200+ 企业客户 / 15+ 行业覆盖 / 99.9% 系统可用性）
- 动效：AnimatedNumber 数字滚动
- 可选：客户 Logo 墙（横向滚动）
Section 3: 核心产品矩阵
- 背景：白色
#FFFFFF - 布局：2×2 网格
- 每个卡片：
- 朱砂红左边框（3px solid #C41E3A）
- 产品名称（14px, font-weight: 700）
- 关键词描述（12px, #5C5C5C）
- Hover：微提升 + 左边框加粗
- 动效：StaggerContainer 依次入场
Section 4: 挑战与场景入口
- 背景：暖白
#FFFBF5 - 标题：
您面临什么挑战？ - 三列卡片：
- 系统孤岛（#FEF2F4 红底 + 🏭）
- 增长瓶颈（#FFFBEB 黄底 + 📈）
- 合规风险（#F0FDF4 绿底 + 🔒）
- 交互：Hover 色变加深 + 点击跳转对应解决方案页
- 动效：FadeUp 依次入场
Section 5: 客户成果
- 背景：深墨
#1C1C1C - 内容：
- 标签：
客户成果（8px, rgba(255,255,255,0.6)） - 客户引言（16px, #FFFFFF, italic）
- 署名（12px, rgba(255,255,255,0.5)）
- 量化数据：2-3 个指标（数字 #C41E3A + 标签 rgba(255,255,255,0.4)）
- 标签：
- 数据来源：CASES 常量中的 testimonial + results
- 动效：FadeUp 入场
Section 6: CTA
- 背景：朱砂红渐变
linear-gradient(135deg, #C41E3A, #A01830) - 内容：
- 标题：
开启数字化转型之旅（白色, font-weight: 700） - 副标题：
免费咨询 · 专属方案 · 30天试用（rgba(255,255,255,0.8)） - 按钮：
立即咨询（白色描边）
- 标题：
4. Phase 1 沉淀组件
| 组件 | 职责 | 复用场景 |
|---|---|---|
| MegaDropdown | 产品/解决方案矩阵下拉导航 | 全站导航 |
| ProductCard | 朱砂红左边框产品卡片 | 首页、产品列表页 |
| ChallengeCard | 痛点/场景入口卡片 | 首页、解决方案页 |
| StatsBar | 三列数据统计条 | 首页、产品页、关于页 |
| TestimonialBlock | 深色背景客户证言 | 首页、案例页、产品页 |
| CTASection | 朱砂红渐变行动号召 | 全站通用 |
5. 技术约束
- 框架：Next.js 16 + React 19 + Tailwind CSS 4
- 动效：Framer Motion 12（保留）
- 图标：Lucide React（保留）
- 部署：静态导出（保持现有架构）
- 测试：Jest 单元测试 + Playwright E2E