Design Vocabulary设计词汇 · 样本集 01

VOCABULARY / 词条

复古计算机风格

Retro Computing Aesthetic

加入比较 +

借用早期计算机的视觉语言表达怀旧或极客气质的风格:等宽终端字体、黑底磷光绿/琥珀色文字、像素或位图字体、低色深的抖动渐变,以及早期图形界面的立体窗口边框与 1-bit 图标。终端风、像素风、早期 GUI 是这一整体风格下的三个子型,而非各自独立的词条。

示意图 · 编辑插画,尚无可操作示例
一个名为 FIELDNOTES 的虚构界面,呈现为早期计算机窗口:立体凸起的窗口边框、1-bit 抖动图标,深色磷光绿色调面板上有一段等宽字体文字块,隐约可见扫描线,整体色调低调统一,仅以磷光绿作为唯一强调色。
一个名为 FIELDNOTES 的虚构界面,呈现为早期计算机窗口:立体凸起的窗口边框、1-bit 抖动图标,深色磷光绿色调面板上有一段等宽字体文字块,隐约可见扫描线,整体色调低调统一,仅以磷光绿作为唯一强调色。

识别特征

  • 等宽字体的终端文字块,配黑底磷光绿或琥珀色文字
  • 像素化或位图风格的图标与字形,边缘可见锯齿而非平滑抗锯齿
  • 早期图形界面式的立体窗口边框(凸起/凹陷边线)与低色深抖动背景

概念边界

此处指的是模仿具体历史计算设备与操作系统外观的一套视觉签名——单色/低色深显示、等宽字符网格、位图图标与立体窗口边框;不等同于拟物化(skeuomorphism)。拟物化模仿的是真实物理物件(纸张纹理、皮革、开关旋钮等),而复古计算机风格模仿的是历史上的计算机屏幕与系统外观本身,两者的参照对象不同:一个参照物理世界,一个参照计算机技术史。终端、像素艺术、早期 GUI 三种表现在本词条内作为子型处理,不单独立条。

什么时候考虑它

  • 产品面向对早期计算机历史或极客文化有共同记忆的受众,怀旧本身是有意义的表达
  • 内容或场景本身与历史计算设备相关(如模拟器、教学展示、开发者工具的彩蛋界面)
  • 希望用强烈的风格化元素制造品牌记忆点,且愿意为此额外投入无障碍与可读性的验证工作

什么时候慎用

  • 把像素字体或终端字体当作正文小字号下唯一的阅读载体,导致长文本难以辨认
  • 只是想要“复古感”却没有对应的受众或内容语境,把它当成默认皮肤套用
  • 低对比度的磷光配色未经验证就直接用于正文或控件文字

取舍

怀旧感和识别度很强,但等宽/像素字体在小字号下的可读性天然弱于为屏幕优化的现代字体,磷光绿/琥珀配色在黑底上容易压低对比度;需要专门为正文内容保留一套可读字体与达标配色,风格元素只承担装饰和氛围功能。

条件规则 · 编辑建议

当在小字号下展示正文内容必须不得只用像素字体或等宽终端字体承载小字号正文;必须为正文保留一套经过验证、清晰可读的现代字体,像素/终端字体限于标题、装饰或短标签等场景。
当使用黑底磷光绿、琥珀色等低对比度复古配色必须文字与背景的对比度必须达到适用的文本对比度要求(参见来源中的 WCAG 1.4.3 数值),不得因追求氛围而牺牲可读性;未验证达标前不得用于正文或控件文字。
当决定是否采用复古计算机风格建议应在怀旧对受众确实有意义的场景使用该风格,而不是作为默认皮肤套用;先确认受众与内容语境,再决定是否叠加这套视觉语言。

相关词条

拟物化设计 ↗相关但不同 · 两者都通过模仿过去的外观制造熟悉感,容易被混为一谈

拟物化模仿真实物理物件的质感与结构;复古计算机风格模仿的是历史计算机屏幕与系统外观本身,参照对象不同。

扁平化设计 ↗条件替代 · 为同一产品选择主视觉语言

扁平化追求去装饰、去纹理的现代简洁界面;复古计算机风格刻意引入历史屏幕的像素、抖动与立体边框痕迹,二者表达方向相反。

极简视觉风格 ↗条件替代 · 为同一产品选择主视觉语言

极简依赖留白和克制表达秩序;复古计算机风格依赖具体历史技术痕迹(扫描线、抖动、位图字形)制造怀旧氛围,二者通常不宜并存。

来源与支持范围

Computer History Museum · Revolution: Xerox Alto ↗

该页说明在 Xerox Alto 之前,主机时代的多数终端只能以单一等宽字体显示单色文字,不存在图形用户界面;Alto 随后引入鼠标与可视化图形界面,是这一转变的分界点。本词条“终端子型”的等宽单色文字特征与“早期 GUI 子型”相对于纯文本终端的转折,据此转述。

检索日期:2026-09-15 · 存档于 2026-09-16
MDN Web Docs · image-rendering ↗

该页说明 `image-rendering: pixelated` 会先以最近邻等算法将图像放大到原始尺寸的整数倍,再做平滑插值到最终尺寸,以便在放大时保留“像素化”外观而不引入额外的缩放伪影。本词条“像素子型”在网页实现中保留硬边像素观感的技术依据,据此转述。

检索日期:2026-09-15 · 存档于 2025-10-28
W3C WCAG 2.1 · Understanding Success Criterion 1.4.3 Contrast (Minimum) ↗

该页规定正文文字(小于 18 磅或加粗小于 14 磅)与背景的对比度须至少达到 4.5:1,大字文字须至少达到 3:1。本词条“磷光配色须达标对比度”的 must 规则,其具体数值依据据此转述。

检索日期:2026-09-15 · 存档于 2026-09-16

定义参考以上来源;数字界面示例、选择建议、条件关系及配方由本样例编辑,尚未经用户研究验证。

类型扩展与实现说明

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

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

打开本词条的 Agent JSON 文件这个文件原样收录本词条的全部字段,并附上来源、存档与编辑声明。