# 像素界面（Pixel / 8-bit UI）

镜语 · 版式与界面 / 年代风格

- 别名：8-bit 界面、像素风网页、游戏机界面、红白机风、Pixel UI
- 口语：「像小时候红白机游戏的菜单」「一格一格的像素边框」「个人主页做成 RPG 游戏」
- 一句话：方块像素边框、有限调色板、▶ 光标菜单和血条，像 8 位游戏的界面
- 是什么：像素界面借用 8 位、16 位电子游戏的视觉语言：方块像素组成的边框和图标、有限的调色板、点阵字、带 ▶ 光标的菜单、血条和对话框。它来自早期游戏机的分辨率和颜色限制，今天作为一种怀旧又俏皮的风格使用
- 缺了就不像：方块像素边框；有限调色板；▶ 光标菜单
- 加了更像：血条和等级；像素化图片；点阵或等宽字；对话框文字
- 适合用在：游戏、独立开发者和创意工作者的个人主页；像素风视频片头、直播间组件；活动页里的小游戏和抽奖
- 看哪里：看照片：它被画进一块很小的画布再放大，像素保持方形、颜色被压成几档。对话框是双层方块边框，菜单有闪烁的 ▶ 光标，粉丝和作品数做成一格格的血条。可以用键盘方向键选菜单、左右翻作品
- 注意：像素图被平滑缩放，边缘糊掉就不像像素了；中文点阵字在小字号下很难读，正文仍需要清楚的字体
- 描述示例：做一个 8-bit 像素游戏界面风格的个人主页：天蓝色背景，底部是像素草地和小树；内容放在深蓝紫色的方块对话框里，边框由两层方块像素组成（外深内浅），没有圆角；左侧菜单「作品／状态／约拍／存档」，当前项前有闪烁的黄色 ▶ 光标；右侧显示一张被像素化的照片（低分辨率放大、颜色压成几档、image-rendering: pixelated），下方一行「＞」开头的对话文字；顶部人物栏显示头像、名字和等级「Lv.24」，粉丝和作品做成一格一格的血条；字体用等宽或点阵字
- 易混：
  - [像素艺术](https://idea.ameng.dev/terms/pixel-art.md)：像素艺术是一种画风；像素界面把同样的语言用在按钮、菜单和对话框上
  - [复古操作系统](https://idea.ameng.dev/terms/retro-os.md)：复古操作系统模仿办公电脑；像素界面模仿游戏机
- 相关：[像素化](https://idea.ameng.dev/terms/pixelate.md)

## 来源与延伸阅读

- [Wikipedia · Pixel art](https://en.wikipedia.org/wiki/Pixel_art)
- [Wikipedia · 8-bit computing](https://en.wikipedia.org/wiki/8-bit_computing)

网页版（含演示）：https://idea.ameng.dev/terms/pixel-ui