星核火花赛车科技

进入商城

标签： 仪表设计

  • 五套赛道 HMI 主题：配色、栅格与余光可读性

    结论：五套赛道 HMI 主题（厂商 / JDM / 赛道 / 复古机械 / 霓虹遥测）只改视觉语言，不改信息架构：它们共享同一组模拟 OBD 数据、计时与告警状态，切换主题不重置回放。决定余光可读性的不是配色本身，而是固定位置的告警区、统一字距的标签与窄无衬线大数值。

    五套主题改的是视觉语言，不是信息架构

    五套主题的差异只落在配色、字形与动效这一层，数据优先级与告警逻辑完全一致。这一点在 kno 赛道 HMI 原型里是硬约束：五套主题共享同一组模拟 OBD 数据、计时与告警状态，切换主题不重置回放。换句话说，主题是一层皮，不是一套新逻辑。

    这条约束的价值在于可验证性。如果每个主题各带一套自己的数据流或计时状态，就没法判断「同一个工况下五种视觉是否都读得出来」——变量太多。把主题限制在视觉层，才能让「换主题」这件事变成纯粹的视觉对照。信息架构本身的设计顺序另见 赛道仪表的信息架构：从圈速到告警的设计顺序。

    五套主题分别在强调什么？

    五套主题各有明确取向：厂商主题求统一克制，JDM 与霓虹求动效层次，赛道与复古求朴素可读。下表是各主题的视觉规则与数据驱动的动效。

    主题 视觉规则 数据与动效
    厂商 pro（默认） 统一深底、统一字距标签、窄无衬线大数值、青 / 琥珀 / 绿 / 红告警色板 换挡灯条与转速弧由 RPM 驱动；右侧告警柱与底栏随工况变色
    JDM 深底、压缩展示字、机械刻度、红针、湖绿车速色块 RPM 驱动分段换挡灯与指针；车速驱动进度块
    赛道 中性深底、大数字和清晰分隔线 优先突出 OBD 车速、圈速和告警
    复古机械 中性浅色表盘、细刻度、红针、衬线数字 指针随车速和转速变化，状态以文字和颜色双重表达
    霓虹遥测 深色数码排版、青 / 蓝 / 粉色量化条、模块化信息区 速度和转速用分段色块推进；报警区随工况变色

    「厂商」是这一轮新增并设为默认的主题。它的参考对象（RaceLogic / AiM MXS / PLEX SDM / MoTeC / Forza / iRacing / SimHub / RaceLab 等）在本轮只以文字描述的形式提供，图片文件不在工作区内，因此该主题是按描述建立的信息架构与原创视觉，未做逐图参考比对。所有图形、文字与布局均重新绘制，不使用任何参考品牌的 logo、商标字体或截图素材。

    颜色为什么必须写成「有用途的令牌」，而不是随手取色？

    把颜色写成有用途的令牌，是让五块屏、五套主题保持一致的前提；pro 主题的令牌按背景层、文字层、语义层三级组织。

    层级 令牌 色值 用途
    背景层 背景 #05080A 夜间主屏
    背景层 面板 #0D1417 卡片、次级底条
    背景层 抬升面 #131D21 强调格（如最佳成绩、告警格底）
    背景层 描边 #1E2B31 卡片边框
    背景层 分隔线 #16242A 字段分区
    文字层 主读数 #EDF3F4 车速、转速、时间
    文字层 次级文字 #93A7AC 标签、单位
    文字层 三级文字 #5B6E75 指标名、弱化信息
    语义层 青色 #4FD1C5 最佳圈、速度弧、强调
    语义层 琥珀 #F5B942 DELTA、预警、转速弧
    语义层 绿色 #7CD98A 低转换挡灯、正常状态
    语义层 红色 #FF5A4E 高转灯、报警
    单色介质 电子纸 #F1F1EA / #202A2A 单色静态路书

    把颜色分成三层，解决的是「改一处、乱一片」的问题。背景层只负责层次，五档灰阶拉开卡片与底条的关系；文字层只负责可读性，主读数与次级、三级文字之间有明确的亮度落差；语义层只负责含义，青 / 琥珀 / 绿 / 红各自绑定一种状态，不参与装饰。语义色一旦被拿去当装饰，告警就不再可靠——这是配色表里最需要守住的一条。

    余光可读性靠哪三条规则保证？

    余光可读性靠三条可执行的规则：告警位置固定、标签统一加字距、数值走窄无衬线大字号。它们都是可检查的工程约束，不是审美偏好。

    第一条是告警位置固定。赛道驾驶时不可能逐字阅读，只能靠余光判断颜色和位置：在 3.5 寸上是顶部换挡灯条加下方四格，告警时水温与油压两格转红并描红边；在 4.3 与 5.0 寸上是右侧独立的告警状态柱，固定显示油压、水温、电压、OBD 四项。位置不随数据变化而移动，是余光可读的前提——告警一旦会「跳」，余光就失效了。

    第二条是标签统一加字距（letter-spacing）。中文标签在深底窄间距下容易糊成一团，统一拉开字距能让字符边界在余光下更清楚。

    第三条是数值走 Bahnschrift 类窄无衬线字体。窄无衬线在相同物理宽度内能塞下更大的字号，这对 1.64 寸这类小画布尤其关键。

    这些主题目前能证明什么、不能证明什么？

    能证明的是信息架构与视觉语言的自洽性，不能证明的是任何实机显示与计时性能。原型的自动校验用 Playwright 遍历 5 块屏 × 5 套主题 × 全部副视图，逐项检查：SVG viewBox 是否为各板原生像素尺寸；所有 <text> 元素是否越出画布（用 getBBox() 逐项检测）；SVG 内容中是否泄漏 undefined 字符串；默认主题是否为 pro、主题切换是否生效；以及 OBD 回放推进、计时完成、断连状态、路书翻页、移动端横向溢出等交互状态。

    但边界必须写明——这套原型不证明 ESP-IDF / LVGL 点屏、SPI / DSI 帧率、实车 PID 支持或计时精度。显示链路的帧率约束可参考 车载 HMI 的 30 FPS：SPI 与 MIPI-DSI 显示链路差在哪。另外两条限制同样要留档：预览使用的是系统字体（Bahnschrift / Microsoft YaHei / Impact / Georgia / Consolas），固件移植前须选定允许嵌入式再分发的字体并重新检查文字边界；圈速、侧向 G、胎压等数值为示意值，档位与油压尚无车型适配，零百计时只使用模拟 OBD 车速，实机须接入受保护的 OBD 网关。

    还有一层方法论上的取舍值得记录。本轮在动手之前先检索了可核验的 UI 设计 skill：本机 skill-installer 的 OpenAI curated 目录接口返回 HTTP 403，应用内浏览器的设计系统检索连接超时，本机 visualize skill 的说明明确其用于对话内可视化、不适用于修改现有项目页面。因此本轮没有安装或引用任何未经核验的第三方 skill，风格直接落在已有 HMI 工程里实现。这比先引入一个来路不明的设计系统再回退要省事得多。赛道数据侧可对照 SR-Data 圈速分析套件，赛道几何与圈速基准可参考 上海国际赛车场。

    常见问题

    赛道仪表的配色应该先定哪一层？

    先定语义层，再定文字层，最后定背景层。语义色（青 / 琥珀 / 绿 / 红）绑定告警含义，一旦被装饰占用就失去可靠性；文字层要保证主读数与次级、三级文字有明确亮度落差；背景层只是把卡片与底条分出层次。顺序反了，改配色时会连带改掉信息层级。

    JDM 主题和霓虹主题的核心区别是什么？

    区别在动效的表达方式。JDM 用机械刻度、实体指针和珊瑚红 / 湖绿实色色块，靠 RPM 驱动分段换挡灯与指针、车速驱动进度块；霓虹遥测则用深色数码排版、青 / 蓝 / 粉色量化条和模块化信息区，靠速度和转速的分段色块推进。前者模仿机械表，后者模仿数码遥测。

    切换视觉主题会重置计时或 OBD 数据吗？

    不会。五套主题共享同一组模拟 OBD 数据、计时与告警状态，切换主题不重置回放。这正是把主题限制在视觉层的目的——保证换主题时变量只有一个。

    这五套主题能直接烧进固件吗？

    不能直接移植。它们用系统字体渲染，且不证明 ESP-IDF / LVGL 点屏、SPI / DSI 帧率、实车 PID 支持或计时精度。固件移植前须选定允许嵌入式再分发的字体并重新检查文字边界，并完成实机验证。

    本文数据来自星核火花赛车科技内部赛道 HMI 原型项目（kno）的《赛道 HMI 原型（kno 副本 · 统一厂商风）》README（2026-10 版）与《仪表 UI 风格与 skill 检索》（检索日期 2026-10-04）。五套主题共享的 OBD、计时与告警状态均为明确标注的模拟数据；「厂商」主题未做逐图参考分析，参考图仅以文字描述形式提供。文中的 skill 检索结果（HTTP 403、连接超时、visualize 不适用）为 2026-10-04 当次实测结论，仅代表当日状态。本原型不构成对 ESP-IDF / LVGL 点屏、SPI / DSI 帧率、实车 PID 支持或计时精度的验证。

  • 赛道仪表的信息架构：从圈速到告警的设计顺序

    结论：赛道仪表的信息架构顺序是「先定要显示什么，再定怎么排」：以真实赛车仪表的数据排布与告警逻辑作骨架，以赛车游戏 HUD 的夜间对比与字号层级作视觉语言。同一套架构套用到五个画布时，尺寸只改变信息密度，不改变信息优先级——圈速与告警永远优先。

    信息架构先于视觉：先排序，再排版

    做赛道 HMI，容易一上来就纠结配色和圆表外形，但真正要先定的是信息优先级。kno 赛道 HMI 原型的做法是分成两层：以真实赛车仪表的通用做法作信息架构骨架（数据怎么排布、告警怎么触发），以赛车游戏 HUD 的可读性作视觉语言（夜间对比、字号层级、动效层次），最后产出同风格的原创界面。

    这个顺序的意思是：先把「哪些数据必须常驻、哪些只在告警时出现」排清楚，再决定色板和栅格。反过来先定视觉，往往会在改配色时连带改掉信息层级。

    五个画布，一套架构，信息密度不同

    原型覆盖五块屏，逻辑分辨率全部按横屏设计。尺寸变的是「能放多少格」，不变的是「谁在最前面」。

    画布 逻辑分辨率 布局要点 承载的信息
    1.64 寸 456×280（物理面板原生 280×456 旋转） 极简计时：黑底、超大数字、TOTAL / CURRENT 双格，不含圆表；底部为 0—60 与 0—100 进度条 单次计时结果
    3.5 寸 480×320（物理面板原生 320×480 旋转） 顶部 LED 换挡灯条（绿 → 琥珀 → 红）＋ 左侧转速弧 ＋ 右侧大车速 ＋ 下方四格 单表 + 车辆状态（LAP / 圈速 / 水温 / 油压）
    4.3 寸 800×480 左上圈速栈（LAP / 本圈 / 最快圈 / DELTA）＋ 中央双圆表（GPS 速度 + 发动机转速）＋ 右侧告警状态柱 ＋ 底部辅助条 赛道分区
    5.0 寸 1280×720 同 4.3 分区，底栏多一格胎压 赛道 + 数据源 + 胎压
    3.97 寸电子纸 800×480 白底黑字、大 tulip 路线图、简短中文路书，不套用彩屏主题 离线路书

    注意 4.3 与 5.0 寸的中央双圆表：两表半径与圆心由可用区的宽和高度共同推导，目的是保证宽屏下不重叠。这是信息架构落到几何约束的一步——不是把两张表并排贴上去就能成立。5.0 寸底栏多出的胎压格也不是简单加一行，而是因为 1280×720 比 800×480 宽得多，才有余量在不牺牲主读数字号的前提下多放一格，属于宽屏专属的信息密度。

    告警为什么必须放在固定的状态区

    告警的位置和颜色必须固定，驾驶者才能用余光判断，而不必去读具体数字。

    在 3.5 寸上是顶部换挡灯条加下方四格：告警时水温与油压两格转红并描红边。在 4.3 与 5.0 寸上是右侧独立的告警状态柱，固定显示油压、水温、电压、OBD 四项。位置不随数据变化而移动，是余光可读的前提；如果告警图标会「跳」到别处，余光就失效了，只能回到逐字阅读，反而更慢。

    主题只改视觉语言，不改信息架构

    五套主题共享同一组模拟 OBD 数据、计时与告警状态，切换主题不重置回放。也就是说主题是一层皮，不是一套新逻辑。

    kno 在原有的 JDM / 赛道 / 复古 / 霓虹四套主题基础上，新增第五套「厂商（pro）」并设为默认。差异集中在配色、字形与动效：JDM 是密刻度、实体指针与珊瑚红/湖绿实色色块；赛道版强调朴素的信息层级；复古版采用浅灰机械表盘、细刻度与红针；霓虹版采用大数字、分段转速／速度条和状态矩阵。它们改的是视觉语言，数据优先级始终一致。电子纸路书则完全不套用彩屏主题，也不受主题切换影响。

    设计令牌：pro 主题的色板与用途

    把颜色写成有用途的令牌，而不是随手取色，是让五块屏和五套主题保持一致的关键。pro 主题的令牌如下：

    令牌 色值 用途
    背景 #05080A 夜间主屏
    面板 #0D1417 卡片、次级底条
    抬升面 #131D21 强调格（如最佳成绩、告警格底）
    描边 #1E2B31 卡片边框
    分隔线 #16242A 字段分区
    主读数 #EDF3F4 车速、转速、时间
    次级文字 #93A7AC 标签、单位
    三级文字 #5B6E75 指标名、弱化信息
    青色 #4FD1C5 最佳圈、速度弧、强调
    琥珀 #F5B942 DELTA、预警、转速弧
    绿色 #7CD98A 低转换挡灯、正常状态
    红色 #FF5A4E 高转灯、报警
    电子纸 #F1F1EA / #202A2A 单色静态路书

    标签统一加字距（letter-spacing），数值走 Bahnschrift 类窄无衬线字体，目的是在余光条件下提高字符可辨识度。这条规则和告警固定区是同一套逻辑：一切为「扫一眼就能读」服务。

    原型能证明什么，不能证明什么

    kno 是信息架构与视觉语言的验证原型，其中的 OBD、油压、档位、胎压等数值均为明确标注的模拟数据。

    它的自动校验用 Playwright 遍历 5 块屏 × 5 套主题 × 全部副视图，逐项检查：SVG viewBox 是否为各板原生像素尺寸；所有 <text> 元素是否越出画布（用 getBBox() 逐项检测）；SVG 内容中是否泄漏 undefined 字符串；默认主题是否为 pro、主题切换是否生效；以及 OBD 回放推进、计时完成、断连状态、路书翻页、移动端横向溢出等交互状态。

    但边界必须写明——该原型不证明 ESP-IDF / LVGL 点屏、SPI / DSI 帧率、实车 PID 支持或计时精度；电子纸的刷新能力与残影没有在浏览器中模拟；预览使用的是系统字体，固件移植前须选定允许嵌入式再分发的字体并重新检查文字边界；1.64 的横屏旋转与触摸映射尚待实机验证；圈速、侧向 G、胎压等数值为示意值，档位与油压尚无车型适配，实机须接入受保护的 OBD 网关。显示链路的帧率约束可参考 车载 HMI 的 30 FPS：SPI 与 MIPI-DSI 显示链路差在哪。

    还有一条本轮的明确限制：新增的「厂商」主题没有对照编号参考图逐像素比对。参考图（RaceLogic / AiM MXS / PLEX SDM / MoTeC / Forza / iRacing / SimHub / RaceLab 等）在本轮只以文字描述的形式提供，图片文件不在工作区内，因此该主题是按描述建立的信息架构与原创视觉，不声称完成了逐图参考分析。所有图形、文字与布局均重新绘制，不使用任何参考品牌的 logo、商标字体或截图素材。相关选屏与形态判断，另见 圆屏还是方屏：车载仪表的显示形态该怎么选；数据落地侧可对照 SR-RaceBox 车载数据采集器。

    常见问题

    赛道仪表的显示顺序应该怎么定？

    先定信息优先级，再定排版。圈速栈与告警优先：圈速栈回答「这圈跑得怎么样」，告警区回答「车还能不能跑」。在此之外的信息（水温、电压、胎压）才按屏幕尺寸铺开。

    5.0 寸的底栏为什么比 4.3 寸多一格？

    因为宽屏有余量。5.0 寸逻辑分辨率 1280×720，比 4.3 寸的 800×480 宽得多，因此底栏可以多放一格胎压作为宽屏专属的信息密度，而不必牺牲主读数的字号。

    电子纸路书为什么不套用彩屏主题？

    因为用途不同。电子纸是黑白静态介质，用于离线阅读路书，不承担实时告警，所以采用白底黑字、大 tulip 路线图与简短中文路书，也不受彩屏主题切换影响。

    kno 原型能直接用于固件吗？

    不能直接移植。原型用系统字体渲染，且不证明 ESP-IDF / LVGL 点屏、SPI / DSI 帧率、实车 PID 支持或计时精度。固件移植前须选定允许嵌入式再分发的字体并重新检查文字边界，并完成实机验证。

    本文数据来自星核火花赛车科技内部赛道 HMI 原型项目（kno）的《赛道 HMI 原型（kno 副本 · 统一厂商风）》README（2026-10 版）。原型中除设计令牌与分辨率外的数值均为明确标注的模拟数据；「厂商」主题未做逐图参考分析，参考图仅以文字描述形式提供。原型不构成对 ESP-IDF / LVGL 点屏、SPI / DSI 帧率、实车 PID 支持或计时精度的验证。