像素 8-bitPixel Art

核心特征

• 只用 4–5 种颜色，对比分明
• 零圆角，所有形状都是方块
• 用多层 4px 硬阴影拼出阶梯状像素描边
• Press Start 2P 小字号，整数像素对齐
• 按钮与卡片带深色偏移阴影，像贴图图块

色板与字体

英文

Press Start 2P（自托管）

中文

系统黑体：苹方 / 微软雅黑（中文无像素字体，需保持清晰）

说明

Press Start 2P 取自 1980 年代 Namco 街机字体的造型；中文像素字体如「zpix」「观致像素」可用于标题，但需单独引入并确认授权。

起源与代表作

年代：1980 年代 8 位游戏机（FC / NES）

像素风来自早期电子游戏受硬件限制而形成的画面：1983 年任天堂在日本发售 Famicom（红白机），1985 年它以 NES 之名进入北美，同年发行的《超级马里奥兄弟》让方块化的角色家喻户晓。当时的机器只能用 8×8 或 16×16 的像素块和很少的颜色表现图像，这些限制反而成了独特的美学。如今独立游戏（如 2016 年的《星露谷物语》）与复古主题网页仍然沿用这套语言。

AI 设计提示词 · Prompt

像素 8-bit（Pixel Art）风格界面：只使用五种颜色：夜空蓝 #1D1B3A 作页面背景，石板紫 #34346B 作卡片底，像素白 #F8F8E8 作文字与描边，金币黄 #FFCC33 作主按钮，草地绿 #4ADE80 作少量点缀。全部零圆角。描边用四个方向的 4px 硬阴影拼出缺角方块：box-shadow: 0 -4px 0 0 #F8F8E8, 0 4px 0 0 #F8F8E8, -4px 0 0 0 #F8F8E8, 4px 0 0 0 #F8F8E8，再加 8px 8px 0 0 rgba(0,0,0,0.45) 的偏移阴影。字体用 Press Start 2P，含中文的文字不小于 12px，纯英文标签 10px，行高 1.8；标题 24px，带 4px 4px 0 #34346B 的像素阴影。主按钮金币黄底、夜空蓝字；次按钮透明底、像素白字，同样用四向像素描边。不使用渐变、模糊与抗锯齿图片。所有正文对比度不低于 4.5:1，字号与间距使用 4px 的整数倍。

A Pixel Art (8-bit) interface using only five colors: night blue #1D1B3A for the page background, slate purple #34346B for card fills, pixel white #F8F8E8 for text and borders, coin yellow #FFCC33 for the primary button and grass green #4ADE80 as a rare accent. Zero corner radius everywhere. Borders are built from four hard 4px shadows into a notched block: box-shadow: 0 -4px 0 0 #F8F8E8, 0 4px 0 0 #F8F8E8, -4px 0 0 0 #F8F8E8, 4px 0 0 0 #F8F8E8, plus an offset shadow 8px 8px 0 0 rgba(0,0,0,0.45). Use Press Start 2P, text containing Chinese at no less than 12px, English-only labels at 10px, line height 1.8; headings at 24px with a 4px 4px 0 #34346B pixel shadow. The primary button is coin yellow with night-blue text; the secondary button is transparent with pixel-white text and the same four-way pixel border. No gradients, blur or anti-aliased images. Keep body contrast at least 4.5:1 and use whole multiples of 4px for sizes and spacing.

CSS 设计变量

这套风格的设计令牌，可直接粘贴进项目的全局样式。

:root {
  --ds-bg: #1d1b3a;
  --ds-surface: #34346b;
  --ds-text: #f8f8e8;
  --ds-accent: #ffcc33;
  --ds-green: #4ade80;
  --ds-radius: 0;
  --ds-pixel: 4px;
  --ds-border-pixel: 0 -4px 0 0 #f8f8e8, 0 4px 0 0 #f8f8e8, -4px 0 0 0 #f8f8e8, 4px 0 0 0 #f8f8e8;
}

适合与不适合

和相近风格的区别

• 蒸汽波：像素风用有限色板、零圆角和整数像素对齐，模仿 8 位游戏机的硬件限制；蒸汽波用粉紫青渐变与透视网格制造梦幻失真，色彩连续而不是离散。

常见踩坑

• Press Start 2P 字形很宽，长句会迅速撑破布局，只用于标题、按钮与短标签，正文改用系统字体
• 缩放或设备像素比不是整数时，像素描边会出现模糊或缝隙，字号、边距与阴影尽量使用 4px 的整数倍
• 中文没有对应的像素字体，混排时会出现风格断层；中文要保持清晰的系统黑体，不要强行加粗描边
• 字体字号过小会影响可读性，含中文的文字不低于 12px，并保证正文对比度不低于 4.5:1

相关 UI 模式

在 UI 模式词典里查看组件级的实现与演示。

常见问题