gaoxiaopei
/
www-ai
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
www-ai/docs/design-redesign-plan.md

12 KiB
Raw Blame History

图灵引擎官网 — 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 态、弹窗、下拉菜单

交互阴影

/* 卡片 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 扩展配置

// 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（单字重体系）

@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： 
    @media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
  • 单页面动画元素 ≤ 8 个同时播放
  • 入场动画连续播完后，不重复触发

6.4 滚动行为

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

<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 更协调
渐变使用 禁用 纯平色 + 阴影搭建立体感，不依赖渐变