结论:一块屏扩成五块屏,成本取决于「一套规则能复用多少」,而不是画了多少张图。我们的赛道 HMI 原型用一套设计令牌加一组布局推导规则驱动 5 种画布,从 456×280 到 1280×720,自动生成 52 张预览。新增一块屏时改的是推导规则,不是重画一套视觉。
五块画布的尺寸与旋转关系
| 画布 | UI 分辨率 | 物理面板 | 定位 |
|---|---|---|---|
| 1.64 寸 | 456×280 | 280×456 竖屏,旋转使用 | 极简零百计时 |
| 3.5 寸 | 480×320 | 320×480 竖屏,旋转使用 | 单表 |
| 4.3 寸 | 800×480 | 480×800 IPS 横屏使用 | 赛道分区 |
| 5.0 寸 | 1280×720 | 720×1280 IPS 横屏使用 | 宽屏全景 |
| 3.97 寸电子纸 | 800×480 | 800×480 电子纸 | 离线路书 |
这里有个容易沿用的错误:1.64 寸不是圆屏。它的原生面板是 280×456 的长方形 AMOLED,早期视觉稿里的「400×400 圆表」是过时概念稿。这个数字很重要——它决定了 UI 必须按 456×280 重新排,而不是把圆表缩放过来。
令牌分两层:结构色与语义色
以默认的「厂商(pro)」主题为例,令牌按职责分成两层,这个分层是跨尺寸复用的前提:
| 层 | 令牌 | 色值 | 用途 |
|---|---|---|---|
| 结构层 | 背景 | #05080A |
夜间主屏 |
| 面板 | #0D1417 |
卡片与次级底条 | |
| 抬升面 | #131D21 |
最佳成绩与告警格底 | |
| 主读数 | #EDF3F4 |
车速、转速、时间 | |
| 次级文字 | #93A7AC |
标签与单位 | |
| 三级文字 | #5B6E75 |
指标名与弱化信息 | |
| 语义层 | 青色 | #4FD1C5 |
最佳圈、速度弧 |
| 琥珀 | #F5B942 |
DELTA、预警、转速弧 | |
| 绿色 | #7CD98A |
低转换挡灯、正常状态 | |
| 红色 | #FF5A4E |
高转灯、报警 |
结构层可以随主题变化,语义层不可以。红 / 琥珀 / 绿在五套主题中始终对应报警、预警与正常——这样驾驶员换主题后仍然能「不读数值就判断状态」。语义色不得用于装饰,只能承载状态。
布局靠推导,不靠等比放大
这是跨分辨率适配的核心规则:圆表的半径与圆心由可用区宽与高度共同推导,而不是从一个基准尺寸缩放。宽屏下如果直接放大,两个圆表会重叠;按可用区反推半径之后,4.3 寸与 5.0 寸都能保证不重叠。
同理,信息密度也不是线性增长。5.0 寸的底栏比 4.3 寸多一格胎压,这是宽屏专属的密度提升,而不是把 4.3 的布局拉长。反过来,1.64 寸承担不了圈速栈——那个尺寸只做超大数字双格与底部进度条。
两类硬约束:电子纸与浅底主题
电子纸单独一套版式,白底黑字,不套用任何彩屏主题。这不是风格偏好,而是刷新特性决定的:它只用于静态路书与停车状态信息,不显示实时车速、转速或胎压告警。局刷、翻页残影与休眠电流目前仍是待实测项目,在确认波形与刷新能力之前,不能把部分刷新写成必然支持。
复古主题是浅底设计,被明确排除在夜间驾驶首屏之外——浅底在夜间的反差不足。这条排除规则和电子纸一样,属于设计约束而非审美取舍。
余光可读靠排版,不只靠字号
标签统一加字距,数值走 Bahnschrift 类窄体无衬线。窄体能让同样的横向空间容纳更多字符,加字距则让标签在余光扫过时更容易被区分。这两个手段加起来的效果,比单纯放大字号更省空间。
需要提醒的是,预览使用的是系统字体(Bahnschrift / Microsoft YaHei / Impact / Georgia / Consolas)。固件移植前必须选定允许嵌入式再分发的字体,并重新检查文字边界——换字体就会改变字宽,越界检测要重跑一遍。
主题切换在设计上有一个可复现的前提:五套主题共享同一组模拟 OBD 数据、计时与告警状态,切换主题不重置回放。这让主题对比变成可比较的实验,而不是五次不同的演示。像 鄂尔多斯国际赛车场 这类高差明显的场地,坡度信息在底部辅助条里的价值更高;而赛道数据的赛后分段复盘可以交给 SR-Data 圈速分析套件,HMI 只负责当场能读懂的那一屏。
FAQ
一套令牌真的能覆盖 456×280 到 1280×720?
能。令牌定义的是色板与字号层级,布局由可用区宽与高度共同推导。例如双圆表的半径与圆心会按可用区计算,以保证宽屏下不重叠。
1.64 寸是圆屏吗?
不是。它的原生面板是 280×456 长方形 AMOLED,UI 横屏使用为 456×280,早期视觉稿里的 400×400 圆表是过时概念稿。
为什么切换主题不会重置回放?
因为五套主题共享同一组模拟 OBD 数据、计时与告警状态,主题只改变渲染方式,不重置数据。
语义色可以跟着主题改吗?
不可以。红 / 琥珀 / 绿在五套主题中分别对应报警、预警与正常,主题只改变底色与版式。
参考资料
- 项目 06 ——
D:/AI/PROJECTS/kno/README.md(五屏五主题、设计令牌与布局推导) - 项目 06 ——
D:/AI/PROJECTS/kno/style-skill-research.md(原创风格与检索边界) - 项目 04 ——
research/five-board-hardware-facts.md(各板原生分辨率与旋转关系) - 项目 04 ——
research/instrument-matrix.md(风格覆盖规则与 52 张预览)
更新记录
首次发布 2026-10-11 最近核对:2026-10-11
{“@context”:”https://schema.org”,”@graph”:[{“@type”:”FAQPage”,”mainEntity”:[{“@type”:”Question”,”name”:”一套设计令牌真的能覆盖 456×280 到 1280×720 五种分辨率?”,”acceptedAnswer”:{“@type”:”Answer”,”text”:”能。令牌定义的是色板与字号层级,布局由可用区宽与高度共同推导。双圆表的半径与圆心会按可用区计算,以保证宽屏下不重叠。”}},{“@type”:”Question”,”name”:”1.64 寸车载屏是圆屏吗?”,”acceptedAnswer”:{“@type”:”Answer”,”text”:”不是。它的原生面板是 280×456 长方形 AMOLED,UI 横屏使用为 456×280。早期视觉稿里的 400×400 圆表是过时概念稿。”}},{“@type”:”Question”,”name”:”为什么切换主题不会重置 OBD 回放?”,”acceptedAnswer”:{“@type”:”Answer”,”text”:”五套主题共享同一组模拟 OBD 数据、计时与告警状态,主题只改变渲染方式,不重置数据,因此主题对比是可复现的实验。”}},{“@type”:”Question”,”name”:”HMI 的语义色可以跟着主题改变吗?”,”acceptedAnswer”:{“@type”:”Answer”,”text”:”不可以。红、琥珀、绿在五套主题中分别对应报警、预警与正常状态,主题只改变底色与版式,语义色不得用于装饰。”}}]}]}
发表回复