再谈考试时钟：技术之外的思考

《高新大道 29 号回忆录》

前几年「这样或那样」的原因促进了共享文档的发展，共享文档已经具备小型 BBS 的功能。毕业时「漫天飞」的纸质同学录，也有其赛博克隆体诞生。我所在的高中，于前几天也自发地进行了此次接力活动。

不少同学向我分享了文档链接，或者提到我的截图。

74. 纸鹿的考试时钟对当时的我来说太牛逼了……还有里面的照片投稿，快跨年时的烟花，那样一点点的叛逆的感觉，考试抬头看的时候真的很感动。（是诶是，还有上面有激励的话，现在还在用吗？）（现在还在用！那天找到网址莫名其妙看哭了）这个绝了 看到自己的投稿还会拍照记录下来（当时毕业那天考试时钟还有从开学开始一直到毕业的回忆 真的会哭）(有没有uu发一下网址，我也想再看看）（有链接吗谁能贴一个）（蹲）exam.thisis.host 不用谢
    开发者纸鹿按：我是2019级的一名学生，通过开发考试时钟，发展了高中的技术交流群“野生技协”。考试时钟的代码现在看来虽略显稚嫩，但它绝对承载着集体记忆。附2020级离校时的文案，其中的时间节点来自我的日记本（正经人谁写日记😭），一部分日记上传到了个人博客，见《高中无聊的日记节选》。立项时想要运营十年，迄今已近四年，一直维护下去真的很酷。

我想着，青春真好啊。

书接上文

在高中时期，我为学校开发了一个大屏网页，用于在考试时显示科目和时间。当项目功能基本完善时，我撰写《考试时钟的升级打怪攻略》一文，记录了初学前端的开发过程。

距离上篇文章已时隔三年，这个项目仍在更新考试信息，并为学校所用，也成为多个年级学生的集体记忆。

限于技术遗留，考试时钟已经很少添加功能更新。它有以下技术要点：

• 多个年级考试科目切换。
• 滚动标语、进度条和剩余时间显示。
• 科目滚动测试功能。
• 简单过场动画，自动切换背景。
• 响应式布局，主体元素始终具有良好的对比度，设计不会令人感到不适。
• 异常环境检测（本地保存网页/存档站代码），恢复使用 F12 篡改的内容。
• 使用原生前端开发，未引入 JS 框架。代码轻量，首屏加载快。
• 通过 CDN 引入 Font Awesome 图标和数字字体。

翻开笔记本，我看到了当时的开发流程：

• 记录、分析需求，记录核心资料（考试时间安排）
• 手绘产品原型图，重点文案，组件交互状态
• 根据优先级开发功能，引入测试功能
• 建立反馈社区（因人数较少而换为交流群），数据分析（监控用户行为）
• 成果转化（建立技术交流群），建立版本存档网站
• 在产品声明周期（10年）内持续维护更新

技术之外

作为需求呈现或宣传媒介

在某次教室电脑增设开机还原之后，电脑便只有 IE 浏览器了，我一手兼容 IE 并横幅提醒，一手向信息中心反映，电脑上便有了现代浏览器。

我在考试时钟页脚放上了一些有趣的信息，例如“合作社团”或我组建的技术交流群群号，它便具备了一定的社交属性。我借此认识了不少同学，技术交流群也逐渐活跃。

围绕着考试时钟，还有许多故事发生过或在发生。

这一段是我的高中回忆

高中的生活里，学生们的情感触发的阈值格外低。又或是大学变得麻木了吧，高中时的情绪激荡在回想后只算稀松平常。

晚自习时，若🌙月亮泛出淡淡的黄，或是具有理想标致的形状，定会在课间引得一群同学观赏。可那时的月亮为何又显得弥足珍贵了呢？

又或是漫步在学校樱花弥漫的路上，在校园环道上瞥见将要坠下又泛起阵阵云漪的落日，听着操场上的喧闹声响——也许我就在人造草皮上三三两两围着的人中，一下一下地拨弄着拇指琴。

有时我也会望着窗外的城市或洒进教室的光影发呆，这般纯粹的时光让我心神宁静。

背景、样式与主题

2021年3月底开发时，年级主任曾经说，网站背景不应该是纯黑色，我回复说项目上线时已经换成饭卡上的学校照片了。2021年11月，一位同学向我发送了几张照片，希望作为背景图片，我做出了背景切换功能。后来，背景越来越多，月亮出现了，晚霞、樱花、操场也出现了。

书桌@齐天

2021年12月，下雪了。同学们很激动，我也很激动，淡淡的雪花便一点一点地飘在了屏幕上。办跨年晚会的那天，我给它安排了烟花视频背景。再后来主题随着季节、事件切换，做了一些常用页面的入口，随后扩充到导航网页，再变为 Hexo 博客站点了。

持续维护

在我毕业离开高中后，我为学弟开通了仓库的提交权限。考试时钟只有一千行左右代码，技术含量不高，但包装了考试安排数据类型，非常易于新手修改和调用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

exams[251] = {
    type: '高三物理',
    origin: '2025级年级部',
    rollSlogan: ['高三第一学期阶段考试一：请以实际铃声为准。'],
    schedule() {
        $('语文', '2024-10-08', '07:40', '10:10');
        $('政治', '2024-10-08', '10:40', '12:10');
        $('数学', '2024-10-08', '14:10', '16:10');
        $('地理', '2024-10-08', '16:40', '18:10');
        $('生物', '2024-10-09', '08:00', '09:30');
        $('英语', '2024-10-09', '10:00', '12:00');
        $('化学', '2024-10-09', '14:10', '15:40');
        $('物理', '2024-10-09', '16:10', '17:40');
    }
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

exams[25] = {
    type: '高三日常',
    origin: '2025级年级部',
    mainSlogan: `距离高考${specialDate.cee25}天`,
    rollSlogan: [''],
    schedule() {
        $('第1节', today.date, '07:55', '08:35');
        $('第2节', today.date, '08:45', '09:25');
        $('第3节', today.date, '09:50', '10:30');
        $('第4节', today.date, '10:40', '11:20');
        $('第5节', today.date, '11:30', '12:10');
        if (today.isSummer) {
            $('第6节', today.date, '14:25', '15:05');
            $('第7节', today.date, '15:15', '15:55');
            $('第8节', today.date, '16:10', '16:50');
            // ……
        }
        else {
            $('第6节', today.date, '14:10', '14:50');
            $('第7节', today.date, '15:00', '15:40');
            $('第8节', today.date, '15:55', '16:35');
            // ……
        }
    }
};

得益于直观的“配置文件”，即使我毕业两年有余，考试时钟依然持续更新并被广泛使用。

设计的人文关怀

考试时钟不仅是一段网页代码，更像是一款产品，承载着高中集体的记忆。在设计过程中，我十分关心用户体验，尽管实现过程中遇到了不少挑战。但无论如何，最终呈现给用户的作品都是精心打磨的结果。

设计应当尊重用户

代码和技术只是项目的一部分，更重要的是项目的整体协调性，产品设计应符合用户的操作路径和习惯。

我：(产品设计) 在默认状态下不让人感到被冒犯就挺好了

KazariEX：什么是被冒犯

我：让用户感到不适，不被尊重或者难以使用。喧宾夺主（颜色过亮，一直有动画吸引注意力）是一种冒犯，(Windows) “小组件”推送信息流是一种冒犯，锁屏显示广告是一种冒犯，“注销/切换用户”需要点击4下也是一种冒犯

我：再比如新出的 (Edge 浏览器拖拽链接) 这个功能，链接稍微一拖就在新标签页打开了，用户在浏览网页时一般只用鼠标交互，触发操作的成本很低，取消的成本却是一手不能松开鼠标左键，另一只手找到Esc键
乍一看，“拖拽链接在新标签页打开”所需要的鼠标移动距离更短了，缩短了用户操作路径，但实际上，我很想问一句，设计这个功能的人的是没有鼠标中键吗？

Marcus 和 Hydrangea_Offcial：@纸鹿 特别是对于我这种阅读文档时喜欢用鼠标框选文章更是折磨（

我：另外，“默认状态”的前提也很重要。默认状态指用户不加设置时的界面展示和交互方式。默认状态下就应该易于使用且对用户友好，比如“xx的广告可以关”并不代表它默认状态下不冒犯用户

设计应当统一协调，而不是喧宾夺主或让用户感到不适。例如，这个深色模式切换按钮虽然设计得很漂亮，但如果直接应用到自己的网站上，可能会破坏整体的设计风格。

深色模式切换按钮@biliMBit

软件应当忠实呈现设计

基础设施（如系统、浏览器）应当忠实呈现设计，而不是对已经适应的设计进行“自适应”，从而影响用户体验。

举个例子，在屏幕最小宽度大于一定尺寸（约 400dp）时，安卓 Edge 浏览器会适当放大部分文字大小以适应平板阅读。但这样做会破坏网页原有的设计，同时还会导致一个恶性 bug——原本能在一行内显示的短文本，总是会有一个字溢出到下一行。

如果开发者非常在意这个问题，可以给需要保持不换行的文本额外设置 white-space: nowrap;，这样文字会以原本的大小显示，但为什么要向这种愚蠢的策略妥协呢？有趣的是，我的代码块组件在换行和不换行的两种状态下明明是同一字体大小，远程调试也显示为同一大小，但在切换时却会有明显的尺寸差异。

即使使用同一安卓包体的 Edge 浏览器，在手机和平板上的“自适应”样式行为也有明显差异：手机版在深色模式下会应用自己的深色样式逻辑（远程调试时仍显示原色，可能是在应用内部处理的），而平板端则不会。这种不一致的行为很丑陋——它不能忠实地呈现设计，也不能保证在不同屏幕尺寸下的一致处理。