← 返回文章
网站与设计 · 维护中

小工具怎样做到顺手,而不是只有按钮?

从输入、反馈、错误处理到可恢复操作,六个日常工具背后的体验原则。

一次完整的使用,比功能数量更重要

工具是否可用,不取决于卡片上写了多少动词。一次使用应该包含输入、结果、反馈和退出路径。整理文字后可以撤销;编码错误能说清原因;复制失败仍能让用户选择文字。这些细节比增加第十一个半成品入口更有价值。

本站原有专注计时、文字整理和灵感工具,后来扩展了 JSON、时间和 URL 转换。新增工具继续遵守同一条原则:计算在浏览器发生,输入不上传。

计时不能只数回调次数

浏览器后台标签页可能降低计时器执行频率。如果每次回调减一秒,页面回来时会落后。更稳妥的方式是记住截止时间,用当前时间重新计算剩余量。暂停时保存剩余毫秒,继续时生成新的截止时间。

const remainingMs = Math.max(0, deadline - Date.now());
const seconds = Math.ceil(remainingMs / 1000);

显示取整与内部精度是两件事。内部保留毫秒,显示才按秒取整,暂停和继续不会不断吃掉小数部分。完成状态也应该只触发一次,而不是每个回调重复提醒。

把错误放在用户能理解的地方

JSON 校验不应在解析失败后仍留下旧结果,造成“这份结果对应当前输入”的误解。URL 解码遇到不完整 UTF-8,应显示错误而不是输出半截乱码。时间输入要明确秒或毫秒、UTC 或本地时间。

输入:0 秒
UTC:1970-01-01 00:00:00
北京时间:1970-01-01 08:00:00

这个零值例子也提醒我们:不要用 if (value) 判断数值是否存在。零是有效输入,不是空白。本地优先笔记 记录了更多输入边界。

整理不应该悄悄丢掉原文

文字工具提供一步撤销。执行整理或清空前保存当前输入,下一次撤销恢复它。只把“清空”做成醒目按钮,而不给恢复路径,会让简单操作承担不必要的风险。

复制同样需要实际反馈。现代浏览器可能因为权限或环境拒绝剪贴板写入。工具应该明确说复制失败,并允许手动选择结果;不能在所有情况下都显示“复制成功”。

安全是体验的一部分

用户输入看起来像 HTML,也只应该作为文字处理。Markdown 预览采用有限语法,原始 HTML 不执行;链接只接受允许的协议。随机字符串使用浏览器的安全随机源,结果不进入持久存储。

这些工具不替代完整开发环境。大型 JSON、复杂 Markdown 或专业校色有自己的工具。这里的目标是在一次短暂使用中,把一个小问题完整解决。可以直接打开 工具中心 试一试;关于页面与数据的关系,可继续读 静态网站笔记。

接着读

链接到这里的笔记

一个数值,还需要一个时间。 →

在这里,找到一个想法。

正在读取公开搜索索引。

↑ ↓ 移动 · Enter 打开 · Esc 关闭。只搜索公开内容。