跳到主要内容

Resection.xyz 页面分析文档

文档概述​

本文档对 Resection.xyz 网站的所有页面进行系统性分析，涵盖设计风格与布局结构、色彩搭配与视觉层次、排版与字体选择等审美要素，以及核心功能与交互逻辑、用户流程与操作路径等功能特性，同时评估页面响应式表现与跨设备兼容性。

1. 首页 (Homepage)​

1.1 页面截图​

首页截图

1.2 设计风格与布局结构​

设计理念​

首页采用沉浸式三屏设计，灵感来源于现代高端科技产品发布会页面，营造出电影级的视觉体验。

布局结构​

  • 第一屏：沉浸视界 - 全屏背景轮播 + 品牌标语
  • 第二屏：理念阐述 - 核心理念展示 + 滚动渐变效果
  • 第三屏：功能矩阵 - Bento Grid 布局 + 快速导航入口

设计特点​

  • 极简主义：去除多余装饰，聚焦核心内容
  • 电影感：Ken Burns Effect 营造动态视觉
  • 层次分明：三屏递进，引导用户逐步了解

1.3 色彩搭配与视觉层次​

色彩系统​

  • 主色调：纯白背景 (#FFFFFF) + 深空灰文字 (#1D1D1F)
  • 品牌色：小米橙色 (#FF6700) 作为点缀
  • 功能色：
    • 课程：绿色 (#34C759)
    • 升学：蓝色 (#007AFF)
    • 考公：橙色 (#FF9500)
    • 就业：紫色 (#AF52DE)
    • 编程：青色 (#5AC8FA)

视觉层次​

  1. 背景层：6张精选背景图片轮播，每8秒切换
  2. 内容层：文字和卡片元素，使用毛玻璃效果
  3. 交互层：导航栏、按钮等可交互元素

深色模式​

  • 背景切换为纯黑 (#000000) + 深灰 (#1C1C1E)
  • 文字切换为浅灰 (#F5F5F7)
  • 保持品牌色一致性

1.4 排版与字体选择​

字体系统​

  • 标题字体：Cinzel Decorative（艺术装饰体）+ Noto Serif SC（思源宋体）
  • 正文字体：Inter（现代无衬线）+ 系统字体回退
  • 代码字体：JetBrains Mono（等宽字体）

排版特点​

  • 大标题：使用 Cinzel Decorative 营造高端感
  • 中文标题：使用 Noto Serif SC 提供文学气息
  • 正文：使用 Inter 保证可读性
  • 行高：1.6（正文）/ 1.25（标题）

1.5 核心功能与交互逻辑​

核心功能​

  1. 背景轮播系统

    • 6张背景图片随机轮播
    • Ken Burns Effect（缓慢缩放移动）
    • 2秒淡入淡出过渡
    • 预加载机制防止闪烁

  2. 滚动磁吸系统

    • 智能检测滚动行为
    • 速度检测避免快速滚动时触发
    • 惯性处理等待滚动减弱
    • 响应式阈值配置

  3. 粒子背景效果

    • 动态粒子连线
    • 鼠标交互响应
    • 性能优化不影响加载

交互逻辑​

  • 首次进入：展示第一屏沉浸视界
  • 向下滚动：自动吸附到第二屏理念阐述
  • 继续滚动：展示第三屏功能矩阵
  • 点击卡片：快速跳转到对应模块

1.6 用户流程与操作路径​

典型用户流程​

  1. 用户访问网站 → 观看首页第一屏
  2. 向下滚动 → 自动吸附到第二屏
  3. 继续滚动 → 查看功能矩阵
  4. 点击感兴趣的功能卡片 → 跳转到对应页面

操作路径​

  • 快速导航：功能矩阵提供6个主要入口
  • 返回顶部：右下角返回顶部按钮
  • 导航栏：顶部固定导航栏随时可用

1.7 响应式表现与跨设备兼容性​

断点设置​

  • 移动端：< 768px
  • 平板端：768px - 1024px
  • 桌面端：> 1024px

响应式特性​

  • 移动端：

    • 导航栏折叠为汉堡菜单
    • 背景图片自适应屏幕尺寸
    • 功能矩阵单列布局
    • 字体大小自适应

  • 平板端：

    • 导航栏保持展开
    • 功能矩阵双列布局
    • 适中的字体大小

  • 桌面端：

    • 完整导航栏
    • 功能矩阵三列布局
    • 大字体提升可读性

兼容性​

  • 支持现代浏览器（Chrome、Firefox、Safari、Edge）
  • 支持深色模式切换
  • 支持触摸设备交互

2. 课程页面 (Courses)​

2.1 页面截图​

课程页面截图

2.2 设计风格与布局结构​

设计理念​

课程页面采用卡片式布局，清晰的分类导航，便于用户快速找到所需课程资源。

布局结构​

  • 顶部：页面标题 + 简短描述
  • 主体：6个课程分类卡片
    • 公共基础课
    • 专业基础课
    • 专业课
    • 实践课程
    • 设计课程
    • 公共选修课
  • 侧边栏：课程目录导航

设计特点​

  • 模块化：每个课程分类独立成卡片
  • 层次清晰：分类明确，一目了然
  • 橙色主题：使用小米橙色作为主色调

2.3 色彩搭配与视觉层次​

色彩系统​

  • 主色调：小米橙色 (#FF6700)
  • 背景色：纯白 (#FFFFFF) + 浅灰 (#F5F5F7)
  • 卡片背景：毛玻璃效果 (rgba(255, 255, 255, 0.7))
  • 悬停效果：橙色光晕 + 阴影增强

视觉层次​

  1. 背景层：橙色渐变光晕（左上角和右下角）
  2. 卡片层：毛玻璃卡片 + 悬停动效
  3. 内容层：课程分类标题 + 描述

2.4 排版与字体选择​

字体系统​

  • 标题：Noto Serif SC（思源宋体）
  • 正文：Inter（现代无衬线）
  • 代码：JetBrains Mono

排版特点​

  • 大标题：使用思源宋体营造学术氛围
  • 卡片标题：中等字号，清晰可读
  • 描述文字：小字号，辅助说明

2.5 核心功能与交互逻辑​

核心功能​

  1. 课程分类导航

    • 6个主要课程分类
    • 每个分类独立卡片
    • 点击进入详细课程列表

  2. 课程卡片悬停效果

    • 卡片上浮 4px
    • 橙色边框高亮
    • 阴影增强
    • 缩放 1.01x

  3. 侧边栏导航

    • 显示当前页面位置
    • 快速跳转到其他课程分类

交互逻辑​

  • 鼠标悬停：卡片上浮 + 边框高亮
  • 点击卡片：跳转到对应课程列表
  • 侧边栏点击：快速导航

2.6 用户流程与操作路径​

典型用户流程​

  1. 用户进入课程页面 → 查看6个课程分类
  2. 悬停查看分类描述 → 选择感兴趣的分类
  3. 点击分类卡片 → 进入详细课程列表
  4. 浏览课程资料 → 下载或查看内容

操作路径​

  • 分类导航：6个卡片快速入口
  • 侧边栏：课程目录导航
  • 面包屑：显示当前位置

2.7 响应式表现与跨设备兼容性​

响应式特性​

  • 移动端：

    • 单列布局
    • 卡片全宽显示
    • 侧边栏折叠

  • 平板端：

    • 双列布局
    • 侧边栏可展开

  • 桌面端：

    • 三列布局
    • 侧边栏固定显示

兼容性​

  • 支持现代浏览器
  • 支持深色模式
  • 支持触摸交互

3. 升学页面 (Admission)​

3.1 页面截图​

升学页面截图

3.2 设计风格与布局结构​

设计理念​

升学页面采用模块化设计，清晰展示考研、保研、留学三条升学路径，帮助学生规划未来。

布局结构​

  • 顶部：页面标题 + 简短描述
  • 主体：3个升学路径模块
    • 考研（包含英语、数学、政治、专业课）
    • 保研
    • 留学
  • 侧边栏：升学目录导航

设计特点​

  • 路径清晰：三条升学路径一目了然
  • 层次分明：考研模块下包含4个子模块
  • 蓝色主题：使用蓝色作为主色调

3.3 色彩搭配与视觉层次​

色彩系统​

  • 主色调：蓝色 (#007AFF)
  • 背景色：纯白 (#FFFFFF) + 浅灰 (#F5F5F7)
  • 卡片背景：毛玻璃效果
  • 悬停效果：蓝色光晕 + 阴影增强

视觉层次​

  1. 背景层：蓝色渐变光晕
  2. 卡片层：毛玻璃卡片
  3. 内容层：升学路径标题 + 描述

3.4 排版与字体选择​

字体系统​

  • 标题：Noto Serif SC
  • 正文：Inter
  • 代码：JetBrains Mono

排版特点​

  • 大标题：思源宋体营造学术氛围
  • 模块标题：清晰醒目
  • 描述文字：简洁明了

3.5 核心功能与交互逻辑​

核心功能​

  1. 升学路径导航

    • 考研、保研、留学三大模块
    • 考研模块下包含4个子模块
    • 点击进入详细资料

  2. 卡片悬停效果

    • 卡片上浮
    • 蓝色边框高亮
    • 阴影增强

  3. 侧边栏导航

    • 显示当前页面位置
    • 快速跳转

交互逻辑​

  • 鼠标悬停：卡片上浮 + 边框高亮
  • 点击卡片：跳转到对应资料
  • 侧边栏点击：快速导航

3.6 用户流程与操作路径​

典型用户流程​

  1. 用户进入升学页面 → 查看三条升学路径
  2. 选择升学路径（如考研）→ 查看4个子模块
  3. 选择子模块（如英语）→ 进入详细资料
  4. 浏览备考资料 → 下载或查看

操作路径​

  • 路径导航：3个主要模块
  • 子模块导航：考研模块下的4个子模块
  • 侧边栏：升学目录导航

3.7 响应式表现与跨设备兼容性​

响应式特性​

  • 移动端：单列布局
  • 平板端：双列布局
  • 桌面端：三列布局

兼容性​

  • 支持现代浏览器
  • 支持深色模式
  • 支持触摸交互

4. 考公页面 (CSE)​

4.1 页面截图​

考公页面截图

4.2 设计风格与布局结构​

设计理念​

考公页面采用简洁实用设计，聚焦公务员考试备考资源，提供政策解读、备考资料、面试技巧等内容。

布局结构​

  • 顶部：页面标题 + 简短描述
  • 主体：考公相关内容模块
    • 经验分享
    • 指南
  • 侧边栏：考公目录导航

设计特点​

  • 简洁实用：去除多余装饰，聚焦内容
  • 橙色主题：使用橙色作为主色调
  • 内容导向：以内容展示为主

4.3 色彩搭配与视觉层次​

色彩系统​

  • 主色调：橙色 (#FF9500)
  • 背景色：纯白 + 浅灰
  • 卡片背景：毛玻璃效果

视觉层次​

  1. 背景层：橙色渐变光晕
  2. 内容层：考公资料展示

4.4 排版与字体选择​

字体系统​

  • 标题：Noto Serif SC
  • 正文：Inter
  • 代码：JetBrains Mono

排版特点​

  • 大标题：思源宋体
  • 正文：清晰易读

4.5 核心功能与交互逻辑​

核心功能​

  1. 考公资料展示

    • 经验分享
    • 指南

  2. 侧边栏导航

    • 显示当前页面位置
    • 快速跳转

交互逻辑​

  • 点击链接：跳转到对应内容
  • 侧边栏点击：快速导航

4.6 用户流程与操作路径​

典型用户流程​

  1. 用户进入考公页面 → 查看考公资料
  2. 选择感兴趣的内容 → 查看详细信息
  3. 浏览备考资料 → 下载或查看

操作路径​

  • 内容导航：经验分享、指南
  • 侧边栏：考公目录导航

4.7 响应式表现与跨设备兼容性​

响应式特性​

  • 移动端：单列布局
  • 平板端：双列布局
  • 桌面端：三列布局

兼容性​

  • 支持现代浏览器
  • 支持深色模式
  • 支持触摸交互

5. 就业页面 (Employment)​

5.1 页面截图​

就业页面截图

5.2 设计风格与布局结构​

设计理念​

就业页面采用职业导向设计，提供行业分析、求职技巧、简历制作、面试经验等内容，帮助学生规划职业发展。

布局结构​

  • 顶部：页面标题 + 简短描述
  • 主体：就业相关内容模块
    • 简历
    • 面试
  • 侧边栏：就业目录导航

设计特点​

  • 职业导向：聚焦求职和职业发展
  • 紫色主题：使用紫色作为主色调
  • 内容导向：以内容展示为主

5.3 色彩搭配与视觉层次​

色彩系统​

  • 主色调：紫色 (#AF52DE)
  • 背景色：纯白 + 浅灰
  • 卡片背景：毛玻璃效果

视觉层次​

  1. 背景层：紫色渐变光晕
  2. 内容层：就业资料展示

5.4 排版与字体选择​

字体系统​

  • 标题：Noto Serif SC
  • 正文：Inter
  • 代码：JetBrains Mono

排版特点​

  • 大标题：思源宋体
  • 正文：清晰易读

5.5 核心功能与交互逻辑​

核心功能​

  1. 就业资料展示

    • 简历制作
    • 面试经验

  2. 侧边栏导航

    • 显示当前页面位置
    • 快速跳转

交互逻辑​

  • 点击链接：跳转到对应内容
  • 侧边栏点击：快速导航

5.6 用户流程与操作路径​

典型用户流程​

  1. 用户进入就业页面 → 查看就业资料
  2. 选择感兴趣的内容 → 查看详细信息
  3. 浏览求职资料 → 下载或查看

操作路径​

  • 内容导航：简历、面试
  • 侧边栏：就业目录导航

5.7 响应式表现与跨设备兼容性​

响应式特性​

  • 移动端：单列布局
  • 平板端：双列布局
  • 桌面端：三列布局

兼容性​

  • 支持现代浏览器
  • 支持深色模式
  • 支持触摸交互

6. 编程页面 (Programming)​

6.1 页面截图​

编程页面截图

6.2 设计风格与布局结构​

设计理念​

编程页面采用技术导向设计，提供Python、WebGIS等编程学习资源，帮助学生提升编程能力。

布局结构​

  • 顶部：页面标题 + 简短描述
  • 主体：编程相关内容模块
    • Python
    • WebGIS
  • 侧边栏：编程目录导航

设计特点​

  • 技术导向：聚焦编程学习
  • 青色主题：使用青色作为主色调
  • 内容导向：以内容展示为主

6.3 色彩搭配与视觉层次​

色彩系统​

  • 主色调：青色 (#5AC8FA)
  • 背景色：纯白 + 浅灰
  • 卡片背景：毛玻璃效果

视觉层次​

  1. 背景层：青色渐变光晕
  2. 内容层：编程资料展示

6.4 排版与字体选择​

字体系统​

  • 标题：Noto Serif SC
  • 正文：Inter
  • 代码：JetBrains Mono

排版特点​

  • 大标题：思源宋体
  • 正文：清晰易读
  • 代码块：JetBrains Mono等宽字体

6.5 核心功能与交互逻辑​

核心功能​

  1. 编程资料展示

    • Python教程
    • WebGIS开发

  2. 侧边栏导航

    • 显示当前页面位置
    • 快速跳转

交互逻辑​

  • 点击链接：跳转到对应内容
  • 侧边栏点击：快速导航

6.6 用户流程与操作路径​

典型用户流程​

  1. 用户进入编程页面 → 查看编程资料
  2. 选择感兴趣的内容 → 查看详细信息
  3. 浏览编程教程 → 学习编程知识

操作路径​

  • 内容导航：Python、WebGIS
  • 侧边栏：编程目录导航

6.7 响应式表现与跨设备兼容性​

响应式特性​

  • 移动端：单列布局
  • 平板端：双列布局
  • 桌面端：三列布局

兼容性​

  • 支持现代浏览器
  • 支持深色模式
  • 支持触摸交互

7. 地图页面 (Maps)​

7.1 页面截图​

地图页面截图

7.2 设计风格与布局结构​

设计理念​

地图页面采用实用工具设计，提供大学城校区地图，帮助学生熟悉校园环境。

布局结构​

  • 顶部：页面标题
  • 主体：地图图片展示
  • 底部：地图说明

设计特点​

  • 实用工具：聚焦地图展示
  • 简洁设计：去除多余装饰
  • 图片展示：使用静态地图图片

7.3 色彩搭配与视觉层次​

色彩系统​

  • 主色调：默认主题色
  • 背景色：纯白 + 浅灰
  • 地图图片：彩色地图

视觉层次​

  1. 背景层：纯白背景
  2. 内容层：地图图片展示

7.4 排版与字体选择​

字体系统​

  • 标题：Noto Serif SC
  • 正文：Inter

排版特点​

  • 大标题：思源宋体
  • 正文：清晰易读

7.5 核心功能与交互逻辑​

核心功能​

  1. 地图展示
    • 大学城校区地图
    • 静态图片展示

交互逻辑​

  • 查看地图：直接展示地图图片

7.6 用户流程与操作路径​

典型用户流程​

  1. 用户进入地图页面 → 查看校区地图
  2. 浏览地图 → 熟悉校园环境

操作路径​

  • 地图查看：直接展示

7.7 响应式表现与跨设备兼容性​

响应式特性​

  • 移动端：地图自适应屏幕
  • 平板端：地图自适应屏幕
  • 桌面端：地图自适应屏幕

兼容性​

  • 支持现代浏览器
  • 支持深色模式
  • 支持触摸交互

8. 博客页面 (Blog)​

8.1 页面截图​

博客页面截图

8.2 设计风格与布局结构​

设计理念​

博客页面采用内容导向设计，展示学长寄语，提供经验分享和人生感悟。

布局结构​

  • 顶部：页面标题 "学长寄语"
  • 主体：博客文章列表
    • 文章卡片
    • 文章标题
    • 文章摘要
    • 阅读时间
    • 发布日期
  • 侧边栏：博客目录导航

设计特点​

  • 内容导向：聚焦文章内容
  • 卡片式布局：每篇文章独立卡片
  • 阅读时间：显示预计阅读时间

8.3 色彩搭配与视觉层次​

色彩系统​

  • 主色调：默认主题色
  • 背景色：纯白 + 浅灰
  • 卡片背景：毛玻璃效果

视觉层次​

  1. 背景层：纯白背景
  2. 卡片层：文章卡片
  3. 内容层：文章标题 + 摘要

8.4 排版与字体选择​

字体系统​

  • 标题：Noto Serif SC
  • 正文：Inter
  • 代码：JetBrains Mono

排版特点​

  • 大标题：思源宋体
  • 文章标题：中等字号，清晰醒目
  • 文章摘要：小字号，辅助说明

8.5 核心功能与交互逻辑​

核心功能​

  1. 博客文章展示

    • 文章列表
    • 文章卡片
    • 阅读时间显示
    • 发布日期显示

  2. 侧边栏导航

    • 显示当前页面位置
    • 快速跳转

交互逻辑​

  • 点击文章：跳转到文章详情页
  • 侧边栏点击：快速导航

8.6 用户流程与操作路径​

典型用户流程​

  1. 用户进入博客页面 → 查看学长寄语列表
  2. 选择感兴趣的文章 → 查看文章详情
  3. 阅读文章 → 获取经验和感悟

操作路径​

  • 文章导航：文章列表
  • 侧边栏：博客目录导航

8.7 响应式表现与跨设备兼容性​

响应式特性​

  • 移动端：单列布局
  • 平板端：双列布局
  • 桌面端：三列布局

兼容性​

  • 支持现代浏览器
  • 支持深色模式
  • 支持触摸交互

9. 全局设计系统总结​

9.1 设计一致性​

色彩系统​

  • 统一主题色：每个模块使用不同的主题色，但保持饱和度和亮度一致
  • 深色模式：全局支持深色模式，保持视觉一致性
  • 毛玻璃效果：所有卡片使用毛玻璃效果，营造现代感

字体系统​

  • 统一字体栈：全局使用相同的字体栈
  • 标题字体：Cinzel Decorative + Noto Serif SC
  • 正文字体：Inter + 系统字体
  • 代码字体：JetBrains Mono

交互系统​

  • 统一动效：使用 iOS 风格贝塞尔曲线
  • 悬停效果：卡片悬停上浮 + 阴影增强
  • 过渡动画：全局使用 0.4s 过渡时间

9.2 导航系统​

顶部导航栏​

  • 固定定位：始终固定在页面顶部
  • 毛玻璃效果：背景模糊 + 半透明
  • 彩色主题：每个导航项使用不同颜色
  • 响应式：移动端折叠为汉堡菜单

侧边栏导航​

  • 固定定位：桌面端固定在左侧
  • 目录结构：显示当前页面目录
  • 快速跳转：点击快速跳转到对应章节
  • 响应式：移动端可展开/折叠

返回顶部按钮​

  • 固定定位：固定在右下角
  • 显示条件：滚动超过一定距离后显示
  • 平滑滚动：点击平滑滚动到顶部

9.3 响应式设计​

断点设置​

  • 移动端：< 768px
  • 平板端：768px - 1024px
  • 桌面端：> 1024px

响应式特性​

  • 布局自适应：根据屏幕尺寸调整布局
  • 字体自适应：根据屏幕尺寸调整字体大小
  • 导航自适应：移动端折叠为汉堡菜单
  • 图片自适应：图片自适应屏幕尺寸

9.4 性能优化​

图片优化​

  • 预加载机制：背景图片预加载，防止闪烁
  • 懒加载：图片懒加载，减少初始加载时间
  • 格式优化：使用 WebP 格式（如支持）

动画优化​

  • 硬件加速：使用 transform 和 opacity 触发硬件加速
  • 防抖节流：滚动事件使用防抖节流
  • 动画帧：使用 requestAnimationFrame 优化动画

代码优化​

  • 代码分割：使用代码分割减少初始加载体积
  • Tree Shaking：移除未使用的代码
  • 压缩优化：代码压缩减少文件大小

9.5 无障碍访问​

键盘导航​

  • Tab 键：支持 Tab 键导航
  • 焦点管理：清晰的焦点指示
  • 快捷键：支持 Ctrl/Cmd + K 搜索快捷键

屏幕阅读器​

  • 语义化 HTML：使用语义化标签
  • ARIA 标签：添加必要的 ARIA 标签
  • Alt 文本：图片添加 Alt 文本

对比度​

  • 文字对比度：确保文字对比度符合 WCAG 标准
  • 颜色对比度：确保颜色对比度符合 WCAG 标准

10. 总结与建议​

10.1 优点​

  1. 设计统一：全局设计系统一致，视觉体验流畅
  2. 响应式优秀：支持多设备适配，跨设备兼容性好
  3. 交互流畅：动画效果流畅，用户体验良好
  4. 内容丰富：涵盖课程、升学、考公、就业、编程等多个模块
  5. 技术先进：使用 React 19、TypeScript、Framer Motion 等现代技术

10.2 改进建议​

  1. 内容填充：部分页面内容较少，需要填充更多内容
  2. 交互优化：部分交互可以进一步优化，提升用户体验
  3. 性能优化：可以进一步优化性能，提升加载速度
  4. SEO 优化：可以进一步优化 SEO，提升搜索引擎排名
  5. 无障碍访问：可以进一步优化无障碍访问，提升可访问性

10.3 后续规划​

  1. 内容扩展：继续填充各模块内容，提供更丰富的资源
  2. 功能增强：增加更多实用功能，如用户系统、社区功能等
  3. 技术升级：持续升级技术栈，保持技术先进性
  4. 性能优化：持续优化性能，提升用户体验
  5. 社区建设：建立社区，促进用户交流和分享

文档版本：v1.0
最后更新：2026-01-17
作者：Resection.xyz 团队