Sci-Fi HUD 科幻 HUD（Sci-Fi HUD）
Sci-Fi HUD is the visual language of cockpit instrumentation and tactical displays projected over a viewport: circular reticles, radial gauges, chamfered panels, and wireframe target graphics rendered in phosphor green, amber, or cyan over a dark canvas. Where cyberpunk borrows from neon city streets, sci-fi HUD borrows from aviation, spaceflight, and military targeting systems — the goal is readable instrumentation, not urban atmosphere. It turns a UI into a heads-up display that feels scanned, locked, and mission-critical.
科幻 HUD 是驾驶舱仪表与战术显示屏投射在视野上的视觉语言：圆形瞄准具、径向仪表、切角面板，以及用磷光绿、琥珀或青色渲染在深色画布上的线框目标图形。如果说赛博朋克借的是霓虹街道，科幻 HUD 借的就是航空、航天和军事瞄准系统——目标的是可读仪器感，而不是都市氛围。它把 UI 变成一块抬头显示，让人觉得信息正被扫描、锁定，并且事关任务成败。
Scope: This entry covers the screen-interface expression of science-fiction heads-up displays — circular gauges, telemetry readouts, wireframe overlays, and tactical paneling. It does not cover the neon-drenched dystopian city look (that's Cyberpunk) or raw terminal aesthetics (that's Terminal Hacker). Bright retro-futuristic consumer chrome belongs to Y2K.
范围：本条覆盖科幻抬头显示在屏幕界面上的表现——圆形仪表、遥测读数、线框覆盖层和战术面板。霓虹浸透的反乌托邦城市风见赛博朋克条目；原始终端美学见终端黑客条目。明亮的复古未来消费铬感属于 Y2K。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
Circular reticles and radial gauges圆形瞄准具与径向仪表 layout defining定义特征
Data is organized around concentric rings, radar sweeps, and circular progress meters; rectangular cards read as a generic dashboard, not a heads-up display.
数据围绕同心圆环、雷达扫描和圆形进度计来组织；矩形卡片读起来像通用仪表盘，而不是抬头显示。
-
Chamfered and hexagonal panels切角与六边形面板 geometry defining定义特征
Surfaces are cut at 45° angles, shaped as hexagons, or clipped with sharp corners; rounded bubbly shapes break the aerospace/tooling language.
表面切成 45° 斜角、做成六边形，或用 clip-path 切出锐利直角；圆润泡泡形会破坏航空/工装语言。
-
Phosphor monochrome or limited tactical palette磷光单色或有限战术配色 color defining定义特征
One dominant glow color — phosphor green #00ff9d, amber #ffb000, or cyan #00e5ff — on a dark navy/charcoal ground; red #ff2a2a and yellow #f9c802 are reserved for threat and warning states only.
一种主导发光色——磷光绿 #00ff9d、琥珀 #ffb000 或青色 #00e5ff——铺在深色海军蓝/炭灰底上；红 #ff2a2a 和黄 #f9c802 只留给威胁与警告状态。
-
Monospace telemetry readouts等宽遥测读数 typography defining定义特征
Small uppercase monospace labels (10–12px, letter-spacing .12em) carry coordinates, range values, and >_SYSTEM / TARGET prefixes; the voice is instrumentation, not body copy.
小号大写等宽标签（10–12px，letter-spacing .12em）承载坐标、距离值和 >_SYSTEM / TARGET 前缀；语气是仪器，不是正文。
-
Wireframe target locks and vector callouts线框目标锁定与矢量标注 imagery defining定义特征
Objects are rendered as line-art wireframes, crosshairs, bracket locks, and leader-line callouts rather than solid icons, gradients, or photographs.
对象以线框图、十字准线、括号锁定和引线标注呈现，而不是实心图标、渐变或照片。
-
Layered translucent data planes分层半透明数据平面 depth supporting辅助特征
Multiple panels overlap with stepped opacity (rgba overlays) and 1px hairline borders, creating focal planes at different distances from the viewer.
多个面板以阶梯式不透明度（rgba 覆盖层）和 1px 发丝边框交叠，形成与观者不同距离的焦平面感。
-
Sweeping radar and updating telemetry扫描雷达与更新中的遥测 motion supporting辅助特征
Motion is purposeful and rhythmic: radar sweeps, ticking counters, lock-on sequences, and target brackets tightening — not glitchy stutters or decorative neon pulses.
动效是有节奏、有目的的：雷达扫描、跳动的计数器、锁定序列和收紧的目标括号——不是故障式抽搐，也不是装饰性霓虹脉冲。
-
Neon street signage and glitch dystopia霓虹街景与故障反乌托邦 imagery avoid避免
CJK neon signs, rain-soaked city imagery, aggressive RGB-split glitches, and magenta/cyan color schemes signal cyberpunk, not a tactical HUD.
中日文霓虹招牌、雨夜城市图像、强烈的 RGB 分离故障和品红/青配色是赛博朋克的信号，不是战术 HUD。
Often confused with: Cyberpunk最容易混淆：赛博朋克（Cyberpunk）
Sci-Fi HUD科幻 HUD（Sci-Fi HUD）
Cyberpunk赛博朋克（Cyberpunk）
This is Sci-Fi HUD because the mood is cockpit instrumentation, not street signage: circular reticles, chamfered tactical panels, wireframe target locks, and a single phosphor accent on a dark canvas. The decoration is aerospace/military, not urban dystopia.
这是科幻 HUD，因为气质是驾驶舱仪表，不是街道招牌：圆形瞄准具、切角战术面板、线框目标锁定，以及深色画布上的单一磷光强调色。装饰元素来自航空航天/军事，而非都市反乌托邦。
It would become Cyberpunk if the canvas stayed near-black but the palette shifted to neon magenta and cyan, the panels sprouted CJK neon signage and glitch tears, and the geometry traded circular gauges for jagged HUD brackets over a rain-soaked city mood.
如果画布保持近黑，但配色转向霓虹品红和青色，面板长出中日文霓虹招牌和故障撕裂，几何语言也把圆形仪表换成雨夜城市 mood 下的锯齿 HUD 括线，它就变成赛博朋克了。
In code — optional starting points代码写法 —— 可选起点
HUD panel with chamfered corners and phosphor glow
background: rgba(6, 14, 22, .92); border: 1px solid rgba(0, 229, 255, .55); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); box-shadow: 0 0 8px rgba(0, 229, 255, .35), inset 0 0 18px rgba(0, 229, 255, .08); color: #d9f7ff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;Circular radar reticle with sweep animation
.radar { position: relative; width: 120px; height: 120px; border-radius: 50%; border: 1px solid rgba(0, 229, 255, .45); background: repeating-radial-gradient(circle at 50% 50%, transparent 0 18px, rgba(0, 229, 255, .12) 18px 19px); } .radar::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(0, 229, 255, .55), transparent 60deg); animation: sweep 2.4s linear infinite; } @keyframes sweep { to { transform: rotate(360deg); } }Telemetry label styling
font-mono text-[10px] uppercase tracking-[0.12em] text-cyan-300 before:content-['>_']Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
Build a Sci-Fi HUD surface. Canvas: deep navy charcoal — #060e16 or #0a121a — with panels at rgba(6, 14, 22, .92). Choose one phosphor accent: cyan #00e5ff, green #00ff9d, or amber #ffb000. Text: off-white #d9f7ff and dim #6b8fa3, set in ui-monospace / JetBrains Mono; labels 10–11px uppercase with letter-spacing .12em, prefixed with >_ or TARGET:. Geometry: chamfered corners via clip-path polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px) or hexagonal shapes; 1px hairline borders in the accent at 45–55% opacity. Add circular reticles and radial gauges with repeating-radial-gradient rings and a conic-gradient radar sweep. Wireframe icons and target locks using 1px strokes, bracket corners, and leader lines. Reserve red #ff2a2a and yellow #f9c802 for warning states only. Layer panels with stepped opacity (base .92, overlay .75, glass readout .45). Motion: 2–3s radar sweep rotations, ticking numeric updates, and lock-on bracket contractions; keep them rhythmic, not glitchy. Avoid neon magenta/cyan street palettes, CJK signage, heavy scanline/static noise, and rounded bubbly shapes — those belong to cyberpunk or Y2K. Honor prefers-reduced-motion by freezing sweeps and ticks.
用科幻 HUD 风格搭建界面。画布：深海军炭灰——#060e16 或 #0a121a——面板用 rgba(6, 14, 22, .92)。选定一种磷光强调色：青色 #00e5ff、绿色 #00ff9d 或琥珀 #ffb000。文字：米白 #d9f7ff 与暗淡 #6b8fa3，全部使用 ui-monospace / JetBrains Mono；标签 10–11px 大写、letter-spacing .12em，前缀用 >_ 或 TARGET:。几何：用 clip-path polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px) 做切角，或做成六边形；强调色以 45–55% 不透明度描 1px 发丝边框。添加圆形瞄准具和径向仪表：用 repeating-radial-gradient 画环，用 conic-gradient 做雷达扫描。图标和目标锁定用 1px 描边、括角和引线来表现。红 #ff2a2a 和黄 #f9c802 只给警告状态。用阶梯不透明度分层（底层 .92、覆盖层 .75、玻璃读数 .45）。动效：2–3s 雷达扫描旋转、数字跳动更新、锁定括号收缩；保持节奏感，不要故障化。避免霓虹品红/青街景配色、中日文招牌、厚重扫描线/噪点和圆润泡泡形——那些属于赛博朋克或 Y2K。响应 prefers-reduced-motion，冻结扫描和跳动。
Accessibility & misuse可访问性与误用
Phosphor accents on a dark canvas are not automatically accessible: cyan #00e5ff on #060e16 clears 4.5:1, but green #00ff9d and amber #ffb000 can fail at small sizes — measure body labels against the real background and keep critical text off the dimmest overlay planes.
深色底上的磷光强调色不等于天然可访问：青色 #00e5ff 配 #060e16 能过 4.5:1，但绿色 #00ff9d 和琥珀 #ffb000 在小字号可能不过——要对着真实背景实测正文标签，别把关键文字放在最暗的覆盖层上。
Sweeping radar, ticking counters, and tightening lock-on animations are exactly the kind of persistent motion that can trigger vestibular issues: keep sweep cycles slow (2.5s or longer), avoid simultaneous flashing across large fields, and honor prefers-reduced-motion by freezing rotations and ticks.
旋转雷达、跳动计数器和收紧锁定动画正是容易引发前庭不适的持续运动：扫描周期放慢到 2.5s 或更长，避免大面积同时闪烁，并响应 prefers-reduced-motion，冻结旋转和跳动。
HUDs are intentionally dense, which becomes cognitive noise for many users: mark decorative readouts and bracket overlays aria-hidden, maintain a clear hierarchy between mission-critical data and ambient decoration, and give focus a visible state that does not rely solely on the accent glow (an offset outline in a reserved warning color works).
HUD 刻意追求高密度，这会成为许多用户的认知噪音：装饰性读数和括号覆盖层标 aria-hidden，在关键任务数据与环境装饰之间保持清晰层级，焦点状态要可见，不能仅靠强调色辉光（用警告色的偏移 outline 就不错）。
Origin起源
Heads-up displays trace their hardware origins to military reflector gunsights used by the Royal Air Force during World War II, but the sci-fi HUD as a visual style was shaped by aerospace and cinema: NASA Apollo-era mission-control screens and the green vector graphics of 1980s radar consoles gave it its phosphor palette, while films like Star Wars (1977) and Top Gun (1986) made circular targeting reticles and wireframe lock-on graphics iconic. The look was cemented in contemporary UI culture by the transparent holographic interfaces in Iron Man (2008) and by space-combat games from Wing Commander to Elite Dangerous and Star Citizen, where readable instrumentation is the entire interface.
抬头显示的硬件源头可追溯至二战期间英国皇家空军使用的反射式瞄准具，但科幻 HUD 作为视觉风格是由航空航天和电影共同塑造的：NASA 阿波罗时代的任务控制屏幕和 1980 年代雷达控制台的绿色矢量图形奠定了它的磷光配色，而《星球大战》（1977）和《壮志凌云》（1986）则让圆形瞄准具与线框锁定图形成为标志性符号。当代 UI 文化进一步由《钢铁侠》（2008）中的透明全息界面，以及从《银河飞将》到《精英危险》和《星际公民》的太空战斗游戏固化——在这些游戏里，可读的仪器本身就是整个界面。