# Elexvx 官网设计规范

版本：2026-09-06。适用范围：官网首页、研究、活动、最近新闻、产品和公司栏目。所有尺寸均为 CSS px，不是截图中的物理像素。

## 1. 设计如何形成

官网采用黑白文字、统一内容边界和清晰的三级标题。内容列表参考研究型网站的信息组织方式，以图片、标题、分类和日期帮助阅读；首页 Hero 参考通栏宣传画面的构图，以完整背景和居中的文字建立首屏重点。页面使用 Elexvx 自有内容和图片，不直接复制参考网站的品牌元素。

实现顺序是先确定信息层级，再统一宽度和间距，最后处理卡片、主题和响应式。研究、活动、新闻和产品属于一级栏目；栏目内分类是二级筛选导航，不能用主标题字号展示。设计依据来自当前源码与浏览器验收，而不是仅凭截图估算。

## 2. 标题与文字

全站使用本地 Source Han Sans 可变字体，中英文共用字体栈。页面只保留一个 H1；模块标题使用 H2；卡片和模块内小标题使用 H3。语义层级与视觉样式同时保持清晰。

| 用途 | 字号 | 字重 | 行高 | 字间距 |
| --- | --- | --- | --- | --- |
| 主标题 H1 | clamp(36px, 4.8vw, 64px) | 500 | 1.15 | -0.035em |
| 中标题 H2 | clamp(24px, 2.4vw, 32px) | 500 | 1.3 | -0.02em |
| 小标题 H3／卡片标题 | 20px；≤720px 时 18px | 400 | 1.45 | normal |
| 默认正文 | 17px | 400 | 1.47 | normal |
| 图注、表注 | 14px | 400 | 按论文样式 | normal |

clamp 表示字号随屏幕宽度变化，同时有最小值和最大值。不能把主标题理解为所有设备都固定 64px。

| 视口宽度 | H1 | H2 | H3 |
| --- | --- | --- | --- |
| 390px 手机 | 36px | 24px | 18px |
| 793px 平板 | 38.06px | 24px | 20px |
| 1320px 桌面 | 63.36px | 31.68px | 20px |
| 1440px 及以上 | 64px | 32px | 20px |

标题按可用宽度自然换行，不在内容中手工插入换行。短词组尽量保持完整，避免一个汉字单独成行。合作区域标题也使用 H2 的统一尺寸，不能额外写死为 38px。正文、图注与参考文献不应为追求同样大小而失去层级。

## 3. 页面结构与宽度

普通页面最大宽度为 1440px，居中显示。左右内边距在大于 720px 时为 32px，在手机端为 20px。1440px 是包含内边距的容器宽度，因此桌面最大实际内容宽度为 1376px。

列表页从上到下采用：全局导航 → 页面主标题 → 二级分类（有分类时）→ 内容列表 → 页脚。没有分类的数据集合不强行增加空分类栏。主标题的起点、内容的左右边界、分类和网格要对齐。新闻可以采用横向图文条目，但不能因此改变外层容器宽度。

公司与产品详情采用：标题与导语 → 内容模块 → 页脚。长段落拆成有明确主题的模块或卡片。技术介绍应包含架构、技术栈与流程图，并配解释文字；不能只堆技术名称，也不能用部署命令代替产品介绍。

团队成员详情页先展示照片、姓名与职务，再在下方展示个人简历。大于 720px 时简历为两栏，栏间距 40px；手机端为单栏。照片最大宽度 240px；身份区与简历区间距桌面 48px、手机 32px。

研究文章采用目录和正文两栏，桌面目录列宽 180px，正文占剩余空间；手机端转为单列。目录长标题单行省略，隐藏滚动条但保留目录滚动能力。公式使用 KaTeX，图片与图注、表格与表注分别排版，引用跳转到对应参考文献。

## 4. 首页 Hero 的特殊规则

Hero 是明确的通栏例外：背景铺满视口宽度，从 64px 高的导航下方开始，不受 1440px 内容容器限制。无圆角、无边框、无外侧留白。其余首页模块仍遵循统一内容宽度。

桌面 Hero 最小高度使用 clamp(520px, 76svh, 820px)，上下内边距 80px、左右 32px；手机端最小高度 520px，上下 56px、左右 24px。高度允许随内容增长，不能裁掉文字。

背景使用 cover 裁切。标题、描述与可选按钮作为一个整体，默认在画面中水平、垂直居中，文字容器最大宽度 1040px，描述最大宽度 880px。标题与描述间距 24px，描述与可选按钮间距 24px。背景叠加由浅到深的黑色渐变以保证白字可读。

保留重要信息开关：启用且配置标题时展示重要信息，否则展示默认品牌标题、描述与背景；可选链接只在地址和文案都存在时显示。

## 5. 间距规范

以下是当前共享规则和明确的场景值，不代表所有元素都使用相同间距。新增页面应优先复用共享变量，而不是逐页增加补丁。

| 位置 | 桌面／平板 | 手机 ≤720px |
| --- | --- | --- |
| 普通页面左右内边距 | 32px | 20px |
| 列表页顶部进入间距 | 64px | 40px |
| 页面标题到分类／下一内容组 | 32px | 32px |
| 分类到内容列表 | 32px | 32px |
| Hero 标题到描述 | 24px | 24px |
| Hero 内容到可选按钮 | 24px | 24px |
| 公司模块外层上下内边距 | 每侧 24px | 每侧 24px |
| 公司模块标题到卡片 | 24px | 24px |
| 首页活动主图与侧栏 | 24px（桌面双栏） | 转为移动布局 |

公司相邻模块各贡献 24px 外层内边距，因此模块交界处基础间隔是 48px。不要同时给外层 section 和内部容器重复添加大额上下 padding。

通用内容卡片建议使用 24px 间隔、24–32px 内边距；紧凑元信息使用 8–12px 间隔。这是新增模块的推荐值，现有图片网格可以使用响应式间距，不能把推荐值误写成所有组件的实际值。

## 6. 卡片、颜色与图片

默认深色主题使用黑色画布、白色主文字；浅色主题反转为浅色画布与黑色主文字。辅助文字使用中性灰色，颜色由主题变量控制，不在正文中添加装饰性彩色字。图片允许保留本身颜色。

文章卡片展示图片、标题与必要元信息，首页文章卡片和活动列表不展示简介。产品说明卡可以保留产品定位。卡片背景、边框和圆角根据组件用途继承已有样式；Hero 不沿用卡片圆角。

图片默认懒加载并异步解码；首屏 Hero 和品牌标识优先加载。使用稳定的图片比例避免加载时跳动。移动端图表或宽表允许局部横向滚动，不允许整个页面溢出屏幕。

## 7. 如何开发与验收

先确认页面属于列表页、详情页还是首页特殊区域，再选择对应结构。使用共享导航和页脚，将公司子页加入同一份导航数据，使桌面菜单、手机菜单和页脚同步更新。

字号变量位于 src/styles/sections/21-heading-system.css；宽度变量位于 20-page-width.css；字体与基础颜色位于 01-foundation.css，主题覆盖位于 10-theme.css。新增组件通过类名接入共享规则，避免仅凭 H2 标签就假定已经获得统一视觉样式。

至少检查 390px、793px、1320px 与大屏宽度，确认标题层级、边界、换行、主题对比和图片裁切。核对计算后的 font-size、元素边界和页面 scrollWidth；构建通过不能替代视觉检查。

本文件是规范正文的唯一来源。网页展示从本文件生成，下载按钮提供同一份 design.md。修改规范后运行 npm run design:sync；dev 和 build 会自动执行同步。设计变量发生变化时应一起更新此文档与示例，并核对线上最终效果。