终末地官网 的整体面貌。这是全套文档里证据最扎实的一篇：结构来自直接观察，数值来自 实测（2026-10-08，2026-10-12 抽查过一遍）。本页只讲官网首页（连同它的子页面与弹窗）；同一域名下的 云游戏页（/cloud）是另一套构建，单独成篇。
官网会随版本改版，尤其是首屏。本页描述的"外壳"相对稳定，"主视觉"每个版本都换。
气质#
一份摊开的工业画册。 白纸、黑字、大图、一处黄。
- 以白为主，深色版块只在世界观与影像两处出现。
- 黄色极少：当前导航项、一条色带、几个按钮。
- 几乎全是直角——按钮、页签只有 2 – 6px、看不大出来的微圆角；圆形用于头像和翻页钮，胶囊用于分页条、导航器和切换器。云游戏页不同：按钮组件一律是胶囊，浮层 8px 圆角；组件库仍取直角，见 云游戏页。
- 大量留白，大图大字，信息密度低。
- 装饰是印刷语气的：斜纹、点阵、注册色条、线稿。
和游戏界面相比，官网更克制、更"平面设计"。组件库的默认主题以它为准。
骨架#
| 部件 | 说明 |
|---|---|
| 导航轨 | 左缘通高，宽 7.5rem，白底；只放图标 |
| 主舞台 | 其余全部宽度；单页长滚动，每个版块约一屏高 |
| 停靠坞 | 首屏底部靠右的深色带，放下载入口 |
移动端把导航轨换成顶栏加全屏菜单，见 布局。
导航轨#
自上而下：
- 标志；
- 七个导航项：图标居中，未激活浅灰（
#D9D9D9），悬停中灰；当前项的图标是墨色，压在一块浅灰的底上，底块左缘一条墨色竖条，换栏目时整块滑过去；悬停时向右展开一块约 19.5rem 的灰底，显示文字； - 工具组：用户、支付、声音三个图标，包在一个浅灰的竖向胶囊里，之间用短横线分隔；
- 主行动块："前往游戏"，黑底、白色三角、竖排白字；悬停时整块变信号黄、文字变墨色；
- 分享：悬停变黑底黄图标，并向右展开一条带黄色左缘的黑色条。
值得注意的设计决定：
- 导航默认不显示文字。 图标足够辨认时，文字只是悬停时的确认。（云游戏页桌面上的顶栏文字常显：两个页签是纯文字，导航项是"图标 + 竖线 + 文字"，见 顶栏；组件库的导航默认也是图标加文字。）
- 主行动不是黄色。 最重要的按钮是黑底白字，黄色留给悬停反馈和"当前位置"。（云游戏页反过来：首屏的主行动"开始游戏"是一颗黄胶囊，旁边一颗灰胶囊，见 首页；规范不变。）
- 展开不推挤内容。 悬停展开的底块浮在主舞台之上。
组件规范见 导航。
版块#
版块顺序：首页 → 干员情报 → 世界观资料 → 影像资料 → 版本日历 → 玩法介绍 → 集成工业 → 公告。
首页#
- 整幅版本主视觉占满首屏，带来当期的色调。
- 版本标题用专属艺术字，放在画面一侧。
- 底部停靠坞：云游戏入口（通往 云游戏页）、二维码、各平台下载按钮（黑底白字的小块，圆角约 3px）、支付与社区入口。
- 外壳（导航轨、停靠坞）保持中性色，不随主视觉变色。
干员情报#
白底。这是最能代表官网排版手法的版块。
| 元素 | 做法 |
|---|---|
| 立绘 | 占右侧大半，偏心，越界 |
| 衬底 | 信号黄的倾斜四边形 + 透明的斜纹巨字 |
| 姓名 | [ 名 ]，方括号浅灰；下接灰底的英文名小块 |
| 标签 | 成对：墨底白字的"名" + 浅灰底的"值"，紧贴无缝；配音一栏的"名"是黄底 |
| 简介 | 常规字重的正文，约 18px（1920 稿） |
| 切换 | 左侧竖排的圆形头像，选中者带黄环；上下各一个圆形翻页钮 |
| 2D / 3D | 半透明深色胶囊，内有一个浅色圆形旋钮，标记用 Space Grotesk |
| 进度 | 细线进度条 + 一排小图标，1 / 26 式的计数 |
世界观资料#
先是一条信号黄的色带（等距线稿 + ARKNIGHTS: ENDFIELD / LORE），然后进入全站最暗的版块。
| 元素 | 做法 |
|---|---|
| 底 | 纯黑，带极淡的蓝紫色光晕 |
| 主体 | 白色点云构成的三维模型，外套刻度圆环与两段粗弧 |
| 标题 | 左上：标准分节标题的深色版（白字） |
| 代号 | 右侧：Gilroy Light 的大号英文（如 DIJIANG），下接一行小号副题 |
| 导航器 | 近黑的胶囊，两端白色圆钮，中间是条目名与黄色的 1/4 |
| 进度 | 一排短横线，当前一根是黄色 |
| 说明 | 中灰（#999999）的小段正文 |
影像资料#
黑底。媒体列表。
- 类型标签：深灰底（
#38383A）白字，圆角 2px。 - 日期：黄色文字（
#FDFD1F）。 - 播放钮：黄色小方块，圆角 2px。
- 翻页：白色圆钮。
- "更多视频"：通用深色按钮。
版本日历#
白底，但刊头和类目色由当期版本主题接管——这是全站唯一大面积出现非黄色强调的地方。
结构是稳定的：时间轴 + 日期锚 + 类目竖轨 + 按起始日错落的横幅。颜色每个版本都换。详见 宣传物料。
玩法介绍 / 集成工业#
白底。两个结构相同的媒体轮播。
| 元素 | 做法 |
|---|---|
| 版块顶部 | 实心的 //ENDFIELD 巨字，被视口上沿截断 |
| 标题 | 标准分节标题 + 伴饰（加号框、微文字、点阵、注册色条） |
| 侧签 | 浅灰或黄色的竖排色带，写着版块英文名 |
| 媒体 | 大幅截图或视频，直角 |
| 翻页 | 压在媒体左下角的一对白色圆钮 |
| 说明 | 媒体下方：小号 1 / 5 计数 + 标题 + 一段正文 |
公告#
白底。
- 左侧一条通高的黄色竖带：顶部等距线稿，底部竖排的"最新"与英文。
- 标准分节标题（
NOTICE/ 公告）。 - 微标行：
// 新闻 2026.10.07。 - 新闻标题一行，下接发丝分隔线。
- 新闻卡横向排列，图片圆角约 6px，带轻微的环境阴影。
- 底部：一对圆形翻页钮（包在浅灰胶囊里）+ "更多情报"按钮。
版块之间#
- 换底色是最主要的分隔方式：白 → 黄带 → 黑 → 白。
- 巨字：
//ENDFIELD横在版块顶部。 - 版块之间没有分隔线，没有"返回顶部"，没有传统页脚导航。页面最底部是备案与协议链接。（云游戏页首屏以下是一块鹰角统一的深灰页脚，放的也是协议、备案与版权，见 页脚。）
子页面与弹窗#
干员列表、新闻详情等二级内容：
- 子页面头部：上白下黄硬切，左上一个墨底黄图标的方块，大标题压在白色矩形上，右侧等距线稿。
- 页签：一排页签（4px 的微圆角），之间用短竖线分隔；激活项浅灰底，文字左移、右侧出现一个圆形的箭头。
- 返回按钮：深灰底叠斜纹，左侧箭头。
- 弹窗：近白底叠点阵；标题栏深灰叠斜纹，标题居中白字；关闭图标悬停时转 90°。
- 分页：浅灰的胶囊条叠斜纹，两端白色圆钮，悬停变黄。
加载页#
首次载入时盖住整页的一层：近黑底，一根贴左缘的黄色进度条从上往下长，大号的百分比跟着它的末端走；画面偏右是标志，下面一组微标、一条分隔线和一行标语。竖屏时进度条横到下面。全部就绪后黄色从左往右铺满整屏，再整层淡出，一共 2.4 秒。
三段的时间见 动效，逐项的位置见 measurements.md 8.13。组件是 开屏页；只要一块简单的整页等待，用加载页。
云游戏页每次进入"更多"时盖的加载层是同一个设计，只是时长、曲线和标志不同，见 更多。
可以学什么，不必学什么#
| 值得学 | 不必照搬 |
|---|---|
| 中性外壳 + 单一信号色 | 整页等比缩放的流式 rem（文字在小屏偏小，也不响应用户字号设置） |
| 导航贴边、主角偏心的构图 | 整屏滚动劫持 |
| 分节标题、标签对、方括号姓名这些排版套路 | 默认隐藏文字的图标导航（对新访客与辅助技术不友好，组件库应提供带文字的形态） |
| 零偏移的环境阴影、克制的动效 | #D9D9D9 这种对比度很低的未激活图标色 |
| 用色带和底色切换分版块 | 次级文字用 #808080 – #999999（白底上对比度不足） |
右栏不是在批评官网——展示站有展示站的取舍。但组件库面向的是各种内容和用户，需要更稳妥的默认值。
做一个"官网气质"的页面#
- 白底，墨字，先不用任何颜色。
- 左缘或顶部放导航，让它尽量窄。
- 选一个主角（大图、大标题或一组数据），让它偏离中心并占最大面积。
- 每个版块用一个标准分节标题开头。
- 需要强调的小块用墨底白字；全页只留一处黄色。
- 需要换气时插一条色带或换成深色版块。
- 最后才考虑斜纹、点阵、巨字，各自最多一处。
来源#
- 全部数值：measurements.md。
- 云游戏页的数值：measurements-cloud.md，整体面貌见 cloud.md。
- 版块入口：official-sources.md。
- "工业编辑风"的概括：ymh0000123/dsh-theme-endfield。