audio/admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
e6da74cf01d47253db5b24b93ea1ebd592c61ca4
admin/docs/www/web-design.md
T
eafonyang 99ab6cc4f4 init: 整合项目（dashboard + www + docs）
2026-07-30 11:23:50 +08:00

52 KiB
Raw Blame History

乐笙 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 字体家族

/* 西文 / 拉丁字体栈 */
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 映射：

// 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 用于检测屏幕方向，自动调整布局：

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

/* 全局安全区域变量 */
: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 配置：

<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），图片支持双指缩放
  • 禁用自定义光标: 触摸设备上不显示自定义鼠标光标
/* 横向滑动卡片 */
.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 后台可为同一区块分别上传桌面版和移动版图片
<!-- 图片响应式示例 -->
<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 全屏播放
<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 用法示例：

<!-- 默认（手机）：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 主题变量：

// 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 数据结构示例

{
  "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 数据结构示例：

{
  "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 数据结构示例：

{
  "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 ✅ ✅ 浅色区块正文
Reference in New Issue View Git Blame Copy Permalink