2026-6-8 麗潔 大數(shù)據(jù)可視化設(shè)計(jì)文章及欣賞
北京蘭亭妙微 UI 設(shè)計(jì)公司,成立 16 年來,始終保持著對(duì)國(guó)內(nèi)外優(yōu)秀設(shè)計(jì)作品的學(xué)習(xí)與研究。我們持續(xù)追蹤全球前沿的 UI/UX 設(shè)計(jì)趨勢(shì),從中提煉可落地的設(shè)計(jì)方法論,分享給同樣熱愛設(shè)計(jì)的你。今天分享分析一套名為「APEX」的航天發(fā)射與回收控制臺(tái) UI 設(shè)計(jì)系統(tǒng)——它可能是近年來暗黑系數(shù)據(jù)大屏領(lǐng)域最完整的作品之一。
────────────────────────────────────────
上圖是Logo Construction 頁(yè)面,包含幾何圖形構(gòu)建過程、Key Values 清單、Clear Space 規(guī)范、On-Board Panel 金屬銘牌效果圖、ID Card 工牌效果圖。
這套設(shè)計(jì)的起點(diǎn)不是界面本身,而是一個(gè)完整的品牌識(shí)別體系。Logo 采用幾何化的"M/N"折線圖形,通過嚴(yán)格的網(wǎng)格系統(tǒng)和角度標(biāo)注(A1 60°、A2 60°)完成構(gòu)建。這種做法傳遞出一個(gè)信號(hào):這不是"畫出來的",而是"工程推導(dǎo)出來"的。
三個(gè)值得注意的品牌細(xì)節(jié):
• Key Values 清單將 Corner Radius、Stack Ratio、Grid Multiple 等參數(shù)量化到小數(shù)點(diǎn)后兩位——這種"偽工程規(guī)范"的呈現(xiàn)方式,本身就是一種視覺敘事手段,讓品牌看起來像真實(shí)的軍工項(xiàng)目
• On-Board Panel 金屬銘牌效果圖:把 Logo 做成金屬蝕刻效果,配合 S/N 序列號(hào)和規(guī)格參數(shù)(AL-142 SPEC: AMS 4027),完成了從數(shù)字設(shè)計(jì)到物理實(shí)體的視覺跨越
• ID Card 工牌:Operator / Alex Chen / Launch Director / EXP 12/2026,用真實(shí)工牌的格式強(qiáng)化了整個(gè)項(xiàng)目的沉浸感
設(shè)計(jì)啟示:B 端/工業(yè)級(jí) UI 項(xiàng)目,如果能在界面之外補(bǔ)充品牌載體(銘牌、工牌、實(shí)體 Mockup),說服力會(huì)呈指數(shù)級(jí)增長(zhǎng)。
────────────────────────────────────────
上圖是The Brief 文檔頁(yè) + WHAT BROKE ON B-04 事故報(bào)告頁(yè)。
這套作品最獨(dú)特的地方在于:它不只是"好看的界面",而是有故事背景的完整設(shè)計(jì)系統(tǒng)。
The Brief 頁(yè)面采用類似軍方密件的紅頭文件格式——FROM / TO / DATE / SUBJECT / PRIORITY 的元信息欄,正文用襯線體排版,引用語"We launch the booster every twenty-three days. We recover it every twenty-three days"營(yíng)造出強(qiáng)烈的任務(wù)氛圍。
B-04 事故報(bào)告頁(yè)則展示了另一種信息架構(gòu)能力:
• Mission Timeline:一條時(shí)間軸貫穿從 PRE-IGNITION 到 RECOVERY COMPLETE 的全過程,關(guān)鍵節(jié)點(diǎn)(T+04:57 TELEMETRY GAP · 30s)用黃色高亮 + 虛線框標(biāo)注異常區(qū)間——這是非常成熟的事件標(biāo)注模式
• Operator Stress Map:三張并排的折線圖分別展示 Launch Director / Telemetry Officer / Recovery Captain 的注意力負(fù)荷曲線,黃色漸變填充區(qū)域直觀標(biāo)示高壓時(shí)段
• Operator Testimonials:底部三張引言卡片用雙引號(hào)圖標(biāo) + 小字署名,把冷冰冰的數(shù)據(jù)還原為人的體驗(yàn)——"We were guessing for thirty-eight seconds"
這種"數(shù)據(jù) + 人文敘事"的組合,是高端 B 端設(shè)計(jì)區(qū)別于普通儀表盤的關(guān)鍵差異點(diǎn)。
────────────────────────────────────────
上圖是One surface. Four operators. Nine minutes. 概念標(biāo)題頁(yè)。
"One surface. Four operators. Nine minutes."
這句話只有六個(gè)英文單詞,但它完成了三件事:
• 定義了交互范式(One surface = 統(tǒng)一操作界面)
• 定義了用戶角色(Four operators = 四個(gè)操作崗位)
• 定義了時(shí)間約束(Nine minutes = 任務(wù)窗口)
下方四張線稿風(fēng)格的人物側(cè)臉插圖(Launch Director / Telemetry Officer / Recovery Captain / Engineer),用極簡(jiǎn)的輪廓線勾勒出角色身份,每個(gè)頭像下方標(biāo)注崗位名稱。這種處理方式在視覺上極度克制,卻信息量充足。
設(shè)計(jì)啟示:任何復(fù)雜系統(tǒng)的 UI 設(shè)計(jì),都應(yīng)該有一個(gè)"一句話概括"的概念頁(yè)。它不僅是封面,更是整個(gè)設(shè)計(jì)系統(tǒng)的"憲法"——后續(xù)所有界面的設(shè)計(jì)決策都要能回溯到這句話。
────────────────────────────────────────
上圖是主控面板總覽 + Launch Director 主界面。
這是整套設(shè)計(jì)的核心界面。T-MINUS HOLD 00:10:42.88 以巨大的等寬字體占據(jù)左半屏視覺重心,周圍是大量留白——和之前分析的車輛儀表盤使用的是同一策略:讓數(shù)字自己說話。
但這套設(shè)計(jì)在此基礎(chǔ)上做了更極致的延伸:
① System Readiness 點(diǎn)陣網(wǎng)格 右側(cè)用一個(gè) 8×8 的方格矩陣表示系統(tǒng)狀態(tài),每個(gè)子系統(tǒng)(Avionics / Propulsion / Range / Payload 等)對(duì)應(yīng)一個(gè)格子。綠色 = GO,橙色 = HOLD,紅色 = NO-GO。這種"一目了然"的狀態(tài)表達(dá)方式比文字列表高效得多——用戶可以在 1 秒內(nèi)掃完所有子系統(tǒng)健康狀態(tài)。
② Auto-Sequence Path 自動(dòng)序列路徑 左側(cè)豎向排列的任務(wù)清單(Sensor Calibration → RF Uplink Established → Range Clearance...),每個(gè)任務(wù)前用三角形圖標(biāo)表示狀態(tài):綠色 ▲ = 已完成,橙色 ? = 等待中,灰色 = 未開始。這是一種非常清晰的線性進(jìn)度可視化方式。
③ 火箭線稿插畫 右側(cè)大面積區(qū)域放置火箭透明線稿圖(Wireframe),內(nèi)部用綠色漸變填充表示液氧(LOX)儲(chǔ)量——84.2%。這種"技術(shù)藍(lán)圖 × 實(shí)時(shí)數(shù)據(jù)"的組合,既提供了設(shè)備形態(tài)參照,又嵌入了關(guān)鍵運(yùn)行參數(shù)。
④ Secure Audio Channel 音頻通道波形圖 右上角的小型音頻波形條(AES-256 ACTIVE),暗示這是一個(gè)實(shí)時(shí)通訊環(huán)境。這類"微細(xì)節(jié)"的存在感雖然弱,但對(duì)營(yíng)造專業(yè)氛圍至關(guān)重要。
────────────────────────────────────────
上圖是Stage 1 LOX 詳情 + 引擎集群溫度監(jiān)控。
上圖是Launch Director 與 Telemetry Officer 并排對(duì)比。
上圖是Recovery Captain 與 Engineer 并排對(duì)比。
這套設(shè)計(jì)最令人印象深刻的架構(gòu)決策是:為四個(gè)不同角色設(shè)計(jì)了完全不同的數(shù)據(jù)視圖,且每個(gè)視圖的信息密度和數(shù)據(jù)類型都精確匹配該角色的職責(zé):
|
角色 |
核心關(guān)注 |
主色調(diào) |
關(guān)鍵組件 |
|
Launch Director |
全局狀態(tài) + 倒計(jì)時(shí) |
綠色 |
Readiness 網(wǎng)格、Auto-Sequence |
|
Telemetry Officer |
實(shí)時(shí)遙測(cè)數(shù)據(jù) |
紅色 |
波形圖、雷達(dá)掃描、引擎剖面 |
|
Recovery Captain |
回收海域 + 著陸區(qū) |
綠色+紅 |
雷達(dá)圓環(huán)、海況熱力圖、甲板平面圖 |
|
Engineer |
子系統(tǒng)參數(shù) |
綠色 |
Readiness 網(wǎng)格、診斷圖表、引擎溫度 |
Stage 1 LOX 詳情卡片的設(shè)計(jì)尤其出色:
• 84.2% 用超大的綠色等寬字體顯示
• 右側(cè)是一個(gè)透明的圓柱形容器 3D 渲染圖,內(nèi)部綠色液體高度與百分比對(duì)應(yīng)——數(shù)據(jù)可視化與三維插畫的完美融合
• 下方列出 TEMP(-183.4°C)和 PRESSURE(4.2 BAR),字體大小層級(jí)清晰
• 引擎集群部分用九宮格排布九個(gè)引擎噴口,每個(gè)噴口上方標(biāo)注編號(hào),其中 #07 用橙色高亮標(biāo)記異常溫度(1120°C),#03 和 #09 顯示正常溫度
Engine Cluster 溫度條形圖:底部一根橫向的溫度分布條,從綠(420°C)過渡到黃再到紅(1480°C),ENG-07 區(qū)域明顯偏黃/橙——一眼就能定位哪個(gè)引擎出了問題。
────────────────────────────────────────
上圖是TOPOLOGY 拓?fù)鋱D。"Four roles. Two locations. One protocol."
這張拓?fù)鋱D回答了一個(gè)核心問題:四個(gè)操作員之間是什么關(guān)系?數(shù)據(jù)怎么流動(dòng)?
畫面布局清晰地展示了信息鏈路:
• Ground Station(地面站衛(wèi)星天線)→ 通過 Fiber Backbone 連接到 Mission Control(任務(wù)控制中心)
• Mission Control 內(nèi)部有兩個(gè)席位:Launch Director + Telemetry Officer
• Mission Control 通過 Orbital Uplink 連接到 Satellite GEO-04
• 同時(shí)通過 Manual Override/Fallback 鏈路連接到 DroneShip "North Star"(海上回收船)
• DroneShip 上有另外兩個(gè)席位:Recovery Captain + Engineer
• 還有一個(gè)獨(dú)立的 Meteorological Mesh / Atlantic 氣象數(shù)據(jù)源
每條連線都用虛線 + 不同顏色區(qū)分(綠色 = 正常鏈路,黃色 = 備用鏈路,紅色 = 應(yīng)急鏈路),并標(biāo)注了延遲時(shí)間(Fiber 1.2 Gbps / Orbital 38 ms / Descent Targeting 12 ms)。
設(shè)計(jì)啟示:復(fù)雜系統(tǒng)的 UI 設(shè)計(jì),如果缺少一張"上帝視角"的拓?fù)鋱D,用戶就很難建立對(duì)整體架構(gòu)的心智模型。這張拓?fù)鋱D就是整個(gè)系統(tǒng)的"地圖"。
────────────────────────────────────────
上圖是軌道飛行視圖 + Ascent 階段視圖。
這是整套設(shè)計(jì)中最具視覺沖擊力的頁(yè)面之一:
上半部分:地球邊緣的太空視角,可以看到城市燈光分布在大陸上,一枚白色箭頭軌跡線從地表射入太空,旁邊標(biāo)注 8.42 MACH 和 112.4 KM —— 當(dāng)前速度和高度。右上角的狀態(tài)標(biāo)簽顯示 MAX-Q CLEARED(已通過最大動(dòng)壓點(diǎn))。
下半部分分為多個(gè)數(shù)據(jù)模塊:
• Aerodynamic G-Force:左側(cè)的 G 力曲線圖,紅色斜紋填充區(qū)域標(biāo)示危險(xiǎn)范圍,白線表示當(dāng)前值(// critical load 6.22G //)
• Aerodynamic Heating:六邊形蜂窩熱力圖,中心亮紅色表示最高溫區(qū)(Peak Nose Core Temp: 1,940°C)
• Flight Event // WECO:事件列表,[ STAGE 1 CUTOFF CONFIRMED ] 用綠色標(biāo)注已完成事件
• Trajectory Attitude:右側(cè)小型地球儀顯示當(dāng)前姿態(tài)角(Pitch: 48.1°, Roll: 0.8°)
特別值得一提的是下圖的變體版本——部分區(qū)域被黃色/黑色斜紋遮罩覆蓋,模擬軍事系統(tǒng)中常見的"機(jī)密信息遮蓋"效果。這種細(xì)節(jié)處理極大地增強(qiáng)了真實(shí)感。
────────────────────────────────────────
上圖是真實(shí)控制室環(huán)境中的大屏渲染。
這張圖把 UI 從"屏幕截圖"提升到了"空間體驗(yàn)"層面:
• 整個(gè)控制室籠罩在紅色應(yīng)急燈光下,營(yíng)造出緊張的事故處置氛圍
• 中央大屏顯示的是 Telemetry Officer 的雷達(dá)界面(紅色主題)
• 大屏前方坐著幾位操作員的剪影背影,他們面前還有各自的工作站屏幕
• 右上角的數(shù)字時(shí)鐘顯示 3:20,暗示這是某個(gè)關(guān)鍵時(shí)刻的時(shí)間戳
為什么這張圖重要?
大多數(shù) UI 設(shè)計(jì)只停留在 Figma/Sketch 的畫布上。但這套設(shè)計(jì)考慮了物理環(huán)境中的呈現(xiàn)效果——紅色環(huán)境光如何影響界面的可讀性?大尺寸投影下的字號(hào)是否足夠?多人協(xié)作時(shí)的視線方向是否合理?這些"超出像素"的問題才是決定實(shí)際落地質(zhì)量的關(guān)鍵。
────────────────────────────────────────
上圖是Aborted/Ordnance 中止/引爆界面。
當(dāng)系統(tǒng)進(jìn)入中止/緊急模式時(shí),界面發(fā)生了顯著變化:
• 主色調(diào)從綠色切換為紅色:正常態(tài)的綠色元素全部變?yōu)榧t色或橙紅色
• 圓形雷達(dá)視圖中央顯示 KSC LAUNCH-PAD 39A,外圍有多層同心圓環(huán)(綠色→黃色→紅色)代表不同的安全區(qū)域邊界
• Exclusion Zone [ EXCLUSION ZONE ] 標(biāo)簽用紅色菱形圖標(biāo)標(biāo)記禁區(qū)
• 左上角顯示 ABORT 狀態(tài)標(biāo)識(shí),左側(cè)邊欄也變?yōu)榧t色調(diào)
• 底部的 Flight Termination System 面板顯示 [ ORDNANCE ARMED ] 狀態(tài),KEY_ALPHA / CMD 顯示 [AUTHORIZED] 或 [PENDING]
這種基于狀態(tài)的色彩系統(tǒng)反轉(zhuǎn),是高風(fēng)險(xiǎn)行業(yè) UI 的標(biāo)準(zhǔn)做法——用戶不需要閱讀文字,僅憑顏色就能判斷當(dāng)前處于"正常"還是"緊急"狀態(tài)。
────────────────────────────────────────
上圖是DroneShip 回收船甲板監(jiān)控界面。
Recovery Captain 的主界面展示了海上回收階段的全貌:
• 頂部狀態(tài)欄:Vessel 名稱 "A SHORTFALL OF GRAVITAS"、Droneship Connectivity [STABLE]、Signal Latency 24 MS
• Sea State & Wind:左上角海況熱力圖,Speed 14 KTS,Sea State 3 (MODERATE)
• 甲板俯視平面圖:中央大型區(qū)域顯示無人機(jī)船甲板布局,三層同心圓環(huán)(SAFE ZONE / RISK ZONE / ABORT ZONE),目標(biāo)落點(diǎn)用綠色菱形標(biāo)記
• 底部四模塊:
• Grid Fins:四個(gè)舵面角度滑塊(+02° ~ +05°)
• Deck Impact & Legs:著陸沖擊熱力圖 + 四條著陸腿狀態(tài)(LANDING LEGS: DEPLOYING...)
• Action Zone:機(jī)械臂抓取裝置的線稿圖 + [ DECK SECURE ] 按鈕
黃色/黑色警示條紋的使用也是一大亮點(diǎn)——多處區(qū)域用斜紋條紋表示"受限/加密/不可用",既是功能表達(dá)也是一種視覺節(jié)奏的調(diào)節(jié)手段。
────────────────────────────────────────
上圖是Module 03/04 和 Module 05/06 子系統(tǒng)詳情。
最后兩張圖展示了子系統(tǒng)的精細(xì)化設(shè)計(jì):
Module 03 — VECTOR THRUSTERS(矢量推進(jìn)器):
• 四個(gè)推進(jìn)器的 3D 線稿圖,每個(gè)箭頭標(biāo)注推力方向
• 推力數(shù)值直接標(biāo)注在推進(jìn)器旁:42% / 38% / 89% / 34%
• 底部狀態(tài)欄:DP MODE: STATION KEEPING [ ACTIVE ]
Module 04 — ALTITUDE TELEMETRY(高度遙測(cè)):
• 一條下降曲線圖,橫軸為 TIME TO IMPACT(撞擊倒計(jì)時(shí)),縱軸為 ALTITUDE
• 下方兩個(gè)超大數(shù)字:ALT: 1,240m / SINK RATE: 42 m/s
Module 05 — G-FORCE TELEMETRY:
• G 力曲線圖,紅色區(qū)域標(biāo)示危險(xiǎn)范圍
• 注釋文本:// critical load 6.22G //
Module 06 — STAGE SEPARATION & MECO:
• 事件確認(rèn)列表 + 多組進(jìn)度條(Stage 1 Return Trajectory / Grid Thrusters / Retro-Burn 等)
• 右側(cè)火箭剖面圖標(biāo)注各部件狀態(tài)(Pneumatic Clamps: RELEASED)
這些模塊化的設(shè)計(jì)使得整個(gè)系統(tǒng)具有極強(qiáng)的可擴(kuò)展性——新增一個(gè)子系統(tǒng)只需增加一個(gè) Module 卡片,而不需要重構(gòu)整個(gè)界面。
────────────────────────────────────────
這套 APEX 發(fā)射控制系統(tǒng) UI 給我們留下了以下可直接應(yīng)用的設(shè)計(jì)原則:
1. 從品牌到界面的全鏈條設(shè)計(jì):Logo → 工牌 → 銘牌 → 界面 → 物理環(huán)境,每一個(gè)觸點(diǎn)都在講故事
2. 概念先行,一句話定義系統(tǒng):"One surface. Four operators. Nine minutes." 讓所有設(shè)計(jì)決策有據(jù)可依
3. 角色驅(qū)動(dòng)的差異化界面:不同崗位看到不同數(shù)據(jù),信息密度精確匹配職責(zé)需求
4. 狀態(tài)即顏色,顏色即語義:綠色=正常/GO,黃色=警告/HOLD,紅色=緊急/NO-GO/ABORT
5. 點(diǎn)陣網(wǎng)格替代狀態(tài)列表:System Readiness 的方格矩陣比文字列表快 5 倍完成認(rèn)知
6. 線稿插畫承載工程美感:透明線稿 × 數(shù)據(jù)填充,比寫實(shí)渲染更有"控制室"的專業(yè)感
7. 拓?fù)鋱D是復(fù)雜系統(tǒng)的必需品:沒有"地圖",用戶就無法建立全局心智模型
8. 考慮物理環(huán)境的影響:屏幕上的好看 ≠ 控制室里好用,環(huán)境光、觀看距離、多人協(xié)作都是設(shè)計(jì)變量
────────────────────────────────────────
蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))www.axaxx.cn 是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.axaxx.cn