eafonyang
1267 lines
52 KiB
Markdown
1267 lines
52 KiB
Markdown
# 乐笙 Luxsin Web 前端设计规范
|
||
|
||
> **版本**: v1.0
|
||
> **产品定位**: Hi-Fi 音频设备（消费级）
|
||
> **设计风格**: 科技现代 · 浅色为主 + 深色区块交替
|
||
> **品牌主色**: `#00fff6`（Cyan）
|
||
> **参考网站**: Apple、理想汽车、小米汽车、Eversolo
|
||
|
||
---
|
||
|
||
## 1. 设计理念
|
||
|
||
### 1.1 风格定位
|
||
|
||
Luxsin 是一家 Hi-Fi 音频设备品牌，官网需要在**专业感**与**亲和力**之间取得平衡。我们选择「科技现代」路线——比 Apple 多一分信息密度，比 BMW M 多一分明亮通透，与理想/小米新势力的产品展示逻辑同频。
|
||
|
||
**核心设计原则:**
|
||
|
||
- **产品为王，UI 退让** — 每个区块让产品摄影/视频占据视觉主体，文字精炼克制
|
||
- **明暗交替的节奏感** — 浅色区块与深色区块交替堆叠，色温变化本身就是分界线
|
||
- **模块化 Section 体系** — 页面由若干全屏（或近全屏）区块纵向拼接，每个区块独立配置内容与布局
|
||
- **品牌色作为"信号灯"** — `#00fff6` 仅出现在交互元素、关键数据、深色区块的视觉焦点上，不做大面积铺色
|
||
- **呼吸感的留白** — 区块内部大量留白，产品与文字之间保持充足间距
|
||
|
||
### 1.2 风格选型分析
|
||
|
||
| 维度 | Apple 风格 | BMW M 风格 | 新势力（理想/小米） | **Luxsin 选择** |
|
||
|------|-----------|-----------|-------------------|----------------|
|
||
| 主题 | 明暗交替 | 纯黑 | 浅色为主+深色区块 | **浅色为主+深色交替** |
|
||
| 字体 | SF Pro 600 负字距 | BMW Type 700 大写 | 系统字体/定制字体 | **现代无衬线 600** |
|
||
| 按钮 | 蓝色全圆胶囊 | 白色直角矩形 | 圆角矩形/胶囊 | **中等圆角胶囊** |
|
||
| 内容密度 | 极低 | 低 | 中等 | **中等偏低** |
|
||
| 摄影风格 | 产品棚拍+表面阴影 | 赛道实拍 | 产品+场景实拍 | **产品棚拍+生活场景** |
|
||
| 品牌色用法 | 单一蓝色交互色 | 三色条纹仅做标识 | 多色系| **单一 Cyan 交互色** |
|
||
|
||
**选择理由:**
|
||
|
||
1. **浅色+深色交替**（而非纯黑）：Hi-Fi 音频设备需要展示产品细节和质感，浅色背景更能呈现金属/木质/织物的材质纹理；深色区块用于营造"聆听氛围"和展示带 LED 灯效的产品
|
||
2. **科技现代**（而非极简）：音频设备有技术参数和功能特性需要展示，比 Apple 需要更高的信息密度；但比新势力汽车官网更克制，因为音频产品的参数维度更少
|
||
3. **品牌色 #00fff6**：Cyan 色天然关联音频波形/频谱/LED 显示屏，在深色背景上有"发光"的科技感，在浅色背景上使用降暗变体保证可读性
|
||
|
||
---
|
||
|
||
## 2. 色彩系统
|
||
|
||
### 2.1 品牌色
|
||
|
||
| Token | 色值 | 用途 |
|
||
|-------|------|------|
|
||
| `brand` | `#00fff6` | 品牌主色，用于深色区块的交互元素、焦点、视觉点缀 |
|
||
| `brand-dark` | `#008c87` | 品牌色降暗变体，用于浅色区块的文字链接、按钮（保证对比度） |
|
||
| `brand-glow` | `rgba(0, 255, 246, 0.15)` | 深色区块上的辉光效果（按钮 hover、卡片高亮） |
|
||
| `brand-fade` | `rgba(0, 255, 246, 0.08)` | 深色区块上的微妙背景着色 |
|
||
|
||
> **注意**: `#00fff6` 在白色背景上对比度不足（WCAG AA 不达标），浅色区块上必须使用 `brand-dark` (`#008c87`) 作为文字/链接色。`#00fff6` 仅用于深色区块或作为装饰性强调色。
|
||
|
||
### 2.2 浅色区块（Light Surface）
|
||
|
||
| Token | 色值 | 用途 |
|
||
|-------|------|------|
|
||
| `canvas` | `#ffffff` | 主画布——大部分区块的背景 |
|
||
| `canvas-alt` | `#f5f5f7` | 次级画布——交替浅色区块、卡片背景 |
|
||
| `canvas-warm` | `#fafafa` | 微暖白——特定区块的微妙背景变化 |
|
||
| `ink` | `#1d1d1f` | 标题、正文文字 |
|
||
| `ink-secondary` | `#6e6e73` | 副标题、辅助说明文字 |
|
||
| `ink-tertiary` | `#86868b` | 时间戳、标签、弱化文字 |
|
||
| `hairline` | `#e0e0e0` | 分割线、卡片边框 |
|
||
| `hairline-soft` | `#f0f0f0` | 更柔和的分割线 |
|
||
|
||
### 2.3 深色区块（Dark Surface）
|
||
|
||
| Token | 色值 | 用途 |
|
||
|-------|------|------|
|
||
| `canvas-dark` | `#0a0a0f` | 深色区块主背景——微蓝调黑，比纯黑更有"电子感" |
|
||
| `surface-dark` | `#14141a` | 深色区块内的卡片表面 |
|
||
| `surface-elevated` | `#1e1e26` | 深色区块内的高亮卡片表面 |
|
||
| `ink-on-dark` | `#ffffff` | 深色区块上的主标题、正文 |
|
||
| `ink-secondary-on-dark` | `#a0a0a8` | 深色区块上的副标题、辅助文字 |
|
||
| `ink-tertiary-on-dark` | `#6a6a72` | 深色区块上的弱化文字 |
|
||
| `hairline-dark` | `#2a2a32` | 深色区块上的分割线 |
|
||
|
||
### 2.4 语义色
|
||
|
||
| Token | 色值 | 用途 |
|
||
|-------|------|------|
|
||
| `success` | `#34c759` | 成功状态 |
|
||
| `warning` | `#ff9500` | 警告状态 |
|
||
| `error` | `#ff3b30` | 错误状态 |
|
||
|
||
### 2.5 色彩使用规则
|
||
|
||
- **浅色区块**: `canvas` 或 `canvas-alt` 背景 + `ink` 文字 + `brand-dark` 交互色
|
||
- **深色区块**: `canvas-dark` 背景 + `ink-on-dark` 文字 + `brand` (`#00fff6`) 交互色
|
||
- **交替节奏**: 浅 → 深 → 浅 → 深，不允许两个相同色温的区块相邻
|
||
- **不做装饰性渐变**: 氛围感来自产品摄影，不使用 CSS 渐变背景（按钮的微渐变除外）
|
||
- **品牌色不做大面积铺色**: `#00fff6` 只用于按钮、链接、数据高亮、边框强调，绝不做整块背景
|
||
|
||
---
|
||
|
||
## 3. 字体系统
|
||
|
||
### 3.1 字体家族
|
||
|
||
```css
|
||
/* 西文 / 拉丁字体栈 */
|
||
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
||
|
||
/* 中文回退 */
|
||
font-family: "Inter", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB",
|
||
"Microsoft YaHei", system-ui, sans-serif;
|
||
```
|
||
|
||
**选型理由:**
|
||
- **Inter** 是目前最接近 SF Pro 的开源字体，字重完整（100-900），支持的 OpenType 特性丰富
|
||
- **Noto Sans SC** 是 Google 出品的开源中文字体，与 Inter 搭配视觉协调
|
||
- macOS/iOS 上自动回退到 PingFang SC，显示效果更佳
|
||
- Inter 在 600 字重下略加负字距 (`-0.02em`) 可近似 Apple 的 "tight headline" 质感
|
||
|
||
### 3.2 字号层级
|
||
|
||
| Token | 桌面端 | 移动端 | 字重 | 行高 | 字距 | 用途 |
|
||
|-------|--------|--------|------|------|------|------|
|
||
| `hero-display` | 72px | 40px | 700 | 1.05 | -0.03em | 首屏主标题 |
|
||
| `display-lg` | 56px | 32px | 700 | 1.08 | -0.02em | 深色区块大标题 |
|
||
| `display-md` | 40px | 28px | 600 | 1.15 | -0.01em | 区块标题 |
|
||
| `display-sm` | 32px | 24px | 600 | 1.2 | 0 | 区块副标题、产品名 |
|
||
| `headline` | 24px | 20px | 600 | 1.3 | 0 | 卡片标题、功能标题 |
|
||
| `title` | 20px | 18px | 500 | 1.4 | 0 | 小标题、列表标题 |
|
||
| `body-lg` | 18px | 16px | 400 | 1.6 | 0 | 区块引导语、产品描述 |
|
||
| `body` | 16px | 15px | 400 | 1.6 | 0 | 正文段落 |
|
||
| `body-sm` | 14px | 14px | 400 | 1.5 | 0 | 辅助说明、卡片描述 |
|
||
| `caption` | 13px | 12px | 400 | 1.4 | 0 | 标签、时间戳、脚注 |
|
||
| `button` | 16px | 15px | 500 | 1.0 | 0 | 按钮文字 |
|
||
| `overline` | 12px | 11px | 600 | 1.2 | 0.1em | 上标签（全大写/大写字母） |
|
||
|
||
### 3.3 字体使用规则
|
||
|
||
- **标题用 700/600 字重**：`hero-display` 和 `display-lg` 用 700 营造冲击力；`display-md` 及以下用 600
|
||
- **正文用 400 字重**：不在正文使用 500 字重——500 留给按钮和交互元素
|
||
- **大标题加负字距**：32px 以上标题使用 `-0.01em` ~ `-0.03em` 负字距，营造"紧凑精致"感
|
||
- **Overline 用大写字母**：区块上方的分类标签使用 `overline` 样式（12px/600/字距 0.1em），如 "SOUND TECHNOLOGY"
|
||
- **数字用 Tabular Figures**：参数规格中的数字使用 `font-variant-numeric: tabular-nums` 保证对齐
|
||
|
||
---
|
||
|
||
## 4. 间距与栅格
|
||
|
||
### 4.1 间距系统
|
||
|
||
| Token | 值 | 用途 |
|
||
|-------|-----|------|
|
||
| `xs` | 4px | 微调间距 |
|
||
| `sm` | 8px | 紧凑元素间距 |
|
||
| `md` | 16px | 组件内部间距 |
|
||
| `lg` | 24px | 卡片内边距、元素组间距 |
|
||
| `xl` | 32px | 区块内组件间距 |
|
||
| `2xl` | 48px | 区块标题与内容间距 |
|
||
| `3xl` | 64px | 区块上下内边距（紧凑） |
|
||
| `4xl` | 96px | 区块上下内边距（标准） |
|
||
| `5xl` | 128px | 首屏区块上下内边距 |
|
||
|
||
**间距原则:**
|
||
- 基础单位 8px，所有结构性间距是 8 的倍数
|
||
- 区块内边距默认 `4xl` (96px)，首屏区块可用 `5xl` (128px)
|
||
- 移动端区块内边距缩减至 `3xl` (64px)
|
||
- 区块之间 0 间距——色温变化即是分界
|
||
|
||
### 4.2 栅格系统
|
||
|
||
| 属性 | 桌面端 (≥1024px) | 平板 (768-1023px) | 移动端 (<768px) |
|
||
|------|-------------------|-------------------|-----------------|
|
||
| 最大内容宽度 | 1280px | 100% - 48px | 100% - 32px |
|
||
| 列数 | 12 | 8 | 4 |
|
||
| 列间距 | 24px | 16px | 16px |
|
||
| 区块全宽 | 100% (full-bleed) | 100% | 100% |
|
||
|
||
**栅格原则:**
|
||
- 文本内容居中，最大宽度 1280px，两侧留白
|
||
- 图片/视频背景可以 full-bleed（超出内容区，铺满屏幕宽度）
|
||
- 卡片网格：桌面 3-4 列 → 平板 2 列 → 移动 1 列
|
||
|
||
### 4.3 区块（Section）尺寸规范
|
||
|
||
| 类型 | 高度 | 用途 |
|
||
|------|------|------|
|
||
| 全屏区块 | `100vh`（移动端 `100svh`） | 首屏 Hero、视觉冲击型区块 |
|
||
| 大区块 | `~80vh` | 产品展示、视频区块 |
|
||
| 标准区块 | `auto`（内容驱动，最小 600px） | 功能介绍、规格展示 |
|
||
| 紧凑区块 | `auto`（内容驱动，最小 400px） | 引导语+CTA、数据高亮 |
|
||
|
||
---
|
||
|
||
## 5. 布局体系
|
||
|
||
### 5.1 核心理念：Section 模块化
|
||
|
||
页面由若干 **Section（区块）** 纵向堆叠而成。每个 Section 是一个独立的内容单元，包含：
|
||
|
||
- **背景层**: 纯色 / 图片 / 视频
|
||
- **内容层**: 标题 + 副标题 + 正文 + CTA + 媒体
|
||
- **布局模式**: 内容在区块内的排列方式
|
||
|
||
Section 之间通过色温交替（浅→深→浅）形成视觉节奏，无需额外分割线。
|
||
|
||
### 5.2 布局模式清单
|
||
|
||
以下是系统预置的 **9 种 Section 布局模式**，覆盖官网所有页面需求。后台 CMS 可以为每个区块选择布局模式并填入内容。
|
||
|
||
---
|
||
|
||
#### 布局 1：全屏背景 + 居中文字（Hero Centered）
|
||
|
||
```
|
||
┌──────────────────────────────────┐
|
||
│ │
|
||
│ [背景图 / 背景视频] │
|
||
│ │
|
||
│ 产品主标题 │
|
||
│ 产品副标题 │
|
||
│ [主CTA] [次CTA] │
|
||
│ │
|
||
└──────────────────────────────────┘
|
||
```
|
||
|
||
- **高度**: 全屏 `100vh`
|
||
- **背景**: 图片或视频，覆盖全屏
|
||
- **文字位置**: 水平+垂直居中
|
||
- **文字颜色**: 根据背景明暗自动切换（深色背景用白字，浅色背景用深字）
|
||
- **遮罩**: 可选半透明遮罩 (`rgba(0,0,0,0.3)`) 保证文字可读性
|
||
- **适用场景**: 首页首屏、产品页首屏、品牌宣传区块
|
||
|
||
---
|
||
|
||
#### 布局 2：全屏背景 + 左对齐文字（Hero Left-Aligned）
|
||
|
||
```
|
||
┌──────────────────────────────────┐
|
||
│ │
|
||
│ [背景图 / 背景视频] │
|
||
│ │
|
||
│ 产品主标题 │
|
||
│ 产品副标题 │
|
||
│ [主CTA] [次CTA] │
|
||
│ │
|
||
└──────────────────────────────────┘
|
||
```
|
||
|
||
- **高度**: 全屏 `100vh`
|
||
- **文字位置**: 左下角或左侧居中
|
||
- **适用场景**: 产品页首屏（与居中 Hero 交替使用，避免单调）
|
||
|
||
---
|
||
|
||
#### 布局 3：左右分栏 — 文左图右（Split Text-Left）
|
||
|
||
```
|
||
┌────────────┬─────────────────────┐
|
||
│ │ │
|
||
│ 区块标题 │ │
|
||
│ 副标题 │ [图片 / 视频] │
|
||
│ 正文描述 │ │
|
||
│ [CTA] │ │
|
||
│ │ │
|
||
└────────────┴─────────────────────┘
|
||
```
|
||
|
||
- **高度**: `~80vh` 或内容驱动
|
||
- **比例**: 桌面端 45:55 或 50:50，移动端上下堆叠
|
||
- **文字位置**: 左侧垂直居中
|
||
- **适用场景**: 功能特性介绍、技术亮点展示
|
||
|
||
---
|
||
|
||
#### 布局 4：左右分栏 — 图左文右（Split Image-Left）
|
||
|
||
```
|
||
┌─────────────────────┬────────────┐
|
||
│ │ │
|
||
│ │ 区块标题 │
|
||
│ [图片 / 视频] │ 副标题 │
|
||
│ │ 正文描述 │
|
||
│ │ [CTA] │
|
||
│ │ │
|
||
└─────────────────────┴────────────┘
|
||
```
|
||
|
||
- **高度**: `~80vh` 或内容驱动
|
||
- **比例**: 桌面端 55:45 或 50:50，移动端上下堆叠
|
||
- **适用场景**: 与布局 3 交替使用，形成左右节奏变化
|
||
|
||
---
|
||
|
||
#### 布局 5：卡片网格（Feature Grid）
|
||
|
||
```
|
||
┌──────────────────────────────────┐
|
||
│ 区块标题 │
|
||
│ 副标题 │
|
||
│ │
|
||
│ ┌──────┐ ┌──────┐ ┌──────┐ │
|
||
│ │ 图标 │ │ 图标 │ │ 图标 │ │
|
||
│ │ 标题 │ │ 标题 │ │ 标题 │ │
|
||
│ │ 描述 │ │ 描述 │ │ 描述 │ │
|
||
│ └──────┘ └──────┘ └──────┘ │
|
||
└──────────────────────────────────┘
|
||
```
|
||
|
||
- **高度**: 内容驱动
|
||
- **列数**: 桌面 3-4 列，平板 2 列，移动 1 列
|
||
- **卡片内容**: 图标 + 标题 + 描述（可选 + 链接）
|
||
- **适用场景**: 核心功能概览、技术特性列表、应用场景展示
|
||
|
||
---
|
||
|
||
#### 布局 6：大图 + 数据高亮（Spec Showcase）
|
||
|
||
```
|
||
┌──────────────────────────────────┐
|
||
│ │
|
||
│ [产品大图 / 视频] │
|
||
│ │
|
||
│ ┌────┐ ┌────┐ ┌────┐ │
|
||
│ │ 384│ │ 0.3│ │ 120│ │
|
||
│ │kHz │ │ % │ │ dB │ │
|
||
│ │采样率│ │失真 │ │动态范围│ │
|
||
│ └────┘ └────┘ └────┘ │
|
||
│ │
|
||
│ [了解更多] │
|
||
└──────────────────────────────────┘
|
||
```
|
||
|
||
- **高度**: `~80vh` 或全屏
|
||
- **背景**: 产品大图或视频
|
||
- **数据区**: 3-4 个关键参数，大数字 + 单位 + 标签
|
||
- **数字样式**: `display-lg` 字号 + `brand` 色（深色区块）或 `brand-dark`（浅色区块）
|
||
- **适用场景**: 产品核心技术参数展示、Hi-Fi 性能指标
|
||
|
||
---
|
||
|
||
#### 布局 7：全宽视频/动图展示（Video Showcase）
|
||
|
||
```
|
||
┌──────────────────────────────────┐
|
||
│ │
|
||
│ │
|
||
│ [自动播放的背景视频] │
|
||
│ [或循环动图 / 3D 动画] │
|
||
│ │
|
||
│ 产品名 │
|
||
│ 一句话描述 │
|
||
│ │
|
||
└──────────────────────────────────┘
|
||
```
|
||
|
||
- **高度**: 全屏或 `~80vh`
|
||
- **视频**: 自动播放、静音、循环，无控制条
|
||
- **文字**: 底部居中或叠加在视频上
|
||
- **适用场景**: 产品动态展示、功能演示、氛围营造
|
||
|
||
---
|
||
|
||
#### 布局 8：滚动叙事（Scroll Narrative）
|
||
|
||
```
|
||
┌──────────────────────────────────┐ ← 滚动到区块时触发
|
||
│ │
|
||
│ 步骤 1 标题 │
|
||
│ 步骤 1 描述 │
|
||
│ [步骤 1 图示/动画] │
|
||
│ │
|
||
├──────────────────────────────────┤ ← 继续滚动
|
||
│ │
|
||
│ 步骤 2 标题 │
|
||
│ 步骤 2 描述 │
|
||
│ [步骤 2 图示/动画] │
|
||
│ │
|
||
├──────────────────────────────────┤ ← 继续滚动
|
||
│ │
|
||
│ 步骤 3 标题 │
|
||
│ ... │
|
||
└──────────────────────────────────┘
|
||
```
|
||
|
||
- **高度**: 多屏（每个步骤约 `60-80vh`）
|
||
- **动效**: 滚动触发渐入动画（fade + slide-up）
|
||
- **粘性元素**: 可选 sticky 图/视频随文字滚动切换
|
||
- **适用场景**: 技术原理拆解、使用流程演示、产品拆解展示
|
||
|
||
---
|
||
|
||
#### 布局 9：CTA 行动召唤带（CTA Band）
|
||
|
||
```
|
||
┌──────────────────────────────────┐
|
||
│ │
|
||
│ [背景图 / 纯色背景] │
|
||
│ │
|
||
│ 引导标题 │
|
||
│ 引导副标题 │
|
||
│ [主CTA] [次CTA] │
|
||
│ │
|
||
└──────────────────────────────────┘
|
||
```
|
||
|
||
- **高度**: `~50vh` 或内容驱动（最小 400px）
|
||
- **背景**: 产品场景图或品牌色微染背景
|
||
- **文字**: 居中
|
||
- **适用场景**: 页面底部行动召唤、产品预订引导、活动推广
|
||
|
||
---
|
||
|
||
### 5.3 布局组合规则
|
||
|
||
1. **同页面不连续使用相同布局** — 相邻区块必须使用不同布局模式
|
||
2. **浅深交替** — 布局 1/2（全屏背景）通常用深色背景；布局 3/4/5（分栏/网格）用浅色背景
|
||
3. **首屏必用布局 1 或 2** — Hero 区块使用全屏背景
|
||
4. **尾屏必用布局 9** — 页面以 CTA Band 收尾
|
||
5. **布局 8（滚动叙事）每页最多 1 次** — 避免滚动疲劳
|
||
|
||
### 5.4 区块内容结构
|
||
|
||
每个 Section 包含以下可选内容元素，CMS 可按需配置：
|
||
|
||
| 元素 | 说明 | 是否必填 |
|
||
|------|------|---------|
|
||
| `overline` | 上方小标签（大写字母） | 可选 |
|
||
| `title` | 区块主标题 | 必填 |
|
||
| `subtitle` | 副标题 / 引导语 | 可选 |
|
||
| `body` | 正文描述 | 可选 |
|
||
| `media` | 图片 / 视频 | 视布局而定 |
|
||
| `cta_primary` | 主按钮（文字 + 链接） | 可选 |
|
||
| `cta_secondary` | 次按钮（文字 + 链接） | 可选 |
|
||
| `spec_items` | 数据指标列表（布局 6 专用） | 可选 |
|
||
| `background_type` | 背景类型：color / image / video | 必填 |
|
||
| `background_value` | 背景资源 URL 或色值 | 视类型而定 |
|
||
| `theme` | 区块主题：light / dark | 必填 |
|
||
|
||
---
|
||
|
||
## 6. 组件规范
|
||
|
||
### 6.1 导航栏（Navigation）
|
||
|
||
**全局导航栏** — 固定在页面顶部
|
||
|
||
- **高度**: 64px（桌面）/ 56px（移动）
|
||
- **背景**: 透明（首屏滚动前）→ `rgba(255,255,255,0.8)` + `backdrop-filter: blur(20px)`（滚动后）
|
||
- **深色区块适配**: 滚动到深色区块时，导航栏切换为 `rgba(10,10,15,0.8)` + blur
|
||
- **Logo**: 左侧，文字标识 "LUXIN" 或图形 Logo
|
||
- **导航项**: 居中或靠右，`body-sm` 字号，`ink-secondary` 色，hover 变 `ink`
|
||
- **语言切换**: 最右侧，"中 / EN" 切换
|
||
- **移动端**: 收起为汉堡菜单，全屏抽屉式展开
|
||
|
||
### 6.2 按钮
|
||
|
||
| 类型 | 背景 | 文字 | 圆角 | 内边距 | 用途 |
|
||
|------|------|------|------|--------|------|
|
||
| `btn-primary-light` | `brand-dark` (#008c87) | `#ffffff` | 9999px (胶囊) | 14px 32px | 浅色区块主 CTA |
|
||
| `btn-primary-dark` | `brand` (#00fff6) | `#0a0a0f` | 9999px (胶囊) | 14px 32px | 深色区块主 CTA |
|
||
| `btn-secondary-light` | 透明 | `brand-dark` | 9999px | 14px 32px | 浅色区块次 CTA（边框 `brand-dark`） |
|
||
| `btn-secondary-dark` | 透明 | `brand` | 9999px | 14px 32px | 深色区块次 CTA（边框 `brand`） |
|
||
| `btn-text` | 透明 | `brand-dark` / `brand` | — | 0 | 文字链接 + 箭头图标 |
|
||
|
||
**按钮规则:**
|
||
- 所有主/次按钮使用**全圆胶囊形** (`border-radius: 9999px`)
|
||
- Hover: 主按钮微亮（`brightness(1.1)`），次按钮背景微染
|
||
- Active: `transform: scale(0.96)` 按压缩小
|
||
- 最小高度 48px，最小宽度 120px
|
||
- 移动端全宽按钮（`width: 100%`）
|
||
|
||
### 6.3 卡片
|
||
|
||
**产品卡片**
|
||
- 背景: `canvas` (白) 或 `surface-dark` (深色区块)
|
||
- 圆角: 16px
|
||
- 内边距: 24px
|
||
- 图片: 顶部，1:1 或 4:3 比例，圆角 8px
|
||
- 边框: 1px solid `hairline`（浅色）/ `hairline-dark`（深色）
|
||
- 阴影: 无（仅 hover 时微阴影 `0 4px 24px rgba(0,0,0,0.06)`）
|
||
|
||
**功能卡片**
|
||
- 背景: 同上
|
||
- 图标: 顶部，48×48px，`brand` 色
|
||
- 标题: `headline` 字号
|
||
- 描述: `body-sm` 字号，最多 2 行
|
||
|
||
### 6.4 数据指标（Spec Item）
|
||
|
||
```
|
||
384
|
||
kHz
|
||
采样率
|
||
```
|
||
|
||
- 数字: `display-lg` (56px) / 700 / `brand` 色（深色区块）或 `brand-dark`（浅色区块）
|
||
- 单位: `headline` (24px) / 600 / `ink-secondary`
|
||
- 标签: `body-sm` (14px) / 400 / `ink-tertiary`
|
||
- 使用 `font-variant-numeric: tabular-nums`
|
||
|
||
### 6.5 页脚（Footer）
|
||
|
||
- 背景: `canvas-dark` (#0a0a0f)
|
||
- 文字: `ink-secondary-on-dark`
|
||
- 布局: 4 列链接 + 底部版权行
|
||
- 上边距: 与最后一个 Section 之间 0 间距（页脚本身就是深色收尾）
|
||
- 链接: `body-sm` 字号，hover 变 `brand` 色
|
||
|
||
---
|
||
|
||
## 7. 响应式策略
|
||
|
||
### 7.1 断点体系
|
||
|
||
采用 **Mobile-First** 策略：所有样式默认针对移动端编写，通过 `min-width` 媒体查询逐步增强到大屏。
|
||
|
||
| Token | 断点 | 宽度范围 | 典型设备 | 说明 |
|
||
|-------|------|---------|----------|------|
|
||
| `xs` | — | < 375px | 小屏手机（iPhone SE） | 最小兼容宽度，内容可横向滚动 |
|
||
| `sm` | `sm` | ≥ 375px | 标准手机（iPhone 12+） | 手机竖屏基准断点 |
|
||
| `md` | `md` | ≥ 768px | 平板竖屏 / 大屏手机横屏 | 平板竖屏基准断点 |
|
||
| `lg` | `lg` | ≥ 1024px | 平板横屏 / 小屏笔记本 | 桌面端入口断点 |
|
||
| `xl` | `xl` | ≥ 1280px | 标准桌面 | 内容锁定 1280px，两侧留白吸收 |
|
||
| `2xl` | `2xl` | ≥ 1536px | 大屏桌面 | 内容锁定 1280px，两侧留白继续吸收 |
|
||
|
||
**UnoCSS breakpoints 映射：**
|
||
|
||
```ts
|
||
// uno.config.ts
|
||
export default defineConfig({
|
||
theme: {
|
||
breakpoints: {
|
||
sm: '375px',
|
||
md: '768px',
|
||
lg: '1024px',
|
||
xl: '1280px',
|
||
'2xl': '1536px',
|
||
},
|
||
},
|
||
});
|
||
```
|
||
|
||
**断点使用原则：**
|
||
- 所有响应式工具类使用 `min-width` 语法（如 `md:text-40px` 表示 ≥768px 时生效）
|
||
- 不使用 `max-width` 语法，避免样式覆盖冲突
|
||
- 断点之间的差异通过增量调整实现，不推翻布局
|
||
- 手机竖屏（`<768px`）是默认基准，不写断点前缀
|
||
|
||
### 7.2 手机竖屏适配（核心场景）
|
||
|
||
手机竖屏是移动端访问的最高频场景，所有设计决策优先保证竖屏体验。
|
||
|
||
#### 7.2.1 屏幕方向检测
|
||
|
||
提供 `useOrientation` composable 用于检测屏幕方向，自动调整布局：
|
||
|
||
```ts
|
||
// app/composables/useOrientation.ts
|
||
export function useOrientation() {
|
||
const isPortrait = ref(true);
|
||
|
||
const update = () => {
|
||
isPortrait.value = window.matchMedia('(orientation: portrait)').matches;
|
||
};
|
||
|
||
onMounted(() => {
|
||
update();
|
||
window.matchMedia('(orientation: portrait)').addEventListener('change', update);
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
window.matchMedia('(orientation: portrait)').removeEventListener('change', update);
|
||
});
|
||
|
||
return { isPortrait };
|
||
}
|
||
```
|
||
|
||
- 手机横屏时，自动切换为双列布局（与平板竖屏行为一致）
|
||
- 手机竖屏时，强制单列布局，背景图按竖屏比例裁切
|
||
|
||
#### 7.2.2 布局模式竖屏适配规则
|
||
|
||
| 布局模式 | 桌面端表现 | 手机竖屏适配 |
|
||
|---------|----------|-------------|
|
||
| 布局 1 Hero Centered | 全屏 16:9 背景 + 居中文字 | 全屏 9:16 背景 + 居中文字，标题缩小至 `hero-display` 移动端值 |
|
||
| 布局 2 Hero Left-Aligned | 全屏背景 + 左对齐文字 | 全屏背景 + 垂直居中文字（取消左对齐），文字加半透明遮罩 |
|
||
| 布局 3 Split Text-Left | 左文字右图片并排 | 上下堆叠：图片在上（占 50vh），文字在下 |
|
||
| 布局 4 Split Text-Right | 右文字左图片并排 | 上下堆叠：图片在上（占 50vh），文字在下 |
|
||
| 布局 5 Feature Grid | 3-4 列卡片网格 | 单列卡片，横向滑动浏览（snap scroll） |
|
||
| 布局 6 Spec Showcase | 大图 + 横排数据 | 大图在上 + 数据 2×2 网格（非横向滚动） |
|
||
| 布局 7 Full-Bleed Media | 全宽视频/图片 + 底部叠加文字 | 全宽媒体占 60vh + 底部叠加文字，文字区域增加遮罩 |
|
||
| 布局 8 Quote/Statement | 大居中文字 | 文字左对齐，字号缩小至 `display-md` 移动端值 |
|
||
| 布局 9 CTA Banner | 居中标题 + 双按钮横排 | 标题 + 按钮纵向堆叠，按钮全宽 |
|
||
|
||
#### 7.2.3 响应式调整规则
|
||
|
||
| 元素 | 桌面端 | 手机竖屏 |
|
||
|------|--------|--------|
|
||
| Hero 标题 | 72px | 40px |
|
||
| 区块标题 | 40px | 28px |
|
||
| 区块内边距 | 96px 垂直 | 64px 垂直 / 20px 水平 |
|
||
| 左右分栏 | 并排 | 上下堆叠（图片在上） |
|
||
| 卡片网格 | 3-4 列 | 1 列（横向滑动） |
|
||
| 数据指标 | 横向排列 | 2×2 网格 |
|
||
| 导航 | 完整水平导航 | 汉堡菜单 |
|
||
| 按钮 | 自适应宽度 | 全宽（最大 400px 居中） |
|
||
| 全屏区块高度 | `100vh` | `100svh`（避免地址栏跳动） |
|
||
|
||
#### 7.2.4 安全区域适配
|
||
|
||
适配 iPhone 刘海/灵动岛及底部 Home Indicator：
|
||
|
||
```css
|
||
/* 全局安全区域变量 */
|
||
:root {
|
||
--safe-top: env(safe-area-inset-top, 0px);
|
||
--safe-bottom: env(safe-area-inset-bottom, 0px);
|
||
--safe-left: env(safe-area-inset-left, 0px);
|
||
--safe-right: env(safe-area-inset-right, 0px);
|
||
}
|
||
|
||
/* 固定导航栏适配 */
|
||
.app-header {
|
||
padding-top: var(--safe-top);
|
||
}
|
||
|
||
/* 页脚适配 */
|
||
.app-footer {
|
||
padding-bottom: var(--safe-bottom);
|
||
}
|
||
|
||
/* 全屏区块适配 */
|
||
.section-fullscreen {
|
||
padding-top: calc(var(--safe-top) + 64px);
|
||
padding-bottom: calc(var(--safe-bottom) + 64px);
|
||
}
|
||
```
|
||
|
||
在 `index.html` 中添加 viewport 配置：
|
||
```html
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||
```
|
||
|
||
### 7.3 平板适配
|
||
|
||
平板设备横跨 `md`（768px）和 `lg`（1024px）两个断点，需区分竖屏与横屏。
|
||
|
||
#### 7.3.1 平板竖屏（768px ~ 1023px）
|
||
|
||
- **布局**: 双列卡片网格（`grid-cols-2`），左右分栏保持并排但比例调整（5:4 或 4:3）
|
||
- **字号**: 使用移动端与桌面端之间的中间值
|
||
- **导航**: 完整水平导航可见，但间距收紧
|
||
- **全屏区块**: `100svh`，内容区最大宽度 100% - 48px
|
||
- **数据指标**: 2×2 或 1×4 横排
|
||
|
||
#### 7.3.2 平板横屏（1024px ~ 1279px）
|
||
|
||
- **布局**: 接近桌面端体验，卡片网格 3 列
|
||
- **字号**: 使用桌面端字号
|
||
- **导航**: 完整水平导航
|
||
- **全屏区块**: `100vh`，内容区最大宽度 1280px
|
||
- **左右分栏**: 并排，比例 1:1 或 6:5
|
||
|
||
#### 7.3.3 触摸交互优化
|
||
|
||
平板和手机均为触摸设备，需优化触摸体验：
|
||
|
||
- **最小点击目标**: 44×44px（Apple HIG 推荐），按钮/链接内边距不足时通过 `padding` 扩展点击区
|
||
- **移除 hover 依赖**: 触摸设备上 `hover` 状态不可靠，关键交互不能仅依赖 hover 触发
|
||
- **手势支持**: 卡片网格支持横向滑动（`scroll-snap`），图片支持双指缩放
|
||
- **禁用自定义光标**: 触摸设备上不显示自定义鼠标光标
|
||
|
||
```css
|
||
/* 横向滑动卡片 */
|
||
.card-scroll {
|
||
scroll-snap-type: x mandatory;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
.card-scroll > * {
|
||
scroll-snap-align: start;
|
||
}
|
||
```
|
||
|
||
### 7.4 移动端导航
|
||
|
||
#### 7.4.1 手机端汉堡菜单
|
||
|
||
- 点击汉堡图标展开**全屏抽屉**（`fixed inset-0 z-50`）
|
||
- 抽屉背景使用 `canvas-dark` (`#0a0a0f`)，品牌色 `#00fff6` 作为交互点缀
|
||
- 导航项纵向排列，每项 `56px` 高度，字号 `display-md` 移动端值
|
||
- 底部固定语言切换 + CTA 按钮
|
||
- 关闭方式：点击关闭按钮 / 点击导航项跳转后自动关闭 / 点击遮罩区域
|
||
|
||
#### 7.4.2 平板导航
|
||
|
||
- 平板竖屏和横屏均显示完整水平导航，不需要汉堡菜单
|
||
- 平板竖屏导航间距收紧（`gap-4`），横屏恢复正常间距（`gap-8`）
|
||
- 语言切换始终在导航栏右侧可见
|
||
|
||
### 7.5 图片策略
|
||
|
||
- 使用 `<picture>` + `srcset` 按断点加载不同尺寸
|
||
- 桌面端加载 2x 分辨率，移动端加载 1.5x
|
||
- 格式优先 WebP > JPEG，现代浏览器优先 AVIF
|
||
- 首屏图片 eager 加载，其余 lazy 加载（`loading="lazy"`）
|
||
- 全屏背景图裁切策略：
|
||
- 桌面端：16:9 横向裁切
|
||
- 平板竖屏：4:3 裁切
|
||
- 手机竖屏：9:16 或 4:5 竖向裁切（`object-position` 居中偏上）
|
||
- 手机横屏：16:9 裁切（同桌面端）
|
||
- 使用 `object-fit: cover` + `object-position` 确保各尺寸下主体可见
|
||
- CMS 后台可为同一区块分别上传桌面版和移动版图片
|
||
|
||
```html
|
||
<!-- 图片响应式示例 -->
|
||
<picture>
|
||
<source media="(orientation: portrait) and (max-width: 767px)"
|
||
srcset="/img/hero-mobile-portrait.webp 1.5x" />
|
||
<source media="(orientation: landscape) and (max-width: 767px)"
|
||
srcset="/img/hero-mobile-landscape.webp 1.5x" />
|
||
<source media="(min-width: 768px)"
|
||
srcset="/img/hero-desktop.webp 2x" />
|
||
<img src="/img/hero-desktop.webp" alt="..." class="h-full w-full object-cover" />
|
||
</picture>
|
||
```
|
||
|
||
### 7.6 视频策略
|
||
|
||
- 桌面端：自动播放、静音、循环的背景视频（MP4/WebM）
|
||
- 移动端：降级为静态海报图（节省流量 + 避免自动播放限制）
|
||
- 视频文件不超过 5MB（桌面端），提供压缩版（不超过 2MB，平板端可选加载）
|
||
- 提供 `poster` 属性作为加载前占位
|
||
- 用户点击播放按钮时可手动播放（移动端需用户手势触发）
|
||
- 视频元素使用 `playsinline` 属性防止 iOS 全屏播放
|
||
|
||
```html
|
||
<video
|
||
autoplay
|
||
muted
|
||
loop
|
||
playsinline
|
||
poster="/img/hero-poster.webp"
|
||
class="hidden lg:block h-full w-full object-cover"
|
||
>
|
||
<source src="/video/hero.mp4" type="video/mp4" />
|
||
<source src="/video/hero.webm" type="video/webm" />
|
||
</video>
|
||
<!-- 移动端显示海报图 -->
|
||
<img
|
||
src="/img/hero-poster.webp"
|
||
alt="..."
|
||
class="lg:hidden h-full w-full object-cover"
|
||
/>
|
||
```
|
||
|
||
### 7.7 移动端性能优化
|
||
|
||
| 优化项 | 策略 |
|
||
|-------|------|
|
||
| 图片懒加载 | 首屏外图片 `loading="lazy"` + `decoding="async"` |
|
||
| 图片尺寸 | 移动端图片宽度不超过 750px（2x 屏幕需 1500px），使用 `srcset` 按需加载 |
|
||
| 字体加载 | `font-display: swap`，中文字体子集化（仅加载页面用到的字符） |
|
||
| 动画性能 | 移动端禁用非必要动画，保留的动画仅使用 `transform` 和 `opacity` |
|
||
| 滚动性能 | 使用 `will-change: transform` 标记滚动容器，避免 `box-shadow` 性能损耗 |
|
||
| 触摸滚动 | 滑动容器添加 `-webkit-overflow-scrolling: touch` + `overscroll-behavior: contain` |
|
||
| 背景视频 | 移动端完全禁用，用海报图替代 |
|
||
| 预加载 | 仅预加载首屏关键资源（LCP 图片），使用 `<link rel="preload">` |
|
||
|
||
### 7.8 移动端字号与间距补充
|
||
|
||
第 3 节定义的字号已包含移动端值，此处补充间距响应式规则：
|
||
|
||
| Token | 桌面端 | 平板 | 手机竖屏 |
|
||
|-------|--------|------|---------|
|
||
| `xs` | 4px | 4px | 4px |
|
||
| `sm` | 8px | 8px | 8px |
|
||
| `md` | 16px | 16px | 12px |
|
||
| `lg` | 24px | 20px | 16px |
|
||
| `xl` | 32px | 24px | 20px |
|
||
| `2xl` | 48px | 32px | 24px |
|
||
| `3xl` | 64px | 56px | 40px |
|
||
| `4xl` | 96px | 80px | 64px |
|
||
| `5xl` | 128px | 96px | 80px |
|
||
|
||
**UnoCSS 用法示例：**
|
||
```html
|
||
<!-- 默认（手机）：py-40px，平板：md:py-56px，桌面：lg:py-96px -->
|
||
<section class="py-40px md:py-56px lg:py-96px">
|
||
<!-- 默认（手机）：text-28px，桌面：lg:text-40px -->
|
||
<h2 class="text-28px lg:text-40px font-600">区块标题</h2>
|
||
</section>
|
||
```
|
||
|
||
---
|
||
|
||
## 8. 页面组成规划
|
||
|
||
### 8.0 Page Hero（非首页路由通用顶部横幅）
|
||
|
||
除首页外，所有路由页面顶部均使用 **Page Hero** 横幅组件，为各页面提供统一的视觉入口。
|
||
|
||
#### 8.0.1 设计规格
|
||
|
||
```
|
||
┌─────────────────────────────────────────────┐
|
||
│ [固定背景横图 — 全屏宽，高 300-400px] │
|
||
│ │
|
||
│ 导航栏（透明 / 毛玻璃） │
|
||
│ │
|
||
│ OVERLINE（可选） │
|
||
│ 页面标题（大字号） │
|
||
│ 页面副标题（可选） │
|
||
│ │
|
||
└─────────────────────────────────────────────┘
|
||
```
|
||
|
||
| 属性 | 桌面端 | 平板 | 手机竖屏 |
|
||
|------|--------|------|---------|
|
||
| 高度 | 400px | 320px | 240px |
|
||
| 背景图 | 16:3 横向裁切（`object-cover`） | 4:1 裁切 | 3:1 裁切 |
|
||
| 标题字号 | `display-lg`（56px） | `display-md`（40px） | `display-sm`（24px） |
|
||
| 标题位置 | 水平居中，垂直居中偏下 | 居中 | 居中 |
|
||
| 遮罩 | `rgba(0,0,0,0.45)` 半透明叠加 | 同左 | 同左 |
|
||
| 文字色 | `ink-on-dark`（#ffffff） | 同左 | 同左 |
|
||
|
||
**设计原则：**
|
||
|
||
- 背景图由 CMS 配置，不同路由使用不同横图（如产品页用产品场景图、新闻页用品牌氛围图）
|
||
- 标题由路由自动映射，无需手动填写（如 `/products` → "产品中心"）
|
||
- 副标题可选，用于补充页面说明
|
||
- Overline 可选，用于分类标识（如 "DMP 流媒体系列"）
|
||
- 导航栏在 Page Hero 上透明，滚动后变为毛玻璃背景
|
||
|
||
#### 8.0.2 各路由 Page Hero 内容
|
||
|
||
| 路由 | 标题 | 副标题 | Overline | 背景图风格 |
|
||
|------|------|--------|---------|------------|
|
||
| `/products` | 产品中心 | 探索高保真音频设备，寻找您的理想之声 | LUXSIN PRODUCTS | 产品阵列全景图 |
|
||
| `/products/[series]` | 系列名 | 系列描述 | 系列英文名 | 系列场景图 |
|
||
| `/news` | 新闻中心 | 获取乐笙最新资讯与行业动态 | — | 品牌氛围实拍图 |
|
||
| `/about` | 关于我们 | 了解乐笙的品牌故事与技术实力 | — | 品牌故事场景图 |
|
||
| `/support` | 技术支持 | 产品支持、固件下载与售后服务 | — | 技术/工作台场景图 |
|
||
|
||
> **注意**: 首页不使用 Page Hero，首页首屏由 Section 布局体系（布局 1 Hero Centered）单独定义。
|
||
|
||
---
|
||
|
||
### 8.1 首页（Home）
|
||
|
||
首页是全站唯一使用 **多区块堆叠** 布局的页面，由若干全屏 Section 纵向拼接。
|
||
|
||
| 序号 | 布局模式 | 主题 | 内容概要 |
|
||
|------|---------|------|---------|
|
||
| 1 | 布局 1 Hero Centered | Dark | 品牌首屏：品牌名 + Slogan + 产品全景图 |
|
||
| 2 | 布局 3 Split Text-Left | Light | 品牌简介：标题 + 描述 + 产品图 |
|
||
| 3 | 布局 6 Spec Showcase | Dark | 核心技术参数：产品大图 + 3-4 个关键数据 |
|
||
| 4 | 布局 5 Feature Grid | Light | 产品系列概览：3-4 张产品卡片 |
|
||
| 5 | 布局 7 Video Showcase | Dark | 产品动态展示：自动播放视频 + 产品名 |
|
||
| 6 | 布局 4 Split Image-Left | Light | 技术亮点：功能演示图 + 描述 |
|
||
| 7 | 布局 9 CTA Band | Dark | 行动召唤："探索全部产品" |
|
||
|
||
### 8.2 产品页（Product）
|
||
|
||
产品页分为 **产品列表页** 和 **产品详情页** 两种类型。
|
||
|
||
#### 8.2.1 产品列表页（Product List）
|
||
|
||
以方阵网格展示产品卡片，点击卡片进入对应产品详情页。
|
||
|
||
```
|
||
┌─────────────────────────────────────────────┐
|
||
│ [Page Hero 横幅 — 标题 "产品中心"] │
|
||
├─────────────────────────────────────────────┤
|
||
│ 白色背景 │
|
||
│ │
|
||
│ 系列标题（如 "DMP 流媒体系列"） │
|
||
│ 系列副标题 │
|
||
│ │
|
||
│ ┌──────┐ ┌──────┐ ┌──────┐ │
|
||
│ │产品图│ │产品图│ │产品图│ │
|
||
│ │型号名│ │型号名│ │型号名│ │
|
||
│ │简介 │ │简介 │ │简介 │ │
|
||
│ └──────┘ └──────┘ └──────┘ │
|
||
│ ┌──────┐ ┌──────┐ ┌──────┐ │
|
||
│ │产品图│ │产品图│ │产品图│ │
|
||
│ │型号名│ │型号名│ │型号名│ │
|
||
│ │简介 │ │简介 │ │简介 │ │
|
||
│ └──────┘ └──────┘ └──────┘ │
|
||
│ │
|
||
└─────────────────────────────────────────────┘
|
||
```
|
||
|
||
**网格规格：**
|
||
|
||
| 断点 | 列数 | 卡片间距 | 卡片内边距 |
|
||
|------|------|---------|------------|
|
||
| 桌面端（≥1024px） | 3 列 | 24px | 24px |
|
||
| 平板（768-1023px） | 2 列 | 20px | 20px |
|
||
| 手机（<768px） | 1 列 | 16px | 16px |
|
||
|
||
**卡片结构：**
|
||
|
||
```
|
||
┌─────────────┐
|
||
│ │
|
||
│ 产品正面图 │ ← 4:3 比例，object-cover，居中裁切
|
||
│ │
|
||
├─────────────┤
|
||
│ 型号名称 │ ← display-sm 移动端值 / headline 桌面端值
|
||
│ 功能简介 │ ← body-sm，ink-secondary
|
||
└─────────────┘
|
||
```
|
||
|
||
- 卡片背景 `canvas`（#ffffff），hover 时微阴影 + 上浮（见 9.2 微交互）
|
||
- 点击整张卡片跳转至 `/products/[slug]`
|
||
- 若产品较多，可在 Page Hero 下方添加**系列筛选标签栏**（如 "全部 / DMP 流媒体系列 / DAC 解码器 / 功放"）
|
||
|
||
#### 8.2.2 产品详情页（Product Detail）
|
||
|
||
由多个全屏 Section 纵向堆叠组成，布局由 CMS 灵活配置，使用第 5 节定义的 9 种布局模式。
|
||
|
||
| 序号 | 布局模式 | 主题 | 内容概要 |
|
||
|------|---------|------|---------|
|
||
| 1 | 布局 2 Hero Left-Aligned | Dark | 产品首屏：产品名 + 副标题 + 产品图 + CTA |
|
||
| 2 | 布局 6 Spec Showcase | Light | 核心参数：产品图 + 关键数据指标 |
|
||
| 3 | 布局 8 Scroll Narrative | Dark | 技术拆解：3-4 步骤展示核心技术原理 |
|
||
| 4 | 布局 3/4 Split 交替 | Light/Dark | 功能特性：3-4 个功能点左右交替展示 |
|
||
| 5 | 布局 7 Video Showcase | Dark | 产品演示视频 |
|
||
| 6 | 布局 5 Feature Grid | Light | 包装内容 / 配件 / 兼容性 |
|
||
| 7 | 布局 9 CTA Band | Dark | 购买引导 / 预约试听 |
|
||
|
||
- 详情页顶部仍使用 **Page Hero** 横幅（标题为产品型号名）
|
||
- 下方 Section 区块按 CMS 配置的 `layout_type` 和 `theme` 渲染
|
||
- 面包屑导航：`首页 > 产品中心 > [产品系列] > [产品型号]`
|
||
|
||
### 8.3 新闻页（News）
|
||
|
||
新闻页分为 **新闻列表页** 和 **新闻详情页** 两种类型，展示效果与产品页一致，但详情页布局固定。
|
||
|
||
#### 8.3.1 新闻列表页（News List）
|
||
|
||
以卡片网格展示新闻文章，点击卡片进入对应新闻详情页。
|
||
|
||
```
|
||
┌─────────────────────────────────────────────┐
|
||
│ [Page Hero 横幅 — 标题 "新闻中心"] │
|
||
├─────────────────────────────────────────────┤
|
||
│ 白色背景 │
|
||
│ │
|
||
│ ┌──────┐ ┌──────┐ ┌──────┐ │
|
||
│ │封面图│ │封面图│ │封面图│ │
|
||
│ ├──────┤ ├──────┤ ├──────┤ │
|
||
│ │日期 │ │日期 │ │日期 │ │
|
||
│ │标题 │ │标题 │ │标题 │ │
|
||
│ │摘要 │ │摘要 │ │摘要 │ │
|
||
│ └──────┘ └──────┘ └──────┘ │
|
||
│ │
|
||
│ [分页器 / 加载更多] │
|
||
└─────────────────────────────────────────────┘
|
||
```
|
||
|
||
**网格规格（与产品列表页一致）：**
|
||
|
||
| 断点 | 列数 | 卡片间距 |
|
||
|------|------|--------|
|
||
| 桌面端（≥1024px） | 3 列 | 24px |
|
||
| 平板（768-1023px） | 2 列 | 20px |
|
||
| 手机（<768px） | 1 列 | 16px |
|
||
|
||
**新闻卡片结构：**
|
||
|
||
```
|
||
┌─────────────┐
|
||
│ │
|
||
│ 新闻封面图 │ ← 16:9 比例，object-cover
|
||
│ │
|
||
├─────────────┤
|
||
│ 发布日期 │ ← caption 样式，ink-tertiary
|
||
│ 文章标题 │ ← headline 移动端值 / title 桌面端值
|
||
│ 摘要文字 │ ← body-sm，ink-secondary，最多 2 行截断
|
||
└─────────────┘
|
||
```
|
||
|
||
- 卡片背景 `canvas`，hover 时微阴影 + 上浮
|
||
- 点击整张卡片跳转至 `/news/[slug]`
|
||
- 底部分页器或"加载更多"按钮
|
||
|
||
#### 8.3.2 新闻详情页（News Detail）
|
||
|
||
布局固定，**不使用 Section 灵活配置体系**，采用统一的单栏文章排版。
|
||
|
||
```
|
||
┌─────────────────────────────────────────────┐
|
||
│ [Page Hero 横幅 — 标题 "文章标题"] │
|
||
├─────────────────────────────────────────────┤
|
||
│ 白色背景 │
|
||
│ 内容区居中，最大宽度 720px │
|
||
│ │
|
||
│ 面包屑导航（首页 > 新闻中心 > 文章标题） │
|
||
│ 发布日期 · 分类标签 │
|
||
│ │
|
||
│ 文章正文（富文本排版） │
|
||
│ ├── 段落文字 │
|
||
│ ├── 配图（全宽，带圆角） │
|
||
│ ├── 引用块 │
|
||
│ └── 嵌入视频（可选） │
|
||
│ │
|
||
│ ── 相关推荐 ───────────── │
|
||
│ ┌──────┐ ┌──────┐ ┌──────┐ │
|
||
│ │推荐卡│ │推荐卡│ │推荐卡│ │
|
||
│ └──────┘ └──────┘ └──────┘ │
|
||
└─────────────────────────────────────────────┘
|
||
```
|
||
|
||
**排版规格：**
|
||
|
||
| 元素 | 桌面端 | 移动端 |
|
||
|------|--------|--------|
|
||
| 内容最大宽度 | 720px | 100% - 32px |
|
||
| 文章标题 | `display-lg`（56px） | `display-sm`（24px） |
|
||
| 正文字号 | `body-lg`（18px） | `body`（16px） |
|
||
| 行高 | 1.8 | 1.7 |
|
||
| 段落间距 | 24px | 20px |
|
||
| 配图圆角 | 12px | 8px |
|
||
| 相关推荐 | 3 列网格 | 1 列（横向滑动） |
|
||
|
||
- 正文排版遵循常见富文本元素样式：标题（h2-h4）、有序/无序列表、代码块、表格、引用块等
|
||
- 相关推荐卡片复用新闻列表卡片样式
|
||
- 面包屑导航：`首页 > 新闻中心 > [文章标题]`
|
||
|
||
### 8.4 关于我们（About）
|
||
|
||
> 顶部使用 **Page Hero** 横幅（标题："关于我们"），下方为 Section 堆叠。
|
||
|
||
| 序号 | 布局模式 | 主题 | 内容概要 |
|
||
|------|---------|------|---------|
|
||
| 1 | 布局 3 Split Text-Left | Light | 品牌故事：文字 + 品牌照片 |
|
||
| 2 | 布局 5 Feature Grid | Dark | 价值观 / 团队介绍 |
|
||
| 3 | 布局 9 CTA Band | Light | 联系我们引导 |
|
||
|
||
### 8.5 技术支持（Support）
|
||
|
||
> 顶部使用 **Page Hero** 横幅（标题："技术支持"），下方为 Section 堆叠。
|
||
|
||
| 序号 | 布局模式 | 主题 | 内容概要 |
|
||
|------|---------|------|---------|
|
||
| 1 | 布局 5 Feature Grid | Light | 常见问题分类卡片 |
|
||
| 2 | 布局 3 Split Text-Left | Dark | 下载中心：驱动/固件/说明书下载 |
|
||
| 3 | 布局 4 Split Image-Left | Light | 联系方式：图 + 售后信息 |
|
||
| 4 | 布局 9 CTA Band | Dark | 在线客服引导 |
|
||
|
||
---
|
||
|
||
## 9. 动效与交互
|
||
|
||
### 9.1 滚动动效
|
||
|
||
| 效果 | 触发时机 | 实现 |
|
||
|------|---------|------|
|
||
| 渐入上移 (Fade + Slide Up) | 元素进入视口 80% 时 | `opacity: 0 → 1` + `translateY(24px → 0)`，`transition: 0.6s ease-out` |
|
||
| 视差背景 (Parallax) | 全屏背景图区块 | `background-attachment: fixed` 或 `transform: translateY()` 随滚动偏移 |
|
||
| 数字滚动计数 (Count Up) | 数据指标进入视口时 | 从 0 动画到目标值，`duration: 1.5s` |
|
||
| 粘性滚动 (Sticky Scroll) | 滚动叙事布局 | `position: sticky; top: 0` 图片固定，文字滚动切换 |
|
||
|
||
### 9.2 微交互
|
||
|
||
| 元素 | 效果 |
|
||
|------|------|
|
||
| 按钮 Hover | `brightness(1.1)` + 微微上浮 `translateY(-2px)` |
|
||
| 按钮 Active | `transform: scale(0.96)` |
|
||
| 卡片 Hover | 微阴影 `0 8px 32px rgba(0,0,0,0.08)` + `translateY(-4px)` |
|
||
| 文字链接 Hover | 下划线展开动画（`width: 0 → 100%`） |
|
||
| 图片 Hover | 微放大 `transform: scale(1.02)`，`overflow: hidden` 裁切 |
|
||
| 导航栏滚动 | 透明 → 毛玻璃背景过渡 |
|
||
|
||
### 9.3 动效原则
|
||
|
||
- **克制使用**: 动效服务于内容，不喧宾夺主
|
||
- **统一缓动**: 全站使用 `cubic-bezier(0.16, 1, 0.3, 1)`（ease-out-expo）作为主缓动函数
|
||
- **时长规范**: 微交互 200-300ms，区块动效 600-800ms，计数动画 1500ms
|
||
- **移动端精简**: 移动端关闭视差和粘性滚动，保留渐入动效
|
||
- **尊重 prefers-reduced-motion**: 用户开启"减少动效"偏好时，关闭所有非必要动画
|
||
|
||
---
|
||
|
||
## 10. 设计与实现对接
|
||
|
||
### 10.1 UnoCSS 主题映射
|
||
|
||
上述设计 Token 需要在 `uno.config.ts` 中映射为 UnoCSS 主题变量：
|
||
|
||
```ts
|
||
// uno.config.ts theme 示例
|
||
theme: {
|
||
colors: {
|
||
brand: '#00fff6',
|
||
'brand-dark': '#008c87',
|
||
canvas: '#ffffff',
|
||
'canvas-alt': '#f5f5f7',
|
||
'canvas-dark': '#0a0a0f',
|
||
'surface-dark': '#14141a',
|
||
ink: '#1d1d1f',
|
||
'ink-secondary': '#6e6e73',
|
||
'ink-on-dark': '#ffffff',
|
||
'ink-secondary-on-dark': '#a0a0a8',
|
||
},
|
||
fontSize: {
|
||
'hero-display': ['72px', { lineHeight: '1.05', letterSpacing: '-0.03em', fontWeight: '700' }],
|
||
'display-lg': ['56px', { lineHeight: '1.08', letterSpacing: '-0.02em', fontWeight: '700' }],
|
||
// ...其余字号映射
|
||
},
|
||
}
|
||
```
|
||
|
||
### 10.2 Section 组件架构
|
||
|
||
```
|
||
PageBanner → 非首页路由通用顶部横幅（Page Hero）
|
||
|
||
SectionBlock (基础区块容器)
|
||
├── SectionHero → 布局 1/2
|
||
├── SectionSplit → 布局 3/4
|
||
├── SectionGrid → 布局 5
|
||
├── SectionSpec → 布局 6
|
||
├── SectionVideo → 布局 7
|
||
├── SectionNarrative → 布局 8
|
||
└── SectionCTA → 布局 9
|
||
|
||
ProductGrid → 产品列表页专用网格组件
|
||
NewsCardGrid → 新闻列表页卡片网格（可复用）
|
||
NewsArticle → 新闻详情页固定排版组件（富文本渲染）
|
||
```
|
||
|
||
**组件职责说明：**
|
||
|
||
- **PageBanner**: 接收路由信息，自动映射标题/副标题/背景图，渲染非首页路由顶部横幅
|
||
- **SectionBlock**: 根据 CMS 配置的 `layout_type` 渲染对应布局，根据 `theme` 切换浅色/深色变量
|
||
- **ProductGrid**: 接收产品数组，渲染 3×N 网格，卡片点击跳转详情页
|
||
- **NewsCardGrid**: 接收新闻数组，渲染 3×N 网格，卡片点击跳转详情页
|
||
- **NewsArticle**: 接收 CMS 富文本内容，渲染统一排版的文章页
|
||
|
||
### 10.3 CMS 数据结构示例
|
||
|
||
```json
|
||
{
|
||
"page": "home",
|
||
"sections": [
|
||
{
|
||
"id": "hero-1",
|
||
"layout_type": "hero_centered",
|
||
"theme": "dark",
|
||
"background_type": "image",
|
||
"background_value": "/images/hero/product-hero.jpg",
|
||
"overline": "LUXSIN AUDIO",
|
||
"title": "聆听，本该如此",
|
||
"subtitle": "高保真音频设备，为真实还原每一个音符而生",
|
||
"cta_primary": { "label": "探索产品", "link": "/products" },
|
||
"cta_secondary": { "label": "了解更多", "link": "/about" }
|
||
},
|
||
{
|
||
"id": "spec-1",
|
||
"layout_type": "spec_showcase",
|
||
"theme": "light",
|
||
"background_type": "image",
|
||
"background_value": "/images/products/dac-x8-main.jpg",
|
||
"title": "旗舰级解码性能",
|
||
"spec_items": [
|
||
{ "value": "384", "unit": "kHz", "label": "最高采样率" },
|
||
{ "value": "0.0003", "unit": "%", "label": "总谐波失真" },
|
||
{ "value": "130", "unit": "dB", "label": "动态范围" }
|
||
],
|
||
"cta_primary": { "label": "查看技术参数", "link": "/products/dac-x8" }
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
**产品列表页 CMS 数据结构示例：**
|
||
|
||
```json
|
||
{
|
||
"page": "products",
|
||
"page_banner": {
|
||
"title": "产品中心",
|
||
"subtitle": "探索高保真音频设备，寻找您的理想之声",
|
||
"overline": "LUXSIN PRODUCTS",
|
||
"background_image": "/images/banners/products-banner.jpg"
|
||
},
|
||
"product_series": [
|
||
{
|
||
"series_name": "DMP 流媒体系列",
|
||
"series_subtitle": "数字流媒体播放与系统控制中枢",
|
||
"products": [
|
||
{
|
||
"id": "dmp-a8",
|
||
"slug": "dmp-a8",
|
||
"name": "DMP-A8",
|
||
"summary": "高保真流媒体播放解码一体机",
|
||
"image": "/images/products/dmp-a8.jpg"
|
||
},
|
||
{
|
||
"id": "dmp-a6",
|
||
"slug": "dmp-a6",
|
||
"name": "DMP-A6",
|
||
"summary": "紧凑型流媒体播放器",
|
||
"image": "/images/products/dmp-a6.jpg"
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
**新闻列表页 CMS 数据结构示例：**
|
||
|
||
```json
|
||
{
|
||
"page": "news",
|
||
"page_banner": {
|
||
"title": "新闻中心",
|
||
"subtitle": "获取乐笙最新资讯与行业动态",
|
||
"background_image": "/images/banners/news-banner.jpg"
|
||
},
|
||
"articles": [
|
||
{
|
||
"id": "news-001",
|
||
"slug": "new-product-launch",
|
||
"title": "乐笙发布全新旗舰解码器 DAC-X8",
|
||
"summary": "DAC-X8 采用最新解码芯片，支持 768kHz/32bit 采样率...",
|
||
"cover_image": "/images/news/news-001.jpg",
|
||
"published_at": "2026-07-20",
|
||
"category": "新品发布"
|
||
}
|
||
],
|
||
"pagination": {
|
||
"current_page": 1,
|
||
"total_pages": 5,
|
||
"per_page": 9
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 附录 A：与参考网站的风格对照
|
||
|
||
| 特性 | Apple | BMW M | 理想/小米 | Eversolo | **Luxsin** |
|
||
|------|-------|-------|---------|---------|-----------|
|
||
| 主色调 | 明暗交替 | 纯黑 | 浅色为主 | 深色为主 | **浅色为主+深色交替** |
|
||
| 品牌色 | #0066cc 蓝 | 三色条纹 | 多色 | 蓝绿色调 | **#00fff6 Cyan** |
|
||
| 标题字重 | 600 | 700 | 600-700 | 600 | **600-700** |
|
||
| 按钮形状 | 全圆胶囊 | 直角矩形 | 圆角矩形 | 圆角矩形 | **全圆胶囊** |
|
||
| 内容密度 | 极低 | 低 | 中 | 中低 | **中低** |
|
||
| 摄影风格 | 棚拍+阴影 | 赛道实拍 | 场景实拍 | 产品棚拍 | **棚拍+场景** |
|
||
| 区块高度 | ~100vh | ~100vh | 100vh | ~80vh | **80-100vh** |
|
||
| 动效程度 | 极少 | 少 | 中等 | 少 | **中等偏少** |
|
||
|
||
## 附录 B：品牌色对比度验证
|
||
|
||
| 前景色 | 背景色 | 对比度 | WCAG AA (正文) | WCAG AA (大文字) | 用途 |
|
||
|--------|--------|--------|---------------|-----------------|------|
|
||
| `#00fff6` | `#0a0a0f` (深色区块) | 13.2:1 | ✅ | ✅ | 深色区块交互色 |
|
||
| `#008c87` | `#ffffff` (浅色区块) | 4.6:1 | ✅ | ✅ | 浅色区块文字链接 |
|
||
| `#00fff6` | `#ffffff` (浅色区块) | 1.4:1 | ❌ | ❌ | 禁止使用 |
|
||
| `#ffffff` | `#0a0a0f` (深色区块) | 19.3:1 | ✅ | ✅ | 深色区块正文 |
|
||
| `#1d1d1f` | `#ffffff` (浅色区块) | 16.1:1 | ✅ | ✅ | 浅色区块正文 |
|