[{"data":1,"prerenderedAt":430},["ShallowReactive",2],{"content:\u002F2024\u002Fexam-clock-thinking":3,"surround:\u002F2024\u002Fexam-clock-thinking":418},{"id":4,"title":5,"body":6,"categories":391,"date":393,"description":394,"draft":395,"extension":396,"image":397,"meta":398,"navigation":400,"path":401,"permalink":402,"published":402,"readingTime":403,"recommend":402,"references":402,"seo":408,"sitemap":409,"stem":410,"tags":411,"type":415,"updated":416,"__hash__":417},"content\u002Fposts\u002F2024\u002Fexam-clock-thinking.md","再谈考试时钟：技术之外的思考",{"type":7,"value":8,"toc":374},"minimark",[9,14,21,25,28,56,59,62,70,73,76,103,106,126,129,133,136,139,142,145,148,151,154,157,161,164,170,173,176,179,205,208,211,214,217,220,274,283,288,329,332,335,338,345,348,368],[10,11,13],"h2",{"id":12},"高新大道-29-号回忆录","《高新大道 29 号回忆录》",[15,16],"link-card",{":mirror":17,"icon":18,"link":19,"title":20},"true","https:\u002F\u002Fmmbiz.qpic.cn\u002Fmmbiz_png\u002FHH8uRF2v4zzjiaLNFxzbZXMic4kAgbibA5ZfibtTVgBbUVqXpIND6UjfyAJarc6PbxhP0ZdCxjj6dPeSDrEaqibQ2GA\u002F0","https:\u002F\u002Fmp.weixin.qq.com\u002Fs\u002FIdTLrTi0AmhQvFUa0YKVNA","刷屏的“高中回忆录”文档，为何会让当代大学生破防？",[22,23,24],"p",{},"前几年「这样或那样」的原因促进了共享文档的发展，共享文档已经具备小型 BBS 的功能。毕业时「漫天飞」的纸质同学录，也有其赛博克隆体诞生。我所在的高中，于前几天也自发地进行了此次接力活动。",[22,26,27],{},"不少同学向我分享了文档链接，或者提到我的截图。",[29,30,31],"blockquote",{},[32,33,35],"ol",{"start":34},74,[36,37,38,39,42,43,50,51,55],"li",{},"纸鹿的考试时钟对当时的我来说太牛逼了……还有里面的照片投稿，快跨年时的烟花，那样一点点的叛逆的感觉，考试抬头看的时候真的很感动。（是诶是，还有上面有激励的话，现在还在用吗？）（现在还在用！那天找到网址莫名其妙看哭了）这个绝了 看到自己的投稿还会拍照记录下来（当时毕业那天考试时钟还有从开学开始一直到毕业的回忆 真的会哭）(有没有uu发一下网址，我也想再看看）（有链接吗谁能贴一个）（蹲）exam.thisis.host 不用谢",[40,41],"br",{},"\n开发者纸鹿按：我是2019级的一名学生，通过开发考试时钟，发展了高中的技术交流群“野生技协”。考试时钟的代码现在看来虽略显稚嫩，但它绝对承载着集体记忆。附",[44,45,49],"a",{"href":46,"rel":47},"https:\u002F\u002Fthisis.host\u002F202306\u002Fgrade-2020-departure\u002F",[48],"nofollow","2020级离校时的文案","，其中的时间节点来自我的日记本（正经人谁写日记😭），一部分日记上传到了个人博客，见",[44,52,54],{"href":53},"\u002F2020\u002Fschool-diary","《高中无聊的日记节选》","。立项时想要运营十年，迄今已近四年，一直维护下去真的很酷。",[22,57,58],{},"我想着，青春真好啊。",[10,60,61],{"id":61},"书接上文",[22,63,64,65,69],{},"在高中时期，我为学校开发了一个大屏网页，用于在考试时显示科目和时间。当项目功能基本完善时，我撰写",[44,66,68],{"href":67},"\u002F2021\u002Fexam-clock-develop","《考试时钟的升级打怪攻略》","一文，记录了初学前端的开发过程。",[22,71,72],{},"距离上篇文章已时隔三年，这个项目仍在更新考试信息，并为学校所用，也成为多个年级学生的集体记忆。",[22,74,75],{},"限于技术遗留，考试时钟已经很少添加功能更新。它有以下技术要点：",[77,78,79,82,85,88,91,94,97,100],"ul",{},[36,80,81],{},"多个年级考试科目切换。",[36,83,84],{},"滚动标语、进度条和剩余时间显示。",[36,86,87],{},"科目滚动测试功能。",[36,89,90],{},"简单过场动画，自动切换背景。",[36,92,93],{},"响应式布局，主体元素始终具有良好的对比度，设计不会令人感到不适。",[36,95,96],{},"异常环境检测（本地保存网页\u002F存档站代码），恢复使用 F12 篡改的内容。",[36,98,99],{},"使用原生前端开发，未引入 JS 框架。代码轻量，首屏加载快。",[36,101,102],{},"通过 CDN 引入 Font Awesome 图标和数字字体。",[22,104,105],{},"翻开笔记本，我看到了当时的开发流程：",[77,107,108,111,114,117,120,123],{},[36,109,110],{},"记录、分析需求，记录核心资料（考试时间安排）",[36,112,113],{},"手绘产品原型图，重点文案，组件交互状态",[36,115,116],{},"根据优先级开发功能，引入测试功能",[36,118,119],{},"建立反馈社区（因人数较少而换为交流群），数据分析（监控用户行为）",[36,121,122],{},"成果转化（建立技术交流群），建立版本存档网站",[36,124,125],{},"在产品生命周期（10年）内持续维护更新",[10,127,128],{"id":128},"技术之外",[130,131,132],"h3",{"id":132},"作为需求呈现或宣传媒介",[22,134,135],{},"在某次教室电脑增设开机还原之后，电脑便只有 IE 浏览器了，我一手兼容 IE 并横幅提醒，一手向信息中心反映，电脑上便有了现代浏览器。",[22,137,138],{},"我在考试时钟页脚放上了一些有趣的信息，例如“合作社团”或我组建的技术交流群群号，它便具备了一定的社交属性。我借此认识了不少同学，技术交流群也逐渐活跃。",[22,140,141],{},"围绕着考试时钟，还有许多故事发生过或在发生。",[130,143,144],{"id":144},"这一段是我的高中回忆",[22,146,147],{},"高中的生活里，学生们的情感触发的阈值格外低。又或是大学变得麻木了吧，高中时的情绪激荡在回想后只算稀松平常。",[22,149,150],{},"晚自习时，若🌙月亮泛出淡淡的黄，或是具有理想标致的形状，定会在课间引得一群同学观赏。可那时的月亮为何又显得弥足珍贵了呢？",[22,152,153],{},"又或是漫步在学校樱花弥漫的路上，在校园环道上瞥见将要坠下又泛起阵阵云漪的落日，听着操场上的喧闹声响——也许我就在人造草皮上三三两两围着的人中，一下一下地拨弄着拇指琴。",[22,155,156],{},"有时我也会望着窗外的城市或洒进教室的光影发呆，这般纯粹的时光让我心神宁静。",[130,158,160],{"id":159},"背景样式与主题","背景、样式与主题",[22,162,163],{},"2021年3月底开发时，年级主任曾经说，网站背景不应该是纯黑色，我回复说项目上线时已经换成饭卡上的学校照片了。2021年11月，一位同学向我发送了几张照片，希望作为背景图片，我做出了背景切换功能。后来，背景越来越多，月亮出现了，晚霞、樱花、操场也出现了。",[165,166],"pic",{"caption":167,"src":168,":height":169},"书桌@齐天","https:\u002F\u002Fooo.0x0.ooo\u002F2022\u002F04\u002F04\u002FkByKC.jpg","320",[22,171,172],{},"2021年12月，下雪了。同学们很激动，我也很激动，淡淡的雪花便一点一点地飘在了屏幕上。办跨年晚会的那天，我给它安排了烟花视频背景。再后来主题随着季节、事件切换，做了一些常用页面的入口，随后扩充到导航网页，再变为 Hexo 博客站点了。",[130,174,175],{"id":175},"持续维护",[22,177,178],{},"在我毕业离开高中后，我为学弟开通了仓库的提交权限。考试时钟只有一千行左右代码，技术含量不高，但包装了考试安排数据类型，非常易于新手修改和调用：",[180,181,183,197],"tab",{":center":17,":tabs":182},"[\"考试安排\",\"日常时间安排\"]",[184,185,187],"template",{"v-slot:tab1":186},"",[188,189,194],"pre",{"className":190,"code":192,"language":193,"meta":186},[191],"language-js","exams[251] = {\n    type: '高三物理',\n    origin: '2025级年级部',\n    rollSlogan: ['高三第一学期阶段考试一：请以实际铃声为准。'],\n    schedule() {\n        $('语文', '2024-10-08', '07:40', '10:10')\n        $('政治', '2024-10-08', '10:40', '12:10')\n        $('数学', '2024-10-08', '14:10', '16:10')\n        $('地理', '2024-10-08', '16:40', '18:10')\n        $('生物', '2024-10-09', '08:00', '09:30')\n        $('英语', '2024-10-09', '10:00', '12:00')\n        $('化学', '2024-10-09', '14:10', '15:40')\n        $('物理', '2024-10-09', '16:10', '17:40')\n    }\n}\n","js",[195,196,192],"code",{"__ignoreMap":186},[184,198,199],{"v-slot:tab2":186},[188,200,203],{"className":201,"code":202,"language":193,"meta":186},[191],"exams[25] = {\n    type: '高三日常',\n    origin: '2025级年级部',\n    mainSlogan: `距离高考${specialDate.cee25}天`,\n    rollSlogan: [''],\n    schedule() {\n        $('第1节', today.date, '07:55', '08:35')\n        $('第2节', today.date, '08:45', '09:25')\n        $('第3节', today.date, '09:50', '10:30')\n        $('第4节', today.date, '10:40', '11:20')\n        $('第5节', today.date, '11:30', '12:10')\n        if (today.isSummer) {\n            $('第6节', today.date, '14:25', '15:05')\n            $('第7节', today.date, '15:15', '15:55')\n            $('第8节', today.date, '16:10', '16:50')\n            \u002F\u002F ……\n        }\n        else {\n            $('第6节', today.date, '14:10', '14:50')\n            $('第7节', today.date, '15:00', '15:40')\n            $('第8节', today.date, '15:55', '16:35')\n            \u002F\u002F ……\n        }\n    }\n}\n",[195,204,202],{"__ignoreMap":186},[22,206,207],{},"得益于直观的“配置文件”，即使我毕业两年有余，考试时钟依然持续更新并被广泛使用。",[10,209,210],{"id":210},"设计的人文关怀",[22,212,213],{},"考试时钟不仅是一段网页代码，更像是一款产品，承载着高中集体的记忆。在设计过程中，我十分关心用户体验，尽管实现过程中遇到了不少挑战。但无论如何，最终呈现给用户的作品都是精心打磨的结果。",[130,215,216],{"id":216},"设计应当尊重用户",[22,218,219],{},"代码和技术只是项目的一部分，更重要的是项目的整体协调性，产品设计应符合用户的操作路径和习惯。",[221,222,223,226,233,236,239,241,248,250,260,263,269,271],"chat",{},[22,224,225],{},"{.}",[22,227,228,232],{},[229,230,231],"em",{},"(产品设计)"," 在默认状态下不让人感到被冒犯就挺好了",[22,234,235],{},"{KazariEX}",[22,237,238],{},"什么是被冒犯",[22,240,225],{},[22,242,243,244,247],{},"让用户感到不适，不被尊重或者难以使用。喧宾夺主（颜色过亮，一直有动画吸引注意力）是一种冒犯，",[229,245,246],{},"(Windows)"," “小组件”推送信息流是一种冒犯，锁屏显示广告是一种冒犯，“注销\u002F切换用户”需要点击4下也是一种冒犯",[22,249,225],{},[22,251,252,253,256,257,259],{},"再比如新出的 ",[229,254,255],{},"(Edge 浏览器拖拽链接)"," 这个功能，链接稍微一拖就在新标签页打开了，用户在浏览网页时一般只用鼠标交互，触发操作的成本很低，取消的成本却是一手不能松开鼠标左键，另一只手找到Esc键",[40,258],{},"\n乍一看，“拖拽链接在新标签页打开”所需要的鼠标移动距离更短了，缩短了用户操作路径，但实际上，我很想问一句，设计这个功能的人的是没有鼠标中键吗？",[22,261,262],{},"{Marcus 和 Hydrangea_Official}",[22,264,265,268],{},[195,266,267],{"code":267},"@纸鹿"," 特别是对于我这种阅读文档时喜欢用鼠标框选文章更是折磨（",[22,270,225],{},[22,272,273],{},"另外，“默认状态”的前提也很重要。默认状态指用户不加设置时的界面展示和交互方式。默认状态下就应该易于使用且对用户友好，比如“xx的广告可以关”并不代表它默认状态下不冒犯用户",[22,275,276,277,282],{},"设计应当统一协调，而不是喧宾夺主或让用户感到不适。例如，这个",[44,278,281],{"href":279,"rel":280},"https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1Pm4y127ui",[48],"深色模式切换按钮","虽然设计得很漂亮，但如果直接应用到自己的网站上，可能会破坏整体的设计风格。",[165,284],{"caption":285,"src":286,":mirror":17,":zoom":287},"深色模式切换按钮@biliMBit","https:\u002F\u002Fi1.hdslb.com\u002Fbfs\u002Farchive\u002F4944e6c76b7862e15798563b566afb6914b541d3.jpg@336w_190h_1c","false",[289,290,293,296],"alert",{"title":291,"type":292},"问了AI，它也知道","question",[22,294,295],{},"以下是一些常见的设计问题，需要在设计时仔细考虑，确保整体的协调性和用户友好性：",[77,297,298,305,311,317,323],{},[36,299,300,304],{},[301,302,303],"strong",{},"动画效果","：过度使用动画效果，如不断闪烁的图标或自动播放的视频，可能会分散用户的注意力，甚至引起不适。",[36,306,307,310],{},[301,308,309],{},"颜色搭配","：使用过于鲜艳或对比度过高的颜色组合，可能会让用户感到刺眼，影响阅读体验。",[36,312,313,316],{},[301,314,315],{},"布局排版","：不合理的布局和排版，如文本间距过小或按钮位置不合理，会使用户在操作时感到不便。",[36,318,319,322],{},[301,320,321],{},"字体选择","：使用过于花哨的字体或大小不一致的文本，可能会降低可读性，影响用户体验。",[36,324,325,328],{},[301,326,327],{},"交互设计","：复杂的交互流程或不直观的操作方式，如多次点击才能完成一个简单的任务，会增加用户的操作成本。",[130,330,331],{"id":331},"软件应当忠实呈现设计",[22,333,334],{},"基础设施（如系统、浏览器）应当忠实呈现设计，而不是对已经适应的设计进行“自适应”，从而影响用户体验。",[22,336,337],{},"举个例子，在屏幕最小宽度大于一定尺寸（约 400dp）时，安卓 Edge 浏览器会适当放大部分文字大小以适应平板阅读。但这样做会破坏网页原有的设计，同时还会导致一个恶性 bug——原本能在一行内显示的短文本，总是会有一个字溢出到下一行。",[22,339,340,341,344],{},"如果开发者非常在意这个问题，可以给需要保持不换行的文本额外设置 ",[195,342,343],{"code":343},"white-space: nowrap;","，这样文字会以原本的大小显示，但为什么要向这种愚蠢的策略妥协呢？有趣的是，我的代码块组件在换行和不换行的两种状态下明明是同一字体大小，远程调试也显示为同一大小，但在切换时却会有明显的尺寸差异。",[22,346,347],{},"即使使用同一安卓包体的 Edge 浏览器，在手机和平板上的“自适应”样式行为也有明显差异：手机版在深色模式下会应用自己的深色样式逻辑（远程调试时仍显示原色，可能是在应用内部处理的），而平板端则不会。这种不一致的行为很丑陋——它不能忠实地呈现设计，也不能保证在不同屏幕尺寸下的一致处理。",[29,349,350,353],{},[22,351,352],{},"后期补充：",[22,354,355,356,361,362,367],{},"这些其实是浏览器的预期特性，修改配色方案的叫做 ",[44,357,360],{"href":358,"rel":359},"https:\u002F\u002Fdeveloper.chrome.google.cn\u002Fblog\u002Fauto-dark-theme",[48],"自动深色主题","，放大文本的叫做 ",[44,363,366],{"href":364,"rel":365},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002Ftext-size-adjust",[48],"文本溢出算法","。",[369,370,371],"quote",{},[22,372,373],{},"技术不应该，也无法脱离人文关怀。离开了用户体验，它只能是一滩无源之水。",{"title":186,"searchDepth":375,"depth":375,"links":376},4,[377,379,380,387],{"id":12,"depth":378,"text":13},2,{"id":61,"depth":378,"text":61},{"id":128,"depth":378,"text":128,"children":381},[382,384,385,386],{"id":132,"depth":383,"text":132},3,{"id":144,"depth":383,"text":144},{"id":159,"depth":383,"text":160},{"id":175,"depth":383,"text":175},{"id":210,"depth":378,"text":210,"children":388},[389,390],{"id":216,"depth":383,"text":216},{"id":331,"depth":383,"text":331},[392],"杂谈","2024-10-18 16:50:35","通过回忆高中生活和开发考试时钟的经历，结合遇到的其他事例，点出了技术与人文关怀的关联，并呼吁注重用户体验。",false,"md","https:\u002F\u002Fassets.zhilu.cyou\u002Fcover4\u002Fexam-clock-thinking.jpg",{"slots":399},{},true,"\u002F2024\u002Fexam-clock-thinking",null,{"text":404,"minutes":405,"time":406,"words":407},"16 min read",15.24,914400,3048,{"title":5,"description":394},{"loc":401},"posts\u002F2024\u002Fexam-clock-thinking",[412,413,414],"产品思考","校园工具","设计复盘","story","2024-10-22 22:55:43","tGZRy5zSlgfPq7laBTNQ7OsP9SfOK0LUnn1fWoWUxQY",[419,424],{"title":420,"path":421,"stem":422,"date":423,"type":415,"children":-1},"今日校园见闻：我已经出离高兴了","\u002F2024\u002Fobserve-at-school","posts\u002F2024\u002Fobserve-at-school","2024-10-09 22:32:05",{"title":425,"path":426,"stem":427,"date":428,"type":429,"children":-1},"给电脑新手的笔记本开荒指南导读","\u002F2024\u002Fnew-laptop-guide","posts\u002F2024\u002Fnew-laptop-guide","2024-10-28 08:23:08","tech",1782091374877]