01 · 先分角色，再选颜色
环境、内容、操作与状态各有用途。同一层级的工具使用同一组颜色。
视觉设计手册 · 1.0 / 2026.09.08
让每一种颜色
各司其职。
HEX TRAILS 的视觉语言：冷蓝灰承托环境，暖白勾勒棋盘，紫色强调操作。把最明快的颜色，留给棋子。
适用：游戏界面、手机触摸操作、Cocos 移植。
本文件可离线打开，包含完整规范与原始图片。
LEVEL 02
剩余步数{{MOVES}}
{{BOARD}}左转
右转
{{GAME_ITEMS_ROW}}
静态组合示意 · 使用实际关卡绘制与当前生成素材
02 · 一个界面，一个重点
紫色留给主要确认与选中状态；蓝灰工具安静地服务棋盘。
03 · 让信息看得清楚
配对检查文字和图形的对比度；用文字、图标与反馈共同表达状态。
01 / COLOR
固定浅色主题有职责的色板
点击色块复制 HEX。先看用途，再选颜色；不要把棋子色直接套到普通按钮上。
{{SWATCHES}}
没有找到匹配颜色，请换一个关键词。
棋子 HEX 是已接受图片的代表采样值，不保证每个像素完全一致。遮罩色含透明度，展示时会与手册底色混合。
下一关
主操作：紫底 + 白字
一张弹窗只放一个高强调主操作。
primary / onPrimary设置
导航：蓝灰底 + 白色图标
底部游戏道具使用更大的独立彩色底座。
utility / onUtility路线被挡住了
反馈：浅暖底 + 深警告色
搭配明确原因，不依赖颜色表达阻挡。
warningSurface / warning配对对比度
下表检查不透明 Token 配对：文字 4.5:1，必要图形 3:1。蓝棋子上的白箭头通过图形标准，不适合据此放白色小字。透明图标、阴影和真实字体仍需画面验收。
| 实际配对 | 前景 / 背景 | 对比度 | 最低要求 | Token 检查 |
|---|
02 / COMPONENTS
把规范放到控件上
真实图标、明确层级和可识别状态。以下按钮可点击查看反馈，禁用示例确实不可点击。
操作层级
网页禁用态是在正常控件上应用 55% 透明度。disabled / onDisabled 是原生参考色，二者不要混用。
按压与键盘焦点
默认
按压示意
焦点示意
按压反馈为 150ms。使用 Tab 键可查看真实焦点；轮廓与形状共同标识交互状态。
旋转：留出呼吸空间
保留生成图标造型，放大显示并附文字。轮廓使用轻微蓝灰阴影；它不属于上面的纯色对比度检查。
选中：颜色加状态文字
点击切换选中示例。普通关卡用中性底色和深色数字，当前关卡用紫底白字，并有明确状态。
游戏道具：独立于顶部导航
{{GAME_ITEMS}}棋盘以通知区和旋转区之间的可用区域为中心，上下留白相等。旋转、道具分行排列，不覆盖棋盘。
{{TILES}}
四种棋子，一套规则
使用当前棋子图片与共享圆角六边形遮罩，方向箭头沿用游戏绘制。颜色不代表功能、品质或阵营。
黄色必须使用深色箭头。
白箭头保留在蓝、粉、紫棋子上。各色棋子均通过位置、方向和运动判断。
03 / ASSETS
原图 1254 × 1254同一套图标，同一套语气
当前使用的 16 个生成图标，按实际图形边界裁成正方形并等比居中。这里保留原始 PNG 的像素与造型。
{{ICONS}}
原图：ui-icons-generated.png；裁切：src/ui-skin.js → ICONS。不要用代码重绘版、字符或另一套图标替换。透明边缘仍需实机验收。
04 / TYPOGRAPHY & SPACING
简单、有秩序的细节
文字靠尺寸和字重建立层级，辅助文字仍保持可读对比。以下字号是游戏控件规范，手册正文为阅读做了适当放大。
LEVEL 02
28px / 粗体9
步数 32px / 粗体漂亮，全部过关！
标题 24px轻点箭头，沿着轨道出发。
正文 13–14px
行高 1.75撤销 · 重来 · 提示
标签 12–13px4px 基础间距
统一圆角
8px
小角标
小角标
14px
控件
控件
24px
弹窗
弹窗
常规触摸区至少 44 × 44px。中文使用 PingFang SC / Microsoft YaHei；原生端如需一致字宽，须统一授权字体资源。
05 / MOTION
轻快地出现，清楚地反馈
打开演示，查看遮罩、弹窗入场和三颗星星的顺序。遵循系统“减少动态效果”设置。
漂亮，全部过关！
按钮按压150 ms
弹窗从上方进入420 ms
星星依次开始300 / 490 / 680 ms
碰撞反馈总长1250 ms
碰撞顺序：接近 → 接触停顿与阻挡棋子轻震 → 原路弹回。该顺序在游戏中执行，此处只演示弹窗；游戏音效在首次手势后启动，可在设置关闭。
06 / FULL SPECIFICATION
完整设计规范
以下内容自动来自 Design.md。颜色数值来自共享 Token；修改源文件并运行 npm run design 即可重新生成本手册。