feat: add production campaigns, gameplay labs, and review documentation
This commit is contained in:
cabinw
@@ -16,16 +16,18 @@ button{transition-duration:var(--pressMs)}button:active:enabled{transform:scale(
|
||||
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.pressed,button:active:enabled{transform:none!important}.rotate-example:active .icon{transform:none}dialog::backdrop{animation:none!important}}
|
||||
@media print{.topbar,.hero-actions,.search-box,.status,.print-hidden,dialog{display:none!important}.page{max-width:none;padding:0}.hero{grid-template-columns:1fr 300px;padding:20px 0;gap:25px}.hero h1{font-size:36px}.section{padding:25px 0}.swatch-grid{grid-template-columns:repeat(4,1fr)}.card,.swatch,.icon-item,.pair-card,.type-sample{break-inside:avoid}.section-head{break-after:avoid}.table-scroll{overflow:visible}tr{break-inside:avoid}.spec h3{break-after:avoid}body{-webkit-print-color-adjust:exact;print-color-adjust:exact}.footer{padding-bottom:0}}
|
||||
@media print{.swatch[hidden]{display:block!important}.empty{display:none!important}}
|
||||
.mini-stars .icon.icon-star{filter:brightness(0) saturate(100%) invert(79%) sepia(85%) saturate(1450%) hue-rotate(350deg) brightness(105%) contrast(102%) drop-shadow(0 2px 1px #c88b2380) drop-shadow(0 0 7px #ffd45c99) drop-shadow(0 0 16px #ffe8a366)}
|
||||
{{GAME_TOOLS_CSS}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
{{TILE_IMAGE}}
|
||||
<header class="topbar"><div class="page"><a class="brand" href="#overview"><span></span>HEX TRAILS</a><nav class="nav" aria-label="设计手册目录"><a href="#colors">颜色</a><a href="#components">组件</a><a href="#icons">图标</a><a href="#type">排版</a><a href="#motion">动效</a><a href="#specification">完整规范</a></nav></div></header>
|
||||
<main class="page">
|
||||
<section class="hero" id="overview"><div><p class="eyebrow">视觉设计手册 · 1.0 / 2026.09.08</p><h1>让每一种颜色<br><span>各司其职。</span></h1><p>HEX TRAILS 的视觉语言：冷蓝灰承托环境，暖白勾勒棋盘，紫色强调操作。把最明快的颜色，留给棋子。</p><div class="scheme-strip" aria-label="核心配色"><span style="background:var(--background)"></span><span style="background:var(--board)"></span><span style="background:var(--utility)"></span><span style="background:var(--primary)"></span><span style="background:var(--tileYellow)"></span></div><div class="hero-actions"><a class="button primary" href="#colors">查看颜色体系</a><button class="button" id="print-guide">打印 / 存为 PDF</button></div><p class="hero-note">适用：游戏界面、手机触摸操作、Cocos 移植。<br>本文件可离线打开，包含完整规范与原始图片。</p></div><div><div class="phone-stage" aria-label="当前主界面静态组合示例"><div class="phone-top"><span class="icon-ground"><span class="icon icon-grid" aria-hidden="true"></span></span><span class="phone-level">LEVEL 02</span><span class="icon-ground"><span class="icon icon-gear" aria-hidden="true"></span></span></div><div class="phone-moves">剩余步数<b>{{MOVES}}</b></div>{{BOARD}}<div class="phone-rotate"><div><span class="icon icon-left" aria-hidden="true"></span><small>左转</small></div><div><span class="icon icon-right" aria-hidden="true"></span><small>右转</small></div></div><div class="phone-tools"><div class="demo-disabled"><span class="icon-ground"><span class="icon icon-undo" aria-hidden="true"></span></span><small>撤销</small></div><div><span class="icon-ground"><span class="icon icon-restart" aria-hidden="true"></span></span><small>重来</small></div><div><span class="icon-ground"><span class="icon icon-bulb" aria-hidden="true"></span></span><small>提示</small></div></div></div><p class="preview-caption">静态组合示意 · 使用实际关卡绘制与当前生成素材</p></div></section>
|
||||
<section class="hero" id="overview"><div><p class="eyebrow">视觉设计手册 · 1.0 / 2026.09.08</p><h1>让每一种颜色<br><span>各司其职。</span></h1><p>HEX TRAILS 的视觉语言：冷蓝灰承托环境，暖白勾勒棋盘，紫色强调操作。把最明快的颜色，留给棋子。</p><div class="scheme-strip" aria-label="核心配色"><span style="background:var(--background)"></span><span style="background:var(--board)"></span><span style="background:var(--utility)"></span><span style="background:var(--primary)"></span><span style="background:var(--tileYellow)"></span></div><div class="hero-actions"><a class="button primary" href="#colors">查看颜色体系</a><button class="button" id="print-guide">打印 / 存为 PDF</button></div><p class="hero-note">适用：游戏界面、手机触摸操作、Cocos 移植。<br>本文件可离线打开，包含完整规范与原始图片。</p></div><div><div class="phone-stage" aria-label="当前主界面静态组合示例"><div class="phone-top"><span class="icon-ground"><span class="icon icon-grid" aria-hidden="true"></span></span><span class="phone-level">LEVEL 02</span><span class="icon-ground"><span class="icon icon-gear" aria-hidden="true"></span></span></div><div class="phone-moves">剩余步数<b>{{MOVES}}</b></div>{{BOARD}}<div class="phone-rotate"><div><span class="icon icon-left" aria-hidden="true"></span><small>左转</small></div><div><span class="icon icon-right" aria-hidden="true"></span><small>右转</small></div></div><div class="guide-tools">{{GAME_ITEMS_ROW}}</div></div><p class="preview-caption">静态组合示意 · 使用实际关卡绘制与当前生成素材</p></div></section>
|
||||
<div class="principles"><article class="principle"><h3>01 · 先分角色，再选颜色</h3><p>环境、内容、操作与状态各有用途。同一层级的工具使用同一组颜色。</p></article><article class="principle"><h3>02 · 一个界面，一个重点</h3><p>紫色留给主要确认与选中状态；蓝灰工具安静地服务棋盘。</p></article><article class="principle"><h3>03 · 让信息看得清楚</h3><p>配对检查文字和图形的对比度；用文字、图标与反馈共同表达状态。</p></article></div>
|
||||
<section class="section" id="colors" style="margin-top:60px"><div class="section-head"><div><span class="section-num">01 / COLOR</span><h2>有职责的色板</h2><p>点击色块复制 HEX。先看用途，再选颜色；不要把棋子色直接套到普通按钮上。</p></div><span class="pill">固定浅色主题</span></div><div class="search-box"><input id="color-search" type="search" placeholder="搜索颜色用途、Token 或 HEX" aria-label="搜索颜色"><span id="color-count"></span></div><div class="swatch-grid" id="swatches">{{SWATCHES}}</div><p class="empty" id="empty-colors" hidden>没有找到匹配颜色，请换一个关键词。</p><p class="note">棋子 HEX 是已接受图片的代表采样值，不保证每个像素完全一致。遮罩色含透明度，展示时会与手册底色混合。</p><div class="pair-grid"><div class="pair-card primary-pair"><b>下一关</b><p>主操作：紫底 + 白字<br>一张弹窗只放一个高强调主操作。</p><code>primary / onPrimary</code></div><div class="pair-card utility-pair"><b>提示</b><p>工具：蓝灰底 + 白色图标<br>选关、设置、撤销、重来、提示统一。</p><code>utility / onUtility</code></div><div class="pair-card warning-pair"><b>路线被挡住了</b><p>反馈：浅暖底 + 深警告色<br>搭配明确原因，不依赖颜色表达阻挡。</p><code>warningSurface / warning</code></div></div><h3>配对对比度</h3><p class="note" style="margin:0 0 20px">下表检查不透明 Token 配对：文字 4.5:1，必要图形 3:1。蓝棋子上的白箭头通过图形标准，不适合据此放白色小字。透明图标、阴影和真实字体仍需画面验收。</p><div class="table-scroll"><table class="pair-table"><thead><tr><th>实际配对</th><th>前景 / 背景</th><th>对比度</th><th>最低要求</th><th>Token 检查</th></tr></thead><tbody>{{PAIR_ROWS}}</tbody></table></div></section>
|
||||
<section class="section" id="components"><div class="section-head"><div><span class="section-num">02 / COMPONENTS</span><h2>把规范放到控件上</h2><p>真实图标、明确层级和可识别状态。以下按钮可点击查看反馈，禁用示例确实不可点击。</p></div></div><div class="component-grid"><article class="card"><h3>操作层级</h3><div class="demo-row"><button class="button primary" data-feedback="主操作：primary / onPrimary">下一关 <span class="icon icon-play" aria-hidden="true"></span></button><button class="button" data-feedback="次操作：secondary / textPrimary">再走一遍</button></div><div class="demo-row"><button class="button utility" data-feedback="工具：utility / onUtility"><span class="icon icon-bulb" aria-hidden="true"></span>提示</button><button class="button utility demo-disabled" disabled><span class="icon icon-undo" aria-hidden="true"></span>撤销</button></div><p>网页禁用态是在正常控件上应用 55% 透明度。<code>disabled / onDisabled</code> 是原生参考色，二者不要混用。</p></article><article class="card"><h3>按压与键盘焦点</h3><div class="demo-row"><div class="demo-column"><button class="button utility" data-feedback="默认状态">提示</button><small>默认</small></div><div class="demo-column"><button class="button utility pressed" data-feedback="按压示意：缩放至 94%">提示</button><small>按压示意</small></div><div class="demo-column"><button class="button utility focus-demo" data-feedback="使用 Tab 键查看真实焦点">提示</button><small>焦点示意</small></div></div><p>按压反馈为 150ms。使用 Tab 键可查看真实焦点；轮廓与形状共同标识交互状态。</p></article><article class="card"><h3>旋转：留出呼吸空间</h3><div class="demo-row rotation-demo"><button class="rotate-example" data-feedback="左转控件：无矩形底板"><span class="icon icon-left" aria-hidden="true"></span>左转</button><button class="rotate-example" data-feedback="右转控件：无矩形底板"><span class="icon icon-right" aria-hidden="true"></span>右转</button></div><p>保留生成图标造型，放大显示并附文字。轮廓使用轻微蓝灰阴影；它不属于上面的纯色对比度检查。</p></article><article class="card"><h3>选中：颜色加状态文字</h3><div class="level-samples" aria-label="关卡选中状态演示"><button class="level-sample" aria-pressed="false">01<small>选择关卡</small></button><button class="level-sample" aria-pressed="true">02<small>当前关卡</small></button><button class="level-sample" aria-pressed="false">03<small>选择关卡</small></button></div><p>点击切换选中示例。普通关卡用中性底色和深色数字，当前关卡用紫底白字，并有明确状态。</p></article></div><article class="card tile-panel"><div>{{TILES}}</div><div><h3>四种棋子，一套规则</h3><p>使用当前棋子图片与共享圆角六边形遮罩，方向箭头沿用游戏绘制。颜色不代表功能、品质或阵营。</p><p><b>黄色必须使用深色箭头。</b><br>白箭头保留在蓝、粉、紫棋子上。各色棋子均通过位置、方向和运动判断。</p></div></article></section>
|
||||
<section class="section" id="colors" style="margin-top:60px"><div class="section-head"><div><span class="section-num">01 / COLOR</span><h2>有职责的色板</h2><p>点击色块复制 HEX。先看用途，再选颜色；不要把棋子色直接套到普通按钮上。</p></div><span class="pill">固定浅色主题</span></div><div class="search-box"><input id="color-search" type="search" placeholder="搜索颜色用途、Token 或 HEX" aria-label="搜索颜色"><span id="color-count"></span></div><div class="swatch-grid" id="swatches">{{SWATCHES}}</div><p class="empty" id="empty-colors" hidden>没有找到匹配颜色，请换一个关键词。</p><p class="note">棋子 HEX 是已接受图片的代表采样值，不保证每个像素完全一致。遮罩色含透明度，展示时会与手册底色混合。</p><div class="pair-grid"><div class="pair-card primary-pair"><b>下一关</b><p>主操作：紫底 + 白字<br>一张弹窗只放一个高强调主操作。</p><code>primary / onPrimary</code></div><div class="pair-card utility-pair"><b>设置</b><p>导航：蓝灰底 + 白色图标<br>底部游戏道具使用更大的独立彩色底座。</p><code>utility / onUtility</code></div><div class="pair-card warning-pair"><b>路线被挡住了</b><p>反馈：浅暖底 + 深警告色<br>搭配明确原因，不依赖颜色表达阻挡。</p><code>warningSurface / warning</code></div></div><h3>配对对比度</h3><p class="note" style="margin:0 0 20px">下表检查不透明 Token 配对：文字 4.5:1，必要图形 3:1。蓝棋子上的白箭头通过图形标准，不适合据此放白色小字。透明图标、阴影和真实字体仍需画面验收。</p><div class="table-scroll"><table class="pair-table"><thead><tr><th>实际配对</th><th>前景 / 背景</th><th>对比度</th><th>最低要求</th><th>Token 检查</th></tr></thead><tbody>{{PAIR_ROWS}}</tbody></table></div></section>
|
||||
<section class="section" id="components"><div class="section-head"><div><span class="section-num">02 / COMPONENTS</span><h2>把规范放到控件上</h2><p>真实图标、明确层级和可识别状态。以下按钮可点击查看反馈，禁用示例确实不可点击。</p></div></div><div class="component-grid"><article class="card"><h3>操作层级</h3><div class="demo-row"><button class="button primary" data-feedback="主操作：primary / onPrimary">下一关 <span class="icon icon-play" aria-hidden="true"></span></button><button class="button" data-feedback="次操作：secondary / textPrimary">再走一遍</button></div><div class="demo-row"><button class="button utility" data-feedback="工具：utility / onUtility"><span class="icon icon-gear" aria-hidden="true"></span>设置</button><button class="button utility demo-disabled" disabled><span class="icon icon-grid" aria-hidden="true"></span>选关</button></div><p>网页禁用态是在正常控件上应用 55% 透明度。<code>disabled / onDisabled</code> 是原生参考色，二者不要混用。</p></article><article class="card"><h3>按压与键盘焦点</h3><div class="demo-row"><div class="demo-column"><button class="button utility" data-feedback="默认状态">设置</button><small>默认</small></div><div class="demo-column"><button class="button utility pressed" data-feedback="按压示意：缩放至 94%">设置</button><small>按压示意</small></div><div class="demo-column"><button class="button utility focus-demo" data-feedback="使用 Tab 键查看真实焦点">设置</button><small>焦点示意</small></div></div><p>按压反馈为 150ms。使用 Tab 键可查看真实焦点；轮廓与形状共同标识交互状态。</p></article><article class="card"><h3>旋转：留出呼吸空间</h3><div class="demo-row rotation-demo"><button class="rotate-example" data-feedback="左转控件：无矩形底板"><span class="icon icon-left" aria-hidden="true"></span>左转</button><button class="rotate-example" data-feedback="右转控件：无矩形底板"><span class="icon icon-right" aria-hidden="true"></span>右转</button></div><p>保留生成图标造型，放大显示并附文字。轮廓使用轻微蓝灰阴影；它不属于上面的纯色对比度检查。</p></article><article class="card"><h3>选中：颜色加状态文字</h3><div class="level-samples" aria-label="关卡选中状态演示"><button class="level-sample" aria-pressed="false">01<small>选择关卡</small></button><button class="level-sample" aria-pressed="true">02<small>当前关卡</small></button><button class="level-sample" aria-pressed="false">03<small>选择关卡</small></button></div><p>点击切换选中示例。普通关卡用中性底色和深色数字，当前关卡用紫底白字，并有明确状态。</p></article></div><article class="card" style="margin-top:24px"><h3>游戏道具：独立于顶部导航</h3>{{GAME_ITEMS}}<p>棋盘以通知区和旋转区之间的可用区域为中心，上下留白相等。旋转、道具分行排列，不覆盖棋盘。</p></article><article class="card tile-panel"><div>{{TILES}}</div><div><h3>四种棋子，一套规则</h3><p>使用当前棋子图片与共享圆角六边形遮罩，方向箭头沿用游戏绘制。颜色不代表功能、品质或阵营。</p><p><b>黄色必须使用深色箭头。</b><br>白箭头保留在蓝、粉、紫棋子上。各色棋子均通过位置、方向和运动判断。</p></div></article></section>
|
||||
<section class="section" id="icons"><div class="section-head"><div><span class="section-num">03 / ASSETS</span><h2>同一套图标，同一套语气</h2><p>当前使用的 16 个生成图标，按实际图形边界裁成正方形并等比居中。这里保留原始 PNG 的像素与造型。</p></div><span class="pill">原图 1254 × 1254</span></div><div class="icon-grid">{{ICONS}}</div><p class="note">原图：<code>ui-icons-generated.png</code>；裁切：<code>src/ui-skin.js → ICONS</code>。不要用代码重绘版、字符或另一套图标替换。透明边缘仍需实机验收。</p></section>
|
||||
<section class="section" id="type"><div class="section-head"><div><span class="section-num">04 / TYPOGRAPHY & SPACING</span><h2>简单、有秩序的细节</h2><p>文字靠尺寸和字重建立层级，辅助文字仍保持可读对比。以下字号是游戏控件规范，手册正文为阅读做了适当放大。</p></div></div><div class="type-layout"><div><div class="type-sample"><b style="font-size:28px">LEVEL 02</b><code>28px / 粗体</code></div><div class="type-sample"><b style="font-size:32px">9</b><code>步数 32px / 粗体</code></div><div class="type-sample"><b style="font-size:24px">漂亮，全部过关！</b><code>标题 24px</code></div><div class="type-sample"><span style="font-size:14px">轻点箭头，沿着轨道出发。</span><code>正文 13–14px<br>行高 1.75</code></div><div class="type-sample"><span style="font-size:12px">撤销 · 重来 · 提示</span><code>标签 12–13px</code></div></div><div><h3>4px 基础间距</h3><div class="space-row" aria-label="4、8、12、16、24、32 像素间距"><span style="--space:4px" data-size="4"></span><span style="--space:8px" data-size="8"></span><span style="--space:12px" data-size="12"></span><span style="--space:16px" data-size="16"></span><span style="--space:24px" data-size="24"></span><span style="--space:32px" data-size="32"></span></div><h3 style="margin-top:40px">统一圆角</h3><div class="shape-row"><div class="shape" style="border-radius:8px">8px<br>小角标</div><div class="shape" style="border-radius:14px">14px<br>控件</div><div class="shape" style="border-radius:24px">24px<br>弹窗</div></div><p class="note">常规触摸区至少 44 × 44px。中文使用 PingFang SC / Microsoft YaHei；原生端如需一致字宽，须统一授权字体资源。</p></div></div></section>
|
||||
<section class="section" id="motion"><div class="section-head"><div><span class="section-num">05 / MOTION</span><h2>轻快地出现，清楚地反馈</h2><p>打开演示，查看遮罩、弹窗入场和三颗星星的顺序。遵循系统“减少动态效果”设置。</p></div></div><div class="motion-layout"><div class="motion-preview"><div class="mini-modal"><div class="mini-stars" aria-hidden="true"><span class="icon icon-star"></span><span class="icon icon-star"></span><span class="icon icon-star"></span></div><h3>漂亮，全部过关！</h3><button class="button primary" id="show-motion">播放弹窗动效</button></div></div><div class="timings"><div class="timing"><span>按钮按压</span><b>150 <small>ms</small></b></div><div class="timing"><span>弹窗从上方进入</span><b>420 <small>ms</small></b></div><div class="timing"><span>星星依次开始</span><b><small>300 / 490 / 680 ms</small></b></div><div class="timing"><span>碰撞反馈总长</span><b>1250 <small>ms</small></b></div><p class="note">碰撞顺序：接近 → 接触停顿与阻挡棋子轻震 → 原路弹回。该顺序在游戏中执行，此处只演示弹窗；游戏音效在首次手势后启动，可在设置关闭。</p></div></div></section>
|
||||
|
||||
Reference in New Issue
Block a user