Landing Page (首页) UI 设计规范

更新时间: 2026-02-03 页面路径: workbench/NextUI.Workbench.Server/Pages/Index.cshtml 技术栈: ASP.NET Core Razor Pages (非 Blazor)

1. 页面概述

Landing Page 是 NextUI 官网的首页，采用现代化的分屏布局设计，左侧展示产品信息和特性标签，右侧展示大型抽象 UI 插图。页面使用固定的毛玻璃效果 Header 和 Footer，内容区域可滚动穿透。

技术说明: 此页面使用 Razor Pages 实现（服务端渲染），而非 Blazor 组件。因此无法使用 Sx* 组件，但样式必须使用 NextUI Design Tokens 以保持视觉一致性。

2. 页面结构

┌─────────────────────────────────────────────────────────────────────┐
│                    Header (Fixed + Glass Blur)                       │
│  [Logo] [Nav: 文档 | 组件] [Actions: 语言 | 主题 | 登录]             │
├─────────────────────────────────────────────────────────────────────┤
│                                                                      │
│  ┌─────────────────────────┬───────────────────────────────────┐    │
│  │                         │                                   │    │
│  │      LEFT: Content      │     RIGHT: Illustration           │    │
│  │         (50%)           │           (50%)                   │    │
│  │                         │                                   │    │
│  │   NextUI for Blazor     │    ┌─────────────────────────┐   │    │
│  │   企业级 Blazor UI...    │    │   ┌────────┬──────────┐ │   │    │
│  │                         │    │   │ Card 1 │  Card 2  │ │   │    │
│  │   [快速开始] [浏览组件]   │    │   │ (表单) │  (图表)  │ │   │    │
│  │                         │    │   └────────┴──────────┘ │   │    │
│  │   ╭──────╮ ╭──────╮     │    │   ┌────────┬──────────┐ │   │    │
│  │   │Design│ │ 高性能│     │    │   │ Card 3 │  Card 4  │ │   │    │
│  │   ╰──────╯ ╰──────╯     │    │   │ (输入) │  (列表)  │ │   │    │
│  │   ╭──────╮ ╭──────╮     │    │   └────────┴──────────┘ │   │    │
│  │   │国际化│ │ 100+ │     │    └─────────────────────────┘   │    │
│  │   ╰──────╯ ╰──────╯     │              SVG 插图             │    │
│  │                         │                                   │    │
│  └─────────────────────────┴───────────────────────────────────┘    │
│                                                                      │
├─────────────────────────────────────────────────────────────────────┤
│                    Footer (Fixed + Glass Blur)                       │
│          NextUI © 2026  ·  GitHub · 文档 · 组件                      │
└─────────────────────────────────────────────────────────────────────┘

3. 设计理念

3.1 视觉风格

• 分屏布局: 左右 50/50 分割，内容与插图平衡
• 毛玻璃效果: Header 和 Footer 使用 backdrop-filter: blur(12px) 实现半透明模糊
• 渐变背景: 微妙的三色渐变 (蓝→紫→粉)，增加深度感
• 轻量感: 大量使用半透明白色和轻微阴影，营造轻盈现代感

3.2 颜色系统

4. 组件组成

4.1 布局文件

4.2 样式文件

5. Header 规格

5.1 样式规格

5.2 导航链接

5.3 操作按钮

6. 分屏布局 (Split Layout)

6.1 结构

<div class="landing-container">
    <div class="landing-split">
        <div class="landing-content"><!-- 左侧内容 --></div>
        <div class="landing-illustration"><!-- 右侧插图 --></div>
    </div>
</div>

6.2 左侧内容区 (landing-content)

6.3 右侧插图区 (landing-illustration)

7. Hero Section 规格

7.1 内容

7.2 标题样式

7.3 副标题样式

7.4 按钮样式

Hover 效果:

• transform: translateY(-2px) 上浮
• box-shadow: 0 4px 12px rgba(0,0,0,0.1) 阴影

8. 特性标签 (Feature Tags)

8.1 设计风格

特性不再使用卡片，而是使用紧凑的胶囊标签形式，带有 SVG 线条图标。

8.2 特性列表

8.3 标签样式

Hover 效果:

• 背景变为 white
• 添加轻微阴影 box-shadow: 0 2px 8px rgba(0,0,0,0.06)

9. SVG 插图规格

9.1 概述

右侧展示一个大型 SVG 插图，包含多个模拟 UI 组件的图形元素，展示产品能力。

9.2 插图内容

9.3 配色

10. Footer 规格

10.1 样式规格

10.2 内容

11. 响应式断点

11.1 断点定义

11.2 响应式变化

11.3 平板/移动端布局

┌────────────────────────────┐
│          Header            │
├────────────────────────────┤
│                            │
│   NextUI for Blazor        │
│   (居中对齐)                │
│                            │
│   [快速开始] [浏览组件]      │
│                            │
│   ╭──────╮ ╭──────╮        │
│   │ Tag  │ │ Tag  │ ...    │
│   ╰──────╯ ╰──────╯        │
│                            │
├────────────────────────────┤
│                            │
│       SVG 插图 (50vh)       │
│                            │
├────────────────────────────┤
│          Footer            │
└────────────────────────────┘

12. 暗色主题

12.1 变化

13. Design Token 使用统计

13.1 颜色 Tokens

13.2 间距 Tokens

13.3 其他 Tokens

13.4 CSS 变量别名

由于 Token 命名差异，在 static-pages.css 中定义了以下别名：

--sx-colorBrandBackground: var(--sx-colorBrandBackground1);
--sx-colorBrandBackgroundHover: var(--sx-colorBrandBackground2);
--sx-colorNeutralForegroundOnBrand: var(--sx-colorOnBrand);
--sx-spacingHorizontalS: var(--sx-spacing-sm);
/* ... 更多别名 */

14. 规范合规检查

14.1 组件使用

合规说明: 此页面是 Razor Pages 而非 Blazor，属于规范的豁免情况。

14.2 样式检查

14.3 例外说明

15. 典型使用场景 (Use Cases)

15.1 UC-1: 访客首次访问

步骤:

1. 用户访问 /
2. 看到分屏布局：左侧产品介绍，右侧 UI 插图
3. 浏览特性标签了解产品能力
4. 点击 "快速开始"

预期结果: 跳转到 /docs/getting-started

15.2 UC-2: 访客浏览组件

步骤:

1. 用户访问 /
2. 点击 "浏览组件" 或导航栏 "组件"

预期结果: 跳转到 /components

15.3 UC-3: 移动端访问

步骤:

1. 用户在移动设备访问 /

预期结果:

• 导航栏隐藏
• 布局变为垂直堆叠（内容在上，插图在下）
• 内容居中对齐
• 特性标签自动换行

16. 测试检查点

16.1 必须测试 (E2E)

• 首页正确加载，显示分屏布局
• 左侧显示标题、副标题、CTA 按钮、特性标签
• 右侧显示 SVG 插图
• "快速开始" 按钮跳转到 /docs/getting-started
• "浏览组件" 按钮跳转到 /components
• 导航栏 "文档" 链接正常
• 导航栏 "组件" 链接正常
• "登录" 按钮跳转到认证页面
• Header/Footer 固定且有毛玻璃效果

16.2 响应式测试

• 桌面端 (>1024px) 显示分屏布局
• 平板端 (768-1024px) 垂直堆叠，内容居中
• 移动端 (<768px) 导航隐藏，紧凑布局

16.3 主题测试

• 亮色主题下颜色正确 (默认)
• 暗色主题下颜色正确 (需实现主题切换)

17. 已知问题 / TODO

18. 变更历史