# 图灵引擎官网 — UI 重构设计方案 v2

> 日期：2026-07-28
> 方向：立体层次 · 阴影深度 · 动效叙事

---

## 一、设计方向

### 设计理念

**"科技深度，触手可及"**

结合 Soft UI Evolution（进化软 UI）的立体层次感与 Glassmorphism（玻璃态）的轻盈通透，打造 B2B AI 基础设施的科技信任感。

核心设计语言：
- **3D 立体感** — 通过双阴影（light + dark）营造 extruded 立体卡片效果
- **层次深度** — 3 级 Elevation 系统，从扁平到悬浮
- **动效叙事** — 滚动触发 + 交错入场，引导用户逐层探索

### 风格定位

| 维度 | 选择 |
|:----|:-----|
| 基础风格 | **Soft UI Evolution**（进化软 UI） |
| 特殊效果 | **Glassmorphism**（玻璃态，用于 Hero/弹窗） |
| 主色 | Sky 天蓝（#0369A1 / #38BDF8） |
| 中性色 | Slate 色板 |
| 圆角系统 | 12px（卡片）/ 8px（按钮）/ 24px（Hero 玻璃面板） |
| 阴影系统 | **三层 Elevation** |

---

## 二、色彩系统

### 色板

| 角色 | 亮色 | 暗色 | Tailwind |
|:----|:----|:----|:---------|
| **主强调色** | `#0369A1` | `#38BDF8` | `sky-700` / `sky-400` |
| **主色 Hover** | `#075985` | `#7DD3FC` | `sky-800` / `sky-300` |
| **主色亮背景** | `#F0F9FF` | `#0C4A6E/30` | `sky-50` / `sky-900/30` |
| **页面背景** | `#F8FAFC` | `#020617` | `slate-50` / `slate-950` |
| **卡片背景** | `#FFFFFF` | `#0F172A` | `white` / `slate-900` |
| **正文** | `#0F172A` | `#F8FAFC` | `slate-900` / `slate-50` |
| **次要文字** | `#64748B` | `#94A3B8` | `slate-500` / `slate-400` |
| **边框** | `#E2E8F0` | `#334155` | `slate-200` / `slate-700` |
| **静默区块** | `#F1F5F9` | `#1E293B` | `slate-100` / `slate-800` |

**色彩签名**：全站唯一彩色标识为 Sky 天蓝。无渐变，无其他颜色介入。

---

## 三、Elevation 层次系统

### 三级阴影规范

| 层级 | 名称 | 亮色阴影 | 暗色阴影 | 用途 |
|:---:|:----|:---------|:---------|:-----|
| **1** | Base | `0 1px 2px rgba(0,0,0,0.05)` | `0 1px 2px rgba(0,0,0,0.3)` | **按钮**、小卡片 |
| **2** | Card | `0 4px 12px rgba(0,0,0,0.08)` | `0 4px 12px rgba(0,0,0,0.4)` | **普通卡片**、内容区块 |
| **3** | Elevated | `0 8px 24px rgba(0,0,0,0.12)` | `0 8px 24px rgba(0,0,0,0.5)` | **Hover 态**、弹窗、下拉菜单 |

### 交互阴影

```css
/* 卡片 hover 效果 */
.card {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: box-shadow 250ms ease, transform 250ms ease;
}
.card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}
```

### Tailwind 扩展配置

```js
// tailwind.config
boxShadow: {
  'card': '0 4px 12px rgba(0,0,0,0.08)',
  'card-hover': '0 8px 24px rgba(0,0,0,0.12)',
  'elevated': '0 12px 32px rgba(0,0,0,0.15)',
}
// Dark mode
darkMode: 'class',
```

---

## 四、玻璃态（Glassmorphism）应用

限定用于两个场景：

### 4.1 Hero 背景面板

```
背景：backdrop-filter: blur(20px)
       background: rgba(255,255,255,0.08)  / 暗色 rgba(0,0,0,0.3)
       边框：1px solid rgba(255,255,255,0.1)
```

### 4.2 特殊卡片（如"什么是AI TaaS"引文区块）

```
背景：backdrop-filter: blur(12px)
       background: rgba(255,255,255,0.06)
       圆角：rounded-2xl (16px)
```

---

## 五、字体系统

| 用法 | 字重 | 字号 | 行高 |
|:----|:---:|:---:|:----:|
| Hero 标题 | **Bold 700** | 40-48px | 1.15 |
| Section 标题 | **Bold 700** | 24-30px | 1.25 |
| 卡片标题 | **SemiBold 600** | 16-18px | 1.4 |
| 正文 | Regular 400 | 15-16px | 1.6 |
| 辅助文本 | Regular 400 | 13-14px | 1.5 |

字体：**Plus Jakarta Sans**（单字重体系）
```css
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');
```

---

## 六、动画系统

### 6.1 滚动触发入场（Scroll Reveal）

所有 section 进入视口时触发：

| 元素类型 | 动画 | 延迟 | 时长 |
|:--------|:----|:----|:----|
| Section 标题 | fade-up（translateY 20px → 0 + opacity 0→1） | 0ms | 500ms |
| 卡片网格 | fade-up + scale | 逐个 stagger **80ms** | 400ms |
| 统计数字 | count-up（数值从 0→目标） | 入视时 | 800ms |
| CTA 区块 | fade-up | 0ms | 400ms |

### 6.2 Hover 微交互

| 元素 | 效果 | 时长 |
|:----|:----|:----|
| **卡片** | shadow: card → elevated, translateY: -2px | **250ms** ease |
| **按钮** | scale: 1→0.97（按下）, 1→1.02（悬停） | 150ms ease |
| **链接** | 下划线展开（宽度 0→100%） | 200ms ease |
| **图标** | scale: 1→1.1 | 200ms ease |

### 6.3 性能规范

- 所有动画使用 `transform` + `opacity`，**禁移动 width/height/top/left**
- 遵守 `prefers-reduced-motion`：
  ```css
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }
  ```
- 单页面动画元素 ≤ 8 个同时播放
- 入场动画连续播完后，不重复触发

### 6.4 滚动行为

```css
html {
  scroll-behavior: smooth;
}
```

---

## 七、组件规范（更新版）

### 卡片

```
组件结构：
┌──────────────────────────────────────┐
│  (阴影 card 层：shadow-card)           │
│  圆角：rounded-xl (12px)               │
│  背景：bg-white / dark:bg-slate-900    │
│  过渡：transition-all duration-250     │
│  hover: shadow-card-hover -translateY-2│
├──────────────────────────────────────┤
│  [图标]  标题                          │
│  描述文字                              │
│  ─────────────────                    │
│  ● 列表项 1                           │
│  ● 列表项 2                           │
│  ● 列表项 3                           │
│  ─────────────────                    │
│  [CTA 按钮]                           │
└──────────────────────────────────────┘
```

### 按钮

| 类型 | 样式 | 阴影 |
|:----|:----|:----|
| **Primary** | `bg-sky-700 hover:bg-sky-800 text-white` | `shadow-card hover:shadow-elevated` |
| **Secondary** | `border border-slate-200 hover:bg-slate-100 text-slate-700` | 无阴影 |
| **Ghost** | `text-slate-500 hover:text-slate-900` | 无 |

### Section 标题

```html
<div class="text-center">
  <!-- 蓝色短横线 + fade-up 动画 -->
  <div className="w-8 h-0.5 bg-sky-500 dark:bg-sky-400 mx-auto mb-5 rounded-full" />
  <h2 className="text-2xl font-bold text-slate-900 dark:text-white">
    {title}
  </h2>
  <p className="text-sm text-slate-500 dark:text-slate-400">
    {subtitle}
  </p>
</div>
```

### 导航栏

- `bg-white/90 dark:bg-slate-950/90 backdrop-blur-md`
- 底部发丝边框
- 当前页标记：蓝色下划线（`border-b-2 border-sky-500`）
- Logo 左，导航居中，功能按钮右

---

## 八、页面布局模板（更新版）

### 产品中心页（重点重构）

```
┌─ Glass Hero ──────────────────────────┐
│  backdrop-blur, 标题 fade-up           │
├──────────────────────────────────────┤
│  ┌─shadow-card──┐ ┌─shadow-card───┐   │
│  │ 云平台        │ │ Token工厂       │   │
│  │ hover 升高    │ │ hover 升高      │   │
│  │ + 蓝图标       │ │ + 蓝图标        │   │
│  │ [Primary Btn] │ │ [Primary Btn]  │   │
│  └──────────────┘ └───────────────┘   │
│         stagger 80ms × 2              │
├──────────────────────────────────────┤
│  帮助卡片 (3列) — fade-up delayed      │
├──────────────────────────────────────┤
│  试用引导 — fade-up                   │
└──────────────────────────────────────┘
```

### 业务子页面模板

```
┌─ Section Header (fade-up) ───────────┐
├──────────────────────────────────────┤
│  统计数字 (3列, count-up 动画)         │
├──shadow-card──shadow-card──shadow-card│
│    stagger 80ms                       │
├──────────────────────────────────────┤
│  功能列表 (3列网格)                    │
│  card 1 (80ms delay) → 2 → 3         │
│  card 4 → 5 → 6 (row 2)              │
├──────────────────────────────────────┤
│  技术规格 / 应用场景                    │
│  fade-up                              │
├──────────────────────────────────────┤
│  CTA (fade-up)                        │
└──────────────────────────────────────┘
```

---

## 九、应用场景案例

### 首页 Hero 设计

```
┌─────────────── backdrop-blur ──────────┐
│                                         │
│      聚算成力，智绘未来                    │
│      从芯到云，一站贯通                    │
│                                         │
│       [探索业务]  [了解公司]              │
│         ↑ shadow       ↑ ghost          │
│                                         │
│   (背景: 暗色淡蓝渐变 + 浮动光晕粒子)      │
└─────────────────────────────────────────┘
```

背景效果：
- 深蓝到黑的渐变基底
- 2-3 个半透明光晕圆（absolute + blur-3xl），缓慢浮动（CSS animation 20s infinite alternate）
- 玻璃面板承载标题文字
- 主按钮有悬浮阴影，悬停时阴影加深

---

## 十、实施优先级

| Phase | 内容 | 预估 |
|:----:|:----|:----:|
| 0 | 更新 tailwind.config（阴影/颜色/字体），globals.css（基础/动画） | 15min |
| 1 | **导航栏** + 页脚（最全局组件） | 20min |
| 2 | **产品中心页**（重点页面，先出效果） | 30min |
| 3 | 业务概览 + 子页面（模板化，依次实现） | 45min |
| 4 | 公司介绍（时间轴 + 入场动画） | 30min |
| 5 | 企业动态 + 联系我们 | 20min |
| 6 | 首页 Hero + 动画打磨 | 30min |
| 7 | 暗色模式验证 + 动画 `prefers-reduced-motion` | 15min |

---

## 十一、设计决策记录

| 决策 | 选择 | 理由 |
|:----|:----|:-----|
| 阴影 vs 扁平 | **三层阴影系统** | 用户要求"立体感"+"阴影层次" |
| 动画复杂度 | **滚动触发 + hover 微交互** | 避免过度动画导致"AI 生成感" |
| 玻璃态范围 | **仅 Hero + 特殊区块** | 全站玻璃态性能开销大，限定使用 |
| 字体 | Plus Jakarta Sans | 单字重体系简洁，B2B 科技感 |
| 主色 | sky-700（非 blue-600） | 更沉稳专业，与 navy slate 更协调 |
| 渐变使用 | **禁用** | 纯平色 + 阴影搭建立体感，不依赖渐变 |