做了两个简单的网页测试，发现有些细节比功能本身更费时间
最近做了两个网页小测试，一个是反应测试，另一个是舒尔特方格。
这两个功能的玩法都很简单。反应测试就是等屏幕变绿后尽快点击，舒尔特方格则是在一堆打乱的数字里，按顺序找到所有数字。
最初觉得实现起来应该不会太复杂，毕竟没有什么特别的操作。但真正做的时候，发现有些地方不能只考虑功能能不能运行，还得考虑用户会怎么操作。
这里记录几个实际遇到的问题。
一、反应测试不只是计算两个时间的差值
反应测试的基本逻辑很好理解。屏幕先显示等待状态，经过一段随机时间后变绿，用户看到绿色立即点击，程序计算从变绿到点击之间经过了多少毫秒。
最初实现时，我主要关注计时是否准确。但测试过程并不总会按照预期进行。
比如屏幕还没变绿，用户就提前点击了。这种情况显然不能算正常成绩，否则用户完全可以不停点击来获得一个很小的数字。
还有连续点击的问题。如果一次测试结束之后没有及时阻止后续操作，就可能重复触发结果计算。
我最后把测试过程分成几个阶段：等待开始、等待变绿、允许点击、显示结果。
每个阶段只接受对应的操作。提前点击会被当作抢跑处理，屏幕变绿后只记录第一次有效操作，完成之后再点击也不会重复计算成绩。
这种处理方式并不复杂，但比单纯写一个计时器可靠得多。
另外，计时使用的是 JavaScript 的 performance.now()。相比直接读取普通时间，它更适合计算这种短时间间隔。
不过这里还有一个无法完全避免的问题：设备差异。
电脑上的鼠标、键盘和手机触屏，操作延迟并不完全相同。屏幕刷新率也会影响用户看到颜色变化的时间。
所以网页显示的反应时间，更适合用来观察同一设备上的成绩变化。直接拿不同设备的数据比较，可能并不公平。
二、只有一次成绩，还是不太够用
最早的反应测试只有一个结果页面。每次测试结束，显示这一次的反应时间。
功能本身没什么问题，但实际玩的时候，很容易想再测几次，看看自己有没有进步。
如果只保留最新一次成绩，就很难比较。
我后来增加了单轮和五轮两种模式。五轮模式结束后，可以查看平均成绩、最快成绩和每轮结果。
另外，还保存了最近二十次完整测试的记录。
这里我没有增加账号系统，而是直接使用浏览器的 localStorage 保存数据。
对于这种不需要多人协作、也不涉及重要资料的小测试，本地保存是一个比较省事的方案。用户不用注册账号，再次打开相同的浏览器，也能查看之前的成绩。
缺点也很明显。用户换了设备，或者清除了浏览器数据，记录就可能丢失。
这个问题目前没有完全解决，但考虑到测试本身比较轻量，我暂时选择保留这种方式。
做功能时，有些设计并不存在绝对正确的方案，更多时候需要在使用方便和功能复杂度之间做取舍。
三、舒尔特方格的误选该怎么处理
另一个测试是舒尔特方格。
它会把数字打乱排列，用户需要从 1 开始，按照顺序依次找到所有数字，最后记录完成时间。
常见的是 5×5，也就是 25 个数字。我还做了从 4×4 到 9×9 的不同尺寸，以及几种排列方式。
这个功能最基本的实现，就是生成数字、打乱位置，再检查用户点击的数字是否正确。
真正让我纠结了一阵的，是点错数字之后怎么处理。
一种方案是直接结束测试，要求重新开始。这种方式规则简单，但使用起来可能有点苛刻。
尤其是在手机上，手指点偏一点并不罕见。如果进行到一半，只因为一次误触就要全部重来，体验不太好。
另一种方案是忽略错误，让用户继续寻找正确的数字。但这样最后只显示完成时间，也无法区分一次没有失误的测试和多次点错的测试。
我最终选择了折中的方式：点错数字时给出短暂的视觉提示，同时记录一次误选，但测试继续进行，计时也不停止。
结束之后，同时显示完成用时和误选次数。
这样既不会因为一次点击失误打断整轮测试，也能让用户知道自己这次操作的情况。
四、成绩保存不能只考虑一个数字
反应测试的成绩主要是毫秒数，舒尔特方格的成绩也是完成时间。
但舒尔特方格还有一个区别：不同尺寸之间的难度差异很大。
4×4 的方格只有 16 个数字，9×9 却有 81 个。把它们的完成时间直接放在一起比较，没有太大意义。
如果用户这次选择 4×4，下次选择 9×9，即使完成时间增加很多，也不代表表现变差了。
所以我把不同配置下的成绩分开保存，每种配置分别记录近期成绩。
用户选择哪一种设置，就查看对应的历史记录。
这个问题其实也适用于其他带难度选择的小游戏。只要规则、题目数量或者难度发生变化，成绩是否还具备直接比较的意义，就需要提前考虑。
五、电脑上正常，不代表手机上也好用
这两个功能都需要频繁点击，所以移动端体验也比较重要。
反应测试的操作区域比较大，手机上使用起来相对直接。但舒尔特方格不同，尺寸越大，数字就越密集。
4×4 只有 16 个数字，比较容易安排。到了 9×9，81 个数字都要显示在手机屏幕里，还得保证用户能够看清楚、点得准确。
如果格子太小，就容易误触；如果格子太大，整个方格又可能超出屏幕。
这类问题在电脑上不一定明显，换到手机上就能看出来。
我后来也给舒尔特方格增加了键盘操作，方便电脑用户通过方向键选择数字，再按回车或空格确认。
同一个功能在不同设备上使用，未必需要完全一样的操作方式。只要规则一致，选择更适合当前设备的交互方式就可以。
最后
目前这两个测试都已经完成了基本功能，后续还会继续调整一些细节。
反应测试最初只是一个简单的计时功能，后来逐渐增加了提前点击判断、多轮测试和历史记录。
舒尔特方格最初只是按顺序找数字，真正做起来，又需要考虑误选、不同尺寸的成绩比较，以及手机上的点击体验。
这些问题单独看都不算特别复杂，但如果最开始没有考虑，后面还是得重新修改。
对于这种体量不大的网页工具，我现在更愿意先把基本功能做出来，再自己多操作几次，看看有没有遗漏的情况。
有时候需要调整的不是多复杂的功能，只是一个点错之后是否允许继续的小规则。
相关测试页面
