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

docs: expand wristband_ui_gallery.html to exhaustive 15-card set covering all menus and states

Browse Source
This commit is contained in:
zouhaitao
2026-07-09 18:15:46 +08:00
parent afaf0bf360
commit 96a23da617
1 changed files with 151 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
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.2)</title>
<title>手环 AMOLED 屏幕无障碍大字版 UI 效果图画册 (A11y V3.3)</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
@@ -149,8 +149,8 @@
</head>
<body>
<div class="container">
<h1>手环 AMOLED 无障碍大字版 UI 效果图画册 (A11y V3.2)</h1>
<div class="subtitle">针对特殊人群优化的大字体、大图标单页集中展示界面效果及按键交互说明（共 11 类）</div>
<h1>手环 AMOLED 无障碍大字版 UI 效果图画册 (A11y V3.3)</h1>
<div class="subtitle">针对特殊人群优化的大字体、大图标单页集中展示界面效果及按键交互说明（共 15 类全套界面）</div>
<div class="grid">
<!-- 1. Normal Clock -->
@@ -226,7 +226,7 @@
<!-- 3. Main Menu - Date/Time -->
<div class="card">
<div class="card-title">3. 主菜单: 时间修改</div>
<div class="card-desc">无障碍单页集中展示：大图标配合超大功能项文字</div>
<div class="card-desc">菜单项 1：大时钟图标配合超大功能项文字</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">
@@ -247,14 +247,14 @@
</div>
<div class="card-ops">
<b>按键操作：</b>
按 ▲/▼ 键翻看菜单选项；短按 ■ 确认键确认选中进入；长按 ■ 3秒返回时钟。
按 ▲/▼ 键翻看菜单选项；短按 ■ 确认进入；长按 ■ 3秒返回时钟。
</div>
</div>
<!-- 4. Main Menu - Pairing -->
<div class="card">
<div class="card-title">4. 主菜单: 传感器配对</div>
<div class="card-desc">无障碍单页集中展示：大雷达对码图标与对码文本</div>
<div class="card-desc">菜单项 2：大雷达对码图标与对码文本</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">
@@ -275,13 +275,68 @@
</div>
<div class="card-ops">
<b>按键操作：</b>
按 ▲/▼ 键滚动菜单；短按 ■ 确认键确认选中进入对码搜索界面。
按 ▲/▼ 键翻看菜单选项；短按 ■ 确认进入对码搜索；长按 ■ 3秒返回时钟。
</div>
</div>
<!-- 5. Single Value Time Edit -->
<!-- 5. Main Menu - Arm/Disarm -->
<div class="card">
<div class="card-title">5. 设定时间: 修改小时</div>
<div class="card-title">5. 主菜单: 手动布撤防</div>
<div class="card-desc">菜单项 3：大盾牌防区图标与大字指示</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">- MENU -</text>
<!-- 🛡️ Shield / Security Icon (48x48px) representing ALARME menu item -->
<g transform="translate(36, 65)">
<path d="M 24 4 C 12 4, 6 12, 6 12 C 6 28, 24 44, 24 44 C 24 44, 42 28, 42 12 C 42 12, 36 4, 24 4 Z" stroke="#00E5FF" stroke-width="3.5" fill="none" stroke-linejoin="round"/>
<path d="M 24 12 L 24 34" 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">3. ALARME</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秒返回时钟。
</div>
</div>
<!-- 6. Main Menu - Liaison -->
<div class="card">
<div class="card-title">6. 主菜单: 摄像头绑定</div>
<div class="card-desc">菜单项 4：大摄像头图标与绑定文本</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">- MENU -</text>
<!-- 📷 Camera Icon (48x48px) representing LIAISON menu item -->
<g transform="translate(36, 65)">
<rect x="4" y="14" width="30" height="24" rx="3" fill="none" stroke="#00E5FF" stroke-width="3"/>
<circle cx="19" cy="26" r="6" stroke="#00E5FF" stroke-width="2.5" fill="none"/>
<path d="M 34 20 L 44 14 L 44 38 L 34 32 Z" fill="#00E5FF"/>
</g>
<text x="60" y="165" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="15" font-weight="bold" text-anchor="middle">4. LIAISON</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秒返回时钟。
</div>
</div>
<!-- 7. Single Value Time Edit -->
<div class="card">
<div class="card-title">7. 设定时间: 修改小时</div>
<div class="card-desc">每次仅微调一项：超大数字显示，下方指示已缩短</div>
<div class="watch-device">
<div class="screen-bezel">
@@ -308,9 +363,9 @@
</div>
</div>
<!-- 6. Pairing Search -->
<!-- 8. Pairing Search -->
<div class="card">
<div class="card-title">6. 雷达对码搜索</div>
<div class="card-title">8. 雷达对码搜索</div>
<div class="card-desc">64x64px 超大雷达闪烁动画，文字防超出优化</div>
<div class="watch-device">
<div class="screen-bezel">
@@ -336,9 +391,9 @@
</div>
</div>
<!-- 7. Pairing Confirm -->
<!-- 9. Pairing Confirm -->
<div class="card">
<div class="card-title">7. 识别类型与微调序号</div>
<div class="card-title">9. 识别类型与微调序号</div>
<div class="card-desc">自动显示类型及大图标，直接对大序号框增减操作</div>
<div class="watch-device">
<div class="screen-bezel">
@@ -370,9 +425,57 @@
</div>
</div>
<!-- 8. Alarm Received -->
<!-- 10. Pair Success -->
<div class="card">
<div class="card-title">8. 收到防区报警 (PORTE)</div>
<div class="card-title">10. 对码保存成功</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"/>
<!-- Symmetrical Circular Success Badge -->
<circle cx="60" cy="90" r="24" stroke="#10B981" stroke-width="2.5" fill="none"/>
<path d="M 48 90 L 56 98 L 72 82" stroke="#10B981" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
<text x="60" y="150" fill="#10B981" font-family="system-ui, sans-serif" font-size="15" font-weight="bold" text-anchor="middle">REUSSITE</text>
<text x="60" y="185" fill="#94A3B8" font-family="system-ui, sans-serif" font-size="13" font-weight="bold" text-anchor="middle">ENREGISTRE</text>
</svg>
</div>
</div>
<div class="card-ops">
<b>按键操作：</b>
显示 2 秒后自动退回到主时钟待机状态，无须任何按键。
</div>
</div>
<!-- 11. Pair Failed -->
<div class="card">
<div class="card-title">11. 对码绑定失败</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"/>
<!-- Symmetrical Circular Fail Badge -->
<circle cx="60" cy="90" r="24" stroke="#EF4444" stroke-width="2.5" fill="none"/>
<path d="M 50 80 L 70 100 M 70 80 L 50 100" stroke="#EF4444" stroke-width="3.5" fill="none" stroke-linecap="round"/>
<text x="60" y="150" fill="#EF4444" font-family="system-ui, sans-serif" font-size="15" font-weight="bold" text-anchor="middle">ECHEC</text>
<text x="60" y="185" fill="#94A3B8" font-family="system-ui, sans-serif" font-size="12" font-weight="bold" text-anchor="middle">DEJA ASSOC.</text>
</svg>
</div>
</div>
<div class="card-ops">
<b>按键操作：</b>
自动显示 5 秒后回退到配对菜单，或短按任意键立即回退。
</div>
</div>
<!-- 12. Alarm Received -->
<div class="card">
<div class="card-title">12. 收到防区报警 (PORTE)</div>
<div class="card-desc">全屏闪烁粗边框 + 64x64px 报警大图标</div>
<div class="watch-device">
<div class="screen-bezel">
@@ -400,9 +503,9 @@
</div>
</div>
<!-- 9. Emitted SOS -->
<!-- 13. Emitted SOS -->
<div class="card">
<div class="card-title">9. 本机主动求救 SOS</div>
<div class="card-title">13. 本机主动求救 SOS</div>
<div class="card-desc">巨大警灯，通过换行与字号分配，完全防止溢出</div>
<div class="watch-device">
<div class="screen-bezel">
@@ -435,38 +538,9 @@
</div>
</div>
<!-- 10. IPC Binding -->
<!-- 14. Arm/Disarm Setting Select -->
<div class="card">
<div class="card-title">10. IPC 绑定发送页</div>
<div class="card-desc">48x48px 摄像头图标，大字发送指示</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"/>
<!-- 48x48px Camera Icon -->
<g transform="translate(36, 40)">
<rect x="2" y="10" width="32" height="26" rx="4" fill="none" stroke="#00E5FF" stroke-width="3"/>
<circle cx="18" cy="23" r="6" stroke="#00E5FF" stroke-width="2.5" fill="none"/>
<path d="M 34 16 L 44 10 L 44 36 L 34 30 Z" fill="#00E5FF"/>
</g>
<text x="60" y="130" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="15" font-weight="bold" text-anchor="middle">LIAISON</text>
<text x="60" y="165" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="15" font-weight="bold" text-anchor="middle">EN COURS</text>
<text x="60" y="215" fill="#64748B" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle">ID: 0x3F882</text>
</svg>
</div>
</div>
<div class="card-ops">
<b>按键操作：</b>
连发对码信号。长按 ■ 键 3 秒 或 长按 ▼ 键 2 秒可立刻退出返回时钟。
</div>
</div>
<!-- 11. Arm/Disarm Setting Select -->
<div class="card">
<div class="card-title">11. 手动布撤防设定</div>
<div class="card-title">14. 手动布撤防设定</div>
<div class="card-desc">48x48px 锁/防区图标，无障碍大字状态指示</div>
<div class="watch-device">
<div class="screen-bezel">
@@ -492,6 +566,35 @@
按 ▲/▼ 键来回切换 `[ ARME ]` 和 `[ DESARME ]`；短按 ■ 确认保存退出；长按 ■ 3s 放弃退出。
</div>
</div>
<!-- 15. IPC Binding -->
<div class="card">
<div class="card-title">15. IPC 绑定发送页</div>
<div class="card-desc">48x48px 摄像头图标，大字发送指示</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"/>
<!-- 48x48px Camera Icon -->
<g transform="translate(36, 40)">
<rect x="2" y="10" width="32" height="26" rx="4" fill="none" stroke="#00E5FF" stroke-width="3"/>
<circle cx="18" cy="23" r="6" stroke="#00E5FF" stroke-width="2.5" fill="none"/>
<path d="M 34 16 L 44 10 L 44 36 L 34 30 Z" fill="#00E5FF"/>
</g>
<text x="60" y="130" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="15" font-weight="bold" text-anchor="middle">LIAISON</text>
<text x="60" y="165" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="15" font-weight="bold" text-anchor="middle">EN COURS</text>
<text x="60" y="215" fill="#64748B" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle">ID: 0x3F882</text>
</svg>
</div>
</div>
<div class="card-ops">
<b>按键操作：</b>
连发对码信号。长按 ■ 键 3 秒 或 长按 ▼ 键 2 秒可立刻退出返回时钟。
</div>
</div>
</div>
</div>
</body>