docs: implement無障碍大字大图标 (A11y) UI design for special demographics
This commit is contained in:
@@ -1,116 +1,124 @@
|
||||
# UI 设计 (Docs/40_ui-design/main.md)
|
||||
|
||||
本章节定义手环 120x240 Truly AMOLED 屏幕的画面布局、各页面坐标位置、中文字体/ASCII 字符对齐基线以及局部刷新逻辑。
|
||||
|
||||
## 1. 屏幕物理参数与刷新机制
|
||||
|
||||
* **屏幕规格**：0.95寸 Truly AMOLED 屏，物理分辨率 **`120x240`**。
|
||||
* **竖向屏规范**：屏幕窗口配置为 **`120` 像素宽，`240` 像素高**。页面中的时钟、菜单、报警元素均采用竖屏垂直居中排版（以 `X=60` 为几何中线）。
|
||||
* **坐标偏移修正**： Truly AMOLED 屏幕驱动芯片（RM69310）控制的 GRAM 存在偏置。为了使画面对齐，写屏窗口渲染必须应用 **X 轴偏移量 +4，Y 轴偏移量 +0**。即：`LCD_SetWindow(x1 + 4, x2 + 4, y1, y2)`。
|
||||
* **局部刷新防抖机制**：清除重绘标志（`Redraw`）的动作必须在具体的刷新绘制块结束时重置，防止因为主循环高速轮询而产生屏幕闪烁。
|
||||
|
||||
---
|
||||
|
||||
## 2. 页面布局与坐标坐标规范
|
||||
|
||||
### 2.1 时钟待机界面 (STATE_CLOCK)
|
||||
|
||||
时钟页面作为常态显示，包括状态栏、数字时钟和日期行。
|
||||
|
||||
```
|
||||
+-----------------------------------------+
|
||||
| 🔒 ARME 🔋 85% | <- 状态栏 (Y=24~27)
|
||||
| |
|
||||
| |
|
||||
| 10:35 | <- 中央时间 (Y=80~128)
|
||||
| |
|
||||
| |
|
||||
| VEN. 07-10 | <- 底部日期 (Y=180)
|
||||
| |
|
||||
+-----------------------------------------+
|
||||
```
|
||||
|
||||
* **状态栏电量显示（极重要）**：
|
||||
* **电池图标** 绘制在 `X=82, Y=27`。
|
||||
* **电量百分比** 绘制在 `X=76, Y=24`（以 `text-anchor="end"` 右对齐绘制）。如果处于充电状态，追加 `+` 号后缀显示为 `85%+`，起始绘制坐标向左偏置，以确保与电池图标之间依然有安全间距，不发生碰撞。
|
||||
* **安防状态显示**：
|
||||
* **布防状态 (ARMED)**：状态栏左侧显示红色闭锁 `🔒` 图标，显示 `ARME`。
|
||||
* **撤防状态 (DISARMED)**：状态栏左侧显示绿色开锁 `🔓` 图标，显示 `DESARME`。
|
||||
|
||||
### 2.2 主选择菜单页面 (STATE_MENU)
|
||||
|
||||
由时钟待机长按 CONFIRM 键 3 秒进入。显示四个功能条目，供滚动选择：
|
||||
```
|
||||
+-----------------------------------------+
|
||||
| - MENU - | <- 标题 (Y=30)
|
||||
| |
|
||||
| 1. DATE/HEURE | <- 条目 1 (Y=80)
|
||||
| > 2. APPAIRAGE < | <- 选中项高亮并加尖括号 (Y=115)
|
||||
| 3. ARM/DISARM | <- 条目 3 (Y=150)
|
||||
| 4. LIAISON IPC | <- 条目 4 (Y=185)
|
||||
+-----------------------------------------+
|
||||
```
|
||||
* 当前所选中的菜单项前后加上闪烁的 `> <` 箭头或以高亮粗体形式渲染，其余非选中项正常亮度显示。
|
||||
* 短按 ▲ 键向上滚动，▼ 键向下滚动。短按 CONFIRM 键进入该项。
|
||||
|
||||
### 2.3 功能设定与子界面设计
|
||||
|
||||
#### 2.3.1 时间日期修改界面 (STATE_SET_TIME)
|
||||
* **页面指示**：顶部大字 `REGLAGE HEURE`。
|
||||
* **数据列表**：居中分行显示当前编辑的 `HOUR`、`MIN`、`SEC`、`YEAR`、`MONTH`、`DAY`。
|
||||
* **光标与交互**：当前正在修改的数值行（如修改“小时”）闪烁或带有下划线高亮。按 ▲ 键增加数值，▼ 键减小数值，短按 CONFIRM 确认并跳转至下一项，全部设置完后自动保存返回时钟页。
|
||||
|
||||
#### 2.3.2 传感器对码等待与配对界面 (STATE_PAIR_SEARCH)
|
||||
* **顶部标题**：显示 `APPAIRAGE`（配对）。
|
||||
* **中央图案**：绘制雷达搜索波纹动画 `SEARCHING...`，并闪烁提示 `DECLENCH. SENS`（触发传感器）。
|
||||
|
||||
#### 2.3.3 对码确认与序号微调界面 (STATE_PAIR_CONFIRM)
|
||||
当手环解码到传感器对码信号后，系统自动依据 4-bit 数据码解析出传感器类型，直接切入此确认页进行序号编辑：
|
||||
```
|
||||
+-----------------------------------------+
|
||||
| ✓ RECU (Y=40)
|
||||
|
|
||||
| PORTE (Y=90) <- 传感器类型 (只读显示)
|
||||
|
|
||||
| [ 🚪 ICON ] (Y=130) <- 对应位图图标 (32x32px)
|
||||
|
|
||||
| [ 01 ] (Y=180) <- 序号微调选框 (当前高亮可编辑，按 ▲/▼ 修改)
|
||||
+-----------------------------------------+
|
||||
```
|
||||
* **交互逻辑**：
|
||||
* 页面显示捕获到的传感器类型文字和 32x32px 对应的物理位图图标。该字段为只读，不允许修改。
|
||||
* 页面焦点默认并唯一停留在下方的序号选框 `[ 01 ]` 上。
|
||||
* 用户直接按 ▲/▼ 键增减数字序号（01~99）。
|
||||
* 短按 CONFIRM 键完成最终保存并写入数据库，退回到时钟待机。
|
||||
* *长按 CONFIRM 键 3 秒放弃保存并直接返回时钟待机*。
|
||||
|
||||
#### 2.3.4 系统布撤防手动选择界面 (STATE_ARM_DISARM_SELECT)
|
||||
* **顶部标题**：显示 `REG. ALARME`。
|
||||
* **两个状态选项**：
|
||||
* `[ ARME ]`
|
||||
* `[ DESARME ]`
|
||||
* 按 ▲ / ▼ 键在这两者之间切换高亮。按 CONFIRM 键确认生效，系统状态转入 ARMED 或 DISARMED 并返回时钟页。
|
||||
|
||||
#### 2.3.5 IPC 绑定发射界面 (STATE_IPC_BIND)
|
||||
* **页面指示**：显示 `LIAISON IPC` (IPC 绑定)。
|
||||
* **发射中提示**：中央大字显示 `ENVOI EN COURS`（正在发送），绘制动态发射波形，系统使用 `bracelet_factory_id` 自动连续发射 EV1527 数据码为 `0x01` 的对码广播包。
|
||||
* **物理地址展示**：屏幕底部显示当前手环出厂唯一地址 `ID: 0xXXXXX`。
|
||||
* **退出/返回机制**：
|
||||
1. 自动退出：发射持续约 3 秒后，自动结束并退回时钟待机状态；
|
||||
2. 按键退出：**长按 CONFIRM 键 3 秒** 或 **长按 ▼ 键 2 秒** 立刻主动退出发射状态并返回时钟待机。
|
||||
|
||||
### 2.4 报警触发与本地 SOS 界面 (STATE_ALARMING / STATE_SOS_EMITTED)
|
||||
|
||||
* **报警提示边框**：全屏闪烁的红色警告虚线/实线边框。
|
||||
* **中央图标**：根据触发的防区传感器类型，居中绘制对应的单色位图图标（32x32px）。
|
||||
* **主动 SOS 界面**：大字显示 `SOS EMIS`，居中显示 `🚨` 旋转警灯图标。
|
||||
|
||||
---
|
||||
|
||||
## 3. 文字居中对齐与字模基线规范
|
||||
|
||||
为保证排版美观，[Drivers/lcd_font.h](file:///c:/workfile/105/stc32g12k128/Drivers/lcd_font.h) 内的标准字模点阵需要满足如下基线对齐：
|
||||
* **水平居中公式**：
|
||||
* 对于标准 8px 宽字符：X 轴绘制起点为 `(120 - len * 8) / 2`。
|
||||
* 对于双倍放大 16px 宽时钟字符：X 轴绘制起点为 `(120 - len * 16) / 2`。
|
||||
* **百分号（%）符号基线修正**：百分号字符在 `lcd_font.h` 数组的索引 `0x25` 中，点阵数据需**向上平移 2 像素**，以和 `0~9` 数字的基线保持严格水平对齐，避免百分号整体下沉。
|
||||
# UI 设计 (Docs/40_ui-design/main.md)
|
||||
|
||||
本章节定义手环 120x240 Truly AMOLED 屏幕的画面布局、各页面坐标位置、中文字体/ASCII 字符对齐基线以及局部刷新逻辑。
|
||||
针对**特殊人群（如视力障碍者、老年人）**的需求，本界面采取了**大字版与大图标无障碍（Accessibility / A11y）设计系统**。
|
||||
|
||||
---
|
||||
|
||||
## 1. 无障碍（A11y）大字设计系统规范
|
||||
|
||||
为确保特殊人群能清晰阅读，界面设计遵循以下准则：
|
||||
1. **最小字号限制**：取消所有 8x16px 或更小的微缩文本。基础信息字号不小于 **16x32px**。
|
||||
2. **超大核心数据**：时间数字、设定参数、传感器序号等核心数据使用 **32x64px**（超大点阵字模）呈现。
|
||||
3. **大图标辅助**：所有页面均配备 **48x48px 或 64x64px 的超大单色位图图标**，结合高对比度色彩（红/绿/黄/黑），方便用户一眼识别功能。
|
||||
4. **单页单焦点排版**：避免多行数据堆叠。菜单、时间设定、对码等页面在屏幕中**每次只显示当前编辑或选中的一个条目**，把所有的屏幕空间留给最大化的字体和图标。
|
||||
5. **坐标偏移修正**： 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** 的超大布撤防锁图标：红色闭锁 `🔒`（布防），绿色开锁 `🔓`（撤防），不再显示小文字，使用户看图即懂。
|
||||
|
||||
### 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. `1. DATE/HEURE` (对应 ⏰ 时钟图标)
|
||||
2. `2. APPAIRAGE` (对应 📡 雷达对码图标)
|
||||
3. `3. ARM/DISARM` (对应 🔒 防区盾牌图标)
|
||||
4. `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](file:///c:/workfile/105/stc32g12k128/Drivers/lcd_font.h) 内的标准字模点阵需要满足如下基线对齐：
|
||||
|
||||
Reference in New Issue
Block a user