- 移除未使用的YAML锚点定义 - 替换commands字段中的锚点引用为实际值 - 移除有问题的通知步骤 - 修复测试文件中的问题 - 添加新的测试用例和配置文件
This commit is contained in:
张翔
+341
@@ -0,0 +1,341 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user