张翔
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
188 lines
6.6 KiB
Markdown
188 lines
6.6 KiB
Markdown
# 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 色彩（保留现有体系，新增场景色）
|
||
|
||
```css
|
||
/* 保留 */
|
||
--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
|