feat: 统一全站设计风格、导航组件与文案逻辑自洽性修复
- 新增 InkGlowCard 墨韵流光卡片组件，统一全站卡片交互风格 - 新增 PageNav 面包屑组件，统一全站页面导航 - 统一色彩体系、排版层级、间距节奏和动画风格 - 修复 CTA 区品牌名称错误（诺瓦隆→睿新致遠） - 修复 ERP 产品卖点与年费制定价矛盾 - 导航下拉补充 SDS 和 OA 产品 - 统一全站数据指标为 12+年核心团队经验、6自研产品、10+团队成员 - 移除不可靠的 100%客户满意度和 30+行业专家指标 - 修复新闻时间线不合理问题，调整里程碑节奏 - 统一响应承诺为工作日快速响应 - 服务第4项重命名为行业方案实施，厘清概念 - 服务详情页效果数据改为定性描述 - 删除 cases 模块，精简代码库
This commit is contained in:
张翔
+75
-341
@@ -1,341 +1,75 @@
|
||||
# Novalon Website - 设计上下文
|
||||
|
||||
> 本文档定义了 Novalon Website 项目的设计原则、品牌定位和视觉规范，确保所有设计决策的一致性和连贯性。
|
||||
|
||||
---
|
||||
|
||||
## 设计上下文
|
||||
|
||||
### 用户画像
|
||||
|
||||
**主要用户群体：大型企业（500人以上）**
|
||||
|
||||
**用户特征**：
|
||||
- 企业决策者：CEO、CTO、CIO等高管层
|
||||
- 技术负责人：IT总监、技术架构师、项目经理
|
||||
- 采购决策者：采购总监、业务部门负责人
|
||||
|
||||
**决策场景**：
|
||||
- 数字化转型战略规划阶段
|
||||
- 寻找可靠的技术合作伙伴
|
||||
- 评估供应商的专业能力和项目经验
|
||||
- 关注系统稳定性、安全性、可扩展性
|
||||
- 需要详细的技术方案和合规认证
|
||||
|
||||
**核心需求**：
|
||||
- 信任感：需要看到专业能力和成功案例
|
||||
- 安全感：需要了解技术实力和安全保障
|
||||
- 确定性：需要清晰的服务流程和交付标准
|
||||
- 创新性：需要前沿的技术视野和解决方案
|
||||
|
||||
---
|
||||
|
||||
### 品牌个性
|
||||
|
||||
**品牌定位**：企业数字化转型服务商
|
||||
|
||||
**核心口号**："智连未来，成长伙伴"
|
||||
|
||||
**品牌个性关键词**：
|
||||
1. **专业** - 展现深厚的技术积累和行业经验
|
||||
2. **可靠** - 传递稳定、可信、值得依赖的品牌形象
|
||||
3. **创新** - 体现前沿技术视野和持续创新能力
|
||||
|
||||
**品牌价值观**：
|
||||
- 不是高高在上的"专家"，而是并肩作战的"伙伴"
|
||||
- 不是做完就跑的"卖家"，而是长期陪伴的"同行者"
|
||||
- 只做一件事：成为客户数字化转型路上信得过的成长伙伴
|
||||
|
||||
**情感目标**：
|
||||
- 让用户感受到：专业、可信、有温度
|
||||
- 建立信任感：通过案例、数据、流程展示
|
||||
- 传递安全感：通过技术实力、安全保障、合规认证
|
||||
- 激发信心：通过创新方案、前沿视野、持续进化
|
||||
|
||||
---
|
||||
|
||||
### 视觉方向
|
||||
|
||||
**设计理念**：融合中国传统水墨画元素与现代科技感
|
||||
|
||||
**核心视觉元素**：
|
||||
|
||||
#### 1. 色彩系统
|
||||
|
||||
**主色调 - 墨黑系（水墨画主色）**：
|
||||
```css
|
||||
--color-primary: #1C1C1C; /* 主色 */
|
||||
--color-primary-hover: #0A0A0A; /* 悬停色 */
|
||||
--color-primary-light: #3D3D3D; /* 浅色 */
|
||||
--color-primary-lighter: #F5F5F5; /* 更浅色 */
|
||||
```
|
||||
|
||||
**品牌色 - 朱砂红（印章红）**：
|
||||
```css
|
||||
--color-brand-primary: #C41E3A; /* 品牌主色 */
|
||||
--color-brand-primary-hover: #A01830; /* 品牌悬停色 */
|
||||
--color-brand-primary-light: #E04A68; /* 品牌浅色 */
|
||||
--color-brand-primary-bg: #FEF2F4; /* 品牌背景色 */
|
||||
```
|
||||
|
||||
**背景色系 - 宣纸白**：
|
||||
```css
|
||||
--color-bg-primary: #FFFFFF; /* 主背景 */
|
||||
--color-bg-secondary: #FFFBF5; /* 次背景（宣纸色） */
|
||||
--color-bg-tertiary: #F5F5F5; /* 三级背景 */
|
||||
--color-bg-hover: #EFEFEF; /* 悬停背景 */
|
||||
```
|
||||
|
||||
**文字色系 - 墨色层次**：
|
||||
```css
|
||||
--color-text-primary: #1C1C1C; /* 主文字 */
|
||||
--color-text-secondary: #3D3D3D; /* 次文字 */
|
||||
--color-text-tertiary: #4A4A4A; /* 三级文字 */
|
||||
--color-text-muted: #6B6B6B; /* 弱化文字 */
|
||||
```
|
||||
|
||||
#### 2. 字体系统
|
||||
|
||||
**中文字体**：
|
||||
- **书法字体**：Aoyagi Reisho（青柳凉笙）- 用于品牌名称、标题装饰
|
||||
- **正文字体**：Noto Sans SC - 用于正文、UI元素
|
||||
|
||||
**英文字体**：
|
||||
- **无衬线字体**：Geist Sans - 用于英文标题、正文
|
||||
- **等宽字体**：Geist Mono - 用于代码、技术内容
|
||||
|
||||
**字体应用原则**：
|
||||
- 品牌名称"睿新致遠"使用书法字体，传递文化底蕴
|
||||
- 正文使用现代无衬线字体，确保可读性
|
||||
- 技术内容使用等宽字体，体现专业性
|
||||
|
||||
#### 3. 视觉特效
|
||||
|
||||
**水墨元素**：
|
||||
- 水墨滴装饰（InkDrop）
|
||||
- 水墨飞溅效果（InkSplash）
|
||||
- 水墨背景（InkBackground）
|
||||
|
||||
**科技元素**：
|
||||
- 数据粒子流动（DataParticleFlow）
|
||||
- 几何图形装饰（GeometricShapes）
|
||||
- 渐变网格（GradientGrid）
|
||||
- 科技网格流动（TechGridFlow）
|
||||
|
||||
**动画效果**：
|
||||
- 页面过渡动画（PageTransitions）
|
||||
- 滚动动画（ScrollAnimations）
|
||||
- 微交互效果（Hover、Click、Focus）
|
||||
- 数字动画（AnimatedNumber）
|
||||
|
||||
#### 4. 设计模式
|
||||
|
||||
**布局系统**：
|
||||
- 响应式设计：桌面端、平板、移动端完美适配
|
||||
- 容器宽度：container-wide（最大1440px）
|
||||
- 间距系统：基于4px基准的间距体系
|
||||
|
||||
**组件风格**：
|
||||
- 卡片设计：圆角、阴影、边框
|
||||
- 按钮样式：填充、描边、幽灵按钮
|
||||
- 表单元素：清晰的输入框、下拉菜单
|
||||
- 导航系统：顶部导航、面包屑、移动端标签栏
|
||||
|
||||
**视觉层次**：
|
||||
- 清晰的信息层次：标题 → 副标题 → 正文 → 辅助信息
|
||||
- 合理的视觉权重：通过字号、颜色、间距建立层次
|
||||
- 突出重点：使用品牌色、动画效果吸引注意力
|
||||
|
||||
---
|
||||
|
||||
### 设计原则
|
||||
|
||||
#### 1. 专业性优先
|
||||
|
||||
**原则描述**：所有设计决策必须服务于展现专业能力
|
||||
|
||||
**实施要点**：
|
||||
- 使用清晰的信息架构，便于快速定位关键信息
|
||||
- 展示详细的技术方案、流程、案例
|
||||
- 提供完整的数据支撑（案例数量、客户规模、项目经验）
|
||||
- 避免过度装饰，保持视觉简洁专业
|
||||
|
||||
**设计示例**：
|
||||
- 服务详情页：展示完整的服务流程、技术栈、交付标准
|
||||
- 案例展示：包含客户背景、解决方案、实施效果、技术亮点
|
||||
- 关于我们：展示团队实力、资质认证、发展历程
|
||||
|
||||
#### 2. 信任感构建
|
||||
|
||||
**原则描述**：通过设计元素传递可靠、可信的品牌形象
|
||||
|
||||
**实施要点**：
|
||||
- 展示真实案例和客户评价
|
||||
- 提供详细的公司信息和联系方式
|
||||
- 使用安全标识、认证徽章
|
||||
- 清晰的服务承诺和保障条款
|
||||
|
||||
**设计示例**：
|
||||
- 首页：突出展示成功案例数量、客户规模
|
||||
- 联系页面：完整的公司信息、地址、电话、邮箱
|
||||
- 页脚：ICP备案、公安备案、版权信息
|
||||
|
||||
#### 3. 创新性表达
|
||||
|
||||
**原则描述**：在保持专业性的同时，展现创新能力和前沿视野
|
||||
|
||||
**实施要点**：
|
||||
- 使用现代技术实现流畅的动画效果
|
||||
- 融合传统元素（水墨）与现代科技感
|
||||
- 展示前沿技术应用（AI、大数据、云计算）
|
||||
- 持续优化用户体验和交互设计
|
||||
|
||||
**设计示例**：
|
||||
- Hero区域：水墨背景 + 数据粒子流动效果
|
||||
- 服务介绍：使用3D效果展示技术架构
|
||||
- 新闻动态：展示最新的技术趋势和行业洞察
|
||||
|
||||
#### 4. 可访问性保障
|
||||
|
||||
**原则描述**：确保所有用户都能无障碍使用网站
|
||||
|
||||
**实施要点**：
|
||||
- 遵循 WCAG 2.1 AA 标准
|
||||
- 色彩对比度：文本与背景对比度 ≥ 4.5:1
|
||||
- 键盘导航：所有交互元素可通过键盘访问
|
||||
- 屏幕阅读器支持：提供完整的 ARIA 标签
|
||||
- 减少动画：支持 prefers-reduced-motion 媒体查询
|
||||
|
||||
**设计示例**：
|
||||
- 所有图片提供 alt 文本
|
||||
- 表单元素关联 label
|
||||
- 焦点状态清晰可见
|
||||
- 色彩对比度检查通过
|
||||
|
||||
#### 5. 响应式优先
|
||||
|
||||
**原则描述**：确保所有设备上的体验一致性
|
||||
|
||||
**实施要点**：
|
||||
- 移动端优先设计
|
||||
- 触摸友好的交互元素（最小触摸区域 44x44px）
|
||||
- 自适应的布局和字体大小
|
||||
- 优化的移动端导航（标签栏、汉堡菜单）
|
||||
|
||||
**设计示例**：
|
||||
- 移动端：底部标签栏导航
|
||||
- 平板：侧边导航 + 内容区域
|
||||
- 桌面：顶部导航 + 完整布局
|
||||
|
||||
---
|
||||
|
||||
### 参考与反参考
|
||||
|
||||
**正面参考**：
|
||||
- **阿里云官网**：企业级B2B网站的专业性和信任感
|
||||
- **腾讯云官网**：技术能力展示和案例呈现方式
|
||||
- **华为官网**：企业品牌形象和文化传递
|
||||
|
||||
**反参考**：
|
||||
- 过度炫技的视觉效果（影响加载速度和可读性）
|
||||
- 过于卡通化的设计风格（不符合企业级定位）
|
||||
- 信息过载的页面布局（影响用户决策）
|
||||
|
||||
---
|
||||
|
||||
### 技术实现规范
|
||||
|
||||
**前端技术栈**：
|
||||
- Next.js 16（App Router）
|
||||
- React 19
|
||||
- TypeScript
|
||||
- Tailwind CSS 4
|
||||
- Framer Motion（动画）
|
||||
- Three.js（3D效果）
|
||||
|
||||
**设计工具**：
|
||||
- Tailwind CSS：样式系统
|
||||
- CSS Variables：设计令牌
|
||||
- Framer Motion：动画库
|
||||
- Lucide React：图标库
|
||||
|
||||
**性能优化**：
|
||||
- 图片优化：WebP/AVIF 格式，响应式图片
|
||||
- 代码分割：动态导入组件
|
||||
- 缓存策略：静态资源长期缓存
|
||||
- 预加载：关键资源预加载
|
||||
|
||||
---
|
||||
|
||||
### 质量保障
|
||||
|
||||
**代码质量**：
|
||||
- ESLint：代码规范检查
|
||||
- TypeScript：类型安全
|
||||
- Prettier：代码格式化
|
||||
- Husky：Git Hooks
|
||||
|
||||
**测试覆盖**：
|
||||
- 单元测试：Jest
|
||||
- 集成测试：Testing Library
|
||||
- E2E测试：Playwright
|
||||
- 可访问性测试：axe-core
|
||||
|
||||
**CI/CD流水线**：
|
||||
- 代码质量检查（Lint、Type Check）
|
||||
- 单元测试和集成测试
|
||||
- E2E测试（分层测试）
|
||||
- 安全扫描
|
||||
- Docker镜像构建
|
||||
- 自动化部署
|
||||
|
||||
---
|
||||
|
||||
## 使用指南
|
||||
|
||||
### 如何使用本文档
|
||||
|
||||
1. **新功能开发**：在设计新功能前，先查阅本文档，确保符合设计原则
|
||||
2. **设计评审**：使用本文档作为评审标准，检查设计决策是否一致
|
||||
3. **团队协作**：新成员加入时，阅读本文档快速了解设计方向
|
||||
4. **设计迭代**：定期回顾本文档，根据业务发展更新设计方向
|
||||
|
||||
### 设计决策流程
|
||||
|
||||
1. **明确目标**：确定设计目标是否服务于"专业、可靠、创新"的品牌个性
|
||||
2. **参考原则**：查阅设计原则，确保符合核心原则
|
||||
3. **视觉规范**：使用色彩系统、字体系统、组件库
|
||||
4. **技术实现**：遵循技术实现规范，确保性能和可维护性
|
||||
5. **质量验证**：通过测试和评审，确保质量达标
|
||||
|
||||
---
|
||||
|
||||
## 版本历史
|
||||
|
||||
| 版本 | 日期 | 变更内容 | 作者 |
|
||||
|------|------|----------|------|
|
||||
| 1.0 | 2026-03-27 | 初始版本，建立设计上下文 | 张翔 |
|
||||
|
||||
---
|
||||
|
||||
## 维护说明
|
||||
|
||||
本文档是**活文档**，应随着项目发展持续更新：
|
||||
|
||||
- **品牌升级**：更新品牌个性、视觉方向
|
||||
- **用户反馈**：根据用户反馈调整设计原则
|
||||
- **技术演进**：更新技术实现规范
|
||||
- **设计迭代**：记录设计决策的演变过程
|
||||
|
||||
**更新流程**：
|
||||
1. 提出设计变更建议
|
||||
2. 团队讨论和评审
|
||||
3. 更新本文档
|
||||
4. 通知所有相关成员
|
||||
5. 在实际项目中验证
|
||||
|
||||
---
|
||||
|
||||
> **最后更新**：2026-03-27
|
||||
> **维护者**：张翔
|
||||
> **联系方式**：contact@novalon.cn
|
||||
## Design Context
|
||||
|
||||
### Users
|
||||
- 中国企业决策者（CEO/CIO/CTO），寻求数字化转型服务
|
||||
- 使用场景：评估技术供应商、了解解决方案、发起咨询
|
||||
- 期望感受：专业可信、文化共鸣、技术前沿
|
||||
|
||||
### Brand Personality
|
||||
- 沉稳 · 精致 · 可信赖
|
||||
- 东方水墨美学 + 现代科技感
|
||||
- 不是高高在上的"专家"，而是坐下来一起想办法的"同行者"
|
||||
|
||||
### Aesthetic Direction
|
||||
- **风格**: 水墨雅致 — 以留白和排版取胜，特效点到为止
|
||||
- **参考**: Apple 中国官网（极致留白、精准排版、微妙动效）
|
||||
- **核心视觉**: 墨韵流光（旋转渐变边框 + 鼠标跟随光晕）— 全站统一
|
||||
- **反参考**: 过度装饰、花哨动画、多色渐变、拥挤布局
|
||||
|
||||
### Design Principles
|
||||
|
||||
1. **留白即力量** — 内容呼吸，不拥挤。section 间距 generous，卡片内部留白充足
|
||||
2. **墨韵流光统一** — 所有卡片共享 ink-glow-border + mouse-follow 系统，但参数克制
|
||||
3. **朱砂点睛** — 品牌红 #C41E3A 仅作点缀，不作为主色调。标题中关键词用 font-calligraphy 突出
|
||||
4. **层次分明** — 通过字重和间距建立层级，而非颜色多样性
|
||||
5. **克制动效** — 动效服务于信息传达，不炫技。hover 效果统一：translateY(-4px) + shadow + glow
|
||||
|
||||
### Design Tokens
|
||||
|
||||
#### Colors (Strict)
|
||||
| Token | Value | Usage |
|
||||
|-------|-------|-------|
|
||||
| ink | #1C1C1C | 主文字、深色背景 |
|
||||
| ink-light | #595959 | 次要文字（唯一值） |
|
||||
| ink-muted | #A3A3A3 | 辅助文字（唯一值） |
|
||||
| cinnabar | #C41E3A | 品牌强调色，仅点缀 |
|
||||
| paper | #FFFFFF | 主背景 |
|
||||
| paper-warm | #FAFAFA | 交替 section 背景 |
|
||||
| ink-dark | #0A0A0A | CTA 深色背景 |
|
||||
|
||||
#### Typography
|
||||
| Level | Size | Weight | Usage |
|
||||
|-------|------|--------|-------|
|
||||
| H1 | text-5xl sm:text-6xl lg:text-7xl | font-normal (brand) | Hero 品牌名 |
|
||||
| H2 | text-3xl sm:text-4xl | font-semibold | Section 标题 |
|
||||
| H3 | text-lg sm:text-xl | font-semibold | Card 标题 |
|
||||
| Body | text-base | normal | 正文描述 |
|
||||
| Small | text-sm | normal | 辅助信息 |
|
||||
| Mono | text-xs font-mono | normal | 编号标签 |
|
||||
|
||||
#### Spacing
|
||||
| Token | Value | Usage |
|
||||
|-------|-------|-------|
|
||||
| section-y | py-20 md:py-28 | Section 纵向间距 |
|
||||
| card-p | p-6 md:p-8 | 卡片内边距 |
|
||||
| grid-gap | gap-6 md:gap-8 | 网格间距 |
|
||||
|
||||
#### Card System
|
||||
- 所有卡片: `ink-glow-border rounded-2xl` + mouse-follow + hover translateY(-4px)
|
||||
- 鼠标光晕: `radial-gradient(400px circle, rgba(accent, 0.04), transparent 40%)`
|
||||
- 阴影: hover `0 16px 32px rgba(0,0,0,0.08)` / default `0 1px 3px rgba(0,0,0,0.04)`
|
||||
- 边框: ink-glow-border 旋转渐变
|
||||
|
||||
#### Section Backgrounds (Alternating)
|
||||
1. Hero: paper (#FFFFFF)
|
||||
2. Social Proof: paper-warm (#FAFAFA)
|
||||
3. Product Matrix: paper (#FFFFFF)
|
||||
4. Challenge: paper-warm (#FAFAFA)
|
||||
5. Services: paper (#FFFFFF)
|
||||
6. Methodology: paper-warm (#FAFAFA)
|
||||
7. Home Solutions: paper (#FFFFFF)
|
||||
8. Testimonials: paper-warm (#FAFAFA)
|
||||
9. Team: paper (#FFFFFF)
|
||||
10. About: paper-warm (#FAFAFA)
|
||||
11. News: paper (#FFFFFF)
|
||||
12. CTA: ink-dark (#1C1C1C)
|
||||
|
||||
Reference in New Issue
Block a user