329 lines
12 KiB
Markdown
329 lines
12 KiB
Markdown
# 图灵引擎官网 — 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 更协调 |
|
||
| 渐变使用 | **禁用** | 纯平色 + 阴影搭建立体感，不依赖渐变 |
|