还在用旧式待办应用的人多半已经陷入一种奇怪的循环打开应用看到一排排任务心里先叹一口气挑一个做了划掉但屏幕上还有一串等着越积越多最后干脆把应用删掉回到记事本和大脑内存。《One Thing at a Time》出现在 Hacker News 的 Show HN 栏目时标题只有一句话一个会隐藏你列表的 todo app。恰恰是“隐藏列表”这个反常规设计让它在一堆效率工具里显得特别。很多人的第一反应是列表藏起来那任务不都忘了吗这恰恰是它想解决的问题。我的判断是它不是一款“功能少了”的待办应用而是换了一套产品模型——从“管理任务”转向“管理注意力”。传统 todo app 的核心是“让所有任务可见”它的核心是“让当前任务可见让其他任务留在暗处”。这篇博客会拆解背后的产品理念、技术实现思路并带大家用一个最小可运行的前端示例把“隐藏列表、一次只做一件事”的逻辑真正落地。1. 为什么大家会对任务列表感到焦虑传统待办应用的基本交互是记录 - 排序 - 提醒 - 完成 - 记录新的循环往复。这个模型本身没有问题它假设用户是一个理性的任务管理者能够从列表里选出优先级最高的一项然后专注执行。但真实情况不是这样。从心理学角度看蔡格尼克效应Zeigarnik effect告诉我们未完成的任务会持续占据认知资源大脑会反复提醒你“这件事还没做完”。当几十个未完成任务同时挂在屏幕上这种提醒会变成持续的噪声。你每看一次列表就等于把全部未完成事项重新加载一遍。这会造成两种结果一是焦虑二是决策疲劳。很多人在“选哪件事做”这个环节就耗尽了意志力真正开始做事时反而没劲了。另一个问题是任务数量本身会带来虚假的掌控感。用户把任务写下来、分类、打标签、设优先级看起来是在管理项目实际上只是在完成“记录”这个动作。列表越长操作成本越高维护本身成了新的负担。于是出现了一个很常见的现象任务管理工具用了一段时间后列表里堆满过期任务用户不敢打开它打开了也不想处理。这背后的产品缺陷不是“功能不够”而是“信息展示方式错了”。当一个用户同时面对 20 个任务屏幕上的每一个条目都在争夺注意力优先级最高的那件事反而不突出。传统待办应用在“展示”上做得太多在“收敛”上做得太少。2. One Thing at a Time 的产品核心隐藏列表一次只做一件事如果我们把待办应用当成一个注意力系统设计的核心就不是“记录完所有事”而是“让用户在这几分钟内只看见一件事”。《One Thing at a Time》的做法很直接默认不展示完整列表只展示当前任务。用户打开应用后看到的是一个大号的任务卡片上面只有一件事。完成它再进入下一件。这种设计与几种主流方法论有本质区别方法/产品核心假设界面呈现对注意力的策略GTD大脑需要外部收集箱收集箱、下一步行动、项目清单通过分类降低认知负担看板任务有明确状态流转多列卡片待办/进行/完成状态可视化优先级矩阵任务可以按重要紧急排序四象限帮助决策One Thing at a Time列表本身会干扰执行单任务卡片列表默认隐藏物理隔离干扰可以理解为GTD、看板、优先级矩阵都在帮助用户“更好地看清单”而 One Thing at a Time 在帮助用户“暂时不看清单”。它不是不管理任务而是把任务管理拆成了两个时机规划时看全量列表执行时只看单任务。从产品模型上看它把“管理”换成了“选择”。用户每次只需要回答一个问题现在哪件事最重要而不是这二十件事该怎么排序、怎么组合、怎么安排时间。这个简化对独立性工作、自由职业者、注意力容易分散的人非常有效。这里有一个容易被误读的点隐藏列表不等于删除列表。从项目名称看“hides your list”强调的是默认不展示而非丢弃数据。任务仍然保存在本地队列仍然存在只是用户需要一个明确动作才能展开查看。这种“可查看但默认不展示”的设计比强制隐藏更符合人的心理预期——用户保留了对信息的控制权只是收窄了默认视野。3. 从技术视角看这个产品需要解决哪些问题虽然这个项目在 Show HN 上可能只是一个前端 Demo但从技术角度拆解一个“隐藏列表”的待办应用至少需要处理以下问题。首先是本地数据存储。最轻量的是 localStorage适合少量纯文本任务。如果需要存历史记录、支持富文本或者大量任务IndexedDB 更合适。localStorage 的优势是简单整个 state 序列化成 JSON 存一个 key 就完事劣势是容量约 5-10MB且同步 API 容易在小数据场景写出阻塞主线程的代码。这个体量的 todo app用 localStorage 完全足够。其次是“跨天重置”逻辑。这个产品的关键交互是“一次只做一件事”那么一天结束、用户重新打开应用时系统要决定昨天的未完成任务怎么办是自动放回队列还是继续显示还是扔进历史这里需要一个日期判断逻辑。常见做法是存一个 lastDate 字段每次加载时和当前日期比较发现不是同一天就执行重置。再其次就是单任务视图与队列的关系。技术上可以抽象为两个状态currentTask 和 queue。currentTask 是当前显示的任务queue 是剩余任务数组。用户完成当前任务后把 currentTask 设置为 null 或从 queue 中弹出下一个。队列可以被隐藏但数据必须存在否则“查看列表”这个功能就无法工作。还有提醒机制。如果产品想在“隐藏列表”的前提下不让人忘事就要引入另一种提醒方式时间点推送、每日固定时间通知、或者次日打开时把过期任务重新提到顶部。这属于可选项加入后会增加不少复杂度因为浏览器推送、权限申请、Service Worker 这些都是独立的工程问题。从材料本身看项目在 Show HN 上的形态大概率是个人开发者作品技术上很可能就是静态页面加本地存储。但即便如此它能把“单任务视图”做出价值核心就在于状态设计足够清晰。这也是作者认为“小工具也可以有大产品思维”的典型例子。4. 自己实现一个最小版本环境准备如果看完前面的分析你打算自己动手实现一个“隐藏列表”的待办应用完全不需要引入重型框架。一个浏览器、一个文本编辑器就够了。技术选型建议如下前端原生 HTML CSS JavaScript零依赖双击 index.html 就能跑。存储localStorage单 key 存整个状态对象。运行方式本地静态服务器或直接打开 HTML 文件现代浏览器允许 file:// 下使用 localStorage。如果之后想发布成 PWA 或接入同步再考虑引入 Vite、Service Worker、后端 API。版本方面建议以当前浏览器支持为准本文重点演示思路不做版本写死。原生 JS 使用 ES6 语法在任何 2020 年后发布的主流浏览器上都能正常执行。如果你习惯用本地静态服务器最省事的命令是cd one-thing python3 -m http.server 8080然后把浏览器打开到 http://localhost:8080 即可。没有 Python 也可以用 Node 生态的 serve 工具npx serve .环境准备到这里就结束了真正的核心是第 5 节里的状态设计和交互逻辑。5. 完整示例单任务视图 隐藏队列的实现下面做一个最小可运行的“One Thing at a Time”克隆还原核心交互界面默认只显示一个任务其余任务放进隐藏队列点击按钮才能展开查看。先创建项目目录建议结构如下one-thing/ ├── index.html ├── style.css └── app.js5.1 index.html页面结构!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleOne Thing at a Time/title link relstylesheet hrefstyle.css /head body main classapp header classapp-header span idtodayLabel classdate/span button idtoggleQueueBtn classghost-btn查看任务队列/button /header section classtask-area h1 idtaskTitle classtask-title今天只做这一件事/h1 textarea idtaskInput classtask-input placeholder写下你此刻最重要的一件事/textarea div classactions button idsaveBtn classprimary-btn锁定为当前任务/button button iddoneBtn classghost-btn完成了/button button idlaterBtn classghost-btn明天再说/button /div /section section idqueuePanel classqueue-panel hidden h2任务队列/h2 ul idqueueList classqueue-list/ul p classqueue-tip队列默认隐藏避免干扰你的注意力。/p /section footer classapp-footer 今日已完成 span iddoneCount0/span 件 /footer /main script srcapp.js/script /body /html这是典型的“单任务卡片 可展开面板”结构。注意保存按钮和完成任务按钮在业务上是互斥的没有当前任务时显示保存按钮有当前任务时显示完成和稍后处理按钮。这里把控制逻辑放在 JS 里通过切换hiddenclass 控制显示。5.2 style.css基础样式/* style.css */ :root { --bg: #f7f6f3; --ink: #1f2933; --muted: #6b7280; --accent: #3b82f6; --border: #e5e7eb; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, sans-serif; } .app { width: min(90vw, 480px); padding: 32px 24px; } .hidden { display: none !important; } .date { color: var(--muted); font-size: 14px; } .app-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; } .task-area { background: #ffffff; border: 1px solid var(--border); border-radius: 16px; padding: 24px; margin-bottom: 16px; } .task-title { font-size: 22px; font-weight: 600; margin: 0 0 16px; } .task-input { width: 100%; min-height: 80px; border: 1px solid var(--border); border-radius: 8px; padding: 12px; font-size: 16px; resize: vertical; } .actions { margin-top: 16px; display: flex; gap: 12px; flex-wrap: wrap; } .primary-btn { background: var(--accent); color: white; border: none; border-radius: 8px; padding: 10px 18px; font-size: 14px; cursor: pointer; } .ghost-btn { background: transparent; color: var(--ink); border: 1px solid var(--border); border-radius: 8px; padding: 10px 18px; font-size: 14px; cursor: pointer; } .queue-panel { background: #ffffff; border: 1px solid var(--border); border-radius: 16px; padding: 20px 24px; margin-bottom: 16px; } .queue-list { list-style: none; padding: 0; margin: 8px 0 16px; } .queue-list li { padding: 8px 0; border-bottom: 1px solid #f0f0f0; color: var(--ink); } .queue-tip { color: var(--muted); font-size: 13px; margin: 0; } .app-footer { color: var(--muted); font-size: 14px; text-align: right; }样式不是重点功能是关键。这里通过.hidden类控制“任务队列”面板的显示和隐藏完全对应产品理念列表存在但默认不给你看。5.3 app.js核心状态与交互逻辑// app.js const STORAGE_KEY one-thing-at-a-time; const DEFAULT_STATE { currentTask: null, // 当前任务 queue: [], // 任务队列 doneCount: 0, // 今日完成数量 lastDate: null // 上次使用日期 }; // 读取状态解析失败时回退到默认值 function loadState() { try { const raw localStorage.getItem(STORAGE_KEY); return raw ? { ...DEFAULT_STATE, ...JSON.parse(raw) } : { ...DEFAULT_STATE }; } catch (e) { console.warn(读取本地状态失败使用初始状态, e); return { ...DEFAULT_STATE }; } } function saveState(state) { localStorage.setItem(STORAGE_KEY, JSON.stringify(state)); } let state loadState(); // 跨天处理若日期变化把未完成任务放回队列并清零计数 function resetIfNewDay() { const today new Date().toDateString(); if (state.lastDate ! today) { if (state.currentTask) { state.queue.unshift(state.currentTask); } state.currentTask null; state.doneCount 0; state.lastDate today; saveState(state); } } // 渲染界面 function render() { resetIfNewDay(); document.getElementById(todayLabel).textContent new Date().toDateString(); const taskTitle document.getElementById(taskTitle); const input document.getElementById(taskInput); const saveBtn document.getElementById(saveBtn); const doneBtn document.getElementById(doneBtn); const laterBtn document.getElementById(laterBtn); if (state.currentTask) { taskTitle.textContent state.currentTask; input.classList.add(hidden); saveBtn.classList.add(hidden); doneBtn.classList.remove(hidden); laterBtn.classList.remove(hidden); } else { taskTitle.textContent 今天只做这一件事; input.classList.remove(hidden); saveBtn.classList.remove(hidden); doneBtn.classList.add(hidden); laterBtn.classList.add(hidden); } document.getElementById(doneCount).textContent state.doneCount; renderQueue(); } function renderQueue() { const list document.getElementById(queueList); list.innerHTML ; state.queue.forEach((task, index) { const li document.createElement(li); li.textContent ${index 1}. ${task}; list.appendChild(li); }); const btn document.getElementById(toggleQueueBtn); btn.textContent state.queue.length 0 ? 查看任务队列${state.queue.length} : 任务队列为空; } // 锁定当前任务 function saveCurrentTask() { const input document.getElementById(taskInput); const text input.value.trim(); if (!text) { alert(请先填写任务内容); return; } state.currentTask text; input.value ; saveState(state); render(); } // 完成当前任务 function completeCurrentTask() { if (!state.currentTask) return; state.doneCount 1; state.currentTask state.queue.shift() || null; saveState(state); render(); } // 明天再说当前任务放回队列末尾今天不再显示 function postponeCurrentTask() { if (!state.currentTask) return; state.queue.push(state.currentTask); state.currentTask null; saveState(state); render(); } // 切换队列展开与收起 document.getElementById(toggleQueueBtn).addEventListener(click, function () { const panel document.getElementById(queuePanel); panel.classList.toggle(hidden); }); document.getElementById(saveBtn).addEventListener(click, saveCurrentTask); document.getElementById(doneBtn).addEventListener(click, completeCurrentTask); document.getElementById(laterBtn).addEventListener(click, postponeCurrentTask); // 首次渲染 render();这段代码把整个产品逻辑浓缩到 150 行左右。关键逻辑有三点第一状态全部存 localStorage结构只有 currentTask、queue、doneCount、lastDate 四个字段。这正是“隐藏列表”的本质——队列数据始终在 state 里只是默认不渲染。第二跨天重置。resetIfNewDay会在每次渲染前检查日期如果发现不是同一天就把昨天的 currentTask 放回队列头部清空完成计数。这样第二天打开应用时用户只会看到一个空白的任务卡片而不是昨天没做完的事项直接压在屏幕上。第三两个核心操作。“完成了”把当前任务计数加一并从队列中弹出下一个“明天再说”把当前任务放到队列末尾回到空状态。两个操作都调用 render 重新渲染整个界面状态会保持同步。6. 运行与验证如何确认这套逻辑可用在 one-thing 目录下启动静态服务器python3 -m http.server 8080浏览器打开 http://localhost:8080然后按以下路径操作在文本框中输入“写周报”点击“锁定为当前任务”页面标题会变成“写周报”输入框隐藏。点击“查看任务队列”此时队列为空。再点击“完成了”今日完成数变成 1页面回到空白任务状态。输入“整理代码”锁定为当前任务再输入第二个任务并锁定第一个任务会被覆盖。这里需要注意当前示例中“锁定”直接覆盖旧任务不会自动把旧任务放入队列。如果希望替换时保留旧任务可以把代码略作调整saveCurrentTask 中先把 state.currentTask 推入 queue 再赋值。这是实现“隐藏列表”产品时最容易遗漏的交互细节。验证数据是否正确可以在浏览器控制台执行localStorage.getItem(one-thing-at-a-time)正常输出是一个 JSON 字符串结构类似{currentTask:写周报,queue:[整理代码],doneCount:1,lastDate:Sat Jul 01 2025}看到这个结构说明 state 的读写、跨天判断、队列操作都已经生效。如果运行失败优先检查两个点控制台是否有 JavaScript 报错以及 localStorage 是否被禁用无痕模式下某些策略会限制持久化。7. 常见问题为什么隐藏列表不是删除列表很多人第一次听到“隐藏列表”这个设计都会担心列表看不见了任务忘掉怎么办这是产品设计上最大的疑问也是技术上容易踩坑的地方。问题现象可能原因排查方式解决方案第二天打开应用旧任务还在屏幕中央日期判断字段 lastDate 没有更新检查 localStorage 里 lastDate 的值在 render 前调用 resetIfNewDay并确保每天只执行一次重置队列里的任务丢失localStorage 被清除或代码抛异常后回退到默认状态检查控制台报错和浏览器存储状态增加 try-catch 解析避免 JSON.parse 崩溃数据量增加后迁移到 IndexedDB“完成了”之后任务没有变化currentTask 和 queue 都为空查看 state 中 currentTask 是否为 null明确交互逻辑完成任务后应显示空白或从队列取下一项用户想查看队列但找不到入口队列面板入口不直观检查 toggleQueueBtn 按钮是否被 CSS 覆盖放大按钮可点击区域或在页面顶部增加常驻的队列数量提示从产品层面看“隐藏”不会导致遗忘的合理前提是系统有另一个时间点把任务重新带回来。比如每天重置、每周回顾、或者固定时间提醒。如果一款应用只是把任务藏起来又没有任何机制让它们重新出现那用户确实会焦虑。所以在实际产品设计中更稳妥的做法是默认隐藏列表但允许用户随时展开查看。每天第一次打开应用时展示“昨日未完成”的数量而不是把任务直接堆出来。提供一个“过期任务”入口超过 N 天的任务单独归类不让它污染当前队列。支持导出让用户定期备份任务数据。这些细节决定了一个“反常规”理念能否从 Demo 变成真正可用的工具。8. 工程化与产品化建议从 Demo 到可日常使用的工具如果你看好“隐藏列表”这个方向想把它做成一个真正可以每天使用的产品有几个工程层面的问题值得提前考虑。首先是数据存储方案。用 localStorage 写 Demo 很快但用户一旦开始积累历史任务、完成记录、每周统计数据localStorage 的同步 API 和容量限制会成为瓶颈。更合适的路径是先用 localStorage 跑通 MVP确认产品逻辑用户量起来或功能增多后迁移到 IndexedDB配合异步读写。如果没有后端数据备份就完全依赖本地环境最好提供“导出 JSON”功能用户在浏览器里点击一个按钮即可下载全部任务数据。其次是同步。跨设备使用是 todo 类产品的天然需求但同步会带来冲突处理问题。这里最朴素的做法是以修改时间updatedAt为基准后写覆盖先写再进一步是记录每个任务的版本号冲突时保留两个副本让用户选择。不要把“多设备同步”设计成首版功能它会消耗大量精力而且对“一次只做一件事”的核心体验没有直接帮助。第三是提醒机制。一个隐藏列表的应用必须有替代的提醒通道。实现路径是 Notification API 加定时触发器。用户授权后应用可以在每天早上九点推送一条通知“今天你打算做什么”任务过期、队列积压时也可以生成周报式通知但一定要控制频率否则就变成了新的注意力打扰。第四是发布 Show HN 或开源项目时的工程习惯。即使是一个小工具README 应该讲清楚三件事这个产品解决什么问题、怎么运行、数据存在哪里。截图或 GIF 演示“隐藏列表”的交互比大段文字更有效。如果有人试用后反馈“任务真的不会忘吗”这就是一个产品表达和帮助文档需要补强的地方。安全与隐私方面这个产品形态相对简单但仍需最小权限原则不需要引入任何第三方统计 SDK 时就不要加通知权限在用户主动开启前不要请求所有任务数据如果只存在于本地要在产品说明中明确承诺“数据不上传”让用户建立信任。9. 这个产品适合谁不适合谁任何工具都有边界One Thing at a Time 也不例外。适合它的用户有三类一是自由职业者和独立开发者他们的任务来源相对独立很少需要多任务并行最需要的是把某一件事真正做完二是容易被列表压垮的“收藏型用户”他们需要的是减少选项、减少决策而不是更复杂的分类三是正在做深度工作的人比如写作、编程、研究这类工作有一个共同特点——进入状态需要很长时间一旦被打断恢复成本很高。单任务视图能显著降低“看列表”带来的隐性打断。不太适合它的用户也有三类一是需要同时跟进多个项目的管理者他们每天都要切换五六个上下文隐藏列表反而会增加维护成本二是团队协作中的任务负责人多人共享、状态流转、截止日期这些需求远大于“专注当下”三是喜欢从整体清单获得安全感的人。如果列表消失让你感到不安这个工具就不适合你这很正常不需要强迫自己适应某种效率理念。从使用方式来看最合理的姿势是把它当成“执行端”而不是“规划端”。可以在周末或每月初用另一个工具做全量规划然后每天只把最重要的那件事喂给 One Thing at a Time。它负责让你进入状态而不是代替你的整个任务管理体系。10. 总结与后续学习方向这款项目带给开发者最大的启发不是“todo app 还能怎么做”而是“一个工具的核心差异点可以出自展示策略而不只是功能清单”。把列表从默认可见改成默认隐藏几乎不增加任何技术复杂度产品体验却完全不同。这种设计思路同样适用于阅读器、笔记软件、通知中心——凡是存在“信息过载”的界面都可以想一想默认展示什么、默认隐藏什么、用户需要什么动作才能解锁被隐藏的信息。你自己动手实现这个 Demo 时可以继续往下扩展的方向有几个每日固定时间提醒、历史完成统计、任务数据导出、PWA 离线安装、周回顾模式。这些都是低成本高价值的功能也都能保持“隐藏列表”的核心体验不跑偏。如果只想做一个最小版本今天给出的代码已经足够跑通整条链路。建议收藏备用也建议稍微改一改把它变成真正适合自己节奏的工具毕竟这一类效率应用的最终标准从来不是功能多而是你能不能坚持用下去。