CardHelper视觉风格圣经

1. 视觉北极星

CardHelper的共同视觉目标是：

安静的现代桌面器物，承载具有收藏感的三国题材人物内容。

视觉层级为：

1. 人物提供情绪和记忆：面部、轮廓、兵器和角色气质是第一识别点。
2. UI提供秩序和可信度：状态清楚、焦点明确、刷新区域稳定。
3. 硬件提供安静框架：不与卡面争夺色彩和主题，不伪装成古代器物。
4. 文档提供证据等级：概念、设计稿、模拟结果、CAD和真机图明确区分。

任何风格选择都必须同时通过RGB全彩、六色和RLCD三种观看条件。只在高分辨率电脑屏幕上成立的细节，不作为核心品牌特征。

2. 五条共同原则

2.1 大轮廓优先

• 人物先识别头部、肩甲和武器，再识别纹理。
• UI先识别状态区、焦点和当前数值，再读取装饰。
• 硬件先识别屏幕、五键和整体比例，再注意分型与材质。

2.2 色块优先于渐变

• RGB母版允许自然光影，但关键层级不能只靠连续渐变。
• 六色最终资源使用清楚色块、轮廓和有限抖动。
• RLCD依靠黑白面积、反白、纹理和形状。

2.3 内容强、框架静

• 人物可以有情绪、兵器和时代细节。
• UI边框、外壳和文档底色保持克制。
• 同一画面只允许一个强视觉焦点。

2.4 语义不只靠颜色

• 体力、护盾、Token、焦点和锁定都有图形或文字冗余。
• 硬件按键通过位置、尺寸、凹凸或纹理区分。
• 文档中的风险、建议和确认状态同时使用标签和结构。

2.5 概念不伪装成工程事实

• AI硬件图必须带概念图注。
• AI UI图不是像素规格。
• 六色模拟必须标注 SIM。
• 真实CAD、样机照片和真机屏显标注版本与来源。

3. 三个整合视觉系统

三个系统不是三个随机Moodboard，而是角色、UI、硬件和文档同时可执行的完整候选。后续恰好生成三张整合方向板进行选择。

S1：纸墨重彩（当前推荐）

S2：深石写实

S3：青灰工笔

S1、S2、S3是整合候选，不禁止交叉组合。例如真实评审可能选择S1角色和硬件语言，但采用结构化UI布局。任何交叉组合都要重新检查整体一致性，不凭名称强制捆绑。

4. 方向选择顺序

避免一次比较太多变量：

1. 先确认 CHAR-ID-REF-001身份。
2. 比较角色A/B/C画风，选择角色视觉语言。
3. 完成六色/RLCD转换证明。
4. 比较UI A/B/C布局，选择信息结构。
5. 用1:1线框比较硬件L1/L2/L3键位。
6. 比较硬件V1/V2/V3 CMF。
7. 最后制作S1/S2/S3整合方向板，检查跨媒介一致性。

整合方向板不是重新发明第四套视觉，而是把已经生成和重建的角色、UI、硬件放在同一画面校验。

5. 色彩体系

5.1 三层色彩

5.2 语义Token

继续使用：

• paper
• ink
• health
• shield
• resource
• accent

外壳CMF使用独立的材料Token，例如 shell-light、shell-dark、key-primary、key-secondary，不直接复用 health等游戏状态色。

5.3 面积原则

在UI框架、硬件和文档中建议：

• 约60%～75%为安静底色或留白。
• 约15%～30%为主框架、文字和结构色。
• 强调色通常不超过10%，且同一视图只有一个主要强调来源。

人物插画不强制遵守该比例，但进入UI时必须与状态色保持足够分离。

5.4 禁止

• 不用荧光、霓虹、RGB灯效和屏幕发光感。
• 不用多个相近低对比色承担不同状态。
• 不以大面积金色表达“高级”。
• 不把临时电脑模拟色当成面板实测色。
• 不在最终六色UI中依赖透明叠加和连续阴影。

6. 形状语言

6.1 框架

• 以竖向矩形和稳定的内外框关系为主。
• 圆角克制，不使用手机式大胶囊和过度柔软卡片。
• 同一页面最多使用三个层级的圆角或转角处理。
• 边框用于建立层级和焦点，不作为满屏装饰。

6.2 边角

• 硬件、UI和文档可以共享“小幅切角、短直线收口或窄色条”中的一种轻量特征。
• 该特征必须在RLCD下仍可见，且不影响硬件跌落保护和模具分型。
• 在实际视觉方向出现前，不冻结具体切角角度或装饰位置。

6.3 状态形状

• 体力：心形或稳定生命符号＋数字。
• 护盾：盾形＋数字。
• Token：圆片、六边形或明确资源形之一＋数字；最终只选一种。
• 焦点：粗框、双框或反白之一为主，不使用光晕。
• 锁定：锁形＋文字或区域变化。

7. 线条与纹理

7.1 线条等级

使用语义Token而非先冻结像素：

• stroke-hairline：分隔和非关键结构；在真实面板上必须通过可见性检查。
• stroke-standard：组件、卡框和主要图标。
• stroke-emphasis：焦点、锁定、重要警告和人物关键轮廓。

实际像素值分别为RLCD与六色屏定义，不做一个跨分辨率固定值。

7.2 纹理

• 一张资产只使用一种主要纹理尺度。
• 纹理不进入文字和数值底部。
• 六色人物纹理应服务轮廓，不制造大面积彩色噪点。
• RLCD纹理必须在300×400预览中检查摩尔纹和粘连。
• 外壳纹理通过材料和光线表现，不画成高对比花纹贴纸。

8. 字体与文字

8.1 字体角色

最多使用两个主要字体角色：

1. 功能字体：系统UI、数字、错误、设置和诊断；优先高可读中文无衬线。
2. 展示字体：武将名、章节标题和少量品牌标题；可使用克制宋体/楷体气质，但不能牺牲小尺寸可读性。

8.2 约束

• 关键数值与正文不用书法字体。
• 不让Image 2生成最终文字。
• 字体必须有明确嵌入、子集化和商业使用许可。
• 全角/半角数字、斜杠、箭头和单位的字形必须在真机测试。
• 字号使用相对Token规划，最终按PPI和观看距离冻结。

9. 图标

• 使用实心或明确轮廓的几何图标，不使用Emoji。
• 每个图标先通过1-bit剪影测试，再加入颜色和细节。
• 避免1 px孤立点、过细内孔和仅靠阴影形成的轮廓。
• 同一图标在六色和RLCD共享语义，可维护不同像素版本。
• 系统图标、游戏状态图标和势力装饰分组管理，不混用视觉复杂度。

10. 原创武将插画

10.1 必须保持

• 面部、年龄、轮廓和三件身份记忆点。
• 头部、武器和主要肩甲在目标裁切安全区内。
• 光影能够在六色与1-bit下保留面部平面。
• 背景复杂度低于人物关键区域。

10.2 可以变化

• 角色、时代职能、性别呈现、年龄、兵器和背景场景。
• 在风格锚点范围内改变姿态和镜头。
• 不同阵营气质，但不复制现有游戏势力框架和官方角色视觉。

10.3 禁止

• 指定模仿在世艺术家的准确风格。
• 未授权官方卡框、Logo、人物立绘或纹样。
• 仙侠光效、夸张巨型武器和与三国时代完全无关的科幻装备，除非未来另立内容主题。
• 把文字、数值、体力和状态烘焙进人物母版。

11. UI视觉

• 卡面慢层负责情绪；状态快层负责操作。
• UI框架与人物主色保持分离，不让角色红衣与体力状态无法区分。
• 焦点、锁定和撤销使用固定区域和高对比结构。
• 不使用玻璃拟态、半透明面板、发光描边、动画依赖和惯性滚动。
• 同一组件在六色和RLCD可以改变布局与像素细节，但语义和状态名一致。
• 错误、空数据、无SD、低电量和恢复状态沿用同一框架，不另起一套“系统工具风格”。

12. 硬件CMF与产品渲染

12.1 CMF

• 以细哑光塑料、稳定内框和可触觉区分的按键为主。
• 金属色只作极少量细节，不预设真实金属件。
• 浅色、深色和青灰方向都必须考虑耐污、色差、拼缝和批次一致性。
• 不用满铺仿木纹、龙纹、祥云、盔甲铆钉或镜面电镀表达三国主题。

12.2 渲染光线

• 产品参考图使用柔和棚拍或阴天漫射光。
• 背景以纸白、暖灰或中性灰为主。
• 保留材料边缘和按键阴影，但不使用霓虹轮廓光。
• 硬件锚点使用空白屏幕，本地合成真实UI。
• 正面、背面和侧面必须检查五键、端口和比例漂移。

13. 设计文档配图

13.1 图像类型

• CONCEPT：AI辅助外观、角色或场景探索。
• DESIGN：确定性重建的UI、组件、流程或比较板。
• SIM：六色/RLCD电脑模拟。
• ENGINEERING：CAD、原理图、PCB、尺寸和结构资料。
• EVIDENCE：真机照片、测试截图和测量结果。

13.2 图注

每张图至少包含图号、类型、版本、用途和限制。例如：

FIG-UI-003 · DESIGN · v0.2
彩色状态框方向的确定性重建。颜色为临时模拟，最终以真实六色面板为准。

13.3 比较板

• 候选使用相同尺寸、裁切、背景和说明密度。
• A/B/C编号位于图外，由本地排版添加。
• 同时显示RGB、六色模拟和RLCD缩略图。
• 不对入选偏好候选单独增强亮度或对比度。

14. Image 2共用风格提示块

S1纸墨重彩

Shared visual system: quiet modern paper-and-ink product language; decisive silhouettes; controlled hard-edged color regions; restrained printmaking texture; warm paper neutrals and charcoal structure; one small muted accent; premium collectible presence without ornate historical decoration; designed to survive offline six-color and 1-bit conversion.

S2深石写实

Shared visual system: historically grounded realistic illustration paired with a quiet graphite industrial product; natural material wear; controlled cinematic light with clear midtones; high-contrast functional status framing; premium and restrained, never neon or fantasy; preserve shapes needed for six-color and 1-bit conversion.

S3青灰工笔

Shared visual system: precise contemporary gongbi-inspired linework, simplified planar colors, elegant negative space, muted blue-gray and charcoal framework, warm neutral details, structured collectible composition, calm and systematic rather than decorative; maintain strong 1-bit silhouettes.

这些提示块不能替代具体资产提示。角色身份、硬件不变量、UI状态和避免项仍需逐次重复。

15. 全局避免项

no copied commercial card frames or official game assets
no living-artist style imitation
no pseudo-Chinese text
no logo or watermark unless a later approved brand asset is supplied
no neon glow, RGB lighting, glossy glassmorphism, or smartphone UI
no ornate dragons, faux wood, full-surface cloud patterns, or costume-like product shells
no tiny high-frequency texture as a core identity feature
no state communicated by color alone
no generated engineering dimensions or fake exploded accuracy

16. 设计Token分层

建议保持五组Token：

brand.*       跨角色、UI、硬件和文档的共同气质
display.*     具体RLCD或六色面板颜色、像素和刷新能力
ui.*          间距、字体、组件、焦点和状态
illustration.* 角色轮廓、纹理密度、背景复杂度和裁切
hardware.*    CMF、边缘、按键和材料语义

brand.*不得直接包含某块六色屏的RGB值，display.*不得决定角色身份或硬件材料。

17. 风格成熟度

单个角色画风入选不等于整个品牌风格已 integrated。只有角色、UI和硬件同时出现并通过比较，才能升级整合状态。

18. 风格方向板Backlog

方向板由已经生成和重建的真实资产组成，不让Image 2重新画一张看似完整但不可追溯的品牌板。

19. 当前建议与待决策

建议冻结

• “安静现代器物＋收藏人物内容”的层级关系。
• 大轮廓、硬边色块、内容强/框架静和非颜色冗余四项原则。
• 角色、UI、硬件和文档共用概念/设计/模拟/工程/证据分级。
• 最终文字、图标和工程图不用Image 2生成。
• 风格方向板由真实入选资产本地整合，不用一张新生成图代替。

待决策

• S1、S2、S3最终整合方向。
• 展示字体与功能字体的具体授权字体。
• 共同边角特征、图标风格和状态形状。
• 真实六色Token映射。
• Logo、中文产品名和品牌标识系统。