博客: A4

欢迎到我的个人网站上体验“Noteplace 无限缩放笔记空间”

在上一篇文章中,我提出了用离线网页制作无限缩放草稿纸的想法,并计划在为期数月的时间里逐步更新相关的探索发现和落地进展。

没想到,惊喜来得太突然,文章发布后的第 2 天,我就在 GitHub 上搜索到了高度匹配当前需求的另一个开源项目 Noteplace (为了与草稿纸做区分,我把它简称为无限缩放笔记空间),它的基础功能比上一篇文章中提到的 BigPicture 更全面,而且编辑和缩放等交互特性也更接近上一篇文章中的设想。

根据上一篇文章带来的留言和互动量激增情况,我意识到读者们对无限缩放草稿纸这类体验设计非常感兴趣,所以我很想为大家创造亲自尝鲜体验的机会。为达到这个目标,我投入了数天时间对 Noteplace 进行界面菜单与范例笔记内容的中文化和交互细节优化,并在我的个人网站中放置了 Noteplace 体验版

关于个人隐私保护的说明: 虽然 Noteplace 体验版需要通过访问我的个人网站域名打开,但是你的个人笔记数据并不会在我的网站上存储,因为它只是一个静态网页外加一些 JavaScript 脚本 (据我观察分析,这些脚本并没有对第三方网站服务发送笔记数据的动作),所有的笔记数据都临时存储于你本地设备的浏览器中

为了让大家快速了解 Noteplace 的基础操作,我录制了一段很短的无声演示视频 (其界面布局与最新的体验版略有不同,但基本功能完全一致)

简单概括视频中的操作要点:

  • 一、用鼠标在画布的空白处双击,就可以开始打字
  • 二、支持对画布的深度放大缩小 (缩放层级比常见白板画布要多得多,但目前并非无限多)
  • 三、点击 [ 🖌️手绘 ] 按钮后,临时切换到手绘模式,可绘制一些简单的线条
  • 四、不仅整个画布可缩放,文字和绘图也可以单独放大缩小
  • 五、用鼠标右键可以拖拽现有的文字和绘图
  • 六、文字区域支持 Markdown 格式代码
  • 七、可以自由导出和导入笔记数据
  • 八、笔记数据完全存储在本地,格式透明 (JSON)
  • 九、还有更多有趣的功能,在体验版内置的范例笔记空间中,你可以自行探索发现

所以,现在你只要收藏 Noteplace 体验版的网址,就可以随时随地打开它,尝试以“无限缩放”的方式整理私人想法笔记。

Noteplace

考虑到你可能希望 Noteplace 拥有一个独立的笔记窗口,而不是和大量浏览器页签混在一起,我还专门制作了面向 MacOS 的离线版 App (Noteplace.app),只要下载到本地就可以离线使用。虽然我很想顺便制作针对 Windows 的离线版 App,但因为时间和技术经验不足,截至发文时还做不出来,只能以后有机会再提供。

PS: 今天这篇文章的内容提纲,其实就是在我为自己定制的 MacOS 离线版 App 中整理的,我感觉这样整理思路真的非常方便!

DeepDraft


Noteplace 体验版的基本功能和访问方式介绍完了,接下来我打算回顾上一篇文章中的『A4 纸与“无限缩放草稿纸”的 10 个差别』,看看 Noteplace 体验版与我理想中的体验设计匹配度如何。

  • ❶ 为了获取 A4 纸,可以去文具店整包购买;为获取 Noteplace,目前你需要收藏一个固定的网址,或下载离线 App (程序本体约占 4.5MB)。
  • ❷ 把 A4 纸放在桌上就可以开始打草稿了;而为了使用 Noteplace,你需要在浏览器收藏夹中打开它的网址,或直接打开它的离线版应用,之后你会看到一个带有大量范例笔记的画布。
  • ❸ 在 A4 纸上可以随意落笔书写;而为了在 Noteplace 中做记录,你需要用鼠标双击画布上的空白处,让光标┃显现出来,然后用键盘打字。
  • ❹ 在 A4 纸上需要提前规划文字和手绘内容的排列布局;而在 Noteplace 中做记录,随时可以用鼠标拖拽单个图文片段,或统一选中的一组图文片段 (按下 Shift 键之后拖拽,会出现选择方框)。
  • ❺ 当 A4 纸被写满后,为了重点观察 A4 纸局部的一小块内容,需要使用放大镜;而在 Noteplace 中,转动鼠标滚轮即可放大画布,让你最关心的那块内容变得适合阅读。
  • ❻ 当你需要对 A4 纸局部的某块内容做备注,但那块内容附近的空间不够时,你需要使用引导线或脚注/尾注等方法;而在 Noteplace 中,只要转动鼠标滚轮,让目标内容附近的空白变得足够大,然后双击某个空白位置开始打字即可。
  • ❼ 当你感觉 A4 纸上的某块内容很重要,值得凸显时,可以用特殊颜色的笔把它圈起来;而在 Noteplace 中,你可以用鼠标选中一块内容,单独对它进行放大或缩小操作。如果放大之后它与周围的内容块重叠,把那些内容块微移一下消除重叠即可 (Noteplace 不支持在内容块之间添加连线)。
  • ❽ 当你完成了一张 A4 纸草稿的记录,但不想丢掉,希望以后还能偶尔回顾时,可以在背面写下主题、说明文字和日期编号等;而对于 Noteplace 而言,它的空间是很难用完的,因为有很多缩放延展的层级和自由度,并且还可以导出为基于纯文本的 JSON 数据格式,便于日后重新导入。
  • ❾ 当你想要找回几个月前某张 A4 纸草稿上的一段重要内容时,你需要从档案袋里找出最有可能包含那段内容的多张 A4 纸,快速浏览翻阅,直到一眼看到那段内容,或者借助草稿上内容的空间位置关系带给你的似曾相识感,逐步排除不相关的 A4 纸,最终定位到最关键的那一张;而对于 Noteplace 而言,你可以使用跨目录、跨文档的全文搜索工具直接搜索你印象中的关键字词,当然你也可以在记事本中打开 JSON 文档,用内置的文本搜索工具做关键词查找 (如果你为笔记分配了固定编号,那么只要在 Noteplace 主界面右侧的搜索栏中逐一输入编号进行搜索,就能把各个缩放层级中的所有画面逐一陈列在眼前,从而模拟 A4 纸的浏览翻阅体验)。
  • ❿ 当你想要长期存档 A4 纸草稿时,需要有一个专用的带锁的存档箱;而对于 Noteplace,你需要把 JSON 文档上传到可信的网盘,或者先把 JSON 文档制作为带有密码的压缩包,然后再上传到网盘或放入闪存盘随身携带。

经过逐一对比,我发现 Noteplace 与无限缩放草稿纸的体验设计几乎完全匹配。

这真是一个超乎想象的意外发现,同时也是一个很清晰的反馈信号——我花大量时间构想和实验的无限缩放草稿纸,很可能呼应了一个跨语言、跨地域且相对稳定的个人笔记整理需求 (考虑到 Noteplace 原作者可能来自俄罗斯,而 Noteplace 的开源项目早在 2021 年 4 月就已存在了)。

Noteplace First Commit

但是出于种种原因,这种发现明显有些滞后,我似乎需要尽可能仔细地捕捉和描述自己的感受,并逐步提炼出清晰的书面化的需求,才有可能进一步在互联网便利设施的帮助下,发现有类似需求的个人笔记整理爱好者,以及比我更早动手设计和实现软件原型的开发者。(这里我要感谢为上一篇文章贡献了大量互动记录的读者朋友们,你们的留言、关注和转发推荐推动了无限缩放草稿纸想法的快速进展!) 😃

在未来的文章中,我会围绕无限缩放草稿纸背后的创意工作理念逐步引出相关话题,比如:如何在使用数字化产品或服务的过程中尽量保护个人对笔记数据和相关应用的使用权与所有权?如何用数字笔记工具促进个人的长期探索发现?如何保护个人注意力免受不想要的信息的干扰?如何突破社交平台围墙花园和算法茧房的封锁,建立更多基于兴趣的有意义的人际连接 (从广播到深播)?作为自由职业者,如何建立个人内容滚动积累的数字内容资产库存?... 等等。这些问题我曾在过去的直播互动中反复谈论过,下面这段回放视频是一次相对集中的概括总结:

欢迎在文章末尾的留言区分享你的想法!🤓


⚠️ 在结束本文之前,我要发一个免责声明 (Disclaimer) ⚠️

无论是 pimgeek 个人网站中的 Noteplace 体验版,还是城通网盘中的 Noteplace 离线版,它们都只是一个相对简单的开源项目,并不是成熟、稳定、消费产品级别的笔记应用。把它公布出来,只是希望向大家展示一种无限缩放草稿纸的技术可行性。

更直白地说,无论它用起来有多么顺手,我都无法保证你在 Noteplace 中录入的个人笔记数据能够长久稳定地储存 (而 A4 纸可以!)。为什么?因为代码中可能有 Bug,你可能有很特殊的记录习惯,或者你的电脑或操作系统有某些限制,… 如此等等。一句话概括:它们超出了开发者提前预见到 (并写在代码中) 的使用方式。

无论如何,请不要把这份免责声明简单解读为作者的过度谨慎:如果你用体验版或离线版记录了大量个人笔记,第二天重新访问笔记空间时,却发现笔记数据完全消失,或者出现大量重复数据,笔记的排列顺序错乱等,那么有一定的可能性,即使把我拽到你电脑桌前,我也没办法帮你还原它们。🥹

所以,如果你真的很在意个人笔记数据,请务必定期导出为本地 JSON 文档!导出功能就在画布左上方的 [ 💾 存档 ] 按钮里边。重要的事说三遍:一定记得用本地文档备份数据!千万保持警惕定期备份数据!即使你本人就是电脑专家,也不要忽视备份!(举个例子: 我因为疏忽大意,在录制上面的演示视频时,不小心重置了正在使用中的笔记空间,丢失了大概 5 条笔记数据——还好我记得其中的大部分内容 😅)

我正在尝试用离线网页制作一张“无限缩放草稿纸”

好久没有更新文章了,今天打算谈一个新的话题:我正在构思和开发中的一种无限缩放草稿纸

在开启这个话题之前,我已经在线上和线下与许多朋友初步讨论过这个想法,还做过一些简单的交互操作演示。

如果你现在就想亲自观看演示,可以访问这个网址 BigPicture Tutorial by Joseph Ernest。虽然它还没有达到我头脑中的那种理想状态,但已经比较接近了。事实上,我正是从自己的想象出发去提炼关键词,并在 Google 上反复搜索几小时后才最终找到这个网址。

img

我头脑中理想的草稿纸究竟是什么样子?为什么市面上常见的白板笔记应用不符合要求?用它来打草稿有什么特殊优势?我感觉用一篇文章不容易讲清楚,所以决定开启这个话题,专门记录关于无限缩放草稿纸的日常思考、探索发现和开发进度等。

不过,今天的文章中我会给出简单扼要的一句话描述:我理想中的草稿纸看上去就像 A4 纸,书写的体验也相似,但它能在字里行间的任意位置上增加更多书写空间。打个比方,就像气球的表面那样,可以无限膨胀或收缩 (但不会爆破掉)。

如果这样介绍还不够形象,那么可以想象用一张普通的 A4 纸打草稿:当纸面的主体部分差不多被文字、公式或手绘线条占满时,如何对纸上的想法做补充说明?

img

常规的做法是,在需要添加备注的想法附近画一条引导线,引导线的末端箭头指向外围的空白区域,或者在想法附近加标注:“参见第 X 页草稿纸”。相比之下,无限缩放草稿纸的做法是,对想法文字附近的微小空隙做一次膨胀操作,增加更多书写空间。如果写到后来发现空间仍然不够?那就继续膨胀,直到够用为止。

对于习惯使用无限层级树形大纲笔记的读者而言,这听上去就像是在现有树形要点列表的基础上添加一些更深层的子节点,并把观察视角聚焦到子节点所在的层级上去,只要按下回车键 ⏎ 和 Tab 键 ⇥ 就搞定,完全不用考虑膨胀书写空间这个动作。从逻辑上看的确是这样,但需要提醒的是,树形大纲笔记与 A4 纸的书写体验有很大差异。大纲笔记有非常严格的上下排列顺序和左右缩进层级,而 A4 纸则要自由得多,不仅在任意的空白区域都可以放置想法文字,而且想法文字之间的相对位置也更加灵活多变。正因为 A4 纸上的草稿保留了更多空间位置信息,对于喜欢借助空间感知能力辅助思考和记忆的记录者来说,这样的草稿更容易让头脑兴奋起来。

读过上面的介绍后,相信你已经对无限缩放草稿纸形成了一些基本概念和模糊的画面,接下来让我描述一下它的具体操作方法。作为参照,我会随时用普通的 A4 纸与它做对比。

  • ❶ 为了获取 A4 纸,你会去文具店整包购买 (一张大约 5 克重);而为了获取无限缩放草稿纸,你需要下载或复制一份特制的 HTML 文档 (一份空白文档约 200KB)。

  • ❷ 把 A4 纸放在桌面上,再有一支签字笔,就可以开始打草稿了;而为了使用无限缩放草稿纸,你需要在电脑操作系统的桌面上打开这个 HTML 文档,可能是用鼠标右键点击,然后选择在自己常用的网页浏览器中打开,之后你会看到一个带有浅色背景的空白画布。

  • ❸ 在 A4 纸上书写没有太多需要介绍的,随意落笔书写即可;而为了在无限缩放草稿纸上记录,你需要用鼠标点击画布上任意位置,让光标 ┃显现出来,然后你需要用键盘打字。

  • ❹ 在 A4 纸上需要提前规划文字和手绘内容的排列布局,因为一旦写好就不太容易平移到别处了;而在无限缩放草稿纸上记录,随时可以用鼠标拖拽单个图文片段,或统一选中的一组图文片段。

  • ❺ 当 A4 纸被写满后,为了重点观察 A4 纸局部的一小块内容,你可以使用放大镜;而在无限缩放草稿纸上,你只要转动鼠标滚轮放大画布,让你最关心的那个局部变得越来越大,直到占据屏幕中心位置 (缩放倍数是预先设定过的,比如每次放大 2 倍或缩小到 ½)。

  • ❻ 当你需要对 A4 纸局部的某块内容做备注,但那块内容附近的空间不够时,你需要使用引导线或脚注/尾注等方法;而在无限缩放草稿纸上,你只要转动鼠标滚轮,让那块内容附近的空白变得足够大,然后用鼠标点击某个位置开始打字即可 (这里需要说明,无论画布放大或缩小多少倍,新添加的文字始终是标准大小,但相对于已经在画布上的文字,它看起来可能会显得很大或很小)。

  • ❼ 当你感觉 A4 纸上的某块内容很重要,值得凸显时,可以用特殊颜色的笔把它圈起来,但无法直接改变它的尺寸;而在无限缩放草稿纸上,你可以用鼠标选中那块内容,单独对它进行放大或缩小操作。如果放大之后它与周围的内容块重叠,把那些内容块微移一下消除重叠即可 (暂不考虑内容块之间的连线)。

  • ❽ 当你完成了一张 A4 纸草稿的记录,但不想丢掉,希望以后还能偶尔回顾时,可以在背面写下主题、说明文字和日期编号等;而对于无限缩放草稿纸而言,它的空间是用不完的,因为你可以一直进行缩放延展操作。当然你也可以在画布上放置巨大而显眼的主题说明,或者把 HTML 的文件名修改容易勾起回忆的名字 (日期信息隐藏在 HTML 文档的源代码中,每个内容块都会被自动附加创建日期和最近一次修改的日期,网页中提供保存当前状态按钮)。

  • ❾ 当你想要找回几个月前某 A4 纸草稿上的一段重要内容时,你需要从档案袋里找出最有可能包含那段内容的多张 A4 纸,快速浏览翻阅,直到一眼看到那段内容,或者借助草稿上内容的空间位置关系带给你的似曾相识感,逐步排除不相关的 A4 纸,最终定位到最关键的那一张;而对于无限缩放草稿纸而言,你可以使用跨目录、跨文档的全文搜索工具直接搜索你印象中的关键字词,当然你也可以在浏览器中打开 HTML 文档,用内置的文本搜索工具做关键词查找 (无限缩放对于浏览翻阅而言,可能是一个障碍,可能需要设计一种特殊的方式,把各个缩放层级中的所有画面逐一陈列在眼前,才能部分模拟 A4 纸的浏览翻阅体验)。

  • ❿ 当你想要长期存档 A4 纸草稿时,需要有一个专用的存档箱,也许还需要上锁;而对于无限缩放草稿纸,你可能需要把 HTML 文档上传到一个可以信任的网盘,或者先把 HTML 文档放入带有密码的压缩包,然后再上传到网盘或放入闪存盘随身携带。

读到这里,你可能已经形成关于无限缩放草稿纸的更为清晰的画面感,甚至能立刻回想起过去曾接触过的某款笔记应用。也许有人已经开发了完全符合上述描述的白板笔记应用,只是我目前还不了解;也可能你比我更适合开发出这样的无限缩放草稿纸,或者想到/见到过比这样做更符合直觉的打草稿方式。无论你联想到什么,都欢迎在文章末尾的留言区谈论你想法。

PS: 如果你经常阅读我的公开分享,可能会发现很多历史文章,比如:“TheBrain 8 扩展视图”,“卡片套卡片”,“跨领域的卡片笔记工作流”,“TreeSheets 无限嵌套表格”,“Obsidian Canvas 杂而不乱草稿纸”等,或多或少都与“无限缩放草稿纸”的话题有一些关联。用卢曼卡片盒笔记法的语言来说,这是一个自下而上逐渐涌现出来的主题,因此我可以用卡片盒笔记法逐步汇总这些零散的想法。另一方面,我也希望“无限缩放草稿纸”能够增强我的数字卡片盒,使它也能提供 A4 草稿纸天然提供的空间方位感