mirror of
https://github.com/vicliu624/trail-mate.git
synced 2026-08-14 22:59:51 +00:00
4.0 KiB
4.0 KiB
1) 关键可读性规则（针对 ~227PPI）
字号策略
- 标题/关键频点：18–20 px（不要再小）
- 常规信息：14–16 px
- 弱信息/单位/标签：12–13 px（底线，不再小）
- 数字（频率/RSSI）尽量用 等宽字体 或数字等宽特性（否则跳动）
线宽与柱宽（高 PPI 必须加粗）
- 面板边框：2 px（不要 1px）
- 网格线：1 px（但降低不透明度）
- 光标竖线：2 px
- 柱状条：4 px 宽（间隔 2 px），否则会变成“毛刺”
点击/触控命中（如果是触控）
- 最小按钮高度：28 px
- 按钮内边距：左右 10 px
- 两个按钮并排比两行更合适（不挤信息）
2) 画布与全局 Token（不变）
- Screen：480(w) × 222(h)
- BG：
WarmBG #F6E6C6 - Panel：
PanelBG #FAF0D8 - Line：
#E7C98F（边框/分隔线） - Text：
#6B4A1E - TextDim：
#8A6A3A - Amber：
#EBA341 - AmberDark：
#C98118 - Warn/Ok/Info：
#B94A2C / #3E7D3E / #2D6FB6
3) 新的布局（更适合 2.33"：信息更少、更大、更“扫一眼就懂”）
A) Topbar（更薄，但字更大）
- Topbar 高度：28 px（比 30 稍省空间）
- 区域：x=0,y=0,w=480,h=28
- 背景：PanelBG
- 底分隔线：2px，Line
Topbar 内容
-
左：
SUB-GHz SCAN，字号 18，Text -
右：两个状态标签（文字 13，TextDim / Info）
RSSI（默认 TextDim；工作中用 AmberDark）CAD（开启时 Info）
高 PPI 下，Topbar 文字 18 才“像标题”。
B) 主区（28 以下的 194 px 高度）
主区 y=28，h=194，左右分栏：
- 左侧频谱面板：w=332
- 右侧信息面板：w=480-12-10-12-332 = 114（更窄，但我们减少字段 + 放大关键数）
外边距：12，栏间距：10。
4) 左侧：频谱面板（重点：图更清晰）
- Panel：x=12,y=40,w=332,h=170
- 边框：2px Line
- 内边距：10
左面板内部
1) Plot 区
-
x=22,y=50,w=312,h=118
-
网格线：每 26px 一条横线（1px，Line，OPA 50）
-
柱：4px 宽，2px 间距
- 正常柱：Amber
- 超阈值柱：Warn
-
光标竖线：2px，Info
-
光标底部小三角：Info（更容易定位）
2) 底部频率刻度条（更“可读”）
- x=22,y=172,w=312,h=28
- 左：起始频率（14px，Text）
- 中：
STEP 25k（12px，TextDim） - 右：终止频率（14px，Text）
刻度条高度提升到 28，是为了让 12–14px 字在 2.33" 上不拥挤。
5) 右侧：信息面板（只保留“对操作有用”的字段）
- Panel：x=354,y=40,w=114,h=170
- 边框：2px Line
- 内边距：8
右面板内容（从上到下，强层级）
- CURSOR 频点（最大）
433.550：字号 20，TextMHz：字号 12，TextDim（贴右上或紧跟）
- RSSI（第二层级）
-92 dBm：字号 18，Text（超阈值改 Warn）
- BEST（建议频点）
434.125：字号 16，Ok- 下方小字：
SNR +12（12，TextDim）
- 进度条 + 百分比（底部）
- 进度条：h=12，边框 2px Line
- 填充：AmberDark
- 右侧
72%：12，TextDim
- 按钮（并排，单行）
- y = 面板底部 - 28 - 8
- 两个按钮各 w= (114-8-6)/2 ≈ 50
- h=28（触控/可读都够）
STOP/SCAN：底 Amber（扫描中 STOP 用 Warn）AUTO：边框 Info（开启时），默认 Line
右侧很窄，所以把单位、标签都做小字，把数字做大字，扫一眼就懂。
6) 你上一张效果图里“不符合高 PPI 的点”我已经修了
- 1px 边框会显“发虚” → 全部改 2px
- 柱太细会像噪点 → 柱宽 4px + 间距 2px
- 信息太多会挤小字 → 右侧只保留 Cursor/RSSI/Best/Progress
- 按钮做大但不占两行 → 并排一行
7) LVGL 实现提示（不写代码，只说关键参数）
- Panel border width：2
- 字体：Title 18 / Big number 20 / Mid 16–18 / Small 12–13
- 网格线：Line + opa 50
- 柱：用 canvas 或 chart，自绘柱子更可控（4px 宽）