复古计算机风格

本词条尚无可操作示例；插画为编辑示意。应用到产品时仍须在真实页面上验证：磷光配色在各种实际背景下是否达到文本对比度要求，小字号正文是否仍使用可读字体而非像素/终端字体，以及该风格与受众怀旧语境是否真正匹配。

{
  "tokens": {
    "surface": "#0b0f0c",
    "ink": "#33ff99",
    "accent": "#ffb347",
    "radiusPx": 0,
    "shadow": "inset 0 0 0 2px #4a5a4f"
  },
  "tokenScope": "本样例配方，仅体现磷光配色与立体边框的一种转译，不是任何历史操作系统或终端的标准 token。"
}

{
  "id": "retro-computing",
  "type": "visual",
  "name": {
    "zh": "复古计算机风格",
    "en": "Retro Computing Aesthetic"
  },
  "aliases": [
    "Retro Terminal UI",
    "复古终端风格",
    "像素风 GUI"
  ],
  "granularity": "experience",
  "intents": [
    "express-brand",
    "organize-content"
  ],
  "tags": [
    "终端风",
    "像素字体",
    "磷光配色",
    "早期 GUI",
    "低色调抖动"
  ],
  "definition": "借用早期计算机的视觉语言表达怀旧或极客气质的风格：等宽终端字体、黑底磷光绿/琥珀色文字、像素或位图字体、低色深的抖动渐变，以及早期图形界面的立体窗口边框与 1-bit 图标。终端风、像素风、早期 GUI 是这一整体风格下的三个子型，而非各自独立的词条。",
  "boundary": "此处指的是模仿具体历史计算设备与操作系统外观的一套视觉签名——单色/低色深显示、等宽字符网格、位图图标与立体窗口边框；不等同于拟物化（skeuomorphism）。拟物化模仿的是真实物理物件（纸张纹理、皮革、开关旋钮等），而复古计算机风格模仿的是历史上的计算机屏幕与系统外观本身，两者的参照对象不同：一个参照物理世界，一个参照计算机技术史。终端、像素艺术、早期 GUI 三种表现在本词条内作为子型处理，不单独立条。",
  "signature": [
    "等宽字体的终端文字块，配黑底磷光绿或琥珀色文字",
    "像素化或位图风格的图标与字形，边缘可见锯齿而非平滑抗锯齿",
    "早期图形界面式的立体窗口边框（凸起/凹陷边线）与低色深抖动背景"
  ],
  "when": [
    "产品面向对早期计算机历史或极客文化有共同记忆的受众，怀旧本身是有意义的表达",
    "内容或场景本身与历史计算设备相关（如模拟器、教学展示、开发者工具的彩蛋界面）",
    "希望用强烈的风格化元素制造品牌记忆点，且愿意为此额外投入无障碍与可读性的验证工作"
  ],
  "when_not": [
    "把像素字体或终端字体当作正文小字号下唯一的阅读载体，导致长文本难以辨认",
    "只是想要“复古感”却没有对应的受众或内容语境，把它当成默认皮肤套用",
    "低对比度的磷光配色未经验证就直接用于正文或控件文字"
  ],
  "tradeoff": "怀旧感和识别度很强，但等宽/像素字体在小字号下的可读性天然弱于为屏幕优化的现代字体，磷光绿/琥珀配色在黑底上容易压低对比度；需要专门为正文内容保留一套可读字体与达标配色，风格元素只承担装饰和氛围功能。",
  "comparison": {
    "focus": "对早期计算机屏幕与系统外观的怀旧引用",
    "mechanism": "等宽终端字体、像素/位图字形、磷光配色、低色深抖动、立体窗口边框",
    "cost": "小字号可读性与低对比度配色需要额外验证，且怀旧语境不匹配时风格会显得随意"
  },
  "sources": [
    {
      "id": "retro-computing-chm-alto",
      "title": "Computer History Museum · Revolution: Xerox Alto",
      "url": "https://www.computerhistory.org/revolution/input-output/14/347",
      "claim": "该页说明在 Xerox Alto 之前，主机时代的多数终端只能以单一等宽字体显示单色文字，不存在图形用户界面；Alto 随后引入鼠标与可视化图形界面，是这一转变的分界点。本词条“终端子型”的等宽单色文字特征与“早期 GUI 子型”相对于纯文本终端的转折，据此转述。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.computerhistory.org/revolution/input-output/14/347",
        "status": "available",
        "checkedAt": "2026-09-16T05:37:24.565Z",
        "jobId": "spn2-1c4ad72de1adf7521d2db32de3d45b76b6ffe9e4",
        "url": "https://web.archive.org/web/20260916053848/https://www.computerhistory.org/revolution/input-output/14/347",
        "timestamp": "20260916053848"
      }
    },
    {
      "id": "retro-computing-mdn-pixelated",
      "title": "MDN Web Docs · image-rendering",
      "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering",
      "claim": "该页说明 `image-rendering: pixelated` 会先以最近邻等算法将图像放大到原始尺寸的整数倍，再做平滑插值到最终尺寸，以便在放大时保留“像素化”外观而不引入额外的缩放伪影。本词条“像素子型”在网页实现中保留硬边像素观感的技术依据，据此转述。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering",
        "status": "unconfirmed",
        "checkedAt": "2026-09-16T05:37:24.610Z",
        "error": "error:gateway-timeout",
        "jobId": "spn2-fd7e138316cd10330a7c01e4065785139d57a0e1"
      }
    },
    {
      "id": "retro-computing-wcag-contrast",
      "title": "W3C WCAG 2.1 · Understanding Success Criterion 1.4.3 Contrast (Minimum)",
      "url": "https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html",
      "claim": "该页规定正文文字（小于 18 磅或加粗小于 14 磅）与背景的对比度须至少达到 4.5:1，大字文字须至少达到 3:1。本词条“磷光配色须达标对比度”的 must 规则，其具体数值依据据此转述。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html",
        "status": "available",
        "checkedAt": "2026-09-16T05:38:03.955Z",
        "jobId": "spn2-1018272037c1df12d57dd726da66a4d147e8f15d",
        "url": "https://web.archive.org/web/20260916053929/https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html",
        "timestamp": "20260916053929"
      }
    }
  ],
  "relations": [
    {
      "target": "skeuomorphism",
      "kind": "related",
      "condition": "两者都通过模仿过去的外观制造熟悉感，容易被混为一谈",
      "reason": "拟物化模仿真实物理物件的质感与结构；复古计算机风格模仿的是历史计算机屏幕与系统外观本身，参照对象不同。",
      "basis": "editorial"
    },
    {
      "target": "flat-design",
      "kind": "alternative",
      "condition": "为同一产品选择主视觉语言",
      "reason": "扁平化追求去装饰、去纹理的现代简洁界面；复古计算机风格刻意引入历史屏幕的像素、抖动与立体边框痕迹，二者表达方向相反。",
      "basis": "editorial"
    },
    {
      "target": "minimalism",
      "kind": "alternative",
      "condition": "为同一产品选择主视觉语言",
      "reason": "极简依赖留白和克制表达秩序；复古计算机风格依赖具体历史技术痕迹（扫描线、抖动、位图字形）制造怀旧氛围，二者通常不宜并存。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "在小字号下展示正文内容",
      "instruction": "不得只用像素字体或等宽终端字体承载小字号正文；必须为正文保留一套经过验证、清晰可读的现代字体，像素/终端字体限于标题、装饰或短标签等场景。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "使用黑底磷光绿、琥珀色等低对比度复古配色",
      "instruction": "文字与背景的对比度必须达到适用的文本对比度要求（参见来源中的 WCAG 1.4.3 数值），不得因追求氛围而牺牲可读性；未验证达标前不得用于正文或控件文字。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "决定是否采用复古计算机风格",
      "instruction": "应在怀旧对受众确实有意义的场景使用该风格，而不是作为默认皮肤套用；先确认受众与内容语境，再决定是否叠加这套视觉语言。",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "visual": {
    "tokens": {
      "surface": "#0b0f0c",
      "ink": "#33ff99",
      "accent": "#ffb347",
      "radiusPx": 0,
      "shadow": "inset 0 0 0 2px #4a5a4f"
    },
    "tokenScope": "本样例配方，仅体现磷光配色与立体边框的一种转译，不是任何历史操作系统或终端的标准 token。"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "本词条尚无可操作示例；插画为编辑示意。应用到产品时仍须在真实页面上验证：磷光配色在各种实际背景下是否达到文本对比度要求，小字号正文是否仍使用可读字体而非像素/终端字体，以及该风格与受众怀旧语境是否真正匹配。",
  "image": {
    "src": "/images/retro-computing.webp",
    "alt": "一个名为 FIELDNOTES 的虚构界面，呈现为早期计算机窗口：立体凸起的窗口边框、1-bit 抖动图标，深色磷光绿色调面板上有一段等宽字体文字块，隐约可见扫描线，整体色调低调统一，仅以磷光绿作为唯一强调色。"
  },
  "searchTerms": [
    "terminal look",
    "pixel type",
    "phosphor palette",
    "early GUI",
    "low-color dithering"
  ]
}