该技能面向“工业粗野主义与战术遥测界面工程”,用于在需要粗野主义、工业感、瑞士印刷、CRT 终端或战术遥测界面的场景下提供设计指导。
【用途】 适用于数据密集型仪表盘、作品集、编辑型页面,或应当呈现原始、机械质感的指挥中心类界面。它要求设计拒绝柔和渐变、圆角消费级 UI、玻璃拟态和通用 SaaS 卡片布局。
【视觉原型】 系统由两种互补但互斥的视觉范式构成,每个项目只能选定其一并保持一致,不得在同一界面内交替或混合:
- 瑞士工业印刷:源自 1960 年代企业识别系统与重型机械图纸,采用高对比亮色底(新闻纸/灰白),依赖厚重无衬线字体、可见分隔线勾勒的结构化网格、超大出血数字或字母形成的非对称留白,并以主红色作为警示/强调色。
- 战术遥测与 CRT 终端:源自机密军事数据库、旧式大型机与航空航天平视显示器,仅使用暗色模式,高密度表格数据,等宽字体占绝对主导,集成 ASCII 括号、十字准星等技术框架元素,并应用磷光、扫描线、低色深渲染等模拟硬件限制。
【排版体系】 排版是主要的结构与装饰基础设施,图像次之,要求尺度、字重与间距的极端变化。 宏观排版用于结构性标题,属新怪诞/重型无衬线,推荐字体包括 Neue Haas Grotesk(Black)、Inter(Extra Bold/Black)、Archivo Black、Roboto Flex(Heavy)、Monument Extended;以流体排版超大呈现(如 clamp(4rem, 10vw, 15rem)),字距极紧(常为 -0.03em 至 -0.06em),行高高度压缩(0.85 至 0.95),仅用大写。 微观排版用于数据与遥测,属等宽/技术无衬线,推荐 JetBrains Mono、IBM Plex Mono、Space Mono、VT323、Courier Prime;固定小字号(10px 至 14px/0.7rem 至 0.875rem),字距宽松(0.05em 至 0.1em),行高 1.2 至 1.4,仅用大写,用于全部元数据、导航、单元 ID 与坐标。 纹理对比使用高对比衬线体(如 Playfair Display、EB Garamond、Times New Roman),但须极少量使用,并施以半调或 1 位抖动等重后期处理,与干净无衬线形成质感并置。
【色彩系统】 禁止渐变、柔和投影与现代半透明。每个项目仅选用一种基底色板并保持一致,绝不在同一界面混用亮色与暗色基底。 亮色瑞士工业印刷:背景 #F4F4F0 或 #EAE8E3(哑光未漂白文档纸),前景 #050505 至 #111111(碳墨),强调色 #E61919 或 #FF2A2A(航空/危险红),且为唯一强调色。 暗色战术遥测:背景 #0A0A0A 或 #121212(关闭状态 CRT,避免纯 #000000),前景 #EAEAEA(白磷光)为主要文本色,强调色同样为 #E61919 或 #FF2A2A。终端绿 #4AF626 为可选项,仅用于单一特定 UI 元素,绝不作为通用文本色,若无明确用途则应完全省略。
【布局与空间工程】 布局须呈现数学工程感,以可见分区取代常规网页留白:严格采用 CSS Grid,元素精确锚定于网格轨道与交点;大量使用 1px 或 2px 实线边框划分信息区域,水平分隔线常横跨整个容器宽度;在极致数据密度与围绕宏观排版的巨大计算留白之间双向振荡;绝对拒绝圆角,所有转角必须为 90 度。
【UI 组件与符号】 以实用主义工业图形元素替代常规 Web UI 惯例:使用 ASCII 字符框定数据点,例如 [ DELIVERY SYSTEMS ]、< RE-IND >,方向性符号如 >>>、///、\\;将注册号(®)、版权(©)、商标(™)符号作为结构性几何元素使用而非法律文本;集成网格交点十字准星(+)、重复竖线(条码)、粗横向警示条纹,以及随机字符串数据(如 REV 2.6、UNIT / D-01)以模拟运行中的机械过程。
【纹理与后期处理】 为避免纯数字感,需通过 CSS 与 SVG 滤镜在前端工程化模拟模拟介质退化:半调与 1 位抖动将连续色调图像或大号衬线字转为点阵图案,可通过预处理或 CSS mix-blend-mode: multiply 叠加 SVG 径向点图案实现;CRT 扫描线用于终端界面,通过背景 repeating-linear-gradient 模拟水平电子束扫描;机械噪点则对整个 DOM 根节点应用低透明度 SVG 静态噪点滤镜,在暗色与亮色模式下统一引入物理颗粒感。
【Web 工程指令】 网格确定性:使用 display: grid; gap: 1px; 配合父子背景色对比,无需复杂边框声明即可生成数学精确的极细分隔线。语义刚性:使用 <data>、<samp>、<kbd>、<output>、<dl> 等精确语义标签构建 DOM,以准确反映遥测的技术属性。排版钳制:仅对宏观排版使用 CSS clamp(),确保超大文本在跨视口时保持结构完整。
【使用方式示例】 用户请求示例:使用 @industrial-brutalist-ui 审查该界面,识别影响最大的设计问题,并提出可直接实施的改进方案。
【限制】 该风格刻意严苛,可能不适合消费级产品、对可访问性敏感的流程,或需要温暖与柔和感的品牌。CRT、半调、抖动与退化效果必须测试其可读性、对比度与动态敏感性。除非用户明确要求受控混合,否则不得在同一界面混用亮色工业色板与暗色遥测色板。