7.5 KiB
7.5 KiB
UI 设计 (Docs/40_ui-design/main.md)
本章节定义手环 120x240 Truly AMOLED 屏幕的画面布局、各页面坐标位置、中文字体/ASCII 字符对齐基线以及局部刷新逻辑。 针对特殊人群(如视力障碍者、老年人)的需求,本界面采取了大字版与大图标无障碍(Accessibility / A11y)设计系统。
1. 无障碍(A11y)大字设计系统规范
为确保特殊人群能清晰阅读,界面设计遵循以下准则:
- 最小字号限制:取消所有 8x16px 或更小的微缩文本。基础信息字号不小于 16x32px。
- 超大核心数据:时间数字、设定参数、传感器序号等核心数据使用 32x64px(超大点阵字模)呈现。
- 大图标辅助:所有页面均配备 48x48px 或 64x64px 的超大单色位图图标,结合高对比度色彩(红/绿/黄/黑),方便用户一眼识别功能。
- 单页单焦点排版:避免多行数据堆叠。菜单、时间设定、对码等页面在屏幕中每次只显示当前编辑或选中的一个条目,把所有的屏幕空间留给最大化的字体和图标。
- 坐标偏移修正: Truly AMOLED 屏幕写屏窗口渲染必须应用 X 轴偏移量 +4,Y 轴偏移量 +0。即:
LCD_SetWindow(x1 + 4, x2 + 4, y1, y2)。
2. 页面布局与坐标坐标规范
2.1 时钟待机界面 (STATE_CLOCK)
时钟页面作为常态显示,突出显示当前电量和超大时钟:
+-----------------------------------------+
| [🔒 32x32] 🔋 85%+ | <- 状态栏 (Y=20~35) (电池图标与16x32px电量)
| |
| |
| 10:35 | <- 居中超大时间 (Y=70~134) (32x64px字模)
| |
| |
| VEN. 07-10 | <- 底部大日期 (Y=180~212) (16x32px字模)
| |
+-----------------------------------------+
- 状态栏电量显示:
- 电池图标 放大绘制在
X=80, Y=25(大图标规格)。 - 电量百分比 采用
16x32px字模,右对齐。充电时显示+号。
- 电池图标 放大绘制在
- 安防状态显示:
- 状态栏左侧绘制 32x32px 的超大布撤防锁图标:红色闭锁
🔒(布防),绿色开锁🔓(撤防),不再显示小文字,使用户看图即懂。
- 状态栏左侧绘制 32x32px 的超大布撤防锁图标:红色闭锁
2.2 主选择菜单页面 (STATE_MENU)
为了将字体放大到极限,主菜单不再采用4行列表的形式,而是采用单屏单条目循环切换:
+-----------------------------------------+
| - MENU - | <- 标题 (Y=20) (16x32px)
| |
| [⏰ 48x48] | <- 选中项大图标 (Y=60~108)
| |
| 1. DATE/HEURE | <- 选中项大字文本 (Y=150~182) (16x32px)
| |
| ▲ / ▼ | <- 翻页提示符 (Y=205) (16x32px)
+-----------------------------------------+
- 屏幕中央显示当前选中功能的 48x48px 图标,下方以 16x32px 粗体显示功能名称。
- 用户按 ▲ 或 ▼ 键时,页面以幻灯片形式切换:
1. DATE/HEURE(对应 ⏰ 时钟图标)2. APPAIRAGE(对应 📡 雷达对码图标)3. ARM/DISARM(对应 🔒 防区盾牌图标)4. LIAISON IPC(对应 📷 摄像头图标)
- 短按 CONFIRM 键确认进入当前显示的功能。
2.3 功能设定与子界面设计
2.3.1 时间日期修改界面 (STATE_SET_TIME)
为了避免小字,时间设置每次只微调一个数值:
- 页面指示:顶部大字显示当前修改的字段,例如
REGLAGE HEURE(16x32px)。 - 中央数值:正中央显示正在修改的两位数值(如小时
10),字号采用 32x64px 超大号。数值上下有明显的闪烁三角箭头指示。 - 交互:按 ▲ / ▼ 调整该值。短按 CONFIRM 保存该值并切入下一项(分 $ ightarrow$ 秒 $ ightarrow$ 年 $ ightarrow$ 月 $ ightarrow$ 日)。
2.3.2 传感器对码等待与配对界面 (STATE_PAIR_SEARCH)
- 顶部标题:显示
APPAIRAGE(16x32px)。 - 中央图案:绘制占满屏幕中部的雷达搜索大图标(64x64px)并闪烁。
2.3.3 对码确认与序号微调界面 (STATE_PAIR_CONFIRM)
当手环解码到传感器对码信号后,切入此确认页:
+-----------------------------------------+
| ✓ RECU | <- 状态提示 (Y=20) (16x32px)
| |
| [🚪 48x48] | <- 传感器大图标 (Y=55~103)
| |
| PORTE | <- 类型名称 (Y=120) (16x32px)
| |
| [ 01 ] | <- 序号微调框 (Y=170~234) (32x64px)
+-----------------------------------------+
- 元素布局:
- 传感器图标 使用 48x48px 超大单色位图。
- 类型前缀 使用 16x32px。
- 数字序号选框 使用 32x64px 超大数字。用户按 ▲/▼ 直接微调序号,CONFIRM 键保存。
2.3.4 系统布撤防手动选择界面 (STATE_ARM_DISARM_SELECT)
- 页面显示:屏幕正中央显示当前拟设定的状态:
[ ARME ](配 48x48px 盾牌图标)[ DESARME ](配 48x48px 虚线开锁图标)- 字体全部使用 16x32px。按 ▲/▼ 键来回切换,按 CONFIRM 键保存生效。
2.3.5 IPC 绑定发射界面 (STATE_IPC_BIND)
- 图形指示:正中央显示 48x48px 的摄像头绑定大图标,配合动态声波向外发射动画。
- 大字提示:上方显示
LIAISON(16x32px),下方显示EN COURS(16x32px)。 - 物理地址展示:底部以 8x16px 显示手环地址
ID: 0xXXXXX。 - 退出/返回:长按 CONFIRM 键 3 秒 或 长按 ▼ 键 2 秒主动退出。
2.4 报警触发与本地 SOS 界面 (STATE_ALARMING / STATE_SOS_EMITTED)
手环发生报警时的显示要具有极强的视觉冲击力:
- 警告框:全屏外围红绿交替闪烁的 4 像素宽粗线警告框。
- 中央图标:根据传感器类型,居中绘制对应的 64x64px 的超大单色位图图标(如巨大的火苗
🔥、门锁🚪)。 - 主动 SOS 界面:顶部显示
SOS(16x32px),中央显示巨大的🚨警灯图标 (64x64px)。 - 底部文本:大字显示
PORTE 01或SOS EMIS(16x32px)。
3. 文字居中对齐与字模基线规范
为保证排版美观,Drivers/lcd_font.h 内的标准字模点阵需要满足如下基线对齐:
- 水平居中公式:
- 对于大字符(16px宽):X 轴绘制起点为
(120 - len * 16) / 2。 - 对于超大字符(24px或32px宽):X 轴绘制起点为
(120 - len * 32) / 2。
- 对于大字符(16px宽):X 轴绘制起点为
- 百分号(%)符号基线修正:百分号字符在
lcd_font.h数组的索引0x25中,点阵数据需向上平移 2 像素,以和0~9数字的基线保持严格水平对齐,避免百分号整体下沉。