定位与原则#

纹理是这套语言里的"印刷痕迹"和"测绘痕迹"：斜纹、点阵、网格、等高线、注册色条、线稿。它们让界面看起来像一份被制造出来的技术文档，而不是一块发光的屏幕。

纹理是可选的。 没有纹理的界面仍然可以是终末地风格；只有纹理没有结构的界面不是。
有预算。 一个视口用一到两种，长图按章节分配。
低于内容。 纹理的对比度必须明显低于文字和控件。
不传达信息。 纹理不能被误读成数据、状态或连接关系。
不挡操作。 装饰层 pointer-events: none，并在自己的容器里裁切。

纹理清单#

纹理	语气	适合	来源	详细
45° 斜纹	机械、制造	按钮底纹、分页条、标题栏、镂空字	实测	斜纹与色条
点阵	印刷网点	弹窗与卡片的底、浅色按钮的表面	实测 + 观察（云游戏页）	网格、等高线、点阵
工程网格	图纸	工作室、技能树、图解	社区 + 观察（云游戏页）	同上
等高线	测绘	地图、探索、物品页底纹	社区 + 观察（云游戏页）	同上
注册色条	印刷校准	分节标签的伴饰	观察	斜纹与色条
等距线稿	工业图解	色带标题、子页面头部	观察	图像
镂空巨字	版面标记	版块分隔、章节编号	实测	镂空字与微文字
刻度圆环、取景角	仪表、取景	展示性的深色画面	观察 + 社区	测绘叠层
警示条纹	危险、施工	窄分隔条	社区	斜纹与色条
表面纹理图	材质	按钮表面的细微颗粒	观察	见下

云游戏页上看得到网格、等高线和点阵，都是图片，不是 CSS 画的（观察（云游戏页））：

"更多"视图的整页背景是一张网格图，每格里两条对角线（X），线是 10% – 27% 不透明的浅灰；
分享浮层的头部叠着一张网格图和一张等高线图，等高线那张用样式转了 −15°、压到 15% 不透明（这两个数是实测（云游戏页））；
"更多"标题卡的中间是一块错位点阵：点约 3px，横向 10 设计 px 一个，相邻两行错开半格。

清单里的用法不变。见云游戏页、分享浮层和云游戏页实测 6。

表面纹理图#

官网的按钮上叠了一张位图纹理（通用按钮的 ::before、首页大按钮的背景图，云游戏页顶栏的"下载"按钮也有一张），让纯色表面带一点颗粒与划痕感。这些图是官方素材，本仓库不收录。

替代做法（推断）：

用上面的"中"档斜纹代替——back 按钮就是这样；
用一层很淡的点阵代替——light 按钮就是这样：墨色 8%，4px 一格，写死成固定的颜色，不随主题变；
或者不加。纯色按钮在这套语言里完全成立。

不要用 CSS 噪点滤镜去模拟——它在不同设备上的表现差异很大，而且容易显脏。

强度#

纹理	建议强度	依据
浅底上的斜纹	黑色 5%	实测
深色控件上的斜纹	比底色亮一档（`#424242` 压 `#383838`）	实测
镂空字的斜纹	黑色，整体 60%	实测
点阵	8%	实测
网格线	≤ 10% 墨色	社区（≤ 3%）与可见性折中
等高线	15 – 20% 墨色	推断
装饰线稿	`neutral-400`，或墨色 30%	实测（线稿色 `#B3B3B3`）

经验下限：纹理与底色的对比度低于约 1.06:1 时等于不存在。上限：不能超过同一区域内三级文字的对比度。

预算#

场景	纹理数量
表单、列表、设置等操作界面	0 – 1 种（通常只有控件自带的斜纹、点阵）
内容页、文档页	1 种
落地页的一屏	1 – 2 种
主视觉、活动页	2 – 3 种，且彼此相关

"相关"指同属一类语气：斜纹 + 点阵都是印刷语气，网格 + 等高线都是测绘语气。混搭印刷与测绘时要有主次。

云游戏页"更多"的一节卖点里，黄斜纹长条、刻度尺、角块、网格同时出现，标题卡本身上下两段是灰斜纹、中间是一块点阵，超过了上表的数。但除了背景的网格，每样都收成一条细带或一个角：斜纹长条和刻度尺是每节顶上的细条，角块只压在主图的两个对角；网格铺在背景里，被不透明的标题卡和主图挡住；标题压在黄横条上，标语底下是那层很淡的点阵，网格和刻度都不进字底下。这些全是图片（观察（云游戏页），见云游戏页）。这里的预算不变；能学的是"种类多了，就收成细带和角，字底下只留最淡的一层"。

人的痕迹#

官方的编辑类物料（说明书、备忘、期刊）会加入手写批注、荧光笔、印章、胶带、贴纸，让版面像"被人读过的文件"（社区）。

这类痕迹只用于叙事性的静态物料，不进入功能界面和组件库。见宣传物料。

实现要点#

/* 装饰层的通用写法 */
.decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  overflow: clip;
}

装饰层加 aria-hidden="true"。
用伪元素或独立的绝对定位层，不要让纹理成为内容容器的 background——那样没法单独调透明度，也没法在打印或高对比模式下去掉。
纹理上方有正文时，给正文垫一层实色底，或在文字区域把纹理淡出。
forced-colors（高对比模式）与打印样式下隐藏所有纹理。

组件库里的装饰组件（镂空巨字、斜纹块、注册色条、刻度圆环、取景角、警示条纹、三种底纹）已经按这几条做了：aria-hidden、不挡点击、不可选中，高对比模式与打印时不显示（forced-colors:hidden print:hidden）。

@media (forced-colors: active), print {
  .decor {
    display: none;
  }
}

自检#

对每一处纹理问三个问题，答不上来就删掉：

它在解释内容、状态、空间或主题吗？
去掉它，会损失理解或者明确的气质吗？
它在和另一种装饰抢注意力吗？

宜 / 忌#

宜

先完成无纹理的版本，再决定加哪一种。
把纹理放在大面积的空白处，离文字远一点。
让控件自带的纹理（返回按钮的斜纹、浅色按钮的点阵、分页条斜纹）保持一致。

忌

一屏里同时出现斜纹、网格、等高线、点阵、故障效果。
用网格线、连接线做装饰，同时界面里又有真实的连线或表格线。
霓虹辉光、扫描线、全屏噪点、玻璃拟态卡片。这些是"通用科幻"的默认项，不是终末地的语言。
到处贴六边形。
纹理导致文字对比度不达标。

来源#

斜纹与点阵的参数：measurements.md 第 6、8 节。
云游戏页的网格、等高线、点阵和"更多"一节里的装饰：measurements-cloud.md 第 6、8.9、8.11 节（2026-10-24 实测）；概览见云游戏页。
母题分层与预算：Statrue/endfield-design-skill。
装饰性表面的对比度下限：ymh0000123/dsh-theme-endfield。

本页目录