zouhaitao/stc32g128k
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: adjust battery text and icon size, fix text overflow in cards 5 and 9

Browse Source
This commit is contained in:
zouhaitao
2026-07-09 18:06:37 +08:00
parent fb781f4f2a
commit b15fca3629
2 changed files with 65 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
Docs/40_ui-design/main.md
View File

@@ -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$ 秒 $
@@ -76,7 +84,7 @@
ightarrow$ 日）。
#### 2.3.2 传感器对码等待与配对界面 (STATE_PAIR_SEARCH)
* **顶部标题**：显示 `APPAIRAGE` (16x32px)。
* **顶部标题**：显示 `APPAIRAGE` (16x32px)。
* **中央图案**：绘制占满屏幕中部的雷达搜索大图标（64x64px）并闪烁。
#### 2.3.3 对码确认与序号微调界面 (STATE_PAIR_CONFIRM)
@@ -110,8 +118,7 @@
* **退出/返回**：长按 CONFIRM 键 3 秒 或 长按 ▼ 键 2 秒主动退出。
### 2.4 报警触发与本地 SOS 界面 (STATE_ALARMING / STATE_SOS_EMITTED)
手环发生报警时的显示要具有极强的视觉冲击力：
手环发生报警时的显示要具有极强的视觉冲击力：
* **警告框**：全屏外围红绿交替闪烁的 4 像素宽粗线警告框。
* **中央图标**：根据传感器类型，居中绘制对应的 **64x64px** 的超大单色位图图标（如巨大的火苗 `🔥`、门锁 `🚪`）。

69
Docs/40_ui-design/wristband_ui_gallery.html
View File

@@ -2,7 +2,7 @@
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>手环 AMOLED 屏幕无障碍大字版 UI 效果图画册 (A11y V3.0)</title>
<title>手环 AMOLED 屏幕无障碍大字版 UI 效果图画册 (A11y V3.1)</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
@@ -149,7 +149,7 @@
</head>
<body>
<div class="container">
<h1>手环 AMOLED 无障碍大字版 UI 效果图画册 (A11y V3.0)</h1>
<h1>手环 AMOLED 无障碍大字版 UI 效果图画册 (A11y V3.1)</h1>
<div class="subtitle">针对特殊人群优化的大字体、大图标单页集中展示界面效果及按键交互说明</div>
<div class="grid">
@@ -163,15 +163,16 @@
<rect width="120" height="240" fill="#000000"/>
<!-- Status Bar (Left: Big Unlock, Right: Battery 16x32px text + battery icon) -->
<!-- 🔓 Unlock Icon (32x32px) -->
<!-- 🔓 Unlock Icon (32x32px style) -->
<g transform="translate(10, 15)">
<rect x="0" y="8" width="20" height="15" rx="3" fill="none" stroke="#10B981" stroke-width="2"/>
<path d="M 5 8 L 5 4 C 5 2, 12 2, 15 4 L 15 10" fill="none" stroke="#10B981" stroke-width="2" stroke-linecap="round"/>
</g>
<!-- Battery info (16x32px style scaled for SVG) -->
<text x="96" y="32" fill="#94A3B8" font-family="system-ui, sans-serif" font-size="12" font-weight="bold" text-anchor="end">85%</text>
<rect x="99" y="21" width="16" height="10" rx="1.5" fill="none" stroke="#94A3B8" stroke-width="1.2"/>
<rect x="101" y="23" width="10" height="6" rx="0.5" fill="#10B981"/>
<!-- Large Battery info and Large Battery Icon -->
<text x="82" y="32" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="15" font-weight="bold" text-anchor="end">85%</text>
<rect x="86" y="19" width="24" height="13" rx="2" fill="none" stroke="#FFFFFF" stroke-width="1.8"/>
<rect x="89" y="22" width="15" height="7" rx="0.5" fill="#10B981"/>
<rect x="110" y="23" width="1.5" height="5" rx="0.5" fill="#FFFFFF"/>
<!-- Central Big Time (32x64px equivalent in SVG) -->
<text x="60" y="115" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="34" font-weight="bold" text-anchor="middle">10:35</text>
@@ -202,9 +203,11 @@
<rect x="0" y="8" width="20" height="15" rx="3" fill="none" stroke="#EF4444" stroke-width="2"/>
<path d="M 5 8 L 5 3 C 5 1, 15 1, 15 3 L 15 8" fill="none" stroke="#EF4444" stroke-width="2" stroke-linecap="round"/>
</g>
<text x="96" y="32" fill="#94A3B8" font-family="system-ui, sans-serif" font-size="12" font-weight="bold" text-anchor="end">85%+</text>
<rect x="99" y="21" width="16" height="10" rx="1.5" fill="none" stroke="#94A3B8" stroke-width="1.2"/>
<rect x="101" y="23" width="10" height="6" rx="0.5" fill="#10B981"/>
<!-- Large Battery info & Icon -->
<text x="82" y="32" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="15" font-weight="bold" text-anchor="end">85%+</text>
<rect x="86" y="19" width="24" height="13" rx="2" fill="none" stroke="#FFFFFF" stroke-width="1.8"/>
<rect x="89" y="22" width="15" height="7" rx="0.5" fill="#10B981"/>
<rect x="110" y="23" width="1.5" height="5" rx="0.5" fill="#FFFFFF"/>
<!-- Central Big Time -->
<text x="60" y="115" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="34" font-weight="bold" text-anchor="middle">10:35</text>
@@ -237,14 +240,14 @@
<path d="M 8 6 L 16 2 M 40 6 L 32 2" stroke="#00E5FF" stroke-width="3.5" stroke-linecap="round"/>
</g>
<text x="60" y="165" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="15" font-weight="bold" text-anchor="middle">1. DATE/HEURE</text>
<text x="60" y="165" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="15" font-weight="bold" text-anchor="middle">1. HORLOGE</text>
<text x="60" y="210" fill="#64748B" font-family="system-ui, sans-serif" font-size="14" text-anchor="middle">^ v</text>
</svg>
</div>
</div>
<div class="card-ops">
<b>按键操作：</b>
按 ▲/▼ 键如同幻灯片般切换选项；短按 ■ 确认键进入；长按 ■ 3秒返回时钟。
按 ▲/▼ 键翻看菜单选项；短按 ■ 确认键确认选中进入；长按 ■ 3秒返回时钟。
</div>
</div>
@@ -265,7 +268,7 @@
<line x1="24" y1="38" x2="6" y2="44" stroke="#00E5FF" stroke-width="2.5"/>
</g>
<text x="60" y="165" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="15" font-weight="bold" text-anchor="middle">2. APPAIRAGE</text>
<text x="60" y="165" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="15" font-weight="bold" text-anchor="middle">2. APPAIR.</text>
<text x="60" y="210" fill="#64748B" font-family="system-ui, sans-serif" font-size="14" text-anchor="middle">^ v</text>
</svg>
</div>
@@ -279,41 +282,41 @@
<!-- 5. Single Value Time Edit -->
<div class="card">
<div class="card-title">5. 设定时间: 修改小时</div>
<div class="card-desc">每次仅微调一项：32x64px 超大数字显示，免眼花</div>
<div class="card-desc">每次仅微调一项：超大数字显示，下方指示已缩短</div>
<div class="watch-device">
<div class="screen-bezel">
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="240" viewBox="0 0 120 240">
<rect width="120" height="240" fill="#000000"/>
<text x="60" y="35" fill="#94A3B8" font-family="system-ui, sans-serif" font-size="15" font-weight="bold" text-anchor="middle">REGLAGE HEURE</text>
<text x="60" y="35" fill="#94A3B8" font-family="system-ui, sans-serif" font-size="14" font-weight="bold" text-anchor="middle">REGLER</text>
<!-- Up Arrow -->
<path d="M 60 65 L 50 78 L 70 78 Z" fill="#00E5FF"/>
<path d="M 60 62 L 52 72 L 68 72 Z" fill="#00E5FF"/>
<!-- Huge 32x64px hour value -->
<text x="60" y="140" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="52" font-weight="bold" text-anchor="middle">10</text>
<text x="60" y="132" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="44" font-weight="bold" text-anchor="middle">10</text>
<!-- Down Arrow -->
<path d="M 60 170 L 50 157 L 70 157 Z" fill="#00E5FF"/>
<path d="M 60 157 L 52 147 L 68 147 Z" fill="#00E5FF"/>
<text x="60" y="215" fill="#64748B" font-family="system-ui, sans-serif" font-size="12" text-anchor="middle">CONFIRM POUR SUIVANT</text>
<text x="60" y="200" fill="#64748B" font-family="system-ui, sans-serif" font-size="14" font-weight="bold" text-anchor="middle">VALIDER</text>
</svg>
</div>
</div>
<div class="card-ops">
<b>按键操作：</b>
按 ▲ 增加数值，▼ 减少数值；短按 ■ 键保存并进入修改下一位；长按 ■ 3秒放弃退出。
按 ▲ 增加数值，▼ 减少数值；短按 ■ 确认保存并切入分秒年等微调；长按 ■ 3s 放弃退出。
</div>
</div>
<!-- 6. Pairing Search -->
<div class="card">
<div class="card-title">6. 雷达对码搜索</div>
<div class="card-desc">64x64px 超大雷达闪烁动画，等待射频包</div>
<div class="card-desc">64x64px 超大雷达闪烁动画，文字防超出优化</div>
<div class="watch-device">
<div class="screen-bezel">
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="240" viewBox="0 0 120 240">
<rect width="120" height="240" fill="#000000"/>
<text x="60" y="35" fill="#94A3B8" font-family="system-ui, sans-serif" font-size="15" font-weight="bold" text-anchor="middle">APPAIRAGE</text>
<text x="60" y="35" fill="#94A3B8" font-family="system-ui, sans-serif" font-size="14" font-weight="bold" text-anchor="middle">APPAIRAGE</text>
<!-- 64x64px Big Radar -->
<g transform="translate(28, 65)">
@@ -322,8 +325,8 @@
<line x1="32" y1="50" x2="8" y2="58" stroke="#00E5FF" stroke-width="3"/>
</g>
<text x="60" y="165" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="15" font-weight="bold" text-anchor="middle">SEARCHING...</text>
<text x="60" y="200" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="12" font-weight="bold" text-anchor="middle">DECLENCH. SENS</text>
<text x="60" y="165" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="14" font-weight="bold" text-anchor="middle">RECHERCHE</text>
<text x="60" y="200" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="13" font-weight="bold" text-anchor="middle">ACTIVER DET.</text>
</svg>
</div>
</div>
@@ -336,12 +339,12 @@
<!-- 7. Pairing Confirm -->
<div class="card">
<div class="card-title">7. 识别类型与微调序号</div>
<div class="card-desc">自动显示传感器类型及大图标，只需微调超大序号</div>
<div class="card-desc">自动显示类型及大图标，直接对大序号框增减操作</div>
<div class="watch-device">
<div class="screen-bezel">
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="240" viewBox="0 0 120 240">
<rect width="120" height="240" fill="#000000"/>
<text x="60" y="32" fill="#10B981" font-family="system-ui, sans-serif" font-size="15" font-weight="bold" text-anchor="middle">v RECU</text>
<text x="60" y="32" fill="#10B981" font-family="system-ui, sans-serif" font-size="15" font-weight="bold" text-anchor="middle">✓ RECU</text>
<!-- 48x48px Big Door Icon -->
<g transform="translate(36, 45)">
@@ -357,7 +360,7 @@
<rect x="15" y="152" width="90" height="44" rx="6" fill="none" stroke="#00E5FF" stroke-width="2"/>
<text x="60" y="186" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="34" font-weight="bold" text-anchor="middle">01</text>
<text x="60" y="225" fill="#64748B" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">CONFIRM POUR ENREG.</text>
<text x="60" y="225" fill="#64748B" font-family="system-ui, sans-serif" font-size="13" font-weight="bold" text-anchor="middle">CONFIRMER</text>
</svg>
</div>
</div>
@@ -400,6 +403,7 @@
<!-- 9. Emitted SOS -->
<div class="card">
<div class="card-title">9. 本机主动求救 SOS</div>
<div class="card-desc">巨大警灯，通过换行与字号分配，完全防止溢出</div>
<div class="watch-device">
<div class="screen-bezel">
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="240" viewBox="0 0 120 240">
@@ -407,7 +411,7 @@
<rect x="4" y="4" width="112" height="232" rx="20" stroke="#EF4444" stroke-width="4.5" fill="none"/>
<!-- Huge 64x64px Rotating Siren Icon -->
<g transform="translate(28, 30)">
<g transform="translate(28, 25)">
<!-- Rays -->
<path d="M 32 10 L 32 18 M 14 16 L 22 22 M 50 16 L 42 22 M 6 32 L 15 34 M 58 32 L 49 34" stroke="#EF4444" stroke-width="3" stroke-linecap="round"/>
<!-- Dome -->
@@ -417,14 +421,17 @@
<rect x="6" y="52" width="52" height="8" rx="2" fill="#64748B"/>
</g>
<text x="60" y="145" fill="#EF4444" font-family="system-ui, sans-serif" font-size="18" font-weight="bold" text-anchor="middle">SOS EMIS</text>
<text x="60" y="185" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="15" font-weight="bold" text-anchor="middle">APPEL EN COURS</text>
<!-- Split into 2 rows to fit within 120px screen width nicely -->
<text x="60" y="125" fill="#EF4444" font-family="system-ui, sans-serif" font-size="16" font-weight="bold" text-anchor="middle">SOS</text>
<text x="60" y="152" fill="#EF4444" font-family="system-ui, sans-serif" font-size="16" font-weight="bold" text-anchor="middle">EMIS</text>
<text x="60" y="195" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="14" font-weight="bold" text-anchor="middle">APPEL...</text>
</svg>
</div>
</div>
<div class="card-ops">
<b>按键操作：</b>
短按或长按任意键均可停止发射并消除紧急求救。
连发 SOS 呼救信号。短按或长按任意按键均可停止发射并消除紧急求救。
</div>
</div>