30 KiB
HEX TRAILS · Video Lab 设计规范 v2
版本：2.0 · 2026-09-09 · 适用：labs/hex-video 视频研究、网页 UI 与后续美术适配。
本文沿用项目 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。复算脚本为 sample-colors.py。
- 矩形采样仍可能含少量高光、边缘、压缩混色，HEX 是代表值，不是原材质常量。HSV 的 V 是最大 RGB 通道值，不等于感知亮度。
- 跨帧色族检查使用棋盘大区域与色相分组，只验证色族稳定性；它会包含侧边和运动物体，不能代替精确顶面采样。
2.2 关键证据索引
| 帧 | 观察重点 | 证据 |
|---|---|---|
| 00:00 | 蓝青地图、淡蓝节点、绿色当前关/开始、白色资源胶囊 | 原尺寸帧 |
| 00:14 | 空棋盘露出全部冷灰底格，灰 HUD 保持不变 | 原尺寸帧 |
| 00:42 | 金币、黄色收集按钮、青白光束和多色彩纸 | 原尺寸帧 |
| 00:55 | 红黄绿蓝紫共存，红色翻转露背 | 原尺寸帧 |
| 01:25 | 紫黄主导的一局、蓝色连续翻转、彩紙 | 原尺寸帧 |
| 01:50 | 深遮罩、白面板、淡蓝头尾、绿标题和确认 | 原尺寸帧 |
| 01:54 | 同一棋盘的青色与蓝色均配向上箭头；紫色与黄色有堆叠 | 原尺寸帧 |
| 02:10 | 红绿蓝黄棋子、红橙旋转器、灰色锁定工具 | 原尺寸帧 |
| 02:50 | 清楚的橙色顶面、红色翻转背面、下方彩纸 | 原尺寸帧 |
| 03:07 | 金币飞向顶部余额栏，仍处于蓝青奖励页 | 原尺寸帧 |
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 验收步骤
- 明确修改的是参考还原还是可读性适配，标记视频观察、采样与新增规则。
- 选择对应原尺寸参考帧，在同一 416×960 逻辑比例比较背景、底板、棋子和 HUD 的面积与位置。
- 对每个色族比较顶面、侧边和背面，确认只有一片，检查倒角是否误成宽白描边。
- 重算指定 ROI；若改动 ROI 或过滤阈值，保留说明。不要以几处亮边像素代表整个顶面。
- 检查地图→解谜→领奖→返回的彩度节奏；不把奖励背景留在解谜阶段。
- 检查所有箭头、数字、标签和主按钮前景/背景配对；透明图层与抗锯齿必须额外目视验收。
- 检查颜色在移动转向、旋转、撤销、重新开始后的稳定性；颜色本身不能代替合法行动判定。
- 若实施代码变更，再运行项目测试和构建，验证桌面、390×844、窄屏、模态与减少动态效果。本次文档变更不代表已完成这些新色值的浏览器验收。
- 原生/Cocos 采用同一角色与资源后再进行真机确认；本文没有原生渲染验证结论。
8.4 完成范围
本次完成：十张新增 PNG 证据帧、36 个局部采样记录、五张帧的彩度面积统计、跨帧色族检查、采样色板，以及本文。没有修改 Lab 的运行配色、正式版资产或玩法。所有推荐值可追溯到帧与 ROI；无法从视频确定的素材色、字体、遮罩参数、声音与时长均已明确区分。