357 lines
30 KiB
Markdown
357 lines
30 KiB
Markdown
# HEX TRAILS · Video Lab 设计规范 v2
|
||
|
||
版本：2.0 · 2026-09-09 · 适用：`labs/hex-video` 视频研究、网页 UI 与后续美术适配。
|
||
|
||
本文沿用项目 [Design.md](../../Design.md) 的“设计方向 → 设计方法 → 颜色体系 → 组件 → 资产 → 字体与形状 → 动效 → 验收”结构，完整分析 `examples/hex.mp4` 的用色规律。**这是视频分析与 Lab 下一版的设计依据，不是已完成换肤的声明，也不覆盖正式游戏的设计规范。**
|
||
|
||
本文分开标记三种信息：**视频观察**是画面直接可见的现象；**采样值**是解码帧指定区域的代表像素；**适配建议**是为本项目单片棋子与可读性作出的设计选择。当前 Lab 的 HEX 仍分散在 `lab.js` / `lab.css` 中，尚未建立 v2 token 模块。本文提出的 token 名称属于待落实规范，不能称为现有运行时的唯一数值来源。
|
||
|
||
|
||
|
||
## 1. 设计方向
|
||
|
||
**明亮、糖果色、轻玩具质感；观察时安静，奖励时鲜明。** 视频没有把同一套背景贯穿所有场景，而是以“低彩度解谜 / 高彩度旅程与奖励”形成节奏。
|
||
|
||
- **棋盘场景**：近白背景、冷灰六边形底板、中性灰 HUD；视觉注意力交给高饱和彩色棋子和白箭头。
|
||
- **地图场景**：蓝到青的亮背景，淡蓝关卡节点形成纵向路径；绿色当前节点和开始按钮构成同一操作焦点。
|
||
- **奖励场景**：保留蓝青环境，增加浅青放射光；金黄金币与收集按钮成为中心焦点，彩纸补充短暂的小面积对比。
|
||
- **教学场景**：深蓝黑遮罩降低整个背景的亮度；白色内容面、浅蓝标题栏、绿色确认按钮接管视线。
|
||
- **形体与色彩分工**：六边形、箭头和位置解释操作；色相帮助分组与识别。不能仅凭颜色推断可走、被阻挡、品质或阵营。
|
||
|
||
### 1.1 单片适配约束
|
||
|
||
视频中多条同色侧缘和多片连续翻转来自**叠放的多片棋子**，不能据此把单片建模成厚块。本项目只有一片：保留薄侧边、轻倒角和轻投影，取消多层横线、堆叠副本和同色实体拖尾。当前 Lab 的 4px 侧边是实现参数，不是对视频单片厚度的测量结论。
|
||
|
||
### 1.2 与正式版 Design.md 的关系
|
||
|
||
| 项目 | 正式版当前方向 | 视频方向 / 本 Lab 研究方向 |
|
||
|---|---|---|
|
||
| 环境 | 按主题组织的低饱和纯色背景 | 棋盘近白；地图和奖励采用蓝青渐变 |
|
||
| 底板 | 暖白、明显轨道 | 冷灰、轻分格，参考画面未显示本项目弯轨 |
|
||
| 主操作 | 紫色体系 | 绿色开始/确认；金黄色领奖 |
|
||
| 棋子 | 12 色库，默认单关 7 色 | 至少七个明确可见的色族，偏高饱和 |
|
||
| 形体 | 顶视哑光、无厚侧面 | 视频有堆叠；Lab 只借用单片薄倒角与明暗关系 |
|
||
| 图标 | 已接受的生成图集 | 本文分析原视频图标用色；不授权替换正式版资产 |
|
||
| 特效 | 同色离场碎片、克制反馈 | 翻转、彩纸、金黄奖励、青白放射光 |
|
||
|
||
不能把视频里的绿色确认、蓝青渐变直接混入正式版的一张紫色主操作界面。需要采用 v2 时，应整套切换场景角色，并保留正式版可读性与无障碍约束。
|
||
|
||
## 2. 分析方法与证据
|
||
|
||
### 2.1 视频与采样方法
|
||
|
||
视频为 416×960、约 30fps、193.405 秒。此前通过全片每 4–5 秒抽帧检查流程，本次额外提取 00:00、00:14、00:42、00:55、01:25、01:50、01:54、02:10、02:50、03:07 十张原尺寸 PNG，覆盖地图、空棋盘、不同色组、翻转、教学与领奖。
|
||
|
||
- 使用 ffmpeg 解码 PNG，避免新增 JPEG 压缩；原视频已有压缩、色彩转换与抗锯齿，PNG 不能恢复原游戏素材。
|
||
- 表中颜色取选定矩形 ROI 的 RGB 分通道中位数。彩色顶面筛选 HSV `S > 55%`、`V > 60%`，剔除白箭头与较暗侧壁；文字另用明/暗像素筛选。
|
||
- 坐标以原始 416×960 的左上角为原点，矩形右、下边界不包含。全部 ROI、筛选方式、有效像素数和色值保存在 [samples.json](reference/color-study/samples.json)。复算脚本为 [sample-colors.py](reference/color-study/sample-colors.py)。
|
||
- 矩形采样仍可能含少量高光、边缘、压缩混色，**HEX 是代表值，不是原材质常量**。HSV 的 V 是最大 RGB 通道值，不等于感知亮度。
|
||
- 跨帧色族检查使用棋盘大区域与色相分组，只验证色族稳定性；它会包含侧边和运动物体，不能代替精确顶面采样。
|
||
|
||
### 2.2 关键证据索引
|
||
|
||
| 帧 | 观察重点 | 证据 |
|
||
|---|---|---|
|
||
| 00:00 | 蓝青地图、淡蓝节点、绿色当前关/开始、白色资源胶囊 | [原尺寸帧](reference/color-study/000.png) |
|
||
| 00:14 | 空棋盘露出全部冷灰底格，灰 HUD 保持不变 | [原尺寸帧](reference/color-study/014.png) |
|
||
| 00:42 | 金币、黄色收集按钮、青白光束和多色彩纸 | [原尺寸帧](reference/color-study/042.png) |
|
||
| 00:55 | 红黄绿蓝紫共存，红色翻转露背 | [原尺寸帧](reference/color-study/055.png) |
|
||
| 01:25 | 紫黄主导的一局、蓝色连续翻转、彩紙 | [原尺寸帧](reference/color-study/085.png) |
|
||
| 01:50 | 深遮罩、白面板、淡蓝头尾、绿标题和确认 | [原尺寸帧](reference/color-study/110.png) |
|
||
| 01:54 | 同一棋盘的青色与蓝色均配向上箭头；紫色与黄色有堆叠 | [原尺寸帧](reference/color-study/114.png) |
|
||
| 02:10 | 红绿蓝黄棋子、红橙旋转器、灰色锁定工具 | [原尺寸帧](reference/color-study/130.png) |
|
||
| 02:50 | 清楚的橙色顶面、红色翻转背面、下方彩纸 | [原尺寸帧](reference/color-study/170.png) |
|
||
| 03:07 | 金币飞向顶部余额栏，仍处于蓝青奖励页 | [原尺寸帧](reference/color-study/187.png) |
|
||
|
||
### 2.3 画面面积的用色节奏
|
||
|
||
以下为整帧 HSV 阈值计数；高彩度定义为 `S > 55%`，低彩度为 `S < 15%`，中间像素不属于这两组。这是屏幕像素占比，不是物体分割结果，也不是所有关卡的固定配额。
|
||
|
||
| 帧 / 状态 | 高彩度像素 | 低彩度像素 | 解读 |
|
||
|---|---:|---:|---|
|
||
| 00:00 地图 | 92.0% | 3.2% | 环境本身承担明亮、高彩度的旅程氛围 |
|
||
| 02:10 有棋子的棋盘 | 13.3% | 84.9% | 高彩度集中在可操作对象，背景保持退后 |
|
||
| 00:14 空棋盘 | 0.3% | 99.0% | 清空后颜色自然退场，不需要再改背景宣告完成 |
|
||
| 00:42 奖励 | 92.1% | 1.8% | 由低彩度解谜跳入高彩度庆祝 |
|
||
| 01:50 教学 | 4.7% | 40.8% | 大部分剩余像素是暗蓝遮罩的中彩度；不能把它误判成明亮鲜艳区域 |
|
||
|
||
核心规律是**同一游戏在不同任务阶段分配不同的彩度面积**。不能仅提取一张“平均蓝色”来代表整段视频。
|
||
|
||
## 3. 颜色体系
|
||
|
||
### 3.1 棋盘环境与内容
|
||
|
||
下表的 `v2.*` 为建议语义名，色值为解码采样。
|
||
|
||
| 建议 Token | 代表色 | 来源 | 作用与配对 |
|
||
|---|---|---|---|
|
||
| `v2.play.background` | `#F2F2F4` | 02:10 | 主背景，几乎无彩度；不与棋子争抢注意力 |
|
||
| `v2.play.backgroundTop` | `#E4E4E5` | 02:10 | 顶部过渡的浅灰，缓慢过渡到主体近白 |
|
||
| `v2.play.ice` | `#E5E9EB` | 02:10 | 顶部冰块/软块装饰的浅色局部，并非整张纹理统一色 |
|
||
| `v2.board.face` | `#A6AAB9` | 02:10 | 偏蓝紫的中灰底格，托起彩色顶面 |
|
||
| `v2.hud.surface` | `#B2B4B8` | 02:10 | 灰色 HUD，彩度比棋盘更低 |
|
||
| `v2.hud.counterSurface` | `#F7F9FD` | 02:10 | 操作数字容器，明亮、接近白色 |
|
||
| `v2.hud.number` | `#62635E` | 02:10 | 操作数深灰字，给亮底提供清晰识别 |
|
||
| `v2.icon.ink` | `#5F5C5D` | 02:10 | 设置齿轮的中深灰，与白色按钮壳配对 |
|
||
|
||
**规律：同样是灰，底板稍冷、HUD 更中性、数字更深。** 环境层并非所有像素使用同一浅灰。底格分界靠轻暗边、形状与贴合关系形成，而非大幅色相变化。边界像素会混合多个表面，本次没有把单一压缩边缘像素提升为精确的 `boardGrid` token。
|
||
|
||
适配时可沿用原项目独立 `board / boardGrid / track` 角色，但本视频不能提供本项目轨道的原始配色。轨道应另作为“本项目添加项”进行验收，不可声称从参考还原。
|
||
|
||
### 3.2 地图的蓝青系统
|
||
|
||
| 建议 Token | 代表色 | 作用 |
|
||
|---|---|---|
|
||
| `v2.map.topBlue` | `#0C61E8` | 顶部深一些的明蓝，维持边缘层次 |
|
||
| `v2.map.edgeBlue` | `#0E78EF` | 两侧较深蓝色背景局部 |
|
||
| `v2.map.centerCyan` | `#40C8FE` | 中部更亮、更偏青的区域，托出关卡路线 |
|
||
| `v2.map.pathBlue` | `#0C8DF1` | 纵向连接线，比中心环境更暗、更纯 |
|
||
| `v2.map.nodeSurface` | `#A3C3FE` | 非当前节点的浅蓝六边形 |
|
||
| `v2.map.nodeInk` | `#2D5187` | 节点编号，深蓝与浅蓝配对 |
|
||
| `v2.currency.surface` | `#F7F3FA` | 顶部余额胶囊，接近白色，与深数字配对 |
|
||
|
||
地图不是蓝色纯底：**从边缘偏蓝、较暗，过渡到中部偏青、较亮**。背景还有同色系低对比六边形纹样，用变化的透明度/亮度提供质感，而不引入第三个强背景色。
|
||
|
||
渐变中心不是一枚发白的圆形光斑，视觉上更接近纵向亮带。上述样本来自不同空间位置，不是足以反推原始 shader 的精确 gradient stops。节点比背景低饱和且更浅，数字使用同色系深蓝；当前节点改绿，用色相跳变突出进度。
|
||
|
||
### 3.3 操作与状态
|
||
|
||
| 角色 | 采样 / 观察 | 用色规律 |
|
||
|---|---|---|
|
||
| 开始操作 `v2.action.start` | `#39DB2E` | 高饱和鲜绿，只承担明确进入/继续动作 |
|
||
| 当前进度 `v2.progress.current` | `#39DC30` | 与开始按钮近同色，连接“我在哪里”和“下一步做什么” |
|
||
| 教学确认 `v2.action.confirm` | `#3ADB2C` | 与开始按钮一致；微小 RGB 差异不需要拆成两种品牌绿 |
|
||
| 完成标记 | 绿色勾 + 浅底轮廓 | 颜色、勾形、进度位置共同表示完成 |
|
||
| 当前小阶段 | 亮蓝六边形 + 白数字 | 与 HUD 内浅灰的后续阶段区分 |
|
||
| 奖励收集 `v2.action.collect` | `#FFC80C` | 从“进入”的绿色切换到“领取”的金黄色 |
|
||
| 体力 | 红/粉红立体心形 + “已满”文字 | 对象图标本色，不能推导为红色全局危险状态 |
|
||
| 旋转器 | 深灰机械主体 + 红橙阀轮 | 红橙集中在可点部件，是功能焦点，不表示受阻错误 |
|
||
| 锁定工具 | 浅灰/白外壳 + 低饱和蓝锁 + 灰标签 | 通过锁形和关卡文字说明未解锁，弱化层级 |
|
||
| 商店入口 | 小面积红金图标 + 蓝紫底标签 | 作为附属入口，面积远小于绿色开始按钮 |
|
||
|
||
视频的绿色与奖励黄色分属不同任务时刻，因此不会出现“同一面板有两枚同等强度主操作”的冲突。不要将所有工具染成绿，也不要因为棋子是红色就把它标为失败。
|
||
|
||
### 3.4 七个棋子色族
|
||
|
||
以下取顶面局部并排除白箭头。HSV 用于分析相对关系，不应当作渲染材质设置。
|
||
|
||
| 建议 Token | 顶面代表色 | H / S / V | 帧 | 视觉作用 |
|
||
|---|---|---|---|---|
|
||
| `v2.tile.red` | `#E4413F` | 0.7° / 72.4% / 89.4% | 02:10 | 偏正红、略带暖感；较其他亮色沉一些 |
|
||
| `v2.tile.orange` | `#FE8A16` | 30.0° / 91.3% / 99.6% | 02:50 | 鲜橙，靠比黄色更红的色相区分 |
|
||
| `v2.tile.yellow` | `#F9BE02` | 45.7° / 99.2% / 97.6% | 02:10 | 偏金黄，不是浅奶油黄 |
|
||
| `v2.tile.green` | `#7BE637` | 96.7° / 76.1% / 90.2% | 02:10 | 黄绿色；比确认按钮的绿更偏黄、更浅 |
|
||
| `v2.tile.cyan` | `#00C6FE` | 193.2° / 100.0% / 99.6% | 01:54 | 高亮青蓝，和常规蓝棋子分开看待 |
|
||
| `v2.tile.blue` | `#4787ED` | 216.9° / 70.0% / 92.9% | 02:10 | 中亮蓝，低于青色的亮度感，保持白箭头清晰度 |
|
||
| `v2.tile.purple` | `#C460FD` | 278.2° / 62.1% / 99.2% | 01:54 | 明亮偏粉的紫，并非深紫或偏蓝紫 |
|
||
| `v2.tile.arrow` | `#F9FFFF` | 近白 | 01:54 | 各色棋子通用的粗箭头，略带阴影/边缘灰 |
|
||
|
||
**色族分布不是平均分成七等份的色轮。** 暖色红、橙、黄间距较密；蓝与青也相邻；绿色和紫色拉开较大间距。区分相邻色还依赖明暗、箭头与空间位置。不能把“七色”自动解释成需要每关平均使用七色。
|
||
|
||
跨帧检查中蓝色代表像素约在 `#4284EB`–`#4585EC` 附近，绿色约在 `#78E437`–`#7BE536` 附近，黄色约在 `#F7BC03`–`#F9BE01` 附近；这说明视频中的色族相对稳定。这里列的是若干实际中位值，不是允许任意组合 RGB 通道的上下界。橙色自动分组也会收进黄色暗侧边与红橙阀轮，因此橙色必须以 02:50 明确的橙棋子局部为准，不能机械采用整盘色相分箱结果。
|
||
|
||
#### 颜色与方向
|
||
|
||
常见组合为蓝/青向上、紫向下、红向左上、橙向左下、绿向右上、黄向右下，但这只是观察到的重复模式。01:54 蓝、青同时指向上；旋转器教学还展示棋子朝向随旋转变化。**不能根据视频证明“色相永远等于六个方向之一”。**
|
||
|
||
项目适配应将颜色存为独立于方向的稳定外观属性：棋子改变朝向时不应因查询 `colors[dir]` 而变色。当前 Lab 以初始方向绑定六色，并用该色保持运动外观，这是原型简化，未覆盖视频青色和旋转器的完整关系。
|
||
|
||
#### 色组与关卡节奏
|
||
|
||
00:55 可见红、黄、绿、蓝、紫；01:25 紫黄面积较大；02:10 红色占比更大；01:54 增加青蓝。色组和面积随棋子布局而变，而不是把底板和背景一起换主题。没有足够证据将某一色组定义为某个难度等级，也没有证据支持失败时全盘变红。
|
||
|
||
### 3.5 单片的顶面、侧边、高光与背面
|
||
|
||
| 色族 | 顶面样本 | 侧边局部样本 | 变化 |
|
||
|---|---|---|---|
|
||
| 蓝 | `#4787ED` | `#1E6AD5` | 保持约 215°–217° 色相，V 从 92.9% 降至 83.5%，饱和度上升 |
|
||
| 绿 | `#7BE637` | `#66C617` | 同属黄绿色，V 从 90.2% 降至 77.6% |
|
||
| 红 | `#E4413F` | `#C81C1D` | 保持正红，V 从 89.4% 降至 78.4% |
|
||
| 紫 | `#C460FD` | `#A538E9` | 保持紫色，V 从 99.2% 降至 91.4% |
|
||
|
||
这些侧边样本来自堆叠对象中的局部，可能含环境遮蔽；只适合说明**同色相、降低亮度、较高饱和度**的规律，不能用来测量单片几何厚度。
|
||
|
||
顶面并非完全纯色，有柔和亮度变化；上缘的窄高光用于区分斜切面。暗部仍然有颜色，不是一圈统一黑边。背面翻转时保持同色族、箭头消失；边缘朝向镜头时变窄且变暗。没有证据表明每次离场会换成随机色。
|
||
|
||
适配建议：每个色族显式定义 `face / bevelLight / side / edge`，不要对所有色统一做 RGB `+23 / -42 / -20` 后便视为最终材质。RGB 等量增减会使绿色、黄色和紫色的饱和度变化不一致。倒角高光要窄，避免做成宽白描边或发光选中圈。用户要求的单片只画一条薄侧面，不画视频中的多层暗线。
|
||
|
||
### 3.6 教学弹窗
|
||
|
||
| 建议 Token | 代表色 | 用法 |
|
||
|---|---|---|
|
||
| `v2.modal.scrimComposite` | `#191D2A` | 遮罩叠加后的暗背景样本，**不是遮罩源色和 alpha** |
|
||
| `v2.modal.header` | `#8FB1FD` | 淡蓝标题栏，承托白色标题 |
|
||
| `v2.modal.body` | `#FFFDFF` | 接近白的内容区，保证示意图是视觉中心 |
|
||
| `v2.modal.footer` | `#BBCBF1` | 更淡、更灰的蓝色底栏，与标题栏同色系 |
|
||
| `v2.action.confirm` | `#3ADB2C` | 底部确认按钮的高彩度绿 |
|
||
|
||
弹窗上方的“新功能！”是鲜绿色，呼应确认按钮；说明文字为灰色，关键词“旋转器”为橙色。文字颜色承担标题、正文、关键词三个等级，不把整段说明染成橙色。旋转器示意图继续使用灰底板和彩色棋子，教学与实际游戏保持同一对象语言。
|
||
|
||
遮罩明显压暗场景，但仅凭合成后的帧无法可靠分离原背景、遮罩色和透明度，也无法确认是否使用模糊。正式版 Design.md 的 48% / blur 5px 是其自身规范，不能写成视频测量结果。
|
||
|
||
### 3.7 奖励与特效颜色
|
||
|
||
| 对象 | 色彩组织 | 用途 |
|
||
|---|---|---|
|
||
| 金币顶面局部 | `#FFE236`，更亮的金黄 | 建立奖励的明亮中心；币边用橙金色形成浮雕 |
|
||
| 收集按钮 | `#FFC80C` | 比金币高光更实、更偏橙，与奖励对象同色族 |
|
||
| 放射光 | 浅青 / 青白，透明叠加 | 提高金币周围亮度，仍属于蓝青环境色系 |
|
||
| 奖励数“10” | 暖色数字配蓝色边缘 | 用暖冷轮廓把数字从金币和光芒中分离 |
|
||
| 彩纸 | 可辨认红、黄、青、蓝、绿、粉紫等 | 多色只占小碎片面积，运动中快速形成庆祝感 |
|
||
| 飞向余额的金币 | 维持金黄与橙色暗边 | 让“奖励被收进资源栏”的关联连续可见 |
|
||
|
||
彩纸与棋子色库不必完全相同：视频可见粉色碎片，不能因此推断存在粉色棋子。小碎片受到压缩与运动混色影响，本次不为彩纸捏造精确原始 HEX。适配建议使用单独 `fx.confettiPalette`，借用已验证的高彩度色族并允许少量粉色，避免把它当作棋子类别。
|
||
|
||
底部喷出的彩纸可以叠在仍未清空的棋盘下方；奖励页再扩大范围。视频并不是仅在最后一片离场后才出现彩纸。蓝青放射光属于奖励场景，不应长期铺在解谜棋盘上。
|
||
|
||
### 3.8 可读性：视频事实与项目要求分别处理
|
||
|
||
采用项目 Design.md 已使用的相对亮度计算方法，对**不透明代表色**进行诊断。计算为 `(L较亮 + 0.05) / (L较暗 + 0.05)`，sRGB 通道先线性化。下面白色取理想 `#FFFFFF`，深色取正式版 `textPrimary = #273B50`；不是对白箭头全部抗锯齿像素的实测。
|
||
|
||
| 底色 | 白色对比度 | 深蓝灰对比度 | Lab 正式化建议 |
|
||
|---|---:|---:|---|
|
||
| 蓝 `#4787ED` | 3.53:1 | 3.26:1 | 白箭头可保留，继续检查高光与缩小状态 |
|
||
| 红 `#E4413F` | 4.10:1 | 2.81:1 | 白箭头更合适 |
|
||
| 紫 `#C460FD` | 3.26:1 | 3.52:1 | 白箭头接近项目图形门槛，高光处仍需检查 |
|
||
| 橙 `#FE8A16` | 2.37:1 | 4.85:1 | 深箭头，或足够清晰的深色结构轮廓 |
|
||
| 黄 `#F9BE02` | 1.69:1 | 6.78:1 | 深箭头优先 |
|
||
| 绿 `#7BE637` | 1.59:1 | 7.23:1 | 深箭头优先 |
|
||
| 青 `#00C6FE` | 2.00:1 | 5.75:1 | 深箭头优先 |
|
||
| 开始绿 `#39DB2E` | 1.85:1 | 6.21:1 | 白色小字不足；深色字或单独加深按钮底色 |
|
||
| 领奖黄 `#FFC80C` | 1.55:1 | 7.40:1 | 深色字优先 |
|
||
| 弹窗标题蓝 `#8FB1FD` | 2.13:1 | 5.40:1 | 白色标题不自动满足项目大字门槛，建议深色标题 |
|
||
|
||
项目沿用普通文字 4.5:1、大字/必要图形 3:1 的验收目标。**视频还原模式**可以记录原本的白箭头、白字和阴影，但不能宣称已满足目标；**可读性适配模式**应明确标注改动，而不是把深箭头说成视频原样。阴影只有在形成足够可辨的结构边界时才有帮助，不能凭“有阴影”直接判定通过。
|
||
|
||
灰底板与近白环境的对比约 2.05:1，原视频还依赖格子轮廓和位置。如果格线承担必要识别，应单独增强边界，而不是只提高整块底板饱和度。
|
||
|
||
### 3.9 禁止与误读
|
||
|
||
- 把多片叠放误读为厚重单片，或为“立体感”添加多条深侧边。
|
||
- 把七个可见色族简化成六个方向的永久颜色编码，尤其漏掉青色。
|
||
- 把 RGB 采样值当成原游戏材质 token，或声称拿到了源 shader / 原始 alpha。
|
||
- 把 UI 的鲜绿确认色与偏黄绿棋子混成一个角色，只因它们都叫“绿”。
|
||
- 用整帧平均色决定所有场景；空棋盘、地图和领奖的彩度策略完全不同。
|
||
- 把红棋子或红橙旋转器当作错误提示，或让可走棋子统一变绿。
|
||
- 用奖励彩纸的粉色推断粉色棋子，用黄色侧边的橙色推断橙棋子。
|
||
- 将所有道具做成高饱和糖果按钮，与棋子争抢注意力。
|
||
- 只复制白字亮底的原貌，就宣称满足正式版可读性要求。
|
||
|
||
## 4. 组件规范
|
||
|
||
### 游戏主界面
|
||
|
||
灰色圆角 HUD 集中于画面顶部，左侧关卡和小阶段，居中白色操作数面板，右侧白壳灰齿轮。数字用深灰，标题/进度用浅蓝白绿点缀；不把整个 HUD 做成高饱和蓝。上方装饰逐渐退入近白环境，中部留给棋盘，底部工具保持灰白、低彩度。
|
||
|
||
底部工具的结构为完整圆形按钮，外圈与内圈保持同心；一条独立的浅灰文字条叠在圆形最下缘，遮住局部圆环。不能把圆形与文字区合成上圆下方的拱形外壳。Lab 使用 76×76px 圆形与底部重叠的 76×24px 标签条。
|
||
|
||
当前 Lab 中的“提示/撤销”是可用操作，视频对应位置在所见帧中是锁定工具。不能为了颜色一致，把可用功能也画成锁定态；应保留清晰标签与可操作状态差异。
|
||
|
||
### 棋盘与棋子
|
||
|
||
底板为冷灰，六边形紧密拼合；棋子高饱和、顶面有柔和层次、箭头粗而圆润。单片适配保留一条薄边。颜色对比优先通过顶面和灰底建立，不靠每片发光。运动、旋转与撤销应维持棋子身份色。
|
||
|
||
视频中未见本项目的可视弯轨；Lab 的轨道开关作为诊断工具，使用独立辅助色，不进入“参考原样”截图。选择、高亮提示、受阻反馈属于本项目状态设计，应单独记录。
|
||
|
||
### 地图
|
||
|
||
蓝青环境 → 更暗的蓝色路径 → 浅蓝节点 → 深蓝数字构成稳定背景层；当前节点与开始按钮用鲜绿连接。资源栏使用白胶囊和资源自身颜色，保持在蓝环境上可读。商店保留小面积，不能扩大成与开始按钮同等级的入口。
|
||
|
||
### 领奖
|
||
|
||
顶部货币信息、中上方胜利标题、中央金色奖励和下方黄色收集按钮形成单轴布局。白标题使用环境中的深蓝区域增强识别；金币周围的光束不能把全部背景冲成白色。领取后金币保持暖色飞入余额，余额数字更新的时间应跟随入账，而不是先更新再播放无关联动画。
|
||
|
||
### 教学弹窗
|
||
|
||
暗背景、浅蓝标题栏、白内容面、浅蓝底栏、鲜绿按钮。颜色层次必须与结构一致：关键词橙、标题绿/白、正文深灰。采用真模态限制背景操作。本文不要求修改已接受的正式版图标资源。
|
||
|
||
## 5. 图标与图片资产
|
||
|
||
| 内容 | 证据 / 当前资产 | 使用规则 |
|
||
|---|---|---|
|
||
| 原始视频 | `examples/hex.mp4` | 研究依据；不作为网页背景视频持续播放 |
|
||
| 本次十张 PNG | `reference/color-study/*.png` | 原尺寸色彩证据，不是游戏贴图 |
|
||
| 采样记录 | `reference/color-study/samples.json` | 可复核 ROI、筛选、HSV、对比度及面积数据 |
|
||
| 分析脚本 | `reference/color-study/sample-colors.py` | 重新采样与生成色板；依赖 Pillow，不参与网页运行 |
|
||
| 采样色板 | `reference/color-study/palette.svg` | 展示代表色，明确标为解码采样 |
|
||
| Lab 棋子 | `lab.js` Canvas | 当前为代码绘制；不称为原视频素材 |
|
||
| Lab UI | `lab.css`、`index.html` | 当前含简化符号/表情图标，其具体颜色随系统可能变化 |
|
||
| 正式版图标 | 正式版 Design.md 已记录的图集 | 沿用原资产规则，不在本研究中替换 |
|
||
|
||
设置齿轮是中深灰放在白壳上；锁是低饱和蓝放在浅灰壳上；体力心形为红粉；金币为金黄；旋转器为红橙/深灰机械组合。角色头像的灰白与黑眼睛是小面积身份识别，不是游戏主配色来源。本文未为角色和商店提供重绘授权或原资源导出。
|
||
|
||
## 6. 字体、间距与形状
|
||
|
||
本节按视频原尺寸 416×960 观察空间层级；没有从视频识别到可确认的字体名称，也不能将屏录字号等同于源项目字号。
|
||
|
||
| 层级 | 视频规律 | Lab 适配 |
|
||
|---|---|---|
|
||
| 胜利标题 | 粗白中文，明显大于操作数与标签 | 保留主次比例，检查其所在蓝背景局部的对比 |
|
||
| 操作数字 | 深灰粗体，位于白色容器中心 | 数字和容器保持高对比，避免蓝色装饰影响数字 |
|
||
| 主按钮 | 白色中文配阴影，底色鲜绿/金黄 | 原貌与可读性适配分开标记 |
|
||
| 棋子箭头 | 粗白线、圆端点，大小接近顶面中心区域 | 固定相对尺寸，不随颜色缩小箭头 |
|
||
| 锁定标签 | 小号深灰字，浅底 | 移植时放大到项目可读尺寸，不能复制模糊小字 |
|
||
|
||
界面圆角容器与六边形关卡/棋子并用，棋子为小圆角六边形；不把它们统一替换成圆按钮。地图开始按钮是横向六边形/切角长按钮，收集按钮为圆角长方形；同为主操作也保留对象身份差异。
|
||
|
||
正式化时继续沿用项目 4px 基础间距和至少 44×44px 触摸区域的要求，这些是本项目规范，不是视频量测结果。以 390×844 及更窄屏检查完整布局，浅色细字和窄高光在缩放后可能丢失。
|
||
|
||
## 7. 动效、音效与颜色反馈
|
||
|
||
- **离场翻转**：原物体颜色贯穿顶面、侧边、背面与离场；变化来自姿态与明暗。单片适配只翻转一个实体，不增加其他同色片以模拟原视频堆叠。
|
||
- **空位露出**：彩色对象移走后露出冷灰底板，画面高彩度面积逐步减少；不需要给空格添加绿色成功印记。
|
||
- **彩纸**：多色、小面积、短时运动，主要来自下部，领奖时扩大。全盘低彩度背景使少量彩纸也能明显可见。
|
||
- **金币飞入**：金黄颜色身份不变，通过曲线路径把中央奖励与顶部余额关联起来；暖币与冷蓝背景形成稳定分离。
|
||
- **奖励光芒**：浅青白光与蓝青背景同色系，不引入金黄全屏罩色；金黄主要留给金币和领奖按钮。
|
||
- **旋转器**：红橙轮保持可见的操作焦点；不要因旋转让棋子按新方向自动换色。视频旋转器局部机制与本项目整盘轨道旋转不同，不应混称完全复刻。
|
||
- **受阻/提示**：视频不足以定义精确的错误配色、抖动时长和提示色；当前 Lab 的回弹、白色提示轮廓是项目适配，需要按状态规范单独验收。
|
||
- **声音**：本文是色彩分析，不提供视频音频频率、采样或音效复刻结论。Lab 当前短合成音为原型反馈。
|
||
- **减少动态效果**：保留颜色、对象位置与完成文字，减少翻转、彩纸和持续光束运动；不能只降低透明度导致可读性下降。
|
||
|
||
当前 Lab 的 760ms 离场、410ms 受阻、420ms 底盘旋转、金币曲线时长都是实现参数，未逐帧标定成视频精确时长。动画速度控件用于观察，不等于实现了参考视频的每个阶段时序。
|
||
|
||
## 8. 验收与变更流程
|
||
|
||
### 8.1 当前 Lab 与视频的差异清单
|
||
|
||
| 当前实现 | 视频依据 | 下一版建议 |
|
||
|---|---|---|
|
||
| 六个棋子色 `#388EF2 / #62D62B / #FFBD00 / #B741F3 / #FF9018 / #ED3737` | 至少七色，含独立青色；绿和紫更明亮 | 建立七色族并按指定区域比较，优先校正紫/绿/青 |
|
||
| 初始方向查询颜色 | 蓝、青均向上，旋转机制改变朝向 | 独立持久化外观色，避免方向成为颜色唯一键 |
|
||
| 统一 RGB 加减色 | 同色族暗部的亮度与饱和度变化不一致 | 为每色定义明确顶面/侧边/高光角色 |
|
||
| `#ADB2BF` 底板 | 局部采样 `#A6AAB9`，更暗一些 | 用无棋子帧检查大面积灰底，不只比较小色块 |
|
||
| 全色白箭头 | 视频原貌也多为白箭头，但部分对比度不足 | 保留原貌研究；正式玩法单独提供高对比适配 |
|
||
| 地图 CSS 径向渐变 | 纵向中心亮带与边缘深蓝 | 对齐空间分布，不只替换渐变几个 HEX |
|
||
| 表情金币/心形和符号图标 | 视频是统一美术图标 | 如进入正式版，使用明确资产并逐图验收颜色 |
|
||
| 五色彩纸 | 视频还能看到粉色碎片 | 独立特效色板，不影响棋子身份色 |
|
||
| 可用提示/撤销按钮 | 原视频此位置为锁定工具 | 明确“玩法适配”，保留可用状态清晰度 |
|
||
|
||
### 8.2 建议的 token 管理方式
|
||
|
||
延续正式版“先语义、后组件”的方式，但为实验室建立独立命名空间：
|
||
|
||
- `play.*`：背景、顶端过渡、HUD、底板、格线；本项目轨道另列。
|
||
- `map.*`：边缘/中心蓝、路径、普通/当前节点、节点文字。
|
||
- `action.* / text.*`：开始、确认、收集、普通工具、禁用文字；明确成对的前景与背景。
|
||
- `tile.<family>.*`：七个色族各自的 face / side / bevelLight / edge / arrow。
|
||
- `reward.* / fx.*`：金币、光束、彩纸，不能与棋子共用一个无限扩大的数组。
|
||
- `modal.*`：遮罩源参数、标题栏、内容面、底栏；合成帧采样留在证据表中。
|
||
|
||
建议以后以 `labs/hex-video/design-tokens.js` 为运行时唯一数值来源，生成 JSON/色板/对比报告；**本次仅完成文档和证据资产，未创建或接入这一模块**。正式版 `src/design-tokens.js` 保持独立，未经明确采用 v2 不改写它。
|
||
|
||
### 8.3 验收步骤
|
||
|
||
1. 明确修改的是参考还原还是可读性适配，标记视频观察、采样与新增规则。
|
||
2. 选择对应原尺寸参考帧，在同一 416×960 逻辑比例比较背景、底板、棋子和 HUD 的面积与位置。
|
||
3. 对每个色族比较顶面、侧边和背面，确认只有一片，检查倒角是否误成宽白描边。
|
||
4. 重算指定 ROI；若改动 ROI 或过滤阈值，保留说明。不要以几处亮边像素代表整个顶面。
|
||
5. 检查地图→解谜→领奖→返回的彩度节奏；不把奖励背景留在解谜阶段。
|
||
6. 检查所有箭头、数字、标签和主按钮前景/背景配对；透明图层与抗锯齿必须额外目视验收。
|
||
7. 检查颜色在移动转向、旋转、撤销、重新开始后的稳定性；颜色本身不能代替合法行动判定。
|
||
8. 若实施代码变更，再运行项目测试和构建，验证桌面、390×844、窄屏、模态与减少动态效果。本次文档变更不代表已完成这些新色值的浏览器验收。
|
||
9. 原生/Cocos 采用同一角色与资源后再进行真机确认；本文没有原生渲染验证结论。
|
||
|
||
### 8.4 完成范围
|
||
|
||
本次完成：十张新增 PNG 证据帧、36 个局部采样记录、五张帧的彩度面积统计、跨帧色族检查、采样色板，以及本文。没有修改 Lab 的运行配色、正式版资产或玩法。所有推荐值可追溯到帧与 ROI；无法从视频确定的素材色、字体、遮罩参数、声音与时长均已明确区分。
|