diff --git a/Docs/40_ui-design/main.md b/Docs/40_ui-design/main.md index a2d8e57..904d6cb 100644 --- a/Docs/40_ui-design/main.md +++ b/Docs/40_ui-design/main.md @@ -7,12 +7,20 @@ ## 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)`。 +为确保特殊人群能清晰阅读,且文本在 120 像素宽的屏幕内**不超出边界**,设计遵循以下准则: +1. **文本宽度与换行原则**: + * 在 120 像素宽的屏幕上,单行 16x32px 大字符最多显示 **7 个字符**。 + * 如果提示语较长(如 `APPEL EN COURS`),必须将其**缩短或分成多行显示**(如第一行 `APPEL`,第二行 `SOS`)。 + * 菜单项名称进行合理缩短,如 `1. DATE/HEURE` 缩短为 `1. HORLOGE`,`2. APPAIRAGE` 缩短为 `2. APPAIR.`,以保证在 16x32px 字体下不溢出。 +2. **最小字号限制**:取消所有 8x16px 或更小的微缩文本。基础信息字号不小于 **16x32px**。 +3. **核心电量与状态图标放大**: + * 为了使用户能清晰看清剩余电量,电池电量数字放大为 **16x32px** 粗体。 + * 电池图标放大为 **24x12px** 粗边框,放置在状态栏右上角。 + * 状态锁图标放大为 **32x32px**,放置在状态栏左上角。 +4. **超大核心数据**:时间数字、设定参数、传感器序号等使用 **32x64px**(超大点阵字模)呈现。 +5. **大图标辅助**:所有页面均配备 **48x48px 或 64x64px 的超大单色位图图标**,结合高对比度色彩(红/绿/黄/黑),方便用户一眼识别功能。 +6. **单页单焦点排版**:避免多行数据堆叠。菜单、时间设定、对码等页面在屏幕中**每次只显示当前编辑或选中的一个条目**,把所有的屏幕空间留给最大化的字体和图标。 +7. **坐标偏移修正**: Truly AMOLED 屏幕写屏窗口渲染必须应用 **X 轴偏移量 +4,Y 轴偏移量 +0**。即:`LCD_SetWindow(x1 + 4, x2 + 4, y1, y2)`。 --- @@ -20,11 +28,11 @@ ### 2.1 时钟待机界面 (STATE_CLOCK) -时钟页面作为常态显示,突出显示当前电量和超大时钟: +时钟页面作为常态显示,包括状态栏、数字时钟和日期行。 ``` +-----------------------------------------+ -| [🔒 32x32] 🔋 85%+ | <- 状态栏 (Y=20~35) (电池图标与16x32px电量) +| [🔒 32x32] 🔋 85%+ | <- 状态栏 (Y=15~35) (电池图标与16x32px电量) | | | | | 10:35 | <- 居中超大时间 (Y=70~134) (32x64px字模) @@ -35,39 +43,39 @@ +-----------------------------------------+ ``` -* **状态栏电量显示**: - * **电池图标** 放大绘制在 `X=80, Y=25` (大图标规格)。 +* **状态栏电量显示(极重要)**: + * **电池图标** 放大绘制在 `X=86, Y=19, W=24, H=13`。 * **电量百分比** 采用 `16x32px` 字模,右对齐。充电时显示 `+` 号。 * **安防状态显示**: * 状态栏左侧绘制 **32x32px** 的超大布撤防锁图标:红色闭锁 `🔒`(布防),绿色开锁 `🔓`(撤防),不再显示小文字,使用户看图即懂。 ### 2.2 主选择菜单页面 (STATE_MENU) -为了将字体放大到极限,主菜单不再采用4行列表的形式,而是采用**单屏单条目循环切换**: +由时钟待机长按 CONFIRM 键 3 秒进入。显示四个功能条目,供滚动选择: ``` +-----------------------------------------+ | - MENU - | <- 标题 (Y=20) (16x32px) | | | [⏰ 48x48] | <- 选中项大图标 (Y=60~108) | | -| 1. DATE/HEURE | <- 选中项大字文本 (Y=150~182) (16x32px) +| 1. HORLOGE | <- 选中项大字文本 (Y=150~182) (16x32px) | | | ▲ / ▼ | <- 翻页提示符 (Y=205) (16x32px) +-----------------------------------------+ ``` * 屏幕中央显示当前选中功能的 **48x48px** 图标,下方以 **16x32px** 粗体显示功能名称。 * 用户按 ▲ 或 ▼ 键时,页面以幻灯片形式切换: - 1. `1. DATE/HEURE` (对应 ⏰ 时钟图标) - 2. `2. APPAIRAGE` (对应 📡 雷达对码图标) - 3. `3. ARM/DISARM` (对应 🔒 防区盾牌图标) - 4. `4. LIAISON IPC` (对应 📷 摄像头图标) + 1. `1. HORLOGE` (对应 ⏰ 时钟图标) + 2. `2. APPAIR.` (对应 📡 雷达对码图标) + 3. `3. ALARME` (对应 🔒 防区盾牌图标) + 4. `4. LIAISON` (对应 📷 摄像头图标) * 短按 CONFIRM 键确认进入当前显示的功能。 ### 2.3 功能设定与子界面设计 #### 2.3.1 时间日期修改界面 (STATE_SET_TIME) 为了避免小字,时间设置每次只微调一个数值: -* **页面指示**:顶部大字显示当前修改的字段,例如 `REGLAGE HEURE` (16x32px)。 +* **页面指示**:顶部大字显示当前修改的字段,例如 `REGLER` (16x32px)。 * **中央数值**:正中央显示正在修改的两位数值(如小时 `10`),字号采用 **32x64px** 超大号。数值上下有明显的闪烁三角箭头指示。 * **交互**:按 ▲ / ▼ 调整该值。短按 CONFIRM 保存该值并切入下一项(分 $ ightarrow$ 秒 $ ightarrow$ 年 $ ightarrow$ 月 $ ightarrow$ 日)。 @@ -76,7 +84,7 @@ * **中央图案**:绘制占满屏幕中部的雷达搜索大图标(64x64px)并闪烁。 #### 2.3.3 对码确认与序号微调界面 (STATE_PAIR_CONFIRM) -当手环解码到传感器对码信号后,切入此确认页: +当手环解码到传感器对码信号后,系统自动依据 4-bit 数据码解析出传感器类型,直接切入此确认页进行序号编辑: ``` +-----------------------------------------+ | ✓ RECU | <- 状态提示 (Y=20) (16x32px) @@ -110,8 +118,7 @@ 手环发生报警时的显示要具有极强的视觉冲击力: * **警告框**:全屏外围红绿交替闪烁的 4 像素宽粗线警告框。 * **中央图标**:根据传感器类型,居中绘制对应的 **64x64px** 的超大单色位图图标(如巨大的火苗 `🔥`、门锁 `🚪`)。 -* **主动 SOS 界面**:顶部显示 `SOS` (16x32px),中央显示巨大的 `🚨` 警灯图标 (64x64px)。 -* **底部文本**:大字显示 `PORTE 01` 或 `SOS EMIS` (16x32px)。 +* **主动 SOS 界面**:大字显示 `SOS` 和 `EMIS` (16x32px 分行显示,防止单行溢出),中央显示巨大的 `🚨` 警灯图标 (64x64px)。 --- diff --git a/Docs/40_ui-design/wristband_ui_gallery.html b/Docs/40_ui-design/wristband_ui_gallery.html index 4b10ad3..e34e0a1 100644 --- a/Docs/40_ui-design/wristband_ui_gallery.html +++ b/Docs/40_ui-design/wristband_ui_gallery.html @@ -2,7 +2,7 @@ - 手环 AMOLED 屏幕无障碍大字版 UI 效果图画册 (A11y V3.0) + 手环 AMOLED 屏幕无障碍大字版 UI 效果图画册 (A11y V3.1)