novalon-website/.impeccable.md

# 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