NumberSwipe_New/docs/2026-10-21_美术设计-柔和积木-report.md

数字一笔 · 柔和积木风格完整美术与 UI 设计报告

版本：1.0 设计提案｜日期：2026-10-21｜适用：小游戏、Google Play、App Store 手机竖屏

本报告将用户选定的“柔和积木”方向转成可执行规范。它是新视觉方案，不是对现有程序的实现描述；本次不改规则、关卡、正式 UI 或打包文件。报告内“必须”表示采用此方案时的设计验收要求，不表示引擎已强制执行。

配套文件：

• 可离线查看的视觉样张：色板、字阶、状态、页面、动效演示。
• 结构化设计令牌：颜色、尺寸、字体、材质和动效参数。
• 对比度计算结果与复核脚本。
• 现有规范：design.md。本报告与之冲突的项目列在第 22 节；采用后应通过一次完整视觉版本更新同步，而不是部分覆盖。

1. 风格定义与体验目标

1.1 一句话定义

像一套摆在温暖桌面上的精密哑光拼块：形体柔和、数字清楚，手指划过时路径连成完整的一体。

关键词：温和、清楚、可触摸、克制、可靠。玩家首先理解“能走哪、走到第几步、哪里要改”，然后感受到材质和完成反馈。

这是一套二维俯视视觉系统。轻厚度、圆角、颜色和短反馈共同构成实体感，不需要透视相机、真实灯光或 3D 资产。

1.2 视觉优先级

1. 规则信息： 格形与共边、数字/奇偶、墙、转轴。
2. 操作状态： 当前末端、已走路径、冲突、提示。
3. 任务与导航： 关号、剩余格数、重开、补数字、指路。
4. 材质与品牌： 暖白、蓝紫、边缘厚度、短音。
5. 装饰： 少量章节点缀，仅在不影响前四项时出现。

不能用提高装饰层级弥补玩法层级不清。商业展示中的“有质感”也不等于游戏内每个元素都加阴影。

1.3 应有与不应有

应有	不应有	原因
哑光块面与清楚外轮廓	强镜面、高光塑料球	反光会盖住数字、分散注意
稳定 2–3 单位厚度	大幅挤压、果冻拉伸	异形凹口与邻接不能随表现改变
正俯视、统一光向	等距视角、倾斜棋盘	手指命中和边墙需要准确对位
单主色连贯路径	每格随机糖果色	当前不是颜色配对玩法
局部确认、清晰收束	常驻粒子、整屏闪白、长撒花	思考阶段需要安静
简短友好文案	儿童口吻、失败羞辱、虚假 IQ 判断	不误导成人休闲逻辑产品定位

1.4 适用范围

同一套材质和 UI 语言服务数字一笔、六边一笔。矩形大格/奇偶属于数字玩法；墙/转墙属于六边玩法，美术统一不意味着规则合并。

本版主皮肤为浅色。暗色、木质、节日主题不纳入首版制作量；后续主题仍需保留语义、可读性与几何轮廓，不能直接做全局颜色反转。

2. 画面构成与品牌一致性

2.1 颜色面积关系

背景与留白占视觉大部；未走块形成中性结构；已走路径是最醒目的面积色。不要强制按全屏固定百分比配色：关卡规模与解题进度天然改变占比。控制的是注意力次序，不是每张截图相同的色块面积。

章包可以使用小图形或几何排布区别，不能在每关切换不同路径色。红与琥珀不承担装饰性品牌色。

2.2 几何家族

矩形、圆角矩形、圆角六边形、圆点和圆头线段是基础形。图标、按钮和卡片采用相近的圆角节奏，但不要全部变成圆球。

矩形大格的圆角按单位格尺度计算，不随自身 2×2、3×3 面积成倍放大。异形拼块只在整体外轮廓处理边缘，内部拼接线必须消失。

2.3 排版气质

大标题有分量，正文短而平静；数字比装饰更有存在感。UI 不是杂志封面，不使用极细字体、大段全大写或过度字距。中文不用故意拉宽字间距营造“高级感”。

3. 完整配色系统

颜色为不透明 sRGB 十六进制；透明蒙层必须另算合成后的效果。下表是设计令牌的主要用途，JSON 为机器可读镜像。

3.1 背景与表面

令牌	色值	用途	使用约束
background	#F7F5F1	游戏背景、主页面背景	统一暖白，不叠纸纹/噪声
surface	#FFFEFC	卡片、对话框、设置面板	与背景保持轻分层
surfaceRaised	#FFFFFF	必要的高层面	不用于满屏纯白高光
surfaceMuted	#EEEBE6	次按钮、分组、胶囊	文字用主墨或辅助墨
divider	#D5D0C9	非关键分隔线	不能单独承担格边/重要状态
cellFace	#E5E3E1	未走拼块正面	配合有足够对比的外轮廓
cellDepth	#C5C0CB	拼块下沿与厚度	只表现材质，不独自承担边界信息
cellBoundary	#817B88	未走块有效外边界	1.25 单位起，实机必要时加粗

3.2 字体颜色与主色

令牌	色值	用途
ink	#292638	线索、标题、关键正文
inkSecondary	#66616F	说明、图标、剩余格数
inkTertiary	#716A78	非主要信息；仅放在通过对比校验的底上
primary	#6558F5	已走路径、当前进度、主要按钮
primaryPressed	#5245D6	主按钮按压面、深色选中标签文字
primaryDepth	#4B3AC8	已走块下沿
primarySoft	#EDEAFF	当前关/已选设置的淡紫背景；已走线索环
selectedInk	#5245D6	淡紫面上的小字号文字，避免直接用较浅主紫
primaryEdgeLight	#A49BFF	装饰性局部边缘光，不覆盖数字区域
onPrimary	#FFFFFF	紫面或错误面上的数字、主按钮文字

3.3 状态与墙

令牌	色值	用途	非颜色提示
danger	#C74350	当前冲突格正面、危险操作主按钮	原条件角标、短晃动或静态冲突描边
dangerDepth	#9E2F3A	错误块下沿	与正面同一整体
dangerSoft	#FBEAED	解释性错误提示底	与 dangerInk 配套
dangerInk	#8B2632	淡红底错误文字	写清发生什么，而非仅“错误”
hint	#966000	外圈提示、目标标记	外圈/角括号和辅助说明
hintSoft	#FFF0D2	提示说明背景	不铺满棋盘
hintInk	#664400	提示文字	与底色配对
wallInk	#3B3547	共边墙身、转轴轮廓	斜纹/实体杆身
wallStripe	#D7B35B	墙内条纹	固定在杆身内部，不是提示环
focus	#6558F5	键盘/焦点外圈	外圈偏移与明确焦点语义
overlay	#292638	遮罩源色	弹窗背景遮罩建议 32% 起，需合成验收

墙和提示都含暖色，但形状不同：墙是常驻共边杆＋内部斜纹，提示是目标外圈＋说明。不能只依赖黄/橙色相区别。

3.4 颜色纪律

• 紫色只在路径和可操作的产品强调中使用。无第二条竞争性常驻彩色路径。
• 红色不用于“未解锁”、高难度装饰、普通未完成进度。
• 琥珀不表示可购买商品；奖励和促销不占用谜题提示语义。
• “已通关”不再引入大面积绿色；用勾、文字、淡紫背景表达。
• 禁用态不对整个组件统一降低至 40% 透明；分别处理底、字、图标，让解锁条件仍可读。
• 高对比辅助模式加粗关键边、强化标记，不修改题目难度或邻接。

4. 对比度与柔和材质的平衡

文字以 4.5:1 为本方案的默认最低目标，关键图形/状态以 3:1 为目标。即使某些大字可适用较低标准，本项目仍优先让盘面数字达到 4.5。该目标参考 WCAG，不等于声明整个 Canvas 游戏已满足全部可访问性要求。文字参考、非文字参考

本次用相对亮度公式计算，判断阈值时使用未四舍五入值，表中仅作显示：

前景 / 背景	比值约	设计结论
主墨 / 暖白	13.50:1	标题与关键说明充分清楚
辅助墨 / 暖白	5.50:1	可用于常规辅助文字
三级墨 / 暖白	4.78:1	可用，不再任意减透明度
线索墨 / 未走面	11.48:1	数字清楚
白字 / 主紫	4.92:1	路径数字与按钮可用
白字 / 按压紫	6.60:1	按压不损失可读性
白字 / 新错误红	4.83:1	错误仍能读到步号
深选中文字 / 淡紫	5.60:1	用于当前关与开关标签
格边 / 未走面	3.20:1	格边承担结构识别
格边 / 暖白	3.77:1	轮廓在背景上可辨
提示环 / 未走面	4.13:1	不依赖发光或淡色提示
深墙 / 墙条纹	5.87:1	条纹与墙身清楚
未走面 / 暖白	1.18:1	不能只靠填充/阴影作为格边

复算还发现，现有 #E5484D 上白字约 3.91:1、现有过关亮紫 #7D72FF 上白字约 3.67:1；不能沿用旧表数值宣称普通小字达到 4.5。本方案调整错误红，并让过关面仍保持主紫，亮色仅用于不遮数字的边缘/光带。

这次静态检查共验证 19 组必要颜色配对，均达各自目标；另含 3 组诊断。没有验证全部透明叠层、真实字体抗锯齿、屏幕阳光可读性和动画帧，正式资产仍需实机检查。

5. 字体方案与字形要求

5.1 推荐组合

内容	主选	字重	原因
盘面阿拉伯数字	Nunito	800	圆润、饱满，与积木形体统一
英文标题/品牌短字	Nunito	700/800	与数字建立同族感
简体中文 UI	Noto Sans SC / 思源黑体系对应版本	500/600/700	笔画稳定，小字号易读
长说明/帮助	Noto Sans SC，拉丁同用清楚的无衬线	400/500	长段落不过度加粗
临时原型/字体加载前	系统字体栈	实际可用字重	保证启动和离线可用，不假定所有平台字形相同

中文正文选清楚无衬线，圆润感主要交给数字、圆角和材质；不强求所有汉字都做成幼态圆体。Noto Sans SC 与 Source Han Sans 是相关但不同发行包，正式工程必须选定一个具体来源和文件，不以名称互相替代。

Nunito 和 Noto CJK 对应官方仓库提供开放字体许可；交付字体时保留各自实际版本的许可证和来源记录。本轮只核对来源，没有下载或把字体打进游戏。Nunito、Noto CJK

5.2 回退与跨平台

建议以分角色字体来实现：盘面数字先尝试已打包 Nunito，中文先尝试已打包 Noto Sans SC，再回退系统。原型可继续采用 ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif 作为后备，但必须检查中文实际回退。

• 不把苹果系统圆体当作 Android/微信必然存在的字体。
• Web 的 CSS font-variant-numeric 不会自动修复 Canvas/Cocos 文本布局；必须检查实际渲染器。
• 字体未就绪时使用稳定回退，字体替换后重测文字和重新绘制；不让按钮宽度和数字锚点跳动。
• 正式数字字形需检查 1/7、3/8、6/9、0/8、11/17、18/19、20/21、100，不能仅看单个 8。
• 检查数字等宽能力。若渲染路径不支持相关特性，则使用固定推进宽度与居中测量；不要对单个数字随意横向拉伸。
• 本版推荐 1–2 个必要中文字重与一个数字字重；复杂多语种需求再扩大字库。不为仅有几页 UI 打包重复完整 CJK 字族。

5.3 数字的排版规则

盘面数字始终水平，不随转墙、块按压或过关光带旋转。整数字串一起居中，不逐位居中。两位数只调字阶，不压窄单个字符。

静态数字可以按字面视觉中心轻微校正，但 1 不能每次跳到不同坐标。是否下沉 2%–4% 字号由实际字形决定；不要沿用旧字体偏移后不验新字体。

6. UI 字阶、行高与实际文字大小

6.1 计量约定

以下尺寸单位是逻辑设计单位 D，以 375×812 竖屏为参考。Web 1D 在基准下映射 1 CSS px；原生应按平台布局坐标映射，Android 字体使用 sp，iOS 使用 pt；Cocos 以统一设计坐标缩放。它们不是物理像素的等号关系。

750×1624 可作为 2 倍设计图，图中的 32px 对应基准 16D，而不是游戏文字要写 32。屏幕 DPR 不改变正文应有的视觉大小。

6.2 常规文字

级别	字号 D	行高 D	字重	适用
页面展示标题	30	38	800 拉丁 / 700 中文	首页或选关主标题，一屏不超过一个
页面标题	24	32	700	关卡页标题、结果标题、弹窗标题
分组标题	18	26	700	包名、设置分组、帮助小节
主正文	16	24	500	规则教学、主要说明
按钮	16	24	700	继续、下一关、底栏动作
信息标签	14	20	600	剩余格数、关卡包进度、开关标签
辅助说明	13	18	500	简短手势说明、状态解释
微型元信息	12	16	500	非必要元信息；不放核心规则
选关数字	20	24	800 数字	关卡格
顶栏关号	22	28	800 数字	1–8，长关号需留宽

正文默认 16D，相比旧版 15D 更舒展。12D 是极少量元信息的底限，不可把操作说明缩到 10/11D 来塞版。关键规则要用 16D，不能藏在标题下的细灰字里。

中文字距默认 0；英语正文默认 0，短标签最多 0.02em；数字字距默认 0，计数与关号启用稳定数字宽度。不要普遍加粗到 800，粗细差是信息层级的一部分。

6.3 盘面字阶

u 表示逻辑单位网格的节距，不是大格总宽。六边版本取单格几何布局中可稳定容纳文字的参考宽度，不能把外接圆直径直接当成矩形单位格宽。

内容	字号建议	辅助限制
起点 1	clamp(26, 0.60u, 46) D	数字更醒目，不让起点占满整块
一位步号/线索	clamp(24, 0.52u, 44) D	800 字重
两位步号/线索	clamp(22, 0.46u, 40) D	800 字重，整串测宽
原始奇/偶	clamp(22, 0.44u, 36) D	中文 700，不当小装饰
已走奇偶的保留标签	至少 12D，常用 12–14D	主步号上移，二者不能相撞
冲突条件角标	目标至少 12D	放不下则调整盘面/说明布局，不能无限缩小

示例：u=60 时，起点 36、一位 31.2、两位 27.6、奇偶 26.4D。u=48 时，一位约 25、两位约 22D。大格数字仍按 u 算，不随 3×3 面积变成三倍字号。

三位数字要按实际发行内容单独验证；不能把参考表的“两位数”策略直接套用到三位或更多数字。盘面最多出现 N 步号，N 是拼块数量，不是关卡编号。

6.4 文本溢出

关号与剩余格数不省略；长包名可在非关键副标题中省略，选关入口要能看到完整名称。按钮优先简短翻译，其次增宽或两行，不先缩字体。中文与英文分别验版，德语等较长语言预留约三成文本宽度只是制作预留，不保证适用所有翻译。

系统大字开启时，菜单、帮助与设置允许换行/滚动；盘面不能只放大字而不检查格内碰撞。先压缩非关键顶栏/留白、保持关键数字，再提供适合屏幕的盘面尺寸。不能宣称 Canvas 会自动继承系统动态字阶。

7. 积木造型、光照与材质

7.1 基础尺寸

属性	默认	上限/原则
单位格节距 u	舒适 56–72D，推荐不低于 48D	不能为了塞题自动缩至不可读
单侧内缩	0.05u	两相邻块面之间合计约 0.10u 缝
外圆角	clamp(7, 0.18u, 14) D	大格仍用同一个圆角尺度
厚度下沿	2D	教学大块最多 3D；小盘优先 2D
按压厚度	1D	不改变逻辑外轮廓
未走结构轮廓	1.25D	实机抗锯齿后不足时 1.5–2D
线索环	max(2, 0.04u) D	位于块面内，避免把缝变成墙
提示外圈	3D 起	与轮廓之间留 2D；不盖数字
接触阴影	黑/深墨，透明度不超过 8%，模糊最多 6D	只为接触感，不承担状态

推荐使用纯色面＋2D 偏移下沿＋轻量轮廓作为可跨 Canvas/Cocos 的基础版。真实模糊阴影是可选增强，低端机可去掉而不丢信息。

7.2 光照

全局光从左上方来；顶部/左侧微亮，底部稍深。不允许各块光向随机。没有必要做实时光源和反射，深浅可用固定颜色层表达。

若使用正面渐变，表面相对亮度变化控制在约 0.02 内，且最终逐状态重新算对比。基准令牌用纯色面，渐变是可选样板，不能默认继承纯色配对的验收结果。

不要做突出角上“糖果白点”，也不要给数字做压印/浮雕。数字是印在表面的清楚符号。

7.3 层级顺序

从下到上：背景 → 接触阴影/下沿 → 未走/已走块面与整体轮廓 → 路径连接桥及接缝修复 → 必要光带/内环 → 数字/原条件角标 → 墙与转轴 → 提示外圈/指示 → UI 浮层。

墙应在所有相关格的路径填色上方保持清晰。提示外圈不盖墙身；两个相交时调整标记局部断开，不能让高亮暗示墙消失。

7.4 异形和大格

• 2×2/3×3 是一整块，不画内部网格、单元凸点或四块各自阴影。
• L/T/S 形将单位格合并成整体轮廓后画一次底沿；内部拼接缝和重复描边必须消除。
• 外凸角柔和，凹口保留足以读懂形状的几何精度；凹角不靠大圆角抹掉。
• 数字位置保持在几何层选定的有效锚点单位格内。不能简单用包围盒中心，使数字落到 L/S 的空洞。
• 大格按压时用块面色/下沿高度反馈，不让整块缩小到露出假通道。

8. 路径与格子状态

8.1 状态矩阵

状态	正面/边缘	数字与标记	反馈
未走普通格	cellFace＋有效结构轮廓＋浅下沿	无数字	静止
未走数字线索	同上＋深墨内环	固定数字深墨	数字先清楚，环不抢字
未走奇偶	同上＋深墨内环	大号“奇/偶”	非装饰标签
起点未按下	主紫/深紫下沿	白色 1，已知线索环	可以静态强调，不预先计步
已走普通格	主紫/深紫下沿	当前真实步号白色	新进入时局部按压/回弹
已走线索	同已走＋淡紫内环	真实步号白色	轻微边缘确认
已走奇偶	同已走＋淡紫内环	主步号＋保留“奇/偶”标签	标签不得缩得不可读
当前末端	同已走，稳定的细内圈或局部边缘标记	步号照常	不持续跳动
错误	新错误红/深红下沿	当前步号＋已有原要求角标	短晃动；路径桥仍紫色
死路	保留当前颜色，突出末端轮廓	保留数字	一次轻提示，无失败大弹窗
提示目标	不改原状态，叠琥珀外圈	保留全部原信息	有限次数脉冲后静态/淡出
补数字	成为普通固定线索	新数保留原奇偶标签	琥珀圈短时强调，不用永久异色
待回退段	保留结构，适度降低路径饱和/亮度	数字仍可读	分叉格明确，不能整段低透明到不可辨
通关	主紫面保持	数字保留，顶栏有“完成”	路径次序收束，不整屏爆白

原关数字与补数字仍按真实步号约束，不能因填色状态遮住要求。当前“允许画错、可撤回”不变，美术不得替换成错误即失败。

8.2 连接桥

桥的可见宽度约 0.46u，跨缝方向从第一帧就覆盖完整间隙。增长只改变桥的厚度/局部亮度，不先画一条与指尖分离的飞线。

桥连接实际经过的相邻格；相邻且都已走，不代表都应该连桥。大格多出口处只连接路径真正的前后邻居。桥面与已走面同色，接缝不留黑线；需移除其覆盖区域内的块边描线，避免路径看起来被截断。

错误格进出桥仍为紫色，避免红色错误扩散成整条路线。撤销时被删除的桥立即消失，不滞留装饰残影。

9. 六边形、静态墙与转墙

9.1 六边积木

沿用暖白、主紫、数字字形和厚度；几何仍为正六边形共边关系。圆角只修外形边缘，不改变各格逻辑顶点/中心。多个相邻六边形的下沿不要叠成重黑蜂窝。

9.2 墙造型

墙是位于共边中线的薄杆，深墨身＋低饱和金色短斜纹。宽度起点为参考单格宽度的 0.08，限制在约 4–6D；有效长度以真实共边长度为基础，两端留几何空间，避免侵入相邻转轴。具体最小可画长度需逐布局验收。

杆身是信息，阴影是辅助。墙不占格，不画成数字前的门牌，不做跨越盘面的浮空栏杆。色弱模式仍能通过杆形/斜纹看出被封边。

9.3 转轴与旋转

转墙用同款杆身，轴端增加清楚的圆轴与深色轮廓。圆轴外径建议 8–12D，密集处先避免重叠而非继续缩小。空盘相位由关卡给定，不能为构图擅自旋转到“好看位置”。

起手落格也转、每走一步转 120°，撤销逆向复原；按出发前墙位判断通行，落格后更新。动效只能展示真实状态，不能自行加停顿、等待或按现实时间转动。

旋转建议用 fast 120ms、单调 ease-out，不用超过目标角的弹簧。累计角度按步数连续展开，不在 0°/360°边界突然倒转。快速新输入到来时，应先对齐当前逻辑墙位再处理下一步，打断/合并表现，不能排长动画队列拖慢笔尖。

这是待实现的表现要求，不代表当前渲染已支持上述中断策略。要在真实快速滑动中确认玩家看到的阻挡与判定一致。

9.4 撞墙与教学

撞墙：墙轮廓短时加强＋局部小幅反馈，末端不穿越，桥不生成。不能让整块被错误染红从而误导“数字踩错”。

教学文案：“条纹是墙，绕开它。”“每走一步，转墙就转一次。”显示实际旋转而非给玩家暴露 mod 3、状态机等技术术语。减弱动态下直接切到正确墙位，保留清楚静态轴心。

10. 布局网格、安全区与适配

10.1 基准与间距

以 4D 为基础节奏：4、8、12、16、20、24、32、40、48。正常左右边距 20D，紧凑模式 12D；独立小标签内部 8–12D，卡片内部 16–20D。

底部、刘海、摄像头、小游戏胶囊使用宿主返回的实际安全区。参考设计图不能把 44/34 等常见高度硬编码成所有设备值。

10.2 对局区域预算

区域	基准高度/间距	紧凑模式
顶安全区下留白	12D	8D
顶栏	56D	48D，保留点击区
包进度条	高 4D，上下合计约 12D	内容密集时可用文本进度替代
教学说明	36D 起；两行时随行高扩展	不挤到盘面内部
盘面容器	剩余空间，外保护区 12D	可缩保护区到 4D，不能侵入 UI
手势说明	18–20D	已学会后可省略冗余，不省规则
动作栏	高 56D	52D 起，不减有效触区
底部留白	16D＋实际安全区	12D＋实际安全区

盘面以可用空间计算：u = min((可用宽−左右保护区)/列数, (可用高−上下保护区)/行数)。六边应使用自己的精确包围盒，不套矩形列数公式。

375 宽、边距 20、保护区各 12 时，5 列节距约 62.2D。320 宽紧凑模式、边距 12、保护区各 4 时，6 列可达 48D。7 列在同条件下不足 48D，不能只用缩字解决：需要重新评审版型或关卡投放；若改几何则必须重新做规则/唯一性检查。

10.3 触区与视觉边界

UI 按钮统一按至少 48×48D 设计，再核对平台映射。苹果通常建议至少 44×44pt；Android 建议至少 48×48dp，不能把它们当作物理像素。Apple、Android

盘面连续滑动命中需要沿用真实几何与输入策略，不能为了凑 48 把相邻格触区无条件扩成重叠。u≥48 是设计目标，还要检查死区、窄边和异形凹口后的实际命中感。

11. UI 组件规范

11.1 按钮

组件	尺寸	造型	交互
主按钮	高 56D，横向内边距 24D，圆角 16D	主紫面、白字 16/700、2D 深紫下沿	按压下沿 1D、面深紫、最多缩至 .98
次按钮	高 52–56D，圆角 16D	次级暖灰面、深墨字	下压 1D，不变主紫
对局动作	三等宽，高 56D，间距 8D	图标 20–22D＋16D 标签	状态不依赖 hover
图标按钮	48×48D，图形 22–24D	中性底或透明底	有辅助名称与清晰焦点
文字按钮	有效高至少 48D	14–16D 深选中文字	不只依赖文字下划线识别动作

主要页面最多一个视觉上最强的主操作。主按钮不常驻脉冲；正常状态不发光。禁用按钮不接受点击，但旁边必要的原因文字仍满足可读要求。

11.2 关卡块

正常模式 5 列，间距 10–12D。375 宽可用 335D 时，12D 间隔下单块约 57.4D；320 紧凑宽可用 296D 时约 49.6D。若要增列，先保留 48D 目标。

• 可挑战：暖灰积木、深墨数字、结构轮廓。
• 已完成：淡紫底、深选中数字、清楚的小勾；避免整页满紫与当前关竞争。
• 当前关：主紫底白字＋明确“继续”入口；不靠不停呼吸标记。
• 未解锁：中性面、锁标记，提供可读解锁条件；不使用红色。若业务允许展示编号，可保留编号，不改变进度规则。

上面是选关 UI 的状态语义，与盘面“紫色表示已走”处于不同页面语境，不应将它们混成同一张状态图。

11.3 进度、标签与开关

包进度高 4D；总进度高 6D；必要文本 已完成 x / n 使用 14D，不把文本当作装饰性弱灰。关数多时用连续进度，不画几百根难以分辨的短柱。

标签高 28–32D，字 13/600；可点击标签的触区补足 48D且不重叠。开关轨道视觉约 40×24D、有效行高 52D，必须同时显示设置名和开/关状态，不能只给一个彩色点。

11.4 对话框、底部面板与 Toast

弹窗宽 min(视口−40D, 340D)，圆角 24D，内边距 24D；标题 24/32、正文 16/24、按钮间隔 12D。弹窗遮罩起点为深墨 32%，不把背后棋盘模糊到造成性能浪费。

底部面板保留底安全区，长内容内部可滚；不要同时放多个堆叠弹窗。帮助关闭后返回原来的关卡状态，不自动重开。

Toast：深墨面白字 14/20，最大宽度视口减 40D；默认停留约 2 秒，重要说明可更久或使用面板；位于动作栏上方，不盖当前末端或教学区。只有信息性文字，无需要快速点击才能避免损失的按钮。

11.5 图标

统一圆头、圆角连接的线性图标，24D 网格，约 2D 笔画，正常 20–24D；不混用 emoji、彩色插画、细线和实心风格。

重开使用回转箭头，补数字使用数字/加号语义，指路使用路线/方向语义；两个提示按钮必须不同图标和文字。锁、勾、设置、关闭保持直观。图标字体缺字会丢功能，正式使用可控矢量/图集并保留清楚标签。

12. 页面设计：从进入到完成

12.1 玩法首页（共享壳，拟新增页面）

顶部品牌标题和设置入口；中间用两个玩法卡表现数字积木、六边与边墙。卡面是简短盘面切片，不是宣传插画。只用相同主色，通过轮廓区分玩法。

若只有一个已上线玩法，直接进入继续/选关，不为了共享壳多加一页。当前 shared/ 是否具备完整壳能力需实施时确认，样张不代表已实现。

12.2 选关页

标题“数字一笔”，副说明“按步数，一笔走遍每一块”；下方总进度、分包标题和关卡网格。底部主要操作“继续 · {关号}”，设置入口降一级。

内容量大时使用章节折叠/分段加载等列表策略，但不在用户中途折叠当前章节。关卡总数从实际数据读取，不能在静态美术图里把某个早期关数写成固定总量。

12.3 数字对局页

顶栏：左返回，中关号/包名，右剩余格数。盘面是视觉中心；底栏固定保留重开 / 补数字 / 指路三个不同动作，而不是因概念图简化就合并成一个提示。

首次关键教学使用短句：“从 1 开始，滑向旁边的格。”“大格，也只算一步。”“数字要在对应步数走到。”后续减少文字，不持续显示多条规则抢盘面。

若实际版本有分段指路或动画教学，沿用该版本真实语义核对；不能用这份风格报告覆盖其他进行中的交互设计。

12.4 六边对局页

结构和排版一致，盘面使用独立六边模型。墙/转墙教学发生在盘面附近，避免 UI 卡片压住轴心。没有实现补数字的玩法不得放一个实际无效的“补数字”按钮；动作栏按真实功能注册，两按钮时调整间距而非硬塞第三个。

12.5 过关

普通主线继续使用短收束后进入下一关；先给玩家看清完成的路线。若产品仍采用自动下一关，不新增必须点按钮的庆祝页。

包尾或全部完成可以展示轻量结果面板：标题“这一包完成了”，几何小图、完成进度、下一包/返回关卡。没有计时/评分系统时，不新增三星、金币、假时长或“智商提升”。具体完成态取实际内容，不写“全部 26 关”一类固定旧值。

12.6 设置与帮助

分组：声音、触感、减弱动态、对比辅助、语言/其他真实支持项。尚未实现的选项只可标作设计稿，不应在正式产品露出空开关。

帮助使用小盘分步示例：普通共边 → 大格一步 → 数字时机 → 撤销。六边单独教墙和起手旋转。每张说明只讲一件事，示例不应与真实可走规则冲突。

12.7 重开与清进度

重开关卡是低成本常用动作，不默认弹确认框；若存在本局补数字保留规则，文案与状态保持一致。清除全部进度是另一动作，放设置下方，需解释并确认，视觉使用深红文字，不与“重开”相邻混排。

12.8 加载、离线、广告与购买（条件页面）

加载：品牌几何标记＋真实阶段/进度，纯本地短载入不加假进度条。字体未就绪先稳定回退，不显示白屏等字。

离线：常规关照常玩；仅网络依赖功能说明不可用。广告不可用写“暂时无法加载，请稍后再试”，不写成玩家失败，也不重置路线。

若接激励提示，明确“看视频获得一次指路”，不要把广告按钮伪装成普通免费提示；奖励发放以实际成功回调为准。加载期间保持棋盘状态，关闭/失败后可返回。这里是将来商业 UI 条件规范，不是要求本轮接广告。

去广告购买页保持同一风格，用平台真实价格与支付方式；购买、恢复和网络错误用准确文案，不造倒计时。商店功能未实现时不出现在正式截图。

13. 动效系统与特效表现

13.1 基础时长与曲线

令牌	时长	适用
fast	120ms	按压、桥厚度增长、转墙表现
base	200ms	按压回弹、组件/面板入场
slow	320ms	冲突短反馈、过关收束、页面平移
hold	500ms	完成路线的停留

有意保留现有四档系统。提示显示总长 2.4 秒是序列总长，不是第五种基本过渡。现有 280/160ms 等特例若采用本方案再统一；本次不改代码。

入场/增长 cubic-bezier(.22,1,.36,1)；退场 (.4,0,1,1)；柔和往返 (.65,0,.35,1)。逻辑机构旋转只用单调曲线，不使用过冲。触觉“软”主要来自轻按压和短回弹，不来自持续晃动。

13.2 事件表现表

事件	几何/颜色表现	时长	声音/触感意图
点按钮	下沿 2→1D，面向下 1D，缩放不小于 .98	fast	可选很轻点击；不每个 UI 都振
开始画	起点进入真实已走状态	立即，局部 base	轻落块声
增加一步	逻辑立即追加，填色立即到位；局部压入→恢复，最大1.02缩放但不改变命中	base	轻短音；支持时一次轻触感
连接桥出现	全跨缝已有，只增长可见厚度	fast	不单独重复播放一条音效
踩对线索	内环/边缘光短扫，数字保持清楚	fast/base	较轻的确认音色
步号冲突	立即红面，最多±2D一次衰减晃动	slow	低音量闷响；一次短提醒
撤销一步	逻辑与填色/桥立即恢复，取消该格未完特效	立即	可选更轻回退音，不每步强振
多步回退	后缀整体立即恢复，分叉目标轻确认	base	一次反馈，不按撤销格数叠加
指路	目标外圈有限2次柔和变化，之后退到静态/淡出	总2.4s	不持续播声
补数字	新数与原条件同时可读，目标轻圈出	base＋2.4s强调	一次确认
转墙更新	累计角度转120°，可被新逻辑状态打断对齐	fast	不为每个转轴独立叠音
撞墙	杆轮廓加强、局部最多1D反馈；不生成桥	fast/base	单次柔和拒绝音
死路	当前末端短标记/小幅反馈	base/slow	无长警报、无全屏失败
页面入场	轻上移最多8D＋淡入	base	不附加过场音乐
关卡进场	格子小幅到位，延迟12ms/格，总延迟封顶120ms	base＋有限错落	不按面积无限延长
完成	保持主紫面，按路径次序扫外沿光带，顶栏切完成	slow＋hold	一次短完成和弦

数字与实际路径不能等动画播完才出现。快速输入不能被某个按压特效或转轴动画锁住。

13.3 特效禁区

不在数字上叠白色全亮闪片；不让光带遮住原条件；不让阴影越过墙像一条连接；不在游戏思考时生成漂浮星星；不使用整屏 RGB 震动、镜头摇晃、彩虹路径或每步飞出的金币。

可以让按钮和积木下沿产生轻微接触反馈，但不能把规则对象当橡皮泥拉扯。环境光、背景和材质在静止时应当静止。

13.4 过关时间线

以最后一步确认时刻为 0：

时间	内容
0	逻辑通关，顶栏“完成”，停止冲突/提示残留
0–320ms	路径沿线/边缘收束，数字不被提亮覆盖
320–820ms	完整解停留500ms
820–940ms	旧盘面退出120ms
940ms起	新盘面进入，顶栏就地更新；单格200ms，错落延迟总封顶120ms

正常自动切关时，退出期间不再接受旧盘面命令；新关输入与显示必须在同一关号下重新绑定。若用户主动返回选关，取消等待序列，不让后台自动跳关。

13.5 减弱动态与高频事件

减弱动态：保留颜色、文本、位置和静态提示；取消缩放/晃动/扫光/错落；转墙直接切正确位置；不隐藏错误和提示。完成后仍留一段稳定可看的路线，不用突然闪白替代。

快速走格只保留最近的局部按压，音效限并发，不把十几个特效排队。撤销、重开、换关必须取消已有对象的表现，不能出现幽灵闪光和旧关转轴。

14. 声音与触感

质感方向是短、轻、清楚的哑光敲击；避免尖锐键盘音、玻璃碎裂和果冻咕噜。声音可帮助理解操作，但静音不损失信息。

类型	建议长度	音色/变化	限制
落格	40–80ms	柔和木槌/钝塑料短音，音高有限递进	不随无限步数一直升高，不模仿游戏警报
线索正确	60–120ms	比落格更明确的短确认	与普通落格合并，不叠响
冲突/撞墙	80–140ms	低沉软拒绝	相对落格不必更响，不做惩罚吓声
撤销	30–60ms或静音	更轻的回收感	连续回退限频
完成	300–600ms	柔和2–4音上行/收束	不阻塞切关，不含语音夸张喊叫

首版默认不做常驻背景音乐；需要时后续独立开关，不让循环乐承担留存假设。音效文件留余量避免削波，最终音量用真机听测，不以某个混音软件响度数值代替听感。

触感用“轻落格/确认/错误”意图映射平台能力；Android 毫秒参数、iOS 触感类型、小游戏能力不同，不能承诺同样数值产生同样感觉。不支持时安静降级；“关闭触感”必须覆盖全部事件。

15. 文案、教学与国际化

文字语气：简洁、准确、温和。优先描述规则与可恢复操作，不评价玩家能力。

场景	推荐	避免
大格	“大格，也只算一步”	“四个格子连成一个”，容易误认仍分四步
中段数	“走到这里时，应是第8步”	“按顺序连接8”，容易误认 Zip 检查点语义
回退	“沿原路退回，换个方向试试”	“挑战失败，请复活”
转墙	“每走一步，转墙就转一次”	“等墙转开”，实际不是时间机关
死路	“这里走不通，退回试试”	“你走错了！”反复弹窗
完成	“这一关完成了”	“智商增加10点”

英文样例可用 One block. One step.、Reach this block on step 8.、Trace back to try another route.；最终按母语文案校对，不把中文逐字硬译。

奇/偶是语言相关信息：英文建议 Odd / Even，与数字字体分开检查；已走后的长标签会比单汉字占空间，应通过相应样板重排，不缩到不可读。未来需其他文字系统时检查字库覆盖和镜像规则，不将数字路径/转墙方向随 RTL 自动反转。

16. 无障碍与特殊显示

• 不只靠红色/黄色：错误保留条件角标/明确提示；墙有轮廓与条纹；完成有勾与文字；当前末端有位置标记。
• 必要边界默认已有足够对比，不把基本可读性只放进“高对比模式”。辅助模式再加粗轮廓、提供稳定图形提示。
• 不将 Canvas 上的可见数字等同于屏幕阅读器已可读；如需语音访问，应另建格子/操作语义层并专门设计交互。
• 重复 UI 提示适度通知，不在快速每步都用读屏打断；剩余格数可合并播报。
• 焦点圈约3D，外偏2D；仅键盘焦点出现，不能把所有格都画成焦点。
• 低对比屏、灰度、红绿色觉模拟、强环境光、减弱动态、静音分别检查。模拟结果不能代替真实用户测试。
• 常规文字放大到150%与200%测试菜单重排；盘面需要单独检查，不以牺牲关键数字读取来维持原布局。

17. 图标、品牌与商店素材

17.1 应用图标

主图标以少量数字＋连贯路径＋一块较大的拼块构成；取其中两个主识别点，第三个不要塞得太满。保留主紫和浅背景，厚度方向与游戏一致，不加角色和长中文副标题。

制作1024×1024的可编辑母稿及矢量形状来源，用48/64/128等缩略预览检查辨识。母稿尺寸是制作建议，平台正式文件规格以上传时官方要求为准。iOS和Android的图标处理流程不同，导出不要把装饰性圆角、阴影和系统遮罩重复叠加。

17.2 商店截图

前3张依次表达：一笔走遍 → 大块只算一步 → 数字决定路线。后续表现真实已有六边/转墙、容错和内容等。大标题与真实盘面分层；放大盘面局部时保留规则上下文，不做不可能解或未实现特效。

游戏内 UI 用16D正文；商店宣传标题的大小按最终导出图片与缩略展示单独设计，不能拿游戏字号表直接乘DPR当广告标题。不同语言使用同一版式骨架，检查长标题占比。

17.3 视频/小游戏入口素材

优先展示真实手势、数字到达、一个大格只填一个步号，再给完整路线收束。柔和材质要在普通视频压缩后仍有轮廓；极淡阴影不是视频中的唯一信息。手指演示标记只用于教学/宣传，不能遮当前数字。

素材与实际皮肤保持一致。投放美术和游戏皮肤分别测试，不能只看点击判定风格成功。商业论证见 前一份报告，本报告不新增收益承诺。

18. 性能、渲染与资源交付

18.1 渲染策略

现有 Painter 支持圆角矩形/多边形/圆/文本等基础原语，基础材质可通过分层绘制实现。无需先增加全屏模糊、PBR材质或实时阴影。

当前文本原语主要接收字号、颜色和 bold 布尔值，并没有完整的字体角色/字重接口。落地 Nunito 数字800与中文500/600/700时，应明确增加文字角色映射或扩展渲染层参数；不能仅改CSS后宣称Canvas/Cocos也已统一字体。

若要渐变/复合轮廓/精确剪裁而当前接口不支持，应由渲染实现明确扩展；不能在文档里假定原接口自动支持。数字与六边规则代码仍各自独立，壳只共用视觉规范和无规则含义的组件。

静止盘面不为装饰持续重绘；有真实动画时才更新。Canvas按DPR设置绘图分辨率，必要时根据设备设置合理上限并复核锐度；DPR倍率不改变逻辑命中坐标。

18.2 性能目标与降级

参考目标：主流设备交互动画60fps；低端机若需30fps降级仍保持逻辑状态正确。16.7/33.3ms是整帧预算，不是单个阴影可占用的时长。该目标尚未通过本轮实测。

降级顺序：去模糊阴影 → 去可选渐变/边缘光 → 取消非必要错落 → 减少并发反馈；最后仍保留数字、格边、路径、错误、墙与转轴。不能通过漏画墙或延迟逻辑来保帧。

18.3 资源清单与命名

类别	交付	检查
规范	本报告、令牌JSON、视觉样张	版本号、颜色、尺寸一致
页面	玩法入口/选关、数字对局、六边对局、设置、帮助、包尾完成、确认面板	正常/长文本/窄屏/禁用态
盘面	单格、大格、L/T/S、六边、墙、转轴、桥、条件角标	全状态与接缝
图标	可编辑矢量母稿＋目标平台导出	线宽、圆角、语义一致
字体	指定来源/版本/字重/许可文件	字形、测宽、缺字、包体
音效	落格、确认、拒绝、完成的无损母稿＋平台编码版本	削波、延迟、静音/触感开关
商店	图标、截图、短视频分层源文件	与真实游戏一致、本地化

命名示例：sb-v1/button-primary-pressed、sb-v1/tile-idle、sb-v1/wall-spinner。这些是资源命名规则，不是在当前项目中虚构已存在的资源路径。避免 最终版2-真最终 这类无法回溯的名称。

19. 美术制作与开发接入顺序

1. 锁定基准：暖白/主紫/数字字体意图、单位体系、状态语义。
2. 先做单格、大格、异形、六边和墙的状态样板，检查读盘。
3. 做数字对局与六边对局两张可操作样板，含快速输入、回退、提示、转墙。
4. 完成选关、设置、帮助和包尾收束，保证完整流程。
5. 对比现有扁平版，验证清楚程度、误触与偏好，而非只问“好不好看”。
6. 确定正式候选后，同步 design.md、样张、CSS/theme、绘制层、平台宿主与相应检查。
7. 通过实机矩阵后制作正式商店素材；商店图标/截图与产品皮肤分别验证。

当前只交付规范和样张，未执行第3–7步的游戏接入与用户验证。

20. 验收矩阵

20.1 设计检查

项	合格条件
风格	正俯视、同一哑光材质、统一光向与浅厚度
颜色	关键文字和边界使用已定义颜色配对；无任意透明降对比
字体	数字与中文的实际字形、字重和回退经过确认
大格	2×2、3×3均被读为一块；无内部缝、无面积放大字号
异形	凹口、共边、文字锚点清楚，无阴影假邻接
六边	共边杆/轴心准确、密集位置可读
当前状态	能区分已走、末端、冲突和提示，无需只看颜色
UI	三种数字动作分明，真实功能与文案一致
动效	不延迟逻辑、不遮数字、不依赖速度完成机关
反馈	错误可恢复；撤销/重开清除旧特效

20.2 实机与内容覆盖

至少覆盖320/360/375/390/430逻辑宽度、短屏/长屏、实际刘海与小游戏胶囊；iOS/Android及目标小游戏宿主分别测。不是要求五种宽度刚好对应某五款机型。

关卡样本：最小教学盘、2×2枢纽、3×3大块、L/T/S凹口、两位数字密集盘、奇偶保留标签、静态墙、单转墙、多转墙、无起点1、已偏离后的指路、补数字落在奇偶格。采用当前真实内容，并记录具体关id，不能仅写“随便测一关”。

交互样本：慢滑、快速跨格、松手续画、点按追加、沿路回退、该玩法支持的多步回退、重开、切后台/恢复、提示取消、关卡切换中返回。数字与六边回退能力若不同，分别说明，不强行在美术层统一。

20.3 尚待完成的验证

验证	本轮状态
令牌静态配对对比度	已通过19组目标配对，3组诊断另列
样张布局与局部交互	在本轮配套HTML中演示并检查；不等于游戏验收
字体正式文件打包与全平台字形	未执行；样张使用系统可用回退
真实游戏最小触点与所有布局	未执行
连续转墙/输入/回退真实运行	未执行
完整工程check与微信/原生构建	本轮不修改运行时代码，未执行
真人读盘/误触/留存与商业A/B	未执行

21. 证据 → 结论 → 执行路径

证据	结论	执行路径
用户选择柔和积木，已有几何路径与单主色	不需要重做题材，优先增量材质升级	在原语上补下沿/边界和按压样板
现有Board/Painter、GDD定义大格一步与边墙	美术不能改变格数感和邻接	整体轮廓、共边中线、转轴精确对位
静态对比脚本：面/背景约1.18	灰块不能只靠阴影识别	所有必要结构加有效边界
旧错误红与亮紫白字配对低于本方案4.5目标	状态变亮不能牺牲数字可读性	新错误红；完成保留主紫面、只扫边缘
平台触区建议与最小屏幕预算	逻辑单位、物理像素和可见图形需区分	按平台映射、紧凑模式、实机命中测试
Nunito/Noto官方字体来源	可建立可控跨平台字形方案	正式选版、保留许可、测缺字与测宽

复核静态颜色的命令（项目根目录，Node.js可用）：

node docs/design/soft-blocks/check-contrast.mjs

脚本读取同目录令牌、输出JSON和控制台结果；有目标配对不合格时返回非零退出码。它只证明所列不透明颜色配对，不代替整屏/字体/动态状态验收。

22. 与现有规范的差异与采用方式

项	现有规范/实现	本提案
主背景	纯白	暖白 #F7F5F1
盘面材质	无阴影平面	哑光面＋2D下沿＋结构边界；模糊可省
主路径	蓝紫 #6558F5	保留
六边路径	独立靛蓝	建议统一品牌主紫，墙与状态重新验收
错误底	#E5484D	#C74350，普通白字配对更清楚
过关底	切更亮紫	面保持主紫，只扫不遮字的边缘光
辅助文字	含对比很弱的旧三级灰	改为可读的三级墨与明确用途
字体	主要依赖系统栈	推荐受控数字/中文字体＋稳健回退
UI正文	15D左右	基准16D，行高24D
盘面小标签	主要按u比例	增加实际最小字号与放不下的处理
按钮触区	旧44基准	新48D设计目标＋平台核对
连续动效	含较强弹簧与若干特例	更小幅按压；四档时长；机构无过冲
长期呼吸	当前关/部分提示可循环	常驻内容默认静止，提示有限强调

采用时先确认“视觉版本1.0”作为实施目标，再一次性同步旧权威规范、各玩法theme/CSS与样张，并跑相关检查。不直接将本报告的JSON复制为某个现有Theme对象：字段、渲染能力、单位和命名并不完全相同，需要映射。

本版的核心验收句是：不看材质也能清楚解题；看见材质会愿意触摸；快速操作时规则、数字和手指始终一致。