{
  "_description": "本文件由 data/ 生成：请改动来源文件，不要改这里。各字段的证据边界见接入指南。",
  "schemaVersion": "1.0.0",
  "kind": "entry",
  "locale": "zh-CN",
  "id": "retro-computing",
  "name": {
    "zh": "复古计算机风格",
    "en": "Retro Computing Aesthetic"
  },
  "page": "https://designvocabulary.com/zh/entries/retro-computing/",
  "self": "https://designvocabulary.com/zh/entries/retro-computing.json",
  "alternates": {
    "zh-CN": "https://designvocabulary.com/zh/entries/retro-computing.json",
    "en": "https://designvocabulary.com/en/entries/retro-computing.json"
  },
  "site": {
    "catalogSchemaVersion": "0.1.0",
    "entries": 158,
    "index": "https://designvocabulary.com/zh/entries/index.json",
    "query": "https://designvocabulary.com/api/query?lang=zh",
    "guide": "https://designvocabulary.com/zh/agents/",
    "llms": "https://designvocabulary.com/llms.txt"
  },
  "provenance": {
    "sourceBacked": [
      "entry.definition"
    ],
    "editorial": [
      "entry.boundary",
      "entry.signature",
      "entry.when",
      "entry.when_not",
      "entry.tradeoff",
      "entry.comparison",
      "entry.rules",
      "entry.relations",
      "entry.implementationNote",
      "entry.visual"
    ],
    "scope": "定义参考以上来源；数字界面示例、选择建议、条件关系及配方由本样例编辑，尚未经用户研究验证。",
    "editorialStatus": "drafted",
    "specimenData": "fictional",
    "specimenNote": "示例为原创虚构界面；定义附来源，用法与配方为编辑建议。",
    "sources": [
      {
        "id": "retro-computing-chm-alto",
        "url": "https://www.computerhistory.org/revolution/input-output/14/347",
        "title": "Computer History Museum · Revolution: Xerox Alto",
        "checkedAt": "2026-09-15",
        "archive": {
          "status": "available",
          "confirmed": true,
          "url": "https://web.archive.org/web/20260916053848/https://www.computerhistory.org/revolution/input-output/14/347",
          "capturedAt": "2026-09-16T05:38:48Z",
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.computerhistory.org/revolution/input-output/14/347"
        }
      },
      {
        "id": "retro-computing-mdn-pixelated",
        "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering",
        "title": "MDN Web Docs · image-rendering",
        "checkedAt": "2026-09-15",
        "archive": {
          "status": "available",
          "confirmed": true,
          "url": "https://web.archive.org/web/20251028013621/https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering",
          "capturedAt": "2025-10-28T01:36:21Z",
          "lookupUrl": "https://web.archive.org/web/20260915*/https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering"
        }
      },
      {
        "id": "retro-computing-wcag-contrast",
        "url": "https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html",
        "title": "W3C WCAG 2.1 · Understanding Success Criterion 1.4.3 Contrast (Minimum)",
        "checkedAt": "2026-09-15",
        "archive": {
          "status": "available",
          "confirmed": true,
          "url": "https://web.archive.org/web/20260916053929/https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html",
          "capturedAt": "2026-09-16T05:39:29Z",
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html"
        }
      }
    ],
    "lists": [
      {
        "id": "V-Y",
        "edition": "2026-focus",
        "seat": 4,
        "origin": "issue-1-ledger",
        "page": "https://designvocabulary.com/zh/lists/V-Y/",
        "json": "https://designvocabulary.com/zh/lists/V-Y.json"
      }
    ],
    "ordered": false,
    "listDisclaimer": "席位号是编辑位置，不是评分、排名或人气统计；清单未收满时保持原样，不补足。"
  },
  "entry": {
    "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": "available",
          "checkedAt": "2026-09-22T14:36:12.819Z",
          "jobId": "spn2-fd7e138316cd10330a7c01e4065785139d57a0e1",
          "url": "https://web.archive.org/web/20251028013621/https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering",
          "timestamp": "20251028013621"
        }
      },
      {
        "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"
    ]
  }
}