六色UI视觉锚点简报

跨UI、角色、硬件和文档的共同视觉原则、三个整合方向与Token分层见CardHelper视觉风格圣经。

1. 设计目标

六色UI不是“把全彩手机界面减少到六种颜色”，而是一套面向低刷新、实体键和收藏卡展示的界面。首轮需要同时证明：

• 武将卡面具有足够的展示和收藏吸引力。
• 体力、护盾、Token、焦点、锁定和撤销始终清楚。
• 高频状态可以在稳定的小区域更新，不要求每次六色全刷。
• 颜色失效或转成RLCD后，状态仍能靠图形、数字、边框和反白理解。
• Image 2生成的气氛和装饰不会成为文字、数值或组件位置的唯一来源。

当前推荐假设仍是B“彩色状态框”，因为它最容易平衡卡面与刷新；看到三张真实方向并完成本地文字覆盖前不冻结。

2. 首轮只比较一个页面

首轮页面为“游戏中：武将全卡面/状态页”。使用完全一致的测试数据：

不使用不同武将、不同数值或不同背景比较A/B/C，防止内容差异影响方向选择。

3. Image 2与本地设计的职责

Image 2负责

• 卡面与UI装饰如何融合的整体气氛。
• 背景纹理、边框语言、色块关系和视觉密度。
• 卡面慢层的构图与留白建议。
• A/B/C三个方向的高层视觉差异。

本地设计工具负责

• 所有中文、数字、图标和精确状态。
• 字体、字号、行高、像素线、间距、网格和安全区。
• 体力、护盾、Token、焦点、锁定和撤销组件。
• 慢层/快层、R1/R2/R3区域与脏矩形。
• 六色真实调色板、RLCD 1-bit表达和设备原生分辨率。

Image 2方向图中的空白标签区只是构图参考。模型生成的伪文字、数字、图标或触摸按钮一律删除，不进入规格。

4. 画面分层

L1不得烘焙体力、护盾、Token、锁定或焦点。L2～L4应尽量位于固定区域，避免高频变化污染复杂人物画面。

5. 三个六色方向

A. 沉浸卡面

构图

• 武将和场景占画面约82%～90%。
• 常驻状态压缩为底部或侧边窄带。
• 焦点和数值调节以临时覆盖层出现。

优点

• 卡面收藏感和视觉冲击最强。
• 适合长时间静态展示。
• 产品最不像普通菜单设备。

风险

• 状态区面积小，正常观看距离下可能不够醒目。
• 临时覆盖容易遮挡人物或触发复杂区域刷新。
• 锁定、撤销和错误状态难长期保持清楚。
• 对六色局部刷新能力要求高。

B. 彩色状态框（当前推荐）

构图

• 武将卡面占约65%～75%。
• 顶部或底部保留稳定标题/状态区。
• 体力、护盾和Token使用固定槽位；焦点只改变边框、反白或局部纹理。

优点

• 慢层与快层边界最清楚。
• 状态常驻、可读，便于定义小范围刷新。
• 仍保留足够大的武将画面和收藏感。
• 最容易建立六色与RLCD的对应组件。

风险

• 固定框架会减小卡面面积。
• 如果边框过重，画面容易变成普通游戏HUD。
• 需要控制颜色和装饰，避免每个状态槽都抢视觉层级。

C. 结构化收藏牌

构图

• 标题、人物、身份/属性和状态按固定模块分区。
• 人物区域约45%～60%。
• 信息层级更像重新设计的电子武将牌，不追求原卡满屏。

优点

• 可读性、组件复用和批量一致性最好。
• 对长名称、多个Token和异常状态的容纳能力最强。
• RLCD降级最直接。

风险

• 人物沉浸感和原卡展示感最低。
• 容易偏向工具界面或数据库详情页。
• 需要更强的品牌视觉，避免模板过于理性。

6. 出图前预评估

以下是方向假设，不代替真实方向图和真机测试：

B是当前综合推荐。A可以保留为无交互时的“纯展示模式”候选，但不能用展示模式替代正常游戏状态页。

7. 六色语义与非颜色冗余

六个语义Token延续现有UI计划，但具体RGB/Lab值等待真实面板：

约束：

• 同一个物理颜色不能在同页同时表示相反语义。
• 体力、护盾、资源、焦点和锁定都必须在1-bit预览中可区分。
• 大面积装饰不优先占用 health、shield 等状态颜色。
• 颜色映射属于Display Profile，不把临时RGB值写死在角色母版。

8. 快状态组件原则

8.1 体力

• 3/4同时显示当前值和上限，不只显示四颗图形。
• 上/下按键操作时，当前值具有最强焦点。
• 受伤变化可以短暂显示旧值→新值，但不能依赖动画。

8.2 护盾和Token

• 值为0时根据布局决定隐藏或保留空槽，但行为必须全局一致。
• 数值达到两位数时不得挤压体力区。
• 图形和数值同时存在，不只使用颜色。

8.3 焦点

• 首选高对比粗边框、反白或双线框。
• 不只使用箭头、轻微色差或阴影。
• 焦点变化应限制在固定快层区域。

8.4 锁定

• 锁定状态持续可见。
• 使用锁形、文字和状态区变化中的至少两种。
• 不等用户误按后才提示。

8.5 撤销

• HP变化后显示可撤销动作和剩余时间。
• 不使用连续动画倒计时；可以使用整数秒、静态段或逐秒小区域刷新。
• 撤销提示不覆盖人物面部、体力当前值和锁定标志。

9. 首轮A/B/C生成设置

建议每个方向单独请求：

生成后由本地工具：

1. 统一裁切为相同画布。
2. 删除或覆盖模型伪文字。
3. 添加相同的“边塞都尉、3/4、护盾1、Token 2”等内容。
4. 添加相同焦点状态。
5. 生成RGB方向板和临时六色方向板。
6. 以同一尺寸并列评审。

10. A/B/C共用提示骨架

Use case: ui-mockup
Asset type: visual direction for a portrait six-color e-ink card-game assistant screen
Input image: Image 1 = approved original character/card-art reference; preserve the character identity and composition.
Primary request: Create a screen-only visual foundation for the specified UI direction. Explore composition, frame language, color-block relationships, paper texture, and the balance between collectible character art and a fixed status area.
Canvas: portrait 3:4, no device frame, no phone frame, no hands, no environment.
Display intent: designed for eventual conversion to a real six-color e-ink palette; use clear hard-edged regions and restrained texture; do not imitate RGB gradients or glowing displays.
State placeholders: reserve clean fixed spaces for character name, health 3/4, shield 1, token 2, focus, lock, and undo states, but do not render final text, numbers, or icons.
Layering: character art and decorative background are a slow layer; status, focus, lock, and undo areas are visually separate fast layers.
Constraints: preserve readable character face and silhouette; exact same content across A/B/C; no touchscreen controls; no generated Chinese; no logo; no watermark.
Avoid: smartphone UI, game-console HUD, glossy gradients, neon glow, tiny text, translucent glass panels, deep shadows, excessive ornament, fake buttons, unreadable glyphs.

11. 三个方向的提示差异

除以下 Direction delta外，共用提示、角色和状态不变。

A delta

Direction delta: Immersive card art. Let the character and scene occupy roughly 82–90% of the canvas. Use a very restrained permanent status strip and temporary overlay-safe zones. Maximize collectible card presence while keeping a clearly reserved fast-state region.

B delta

Direction delta: Framed color status system. Let the character art occupy roughly 65–75% of the canvas. Build one stable, visually integrated status frame with fixed slots for health, shield, token, focus, and lock. Keep the frame quiet and premium, not a conventional videogame HUD.

C delta

Direction delta: Structured collectible card. Divide the canvas into clear title, portrait, identity/attribute, and status modules. Let the portrait occupy roughly 45–60%. Emphasize readability, repeatable component geometry, and a refined collectible layout rather than a database or settings page.

12. 本地确定性重建

选中方向后，不能把方向PNG直接作为最终UI。UI-ANCHOR-001需要重建：

• 实际画布和安全区。
• 网格、边距、组件槽位和慢/快层。
• 中文字体、数字字体、字形子集和最小字号。
• 体力、护盾、Token、焦点、锁定和撤销组件全部状态。
• R1/R2/R3刷新矩形和全刷降级行为。
• 空值、长名称、两位数、低电量、无SD和恢复状态。
• 六色真实调色板与1-bit检查。

方向图只作为视觉参考，最终设计文件和页面规格才是工程交付来源。

13. RLCD对应策略

RLCD不是六色页面截图直接转1-bit。两者共享语义和状态，但分别维护布局Token：

页面ID、按键行为、默认焦点和状态模型保持一致；组件位置允许为300×400重新排布。

14. 入选后扩展顺序

UI锚点通过后按以下顺序扩展，不一次生成所有页面：

1. 游戏主页面：正常、体力变化、撤销、锁定。
2. 状态菜单与护盾/Token数值调节。
3. 武将预览和开始确认。
4. 武将列表与卡池列表。
5. 首页：无对局和有对局。
6. 休眠恢复、无SD、低电量、资源损坏和安全模式。
7. P1设置、诊断、USB传输和升级页面。

只有游戏主页面的A/B/C方向使用Image 2探索。其余页面优先继承已确定组件和设计Token，不为每页重新生成独立画风。

15. 评审标准

三方向按100分评审：

硬门槛：

• 不接受只能靠颜色识别的重要状态。
• 不接受体力变化需要六色整页刷新。
• 不接受模型伪文字作为最终标签。
• 不接受人物面部长期被状态层遮挡。
• 不接受方向图看起来漂亮但无法确定性重建。

16. 当前建议与待决策

当前建议

• 首轮使用同一角色、3/4体力、护盾1、Token 2和体力焦点。
• A/B/C分别生成，再由本地添加准确状态并拼成对比板。
• B彩色状态框作为当前推荐假设。
• UI方向图只画屏幕，不放进硬件外壳；硬件图后期本地合成入选UI。
• 六色屏未选型前冻结相对布局，不冻结最终像素稿。

待决策

• A/B/C最终入选方向。
• 标题/状态框位于顶部、底部或分置。
• 体力是“大数字为主”还是“图形槽位为主”。
• 常驻锁定标志的位置和面积。
• 撤销提示使用整数秒、静态段还是其他低刷新表达。
• 最终六色面板的真实调色板和快刷能力。