UI设计工作计划
首轮六色游戏页面的固定测试状态、三种视觉方向、慢/快层、Image 2职责和RLCD对应策略见六色UI视觉锚点简报。该简报负责视觉锚点探索，本文件仍负责完整页面、组件和工程交付计划。
| 项目 | 内容 |
|---|---|
| 文档版本 | 0.1 |
| 状态 | RLCD与六色屏双配置规划稿，尚未开始视觉稿 |
| 更新日期 | 2026-08-28 |
| 配置A | 300×400、逻辑1-bit RLCD；前期开发与验证 |
| 配置B | 最终六色彩色墨水屏；后期产品方案，型号与分辨率待选 |
1. 设计简报
本轮UI工作的目标，是建立一套共享交互核心和两套显示配置，让三国杀线下面杀玩家在RLCD原型与最终六色屏设备上，都能使用五个实体键快速完成选将、身份确认、体力和状态操作。
两套配置共享页面ID、五键行为、信息层级、组件语义和状态模型，但分别维护画布、颜色、图片资源、字体、刷新标记和逐像素页面。开发顺序是先完成RLCD设计与实现，再在共享核心上完成六色屏视觉和刷新适配；任何一套都不作为一次性废稿。
2. 设计输入与约束
- 共享核心：页面、焦点、按键、状态、文案ID和组件语义保持一致。
- RLCD画布：300×400竖屏，逻辑1-bit，黑白逐像素设计。
- 六色画布：使用最终屏幕实际分辨率；选型前只确定相对布局。
- RLCD色彩：黑与白，不使用灰色模拟。
- 六色色彩：只使用屏幕真实可显示的六种固有颜色，不模拟连续全彩、渐变和透明混色。
- 语义：颜色用于强化，不作为唯一信息；体力、护盾、锁定和焦点同时使用图形、文字或反白。
- 输入：电源、上、下、确定、返回五键。
- 刷新：RLCD与六色屏分别定义刷新等级；六色彩色卡面属于慢层，菜单焦点和体力属于快层。
- 动效：不使用动画、惯性滚动、渐变和高频过渡。
- 游戏操作：上/下直接修改体力，不启用游戏内按键连发。
- 锁定：游戏开始默认可操作；休眠和异常恢复后锁定。
- 撤销：状态变化后以5秒作为初始测试参数。
- 内容：RLCD和六色屏都验证原卡转换、简化海报、结构化模板，但使用各自独立的转换参数和资源。
- UI技术：LVGL负责控制页面和焦点，DisplayService拥有最终刷新权。
设计资料的优先级为：decisions.md、interaction-design.md、本文件、overall-design.md。发现冲突时先修订文档，不由设计稿自行选择。
3. 需要建立的设计文档
3.1 UI需求说明
记录每个页面的目标用户任务、进入条件、退出条件、数据、按键、错误和验收指标。
3.2 信息架构与流程
至少覆盖：
- 首次开机与操作引导。
- 无活动对局时开始游戏。
- 有活动对局时继续或恢复。
- 卡池、武将、预览、身份和开始确认。
- 游戏中体力、护盾、Token、锁定和撤销。
- 更换武将和结束游戏。
- 无SD、低电、资源损坏和安全模式。
- 设置、诊断、USB传输和升级。
3.3 视觉基础
定义画布、栅格、边距、字体、线宽、焦点、图标、分隔线、六色语义和单色降级表达。
3.4 组件规范
定义列表项、标题栏、状态栏、数值控件、焦点、弹窗、确认页、提示条、错误卡片、进度状态、锁定标志和卡面状态层。
3.5 页面规范
每个页面给出像素尺寸、组件位置、默认焦点、按键映射、所有状态、刷新范围和异常分支。
3.6 可用性测试方案
定义测试任务、观察项、成功指标、误触、刷新等待、理解错误和主观偏好记录方式。
3.7 工程交付说明
为LVGL与DisplayService提供设计Token、组件状态、层级、资源ID、期望刷新区域和页面截图基准。
4. 设计文件建议结构
如果后续使用Figma，建议按以下页面组织：
- 00 Cover & Decisions：版本、约束和决策链接。
- 01 Foundations：栅格、字体、图标、线宽和刷新等级。
- 02 Components：组件及全部状态。
- 03 User Flows：核心任务与异常流程。
- 04 Wireframes：使用逻辑画布完成全量低保真页面。
- 05 RLCD Directions：三种300×400黑白内容方向。
- 06 RLCD P0 Screens：前期开发使用的逐像素稿。
- 07 Six-color Directions：三种六色视觉方向。
- 08 Six-color P0 Screens：实际六色屏分辨率高保真稿。
- 09 Prototype：两套配置的五键原型。
- 10 Handoff：双配置尺寸、Token、资源和刷新标注。
- 11 Archive：废弃方向和历史版本。
目前尚未确定必须使用Figma。RLCD可以立即使用300×400完成逐像素稿；六色屏型号确定前只完成流程和相对布局，高保真稿必须使用真实分辨率与实测调色板。
5. 页面清单
P0核心流程
| 页面或状态 | 主要任务 |
|---|---|
| 启动 | 显示启动与基础故障状态 |
| 首页：无对局 | 开始游戏、进入武将库和设置 |
| 首页：有对局 | 继续游戏或开始新游戏 |
| 卡池列表 | 选择最近、收藏或具体卡池 |
| 武将列表 | 浏览名称和基础体力 |
| 武将预览 | 确认卡图、名称和版本 |
| 身份选择 | 选择普通、主公或地主并预览体力 |
| 开始确认 | 确认武将、身份、体力和护盾 |
| 游戏：全卡面 | 展示当前武将 |
| 游戏：状态层 | 修改体力后显示体力、护盾和Token |
| 游戏：锁定 | 明确显示锁定与解锁方式 |
| 状态菜单 | 进入护盾、Token、信息和换将 |
| 数值调整 | 增减护盾或Token并确认/取消 |
| 撤销提示 | 在有效窗口内说明返回键行为 |
| 更换武将确认 | 选择新武将体力处理方式 |
| 结束游戏确认 | 防止误结束并显示摘要 |
| 休眠与唤醒 | 保存、锁定和恢复 |
| 无SD | 继续当前游戏、重试或诊断 |
| 低电 | 提醒充电、限制升级和保护保存 |
| 对局恢复 | 告知恢复结果并保持锁定 |
P1系统流程
- 首次使用五键教程。
- 自动锁定设置。
- 时间设置与校时。
- 屏幕方向。
- 设备与存储信息。
- USB传输模式。
- 固件升级与回滚状态。
- 硬件诊断。
- 安全模式。
- 恢复出厂设置。
P1页面先完成流程和低保真，不抢占P0高保真设计。
6. 第一条端到端设计流
首轮先完成以下连续画面：
- 无对局首页。
- 卡池列表。
- 武将列表。
- 武将预览。
- 身份选择。
- 开始确认。
- 游戏全卡面。
- 体力变化状态层与撤销提示。
- 锁定状态。
这条流程覆盖“从开机到开始玩再到第一次受伤”，最适合检验页面层级、字体、焦点、按键理解和刷新成本。
7. 双配置视觉方向
7.1 RLCD内容方向
前期使用同一批卡测试：
- 原卡黑白化：最接近原始素材，但细节和文字风险最大。
- 简化黑白海报：保留人物、名称、势力和少量关键信息。
- 结构化黑白武将牌：完全重排信息，以可读性和状态操作为先。
三种方向均在300×400、1-bit条件下制作逐像素稿，并在真实RLCD上比较。
7.2 六色视觉方向
后期在六色真实样屏上给出三种可比较方向：
A. 沉浸卡面
最大化六色武将卡面，使用极小的常驻状态标记，操作时出现状态层。收藏和实体卡感最强，但菜单和状态可见性最低。
B. 彩色状态框
六色卡面置于固定框架中，底部或侧边永久保留体力、护盾和Token。状态清楚、刷新区域稳定，但卡面不再严格1:1满屏。
C. 结构化收藏牌
使用六色重新排版人物、名称、势力、体力和关键信息，不追求忠实复刻原卡。显示控制最好、品牌辨识强，但与原始卡牌距离最大。
三种六色方向使用同一块六色屏的真实画布、同一武将和同一游戏状态比较，不能用不同素材造成偏差。RLCD与六色屏可以选择不同内容表现方向，但页面和按键语义保持一致。
8. 六色语义体系
具体颜色名称以最终面板为准，设计先使用语义Token：
| Token | 用途 |
|---|---|
| paper | 页面底色和大面积留白 |
| ink | 正文、轮廓、焦点和关键对比 |
| health | 体力、受伤和濒死 |
| shield | 护盾、防御和保护 |
| resource | Token、资源和提醒 |
| accent | 势力、选中、成功或品牌强调 |
同一个颜色不能同时承担多个相反含义。任何状态必须在单色查看时仍可辨识，例如体力同时使用心形/数值，护盾使用盾形/数值，锁定使用锁形/文字。
六色图片必须在电脑端按真实面板调色板量化和抖动。设计稿不得使用屏幕无法复现的RGB颜色、半透明叠加、阴影或渐变。
9. 初始布局Token
以下仅作为线框起点，需在真实屏幕和字体上验证：
| Token | 初始值 |
|---|---|
| RLCD画布 | 300×400 px |
| 六色逻辑画布 | 3:4附近的竖屏比例，最终按真实屏幕修订 |
| 基础间距 | 屏幕短边的约1/75；300px原型为4px |
| 页面外边距 | 屏幕短边的约4%；300px原型为12px |
| 标题字号 | 约为屏幕短边的8%～9% |
| 列表字号 | 约为屏幕短边的6.5%～8% |
| 辅助字号 | 约为屏幕短边的5%～6% |
| 关键数字 | 约为屏幕短边的13%～19% |
| 列表行高 | 约为屏幕高度的12%～13% |
| 线宽 | 依据实际PPI选择，不低于清晰显示阈值 |
| 默认列表行数 | 5～6行 |
相对值只用于低保真。最终像素Token必须用实际屏幕PPI、观看距离和六色边缘表现决定，不能只根据电脑预览判断。
10. 焦点与状态
- 默认焦点优先使用高对比反白或粗边框，不只依赖颜色和箭头。
- 锁定状态持续可见，不能等用户按错才提示。
- 禁用项使用文字、图标、纹理或删除线，不仅使用低饱和颜色。
- 高风险确认页默认焦点放在安全选项，例如“继续游戏”或“取消”。
- 加载、空数据、错误、无SD、低电和恢复都需要独立设计状态。
- 按键唤醒是否同时执行动作必须在页面说明中明确。
11. 双配置刷新与画面分层
11.1 RLCD
- 使用ST7305真实能力定义全刷、局刷和低功耗保持。
- 页面、焦点、体力和提示均以黑白区域标记。
- 300×400设计稿标出期望刷新矩形，并提供全刷降级状态。
11.2 六色屏
六色UI分成：
- 慢层：六色卡面、整页背景、复杂插图和大面积换色。
- 快层：菜单焦点、体力、护盾、Token、锁定和撤销提示。
屏幕候选必须证明快层具有可接受的刷新方式。如果面板只能用很慢的六色全刷完成每次体力变化，则当前核心交互不可直接成立，需要更换屏幕、增加辅助反馈硬件或重新定义产品交互，不能仅靠UI稿规避。
设计稿为每个状态变化标注期望刷新等级，不直接假设硬件支持：
| 等级 | 设计含义 | 示例 |
|---|---|---|
| R1 | 高频小区域 | 体力、锁定、撤销；目标使用快速单色或局部刷新 |
| R2 | 控制页面变化 | 列表焦点、状态菜单；需要可连续操作的刷新速度 |
| R3 | 六色整页变化 | 切换卡面、进入彩色预览；允许较慢但必须有明确等待体验 |
两套配置的刷新方式分别由真实样机和DisplayService决定。高频R1/R2若在六色屏上不能达到可用速度，不接受简单退化为每次六色全刷。
12. 单页设计说明模板
每张页面稿附带：
- 页面ID和版本。
- 用户目标。
- 进入与退出条件。
- 所需数据及空值处理。
- 默认焦点。
- 五键短按和长按行为。
- 正常、加载、空、错误、锁定和恢复状态。
- 慢层/快层归属和R1/R2/R3刷新标记。
- 六色资源ID与单色降级表现。
- 文案与字符限制。
- LVGL组件建议或专用渲染说明。
- 可用性验收条件。
13. 设计到工程的交付物
- 最终六色屏实际分辨率的逐像素页面图。
- 300×400 RLCD逐像素页面图。
- 页面与组件命名表。
- 字体、图标和卡面资源清单。
- 六色语义Token、实际面板调色板和布局Token表。
- 五键焦点顺序。
- 弹窗层级和卡面状态层级。
- 每个交互的慢层/快层归属和期望刷新区域。
- 中文溢出、缺字和超长名称规则。
- 模拟器截图基准。
- P0页面状态矩阵。
14. 设计验收
- 核心流程不超过当前定义的页面层级。
- 熟悉用户从首页到选定常用武将不超过15秒。
- 体力变化一次按键完成。
- 用户能在不试错的情况下识别焦点和锁定状态。
- 六色模式不使用面板无法复现的颜色，单色降级后仍能理解核心状态。
- 所有中文无裁切、缺字和重叠。
- R1/R2/R3标注与刷新验证结果一致。
- 六色设计稿、真实屏幕截图和模拟器使用相同分辨率与状态对照。
- RLCD设计稿、真实屏幕截图和300×400模拟器使用相同状态对照。
- 高频体力、焦点和撤销反馈达到真实对局可接受速度。
15. 工作顺序
- 冻结共享P0页面、组件语义和页面说明模板。
- 在300×400画布完成第一条端到端RLCD低保真流程。
- 比较三种RLCD内容方向并建立RLCD Token与组件稿。
- 完成RLCD P0逐像素稿、五键原型和真实屏测试。
- 同期筛选六色屏候选，获得实际分辨率、调色板和刷新数据。
- 在共享交互核心上探索三种六色视觉方向。
- 选择方向后建立六色Token、组件库和慢/快层规范。
- 完成六色P0高保真页面并在真实样屏验证。
- 分别形成RLCD与六色屏的LVGL、资源和DisplayService交付包。
- 两套配置同步扩展P1设置、诊断、传输和升级页面。