# Elexvx 官网设计规范

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

## 1. 设计如何形成

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

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

## 2. 标题与文字

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

| 用途                | 字号                     | 字重 | 行高 | 字间距   |
| ------------------- | ------------------------ | ---- | ---- | -------- |
| 页面主标题 H1       | clamp(40px, 5vw, 64px)   | 500  | 1.05 | -0.045em |
| 模块标题 H2         | clamp(28px, 2.7vw, 36px) | 500  | 1.25 | -0.025em |
| 小标题 H3／卡片标题 | 20px；≤720px 时 18px     | 500  | 1.35 | normal   |
| 默认正文            | 17px                     | 400  | 1.65 | normal   |
| 页面导语            | 20px；≤720px 时 18px     | 400  | 1.5  | normal   |
| 眉题、图注、表注    | 14px；≤720px 时 13px     | 400  | 1.35 | normal   |

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

| 视口宽度      | H1   | H2      | H3   |
| ------------- | ---- | ------- | ---- |
| 390px 手机    | 40px | 28px    | 18px |
| 793px 平板    | 40px | 28px    | 20px |
| 1320px 桌面   | 64px | 35.64px | 20px |
| 1440px 及以上 | 64px | 36px    | 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、手机 20px，描述与可选按钮间距桌面 32px、手机 24px。背景叠加由浅到深的黑色渐变以保证白字可读。

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

## 5. 间距规范

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

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

公司模块使用统一 section 间距，模块交界处不再叠加重复的大额上下 padding。不要同时给外层 section 和内部容器重复添加同一组垂直间距。

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

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

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

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

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

## 7. 如何开发与验收

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

字号基础变量位于 src/styles/sections/21-heading-system.css，最终全局编辑层位于 24-global-editorial.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 会自动执行同步。设计变量发生变化时应一起更新此文档与示例，并核对线上最终效果。