官网设计规范

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

1. 设计如何形成

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

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

2. 标题与文字

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

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

标题按可用宽度自然换行，不在内容中手工插入换行。短词组尽量保持完整，避免一个汉字单独成行。合作区域标题也使用 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. 间距规范

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

公司相邻模块各贡献 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 会自动执行同步。设计变量发生变化时应一起更新此文档与示例，并核对线上最终效果。