舒尔特表格这东西我最早是在一堆纸质训练卡里见到的5×5 的方格1 到 25 打乱填进去用手指或眼睛按顺序找。看着简陋到有点寒酸但它是我见过的、成本最低又最容易被量化的注意力训练工具之一。后来有人找我做一个能自己出题、自己计时、还能存成绩的版本我干脆把它写成了一个纯前端的 HTML 生成器——一个文件、双击就能用、断网也能跑。这篇就把它彻底拆开舒尔特表格到底在训练什么参数该怎么定这个 HTML 生成器从骨架到洗牌校验怎么写训练节奏怎么排以及我自己踩过的那些坑。不管你是想给孩子找一个不伤眼的练习工具还是自己想写一个拿来练手的小项目下面的内容都能直接抄。1. 舒尔特表格到底在训练什么1.1 一张方格里的四个认知环节很多人以为舒尔特表格练的是眼快手快这个理解偏了。一张 5×5 的表从点下1到点完25中间至少同时跑着四件事任何一环掉链子成绩都会明显变慢。第一件事是视觉搜索。你需要在 25 个形状相似、尺寸相同的符号里定位一个特定的目标。人眼的清晰视野其实很窄真正能看清细节的区域只有中心几度剩下的全靠周边视野的模糊感知来提示这里有东西。舒尔特表格的效率高低很大程度上取决于你能不能在保持中心注视的同时用余光扫出一个大范围的候选区域。第二件事是序列维持。你脑子里始终挂着一个下一个是几的计数器点完 7 之后要立刻切换成 8。这个切换看起来简单但它占用了工作记忆的资源一旦被干扰打断就会出现我刚才点到哪了的卡顿。第三件事是干扰抑制。目标数字旁边通常挨着几个同样醒目的数字它们不停地争夺你的注意力。你能不能压住看一眼旁边那个的冲动直接决定了扫视路径的干净程度。第四件事是动作执行。眼睛找到了手要跟得上落点还要准。触屏设备上这一环尤其明显手指比鼠标粗得多误触会直接拉高错误率。这四件事叠在一起才构成了舒尔特表格的训练价值。所以你在设计工具的时候不能只考虑把数字排出来还得考虑怎么让这四个环节都被调动起来——这就是后面所有参数设计的出发点。1.2 三个被过度包装的说法网上关于舒尔特表格的说法有些吹得比较过。我在做这个工具的过程中反复被问到几个问题这里统一说清楚免得大家抱错期待。说法一成绩好就代表注意力好。不成立。舒尔特表格测的是特定任务下的表现它是一个熟练度 状态的混合指标。练两周成绩提升很可能是你熟悉了这个任务的搜索策略而不一定是注意力本身变强了。真正要看的是这种改善能不能迁移到别的场景这一点需要长期观察不是一张表能下结论的。说法二越快越好。这是最容易把人带沟里的说法。单纯追求速度人会不自觉地用手指跟着眼睛走嘴里默念这类代偿策略把训练变成了纯粹的熟练度练习。更值得关注的是错误率和稳定性同样 30 秒完成一个错 0 次一个错 5 次后者的实际水平明显更差。说法三这是小孩专用。成人一样能练只是目标不同。孩子更多是练基础的搜索和序列维持成人往往是想在长时间高强度工作里保持住视觉扫视的耐力。我自己的体验是连续写代码两小时后做一组 6×6能明显感觉到眼睛重新对焦的过程。注意舒尔特表格是训练工具不是评估工具更不是诊断工具。如果确实存在持续的注意力困扰该找专业人士就找别指望靠一个网页解决问题。2. 表格参数怎么定尺寸、排布与干扰2.1 尺寸阶梯与难度的非线性增长尺寸是第一个要定的参数也是最容易被随意对待的参数。很多人一上来就 5×5做不动就换 7×7 硬扛结果练了两周全是挫败感。我建议按这个阶梯走每个尺寸至少做满 5 组再考虑升级尺寸格子数适合人群单组参考用时训练重点3×39初次接触、低龄段8-15 秒建立规则感熟悉流程4×416过渡阶段15-25 秒开始出现明显扫视路径5×525标准基准25-45 秒最通用的训练尺寸6×636进阶45-80 秒周边视野分配压力明显7×749高阶80-140 秒耐力与抗干扰强调一下表里的用时只是我观察到的常见区间个体差异非常大别拿这个去和别人比只和你自己的历史数据比。难度增长不是线性的。从 5×5 到 6×6格子数只增加了 44%但搜索空间从 25 个候选涨到 36 个候选同时干扰项密度也在上升实际体感的时间增幅通常在 60% 到 90% 之间。到了 7×7 往上收益开始递减——超过 8×8 之后屏幕上的格子会小到必须凑近看反而破坏了保持中心注视、用余光搜索这个核心要求练的东西就变味了。所以我给生成器的尺寸选项就卡在 3 到 7 之间没有再往上加。这不是偷懒是刻意收敛。2.2 视觉参数字号、间距与对比度这一块是纯经验但每一条都是我在实际测试里改出来的。字号。字号太小眼睛必须逐个聚焦训练退化成认字字号太大格子里的空白太多扫视路径被拉长也不对。我最后定的比例是字号约为格宽的 0.42 倍。计算方式很直接——假设面板宽度 480px5 列、间距 6px那么单格宽度是 (480 - 6×4) / 5 91.2px字号就是 91.2 × 0.42 ≈ 38px。这个比例在 3×3 到 7×7 上都能保持视觉密度接近换尺寸时不会出现突然变稀的割裂感。间距。6 到 10px 比较合适。间距太小格子之间没有视觉边界容易点错间距太大整个面板会被撑得很散扫视成本上升。我用 6px 是因为触屏上手指宽度大概 8-10mm间距再小一点不影响点击但能让整体更紧凑。对比度。别用纯黑字配纯白底长时间看会有眩光感。我用的是深灰 #1f2937 配近白 #ffffff完成的格子降到浅蓝灰 #dfe7f3 配 #9aa6b6 的字色——这个处理很关键已完成的数字必须退到背景里否则它们会持续干扰你对剩余目标的搜索。字体。必须用等宽数字font-variant-numeric: tabular-nums。原因很实在比例字体的1特别窄、8特别宽格子里的数字视觉重量不一致某些数字会因为看起来小而被优先忽略形成隐性的搜索偏差。中心注视点。这是最容易被忽略的一个细节。原始版的舒尔特表格要求视线固定在表格中心用余光找数字。但绝大多数人拿到表就开始眼睛乱飞训练效果大打折扣。所以我在面板正中放了一个 8px 的小红点就是为了给视线一个锚。2.3 变体设计什么时候该换玩法同一个 5×5 做久了人会形成固定的搜索习惯这时候成绩还在涨但训练价值已经在下降。这时候就该上变体了。字母版把 1-25 换成 A-Y规则不变。它比数字版难一点因为字母的序列是背诵出来的不像数字那样有天然的数值直觉工作记忆的负担更重。数字字母交替版1-A-2-B-3-C……这个变体的妙处在于它强制你在两套序列之间来回切换对序列维持那一环的压力成倍增加。我第一次做这个版本用时直接翻了一倍。双色版红色数字 1-13 升序黑色数字 1-13 降序交替点击。这是难度最高的变体本质上是在做任务切换训练。它不适合新手做之前至少 5×5 稳定在 40 秒以内。动态重排版每点对一个数字剩下的数字重新洗牌。这个版本彻底堵死了记住位置这条捷径是纯粹靠搜索能力的硬碰硬。但它的体验比较挫败建议偶尔用一次就够了。视觉干扰版给一部分数字加上随机的大小变化或者轻微旋转。这个变体我做得比较克制因为加多了整个表就变得很丑反而不想做了。3. 手写一个 HTML 生成器从骨架到计时3.1 为什么选单文件纯前端做这个工具的时候我考虑过几种方案最后落在一个单 HTML 文件上理由有四条。零依赖。不需要装环境、不需要起服务器、不需要联网。发给别人就是一个文件双击打开就能用。给家里长辈或者老师转发的时候这一步省下来的沟通成本非常高。离线可用。这一点在给孩子用的场景里特别重要。设备可能是个旧平板网络不稳定或者你压根不想让孩子碰网络。纯前端页面天然满足这个要求。便于二次修改。老师想把 5×5 改成 6×6 默认、想把配色改成护眼色打开文件改两行就行。如果是个需要构建的项目这一步就能劝退 90% 的人。便于存档。一个文件就是一个版本。你改完想回退把旧文件留着就行不用操心依赖版本漂移那些事。代价当然也有没有后端成绩只能存在本地不同设备之间不同步数据清理了就没了。但这些都是可接受的因为训练本身是个低频、单人、长期的事同步的价值没那么高。3.2 页面骨架与样式整个页面的结构非常简单顶部一行状态栏用时 进度中间一个方形面板下面一排控件最底下是提示文字。核心布局靠 CSS Grid 完成。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width,initial-scale1,maximum-scale1,user-scalableno title舒尔特表格训练器/title style * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; background: #eef1f5; font-family: system-ui, sans-serif; color: #1f2937; -webkit-tap-highlight-color: transparent; user-select: none; } .app { display: flex; flex-direction: column; align-items: center; padding: 16px 12px 32px; gap: 14px; } .bar { width: min(92vw, 520px); display: flex; justify-content: space-between; align-items: baseline; font-variant-numeric: tabular-nums; } .bar .time { font-size: 26px; font-weight: 700; } .bar .meta { font-size: 14px; color: #6b7280; } .board-wrap { position: relative; width: min(92vw, 520px); } .board { display: grid; gap: 6px; width: 100%; aspect-ratio: 1 / 1; } .cell { display: flex; align-items: center; justify-content: center; background: #ffffff; border-radius: 8px; font-variant-numeric: tabular-nums; font-weight: 600; color: #1f2937; cursor: pointer; touch-action: manipulation; transition: background 0.08s linear, color 0.08s linear; } .cell.done { background: #dfe7f3; color: #9aa6b6; } .cell.wrong { background: #f7c9c2; color: #8c2f22; } .dot { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #e05d3f; opacity: 0.85; pointer-events: none; } .controls { width: min(92vw, 520px); display: flex; flex-wrap: wrap; gap: 8px; } button, select { font: inherit; font-size: 14px; padding: 8px 14px; border-radius: 8px; border: 1px solid #cfd6e0; background: #fff; color: #1f2937; cursor: pointer; } button.primary { background: #2f6bd8; border-color: #2f6bd8; color: #fff; } .hint { width: min(92vw, 520px); font-size: 13px; color: #6b7280; line-height: 1.7; } /style /head body div classapp div classbar div classtime idtime00.00/div div classmeta idmeta目标 1 / 25/div /div div classboard-wrap div classboard idboard/div div classdot/div /div div classcontrols select idsize option value33 × 3/option option value44 × 4/option option value5 selected5 × 5/option option value66 × 6/option option value77 × 7/option /select button classprimary idstart开始新的一组/button button idclear清空记录/button /div div classhint idhint视线盯住中间的红点用余光找数字按顺序点击。/div /div script // 逻辑部分见下一节 /script /body /html几个样式上的取舍值得说一下。aspect-ratio: 1 / 1保证了面板永远是正方形配合grid-template-columns: repeat(n, 1fr)每一格自动就是正方形不需要手动算行高——这是整个布局能这么短的关键。user-select: none和-webkit-tap-highlight-color: transparent是移动端的必备处理不加的话长按会弹出文字选择点击会有灰色高亮闪一下体验很糟糕。touch-action: manipulation则关闭了双击缩放避免连点两下页面被放大。maximum-scale1,user-scalableno这一对参数有争议无障碍上确实不友好但在这个场景下它是必要的训练本质上是高频快速点击允许缩放就意味着误触会把页面搞乱训练直接中断。3.3 核心生成逻辑与洗牌校验这是整个工具里最容易被写错的部分。很多人写随机排列就是一行arr.sort(() Math.random() - 0.5)看着能用实际上有严重的分布问题。sort的比较函数要求是稳定的、自洽的而Math.random()每次返回不同的值导致排序结果严重偏向某些排列。表现出来就是生成的表格里数字经常出现扎堆或者某些数字总在角落。我早期版本就是这么写的连续几组都感觉这个表怎么这么顺后来才反应过来是分布出了问题。正确的做法是Fisher-Yates 洗牌从后往前遍历每次和前面随机一个位置交换function shuffle(a) { for (let i a.length - 1; i 0; i--) { const j Math.floor(Math.random() * (i 1)); [a[i], a[j]] [a[j], a[i]]; } return a; }这个算法保证每种排列出现的概率完全相等时间复杂度 O(n)对于 49 个元素的数组来说开销可以忽略。洗牌之后还有一道校验相邻数字不能落在相邻格子里。如果 7 和 8 正好上下挨着人扫到 7 的时候余光已经看到了 8这一步就白给了训练价值打折。这个校验很简单遍历一遍检查上下左右四个方向有没有差值为 1 的邻居function hasNeighborSequence(grid, k) { for (let r 0; r k; r) { for (let c 0; c k; c) { const v grid[r * k c]; if (c 1 k Math.abs(v - grid[r * k c 1]) 1) return true; if (r 1 k Math.abs(v - grid[(r 1) * k c]) 1) return true; } } return false; } function buildGrid(k) { const base []; for (let i 1; i k * k; i) base.push(i); let grid shuffle(base.slice()); let guard 0; // 最多重试 200 次避免极小尺寸下死循环 while (hasNeighborSequence(grid, k) guard 200) { grid shuffle(base.slice()); guard; } return grid; }这里的guard计数器是必须的。3×3 只有 9 个格子想完全避开相邻连续数字其实相当困难某些初始排列可能怎么洗都过不了校验。设一个上限超了就接受当前结果比卡死强得多。实测下来5×5 平均重试 1 到 3 次就能通过7×7 基本一次过性能上完全没问题。3.4 交互、计时与成绩存储渲染方式我用的是事件委托而不是给每个格子单独绑事件。原因有两个一是 49 个格子绑 49 个监听器虽然有事件池优化不至于卡但没必要二是不需要在重新生成表格时清理旧监听器减少了一类内存泄漏的可能。(function () { const boardEl document.getElementById(board); const timeEl document.getElementById(time); const metaEl document.getElementById(meta); const hintEl document.getElementById(hint); const sizeEl document.getElementById(size); const startBtn document.getElementById(start); const clearBtn document.getElementById(clear); const STORE_KEY schulte-history-v1; let n 5, total 25, target 1; let started false, finished false; let t0 0, rafId 0, errors 0; // —— 洗牌与校验同上此处省略—— function shuffle(a) { /* ... */ } function hasNeighborSequence(g, k) { /* ... */ } function buildGrid(k) { /* ... */ } function render() { boardEl.style.gridTemplateColumns repeat(${n}, 1fr); const frag document.createDocumentFragment(); const grid buildGrid(n); grid.forEach(v { const d document.createElement(div); d.className cell; d.dataset.v v; d.textContent v; frag.appendChild(d); }); boardEl.innerHTML ; boardEl.appendChild(frag); fitFont(); } function fitFont() { const gap 6; const w boardEl.clientWidth; if (!w) return; const cellW (w - gap * (n - 1)) / n; const fs Math.max(13, Math.round(cellW * 0.42)); boardEl.querySelectorAll(.cell) .forEach(el { el.style.fontSize fs px; }); } function updateMeta() { metaEl.textContent 目标 ${Math.min(target, total)} / ${total} 错误 ${errors}; } function tick() { if (!started || finished) return; timeEl.textContent ((performance.now() - t0) / 1000).toFixed(2); rafId requestAnimationFrame(tick); } function startTimer() { started true; t0 performance.now(); rafId requestAnimationFrame(tick); } function finish() { finished true; cancelAnimationFrame(rafId); const sec (performance.now() - t0) / 1000; timeEl.textContent sec.toFixed(2); saveRecord({ n, sec: sec.toFixed(2), errors, at: Date.now() }); renderHistory(); } boardEl.addEventListener(pointerdown, e { const cell e.target.closest(.cell); if (!cell || finished || cell.classList.contains(done)) return; if (!started) startTimer(); const v Number(cell.dataset.v); if (v target) { cell.classList.add(done); target; updateMeta(); if (target total) finish(); } else { errors; cell.classList.add(wrong); setTimeout(() cell.classList.remove(wrong), 160); updateMeta(); } }); function loadHistory() { try { return JSON.parse(localStorage.getItem(STORE_KEY) || []); } catch (err) { return []; } } function saveRecord(rec) { try { const list loadHistory(); list.push(rec); localStorage.setItem(STORE_KEY, JSON.stringify(list.slice(-200))); } catch (err) { /* 隐私模式下静默失败 */ } } function renderHistory() { const same loadHistory().filter(r r.n n); if (!same.length) { hintEl.textContent 视线盯住中间的红点用余光找数字按顺序点击。; return; } const best Math.min(...same.map(r r.sec)); const last3 same.slice(-3); const avg last3.reduce((s, r) s r.sec, 0) / last3.length; hintEl.textContent ${n}×${n} 已完成 ${same.length} 组 | 最好 ${best.toFixed(2)} 秒 | 近三组均值 ${avg.toFixed(2)} 秒; } function newRound() { cancelAnimationFrame(rafId); started false; finished false; errors 0; target 1; total n * n; timeEl.textContent 00.00; render(); updateMeta(); renderHistory(); } startBtn.addEventListener(click, () { n Number(sizeEl.value); newRound(); }); clearBtn.addEventListener(click, () { try { localStorage.removeItem(STORE_KEY); } catch (err) {} renderHistory(); }); window.addEventListener(resize, fitFont); n Number(sizeEl.value); newRound(); })();几个关键决策解释一下。为什么计时从第一次点击开始而不是从渲染完成开始。如果从渲染开始计时那我盯着表想了两秒才动手这段时间也会被算进去成绩就变成了反应时而不是搜索能力。从第一次有效点击起算把准备阶段排除在外数据更能反映实际表现。代价是如果你点了第一个数字之后中途走神惩罚会全额落在成绩上——但这本来就是应该的。为什么用pointerdown而不是click。click在触屏上要等手指抬起某些场景下还会有延迟高频点击时体感很闷。pointerdown在按下的瞬间就响应跟手得多。代价是按住不放不会重复触发其实这正好是我们想要的但如果用户按下后滑动理论上会在原地触发一次。实际使用中面板不大滑动误触的概率很低这个取舍是值得的。为什么已完成的格子要拦截。cell.classList.contains(done)这个判断很重要。不加的话你点完 7 之后手抖又点了一下 7会立刻被记一次错误非常冤枉。拦截掉之后重复点击变成无效操作体验顺畅很多。为什么用requestAnimationFrame而不是setInterval。setInterval在页面切到后台时会被节流甚至暂停而requestAnimationFrame跟屏幕刷新同步计时显示更平滑。虽然真正的计时基准是performance.now()的差值跟刷新率无关但显示的流畅度对训练中的心理节奏是有影响的。3.5 变体扩展示例上面这套骨架改几个地方就能变成变体。核心思路是把生成数字数组这一步替换掉其余逻辑不用动。字母版最简单把for (let i 1; i k*k; i) base.push(i)换成String.fromCharCode(64 i)然后在比较时统一转成字符串即可。注意dataset存的是字符串比较时要保证类型一致。数字字母交替版需要一个映射表位置 0 是 1位置 1 是 A位置 2 是 2……生成时按索引取对应值同时把序列数组单独存一份点击时用sequence[target - 1]做比较。双色版稍微复杂一点需要在格子上加一个>
舒尔特表格这东西我最早是在一堆纸质训练卡里见到的5×5 的方格1 到 25 打乱填进去用手指或眼睛按顺序找。看着简陋到有点寒酸但它是我见过的、成本最低又最容易被量化的注意力训练工具之一。后来有人找我做一个能自己出题、自己计时、还能存成绩的版本我干脆把它写成了一个纯前端的 HTML 生成器——一个文件、双击就能用、断网也能跑。这篇就把它彻底拆开舒尔特表格到底在训练什么参数该怎么定这个 HTML 生成器从骨架到洗牌校验怎么写训练节奏怎么排以及我自己踩过的那些坑。不管你是想给孩子找一个不伤眼的练习工具还是自己想写一个拿来练手的小项目下面的内容都能直接抄。1. 舒尔特表格到底在训练什么1.1 一张方格里的四个认知环节很多人以为舒尔特表格练的是眼快手快这个理解偏了。一张 5×5 的表从点下1到点完25中间至少同时跑着四件事任何一环掉链子成绩都会明显变慢。第一件事是视觉搜索。你需要在 25 个形状相似、尺寸相同的符号里定位一个特定的目标。人眼的清晰视野其实很窄真正能看清细节的区域只有中心几度剩下的全靠周边视野的模糊感知来提示这里有东西。舒尔特表格的效率高低很大程度上取决于你能不能在保持中心注视的同时用余光扫出一个大范围的候选区域。第二件事是序列维持。你脑子里始终挂着一个下一个是几的计数器点完 7 之后要立刻切换成 8。这个切换看起来简单但它占用了工作记忆的资源一旦被干扰打断就会出现我刚才点到哪了的卡顿。第三件事是干扰抑制。目标数字旁边通常挨着几个同样醒目的数字它们不停地争夺你的注意力。你能不能压住看一眼旁边那个的冲动直接决定了扫视路径的干净程度。第四件事是动作执行。眼睛找到了手要跟得上落点还要准。触屏设备上这一环尤其明显手指比鼠标粗得多误触会直接拉高错误率。这四件事叠在一起才构成了舒尔特表格的训练价值。所以你在设计工具的时候不能只考虑把数字排出来还得考虑怎么让这四个环节都被调动起来——这就是后面所有参数设计的出发点。1.2 三个被过度包装的说法网上关于舒尔特表格的说法有些吹得比较过。我在做这个工具的过程中反复被问到几个问题这里统一说清楚免得大家抱错期待。说法一成绩好就代表注意力好。不成立。舒尔特表格测的是特定任务下的表现它是一个熟练度 状态的混合指标。练两周成绩提升很可能是你熟悉了这个任务的搜索策略而不一定是注意力本身变强了。真正要看的是这种改善能不能迁移到别的场景这一点需要长期观察不是一张表能下结论的。说法二越快越好。这是最容易把人带沟里的说法。单纯追求速度人会不自觉地用手指跟着眼睛走嘴里默念这类代偿策略把训练变成了纯粹的熟练度练习。更值得关注的是错误率和稳定性同样 30 秒完成一个错 0 次一个错 5 次后者的实际水平明显更差。说法三这是小孩专用。成人一样能练只是目标不同。孩子更多是练基础的搜索和序列维持成人往往是想在长时间高强度工作里保持住视觉扫视的耐力。我自己的体验是连续写代码两小时后做一组 6×6能明显感觉到眼睛重新对焦的过程。注意舒尔特表格是训练工具不是评估工具更不是诊断工具。如果确实存在持续的注意力困扰该找专业人士就找别指望靠一个网页解决问题。2. 表格参数怎么定尺寸、排布与干扰2.1 尺寸阶梯与难度的非线性增长尺寸是第一个要定的参数也是最容易被随意对待的参数。很多人一上来就 5×5做不动就换 7×7 硬扛结果练了两周全是挫败感。我建议按这个阶梯走每个尺寸至少做满 5 组再考虑升级尺寸格子数适合人群单组参考用时训练重点3×39初次接触、低龄段8-15 秒建立规则感熟悉流程4×416过渡阶段15-25 秒开始出现明显扫视路径5×525标准基准25-45 秒最通用的训练尺寸6×636进阶45-80 秒周边视野分配压力明显7×749高阶80-140 秒耐力与抗干扰强调一下表里的用时只是我观察到的常见区间个体差异非常大别拿这个去和别人比只和你自己的历史数据比。难度增长不是线性的。从 5×5 到 6×6格子数只增加了 44%但搜索空间从 25 个候选涨到 36 个候选同时干扰项密度也在上升实际体感的时间增幅通常在 60% 到 90% 之间。到了 7×7 往上收益开始递减——超过 8×8 之后屏幕上的格子会小到必须凑近看反而破坏了保持中心注视、用余光搜索这个核心要求练的东西就变味了。所以我给生成器的尺寸选项就卡在 3 到 7 之间没有再往上加。这不是偷懒是刻意收敛。2.2 视觉参数字号、间距与对比度这一块是纯经验但每一条都是我在实际测试里改出来的。字号。字号太小眼睛必须逐个聚焦训练退化成认字字号太大格子里的空白太多扫视路径被拉长也不对。我最后定的比例是字号约为格宽的 0.42 倍。计算方式很直接——假设面板宽度 480px5 列、间距 6px那么单格宽度是 (480 - 6×4) / 5 91.2px字号就是 91.2 × 0.42 ≈ 38px。这个比例在 3×3 到 7×7 上都能保持视觉密度接近换尺寸时不会出现突然变稀的割裂感。间距。6 到 10px 比较合适。间距太小格子之间没有视觉边界容易点错间距太大整个面板会被撑得很散扫视成本上升。我用 6px 是因为触屏上手指宽度大概 8-10mm间距再小一点不影响点击但能让整体更紧凑。对比度。别用纯黑字配纯白底长时间看会有眩光感。我用的是深灰 #1f2937 配近白 #ffffff完成的格子降到浅蓝灰 #dfe7f3 配 #9aa6b6 的字色——这个处理很关键已完成的数字必须退到背景里否则它们会持续干扰你对剩余目标的搜索。字体。必须用等宽数字font-variant-numeric: tabular-nums。原因很实在比例字体的1特别窄、8特别宽格子里的数字视觉重量不一致某些数字会因为看起来小而被优先忽略形成隐性的搜索偏差。中心注视点。这是最容易被忽略的一个细节。原始版的舒尔特表格要求视线固定在表格中心用余光找数字。但绝大多数人拿到表就开始眼睛乱飞训练效果大打折扣。所以我在面板正中放了一个 8px 的小红点就是为了给视线一个锚。2.3 变体设计什么时候该换玩法同一个 5×5 做久了人会形成固定的搜索习惯这时候成绩还在涨但训练价值已经在下降。这时候就该上变体了。字母版把 1-25 换成 A-Y规则不变。它比数字版难一点因为字母的序列是背诵出来的不像数字那样有天然的数值直觉工作记忆的负担更重。数字字母交替版1-A-2-B-3-C……这个变体的妙处在于它强制你在两套序列之间来回切换对序列维持那一环的压力成倍增加。我第一次做这个版本用时直接翻了一倍。双色版红色数字 1-13 升序黑色数字 1-13 降序交替点击。这是难度最高的变体本质上是在做任务切换训练。它不适合新手做之前至少 5×5 稳定在 40 秒以内。动态重排版每点对一个数字剩下的数字重新洗牌。这个版本彻底堵死了记住位置这条捷径是纯粹靠搜索能力的硬碰硬。但它的体验比较挫败建议偶尔用一次就够了。视觉干扰版给一部分数字加上随机的大小变化或者轻微旋转。这个变体我做得比较克制因为加多了整个表就变得很丑反而不想做了。3. 手写一个 HTML 生成器从骨架到计时3.1 为什么选单文件纯前端做这个工具的时候我考虑过几种方案最后落在一个单 HTML 文件上理由有四条。零依赖。不需要装环境、不需要起服务器、不需要联网。发给别人就是一个文件双击打开就能用。给家里长辈或者老师转发的时候这一步省下来的沟通成本非常高。离线可用。这一点在给孩子用的场景里特别重要。设备可能是个旧平板网络不稳定或者你压根不想让孩子碰网络。纯前端页面天然满足这个要求。便于二次修改。老师想把 5×5 改成 6×6 默认、想把配色改成护眼色打开文件改两行就行。如果是个需要构建的项目这一步就能劝退 90% 的人。便于存档。一个文件就是一个版本。你改完想回退把旧文件留着就行不用操心依赖版本漂移那些事。代价当然也有没有后端成绩只能存在本地不同设备之间不同步数据清理了就没了。但这些都是可接受的因为训练本身是个低频、单人、长期的事同步的价值没那么高。3.2 页面骨架与样式整个页面的结构非常简单顶部一行状态栏用时 进度中间一个方形面板下面一排控件最底下是提示文字。核心布局靠 CSS Grid 完成。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width,initial-scale1,maximum-scale1,user-scalableno title舒尔特表格训练器/title style * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; background: #eef1f5; font-family: system-ui, sans-serif; color: #1f2937; -webkit-tap-highlight-color: transparent; user-select: none; } .app { display: flex; flex-direction: column; align-items: center; padding: 16px 12px 32px; gap: 14px; } .bar { width: min(92vw, 520px); display: flex; justify-content: space-between; align-items: baseline; font-variant-numeric: tabular-nums; } .bar .time { font-size: 26px; font-weight: 700; } .bar .meta { font-size: 14px; color: #6b7280; } .board-wrap { position: relative; width: min(92vw, 520px); } .board { display: grid; gap: 6px; width: 100%; aspect-ratio: 1 / 1; } .cell { display: flex; align-items: center; justify-content: center; background: #ffffff; border-radius: 8px; font-variant-numeric: tabular-nums; font-weight: 600; color: #1f2937; cursor: pointer; touch-action: manipulation; transition: background 0.08s linear, color 0.08s linear; } .cell.done { background: #dfe7f3; color: #9aa6b6; } .cell.wrong { background: #f7c9c2; color: #8c2f22; } .dot { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #e05d3f; opacity: 0.85; pointer-events: none; } .controls { width: min(92vw, 520px); display: flex; flex-wrap: wrap; gap: 8px; } button, select { font: inherit; font-size: 14px; padding: 8px 14px; border-radius: 8px; border: 1px solid #cfd6e0; background: #fff; color: #1f2937; cursor: pointer; } button.primary { background: #2f6bd8; border-color: #2f6bd8; color: #fff; } .hint { width: min(92vw, 520px); font-size: 13px; color: #6b7280; line-height: 1.7; } /style /head body div classapp div classbar div classtime idtime00.00/div div classmeta idmeta目标 1 / 25/div /div div classboard-wrap div classboard idboard/div div classdot/div /div div classcontrols select idsize option value33 × 3/option option value44 × 4/option option value5 selected5 × 5/option option value66 × 6/option option value77 × 7/option /select button classprimary idstart开始新的一组/button button idclear清空记录/button /div div classhint idhint视线盯住中间的红点用余光找数字按顺序点击。/div /div script // 逻辑部分见下一节 /script /body /html几个样式上的取舍值得说一下。aspect-ratio: 1 / 1保证了面板永远是正方形配合grid-template-columns: repeat(n, 1fr)每一格自动就是正方形不需要手动算行高——这是整个布局能这么短的关键。user-select: none和-webkit-tap-highlight-color: transparent是移动端的必备处理不加的话长按会弹出文字选择点击会有灰色高亮闪一下体验很糟糕。touch-action: manipulation则关闭了双击缩放避免连点两下页面被放大。maximum-scale1,user-scalableno这一对参数有争议无障碍上确实不友好但在这个场景下它是必要的训练本质上是高频快速点击允许缩放就意味着误触会把页面搞乱训练直接中断。3.3 核心生成逻辑与洗牌校验这是整个工具里最容易被写错的部分。很多人写随机排列就是一行arr.sort(() Math.random() - 0.5)看着能用实际上有严重的分布问题。sort的比较函数要求是稳定的、自洽的而Math.random()每次返回不同的值导致排序结果严重偏向某些排列。表现出来就是生成的表格里数字经常出现扎堆或者某些数字总在角落。我早期版本就是这么写的连续几组都感觉这个表怎么这么顺后来才反应过来是分布出了问题。正确的做法是Fisher-Yates 洗牌从后往前遍历每次和前面随机一个位置交换function shuffle(a) { for (let i a.length - 1; i 0; i--) { const j Math.floor(Math.random() * (i 1)); [a[i], a[j]] [a[j], a[i]]; } return a; }这个算法保证每种排列出现的概率完全相等时间复杂度 O(n)对于 49 个元素的数组来说开销可以忽略。洗牌之后还有一道校验相邻数字不能落在相邻格子里。如果 7 和 8 正好上下挨着人扫到 7 的时候余光已经看到了 8这一步就白给了训练价值打折。这个校验很简单遍历一遍检查上下左右四个方向有没有差值为 1 的邻居function hasNeighborSequence(grid, k) { for (let r 0; r k; r) { for (let c 0; c k; c) { const v grid[r * k c]; if (c 1 k Math.abs(v - grid[r * k c 1]) 1) return true; if (r 1 k Math.abs(v - grid[(r 1) * k c]) 1) return true; } } return false; } function buildGrid(k) { const base []; for (let i 1; i k * k; i) base.push(i); let grid shuffle(base.slice()); let guard 0; // 最多重试 200 次避免极小尺寸下死循环 while (hasNeighborSequence(grid, k) guard 200) { grid shuffle(base.slice()); guard; } return grid; }这里的guard计数器是必须的。3×3 只有 9 个格子想完全避开相邻连续数字其实相当困难某些初始排列可能怎么洗都过不了校验。设一个上限超了就接受当前结果比卡死强得多。实测下来5×5 平均重试 1 到 3 次就能通过7×7 基本一次过性能上完全没问题。3.4 交互、计时与成绩存储渲染方式我用的是事件委托而不是给每个格子单独绑事件。原因有两个一是 49 个格子绑 49 个监听器虽然有事件池优化不至于卡但没必要二是不需要在重新生成表格时清理旧监听器减少了一类内存泄漏的可能。(function () { const boardEl document.getElementById(board); const timeEl document.getElementById(time); const metaEl document.getElementById(meta); const hintEl document.getElementById(hint); const sizeEl document.getElementById(size); const startBtn document.getElementById(start); const clearBtn document.getElementById(clear); const STORE_KEY schulte-history-v1; let n 5, total 25, target 1; let started false, finished false; let t0 0, rafId 0, errors 0; // —— 洗牌与校验同上此处省略—— function shuffle(a) { /* ... */ } function hasNeighborSequence(g, k) { /* ... */ } function buildGrid(k) { /* ... */ } function render() { boardEl.style.gridTemplateColumns repeat(${n}, 1fr); const frag document.createDocumentFragment(); const grid buildGrid(n); grid.forEach(v { const d document.createElement(div); d.className cell; d.dataset.v v; d.textContent v; frag.appendChild(d); }); boardEl.innerHTML ; boardEl.appendChild(frag); fitFont(); } function fitFont() { const gap 6; const w boardEl.clientWidth; if (!w) return; const cellW (w - gap * (n - 1)) / n; const fs Math.max(13, Math.round(cellW * 0.42)); boardEl.querySelectorAll(.cell) .forEach(el { el.style.fontSize fs px; }); } function updateMeta() { metaEl.textContent 目标 ${Math.min(target, total)} / ${total} 错误 ${errors}; } function tick() { if (!started || finished) return; timeEl.textContent ((performance.now() - t0) / 1000).toFixed(2); rafId requestAnimationFrame(tick); } function startTimer() { started true; t0 performance.now(); rafId requestAnimationFrame(tick); } function finish() { finished true; cancelAnimationFrame(rafId); const sec (performance.now() - t0) / 1000; timeEl.textContent sec.toFixed(2); saveRecord({ n, sec: sec.toFixed(2), errors, at: Date.now() }); renderHistory(); } boardEl.addEventListener(pointerdown, e { const cell e.target.closest(.cell); if (!cell || finished || cell.classList.contains(done)) return; if (!started) startTimer(); const v Number(cell.dataset.v); if (v target) { cell.classList.add(done); target; updateMeta(); if (target total) finish(); } else { errors; cell.classList.add(wrong); setTimeout(() cell.classList.remove(wrong), 160); updateMeta(); } }); function loadHistory() { try { return JSON.parse(localStorage.getItem(STORE_KEY) || []); } catch (err) { return []; } } function saveRecord(rec) { try { const list loadHistory(); list.push(rec); localStorage.setItem(STORE_KEY, JSON.stringify(list.slice(-200))); } catch (err) { /* 隐私模式下静默失败 */ } } function renderHistory() { const same loadHistory().filter(r r.n n); if (!same.length) { hintEl.textContent 视线盯住中间的红点用余光找数字按顺序点击。; return; } const best Math.min(...same.map(r r.sec)); const last3 same.slice(-3); const avg last3.reduce((s, r) s r.sec, 0) / last3.length; hintEl.textContent ${n}×${n} 已完成 ${same.length} 组 | 最好 ${best.toFixed(2)} 秒 | 近三组均值 ${avg.toFixed(2)} 秒; } function newRound() { cancelAnimationFrame(rafId); started false; finished false; errors 0; target 1; total n * n; timeEl.textContent 00.00; render(); updateMeta(); renderHistory(); } startBtn.addEventListener(click, () { n Number(sizeEl.value); newRound(); }); clearBtn.addEventListener(click, () { try { localStorage.removeItem(STORE_KEY); } catch (err) {} renderHistory(); }); window.addEventListener(resize, fitFont); n Number(sizeEl.value); newRound(); })();几个关键决策解释一下。为什么计时从第一次点击开始而不是从渲染完成开始。如果从渲染开始计时那我盯着表想了两秒才动手这段时间也会被算进去成绩就变成了反应时而不是搜索能力。从第一次有效点击起算把准备阶段排除在外数据更能反映实际表现。代价是如果你点了第一个数字之后中途走神惩罚会全额落在成绩上——但这本来就是应该的。为什么用pointerdown而不是click。click在触屏上要等手指抬起某些场景下还会有延迟高频点击时体感很闷。pointerdown在按下的瞬间就响应跟手得多。代价是按住不放不会重复触发其实这正好是我们想要的但如果用户按下后滑动理论上会在原地触发一次。实际使用中面板不大滑动误触的概率很低这个取舍是值得的。为什么已完成的格子要拦截。cell.classList.contains(done)这个判断很重要。不加的话你点完 7 之后手抖又点了一下 7会立刻被记一次错误非常冤枉。拦截掉之后重复点击变成无效操作体验顺畅很多。为什么用requestAnimationFrame而不是setInterval。setInterval在页面切到后台时会被节流甚至暂停而requestAnimationFrame跟屏幕刷新同步计时显示更平滑。虽然真正的计时基准是performance.now()的差值跟刷新率无关但显示的流畅度对训练中的心理节奏是有影响的。3.5 变体扩展示例上面这套骨架改几个地方就能变成变体。核心思路是把生成数字数组这一步替换掉其余逻辑不用动。字母版最简单把for (let i 1; i k*k; i) base.push(i)换成String.fromCharCode(64 i)然后在比较时统一转成字符串即可。注意dataset存的是字符串比较时要保证类型一致。数字字母交替版需要一个映射表位置 0 是 1位置 1 是 A位置 2 是 2……生成时按索引取对应值同时把序列数组单独存一份点击时用sequence[target - 1]做比较。双色版稍微复杂一点需要在格子上加一个>
