novalon-website/.impeccable.md

Novalon Website - 设计上下文

本文档定义了 Novalon Website 项目的设计原则、品牌定位和视觉规范，确保所有设计决策的一致性和连贯性。

---

设计上下文

用户画像

主要用户群体：大型企业（500人以上）

用户特征：

• 企业决策者：CEO、CTO、CIO等高管层
• 技术负责人：IT总监、技术架构师、项目经理
• 采购决策者：采购总监、业务部门负责人

决策场景：

• 数字化转型战略规划阶段
• 寻找可靠的技术合作伙伴
• 评估供应商的专业能力和项目经验
• 关注系统稳定性、安全性、可扩展性
• 需要详细的技术方案和合规认证

核心需求：

• 信任感：需要看到专业能力和成功案例
• 安全感：需要了解技术实力和安全保障
• 确定性：需要清晰的服务流程和交付标准
• 创新性：需要前沿的技术视野和解决方案

---

品牌个性

品牌定位：企业数字化转型服务商

核心口号："智连未来，成长伙伴"

品牌个性关键词：

1. 专业 - 展现深厚的技术积累和行业经验
2. 可靠 - 传递稳定、可信、值得依赖的品牌形象
3. 创新 - 体现前沿技术视野和持续创新能力

品牌价值观：

• 不是高高在上的"专家"，而是并肩作战的"伙伴"
• 不是做完就跑的"卖家"，而是长期陪伴的"同行者"
• 只做一件事：成为客户数字化转型路上信得过的成长伙伴

情感目标：

• 让用户感受到：专业、可信、有温度
• 建立信任感：通过案例、数据、流程展示
• 传递安全感：通过技术实力、安全保障、合规认证
• 激发信心：通过创新方案、前沿视野、持续进化

---

视觉方向

设计理念：融合中国传统水墨画元素与现代科技感

核心视觉元素：

1. 色彩系统

主色调 - 墨黑系（水墨画主色）：

--color-primary: #1C1C1C;           /* 主色 */
--color-primary-hover: #0A0A0A;     /* 悬停色 */
--color-primary-light: #3D3D3D;     /* 浅色 */
--color-primary-lighter: #F5F5F5;   /* 更浅色 */

品牌色 - 朱砂红（印章红）：

--color-brand-primary: #C41E3A;           /* 品牌主色 */
--color-brand-primary-hover: #A01830;     /* 品牌悬停色 */
--color-brand-primary-light: #E04A68;     /* 品牌浅色 */
--color-brand-primary-bg: #FEF2F4;        /* 品牌背景色 */

背景色系 - 宣纸白：

--color-bg-primary: #FFFFFF;        /* 主背景 */
--color-bg-secondary: #FFFBF5;      /* 次背景（宣纸色） */
--color-bg-tertiary: #F5F5F5;       /* 三级背景 */
--color-bg-hover: #EFEFEF;          /* 悬停背景 */

文字色系 - 墨色层次：

--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