文档树横向收藏夹栏式构想

本贴最后更新于 802 天前,其中的信息可能已经沧海桑田

展开文档之苦

一直被「想展开文档却变成点击打开文档」给困扰,但又觉得父子级文档是比文件夹结构更好地文档管理方式,所以一直都挑父子级文档树的产品去使用,在我所知道的产品里面,Notion、Wolai、FlowUS 这三款是知名度较高的采用父子级文档树设计的产品,但使用体验一样是难受,甚至不如思源笔记「双击展开文档」。

但这属于“矮子里面拔将军”,后面又发现「语雀」采用父子级文档与文件夹共存,既可以在文档下创建子文档,也可以在文档下创建文件夹,这几乎解决了我对父子级文档使用体验中的种种不满。

但后面没使用语雀则是因为综合使用体验下来,还是觉得思源笔记更适合我(除了这个父子级文档树的交互设计)。所以的被这个「展开文档」使用体验困扰的我,不死心的一直在想如果我是开发者的话,在不加入文件夹或提供设置(该文档可设置为仅展开)的情况下,有什么更好的方式去提高父子级文档的使用体验。

浏览器收藏夹栏似乎意外的合适

image.png

可以看到这是一个包含了多个收藏夹的收藏夹栏,当然他在结构上依旧是文件夹结构,但是转换一下思路,将文件夹栏第一个文件夹当成第一个父级文档,下属其他文件夹为子文档,那么你会发现:

文档树收藏夹式 gif 模拟.gif

这种设计可以完美提升父子级文档的点击与展开在交互中的体验,鼠标点击即为打开文档,鼠标停留即为展开文档。

现有文档树(父子级文档)的痛点

文档名的显示与打开文档

随后我进一步去设想,发现这也可以让子文档的文档名显示全面,因为是横向的所以是悬浮设计,不用受限于文档树栏,如图所示(图 2),三级文档还好,最多就遮蔽两三个字符,但要是四级、五级文档,不仅文档名展示有问题打开文档更成问题(图 3)。

image.png(图 2)

image.png(图 3)

如图 3 所示,当文档树层级来到 5、6 级时,鼠标移到文档块上,右侧会显示「更多」(三个点)与「新建文档」(加号)【绿色框图区域】,左侧分别是必有的「修改图标」按钮,和如果再有子文档才有的「展开文档」(当然如果该文档已经是末级子文档了,则展开文档区域会消失,点击左侧则可以打开文档,但这在使用上有种不适的割裂感,从点击文档名打开变成要移动到左侧点击去打开),打开文档区域变成红色框图区域,极其小(末级子文档可以移动到左侧空白区域打开)。

而如果设计成我所说的横向收藏夹栏式文档树,则不需要受限于文档树栏的空间,直接如图所示以最长标题的文档块为长度去展开就好,如图 4 所示:

image.png(图 4)

图 4 中最长的就是绿框的这篇文章,所以展开的列表则以该网址名的长度为准,显得很宽。

结语

感谢大家能看到这里,本文一气呵成,没有多加修改,难免有辞不达意的情况出现。

本文围绕“父子级文档的打开与展开”为中心,在抑制住大量脏话的情况下,表达了我对市面上现有以父子级文档为设计结构的产品的使用体验上的不满,除了语雀(父子级文档与文件夹共存)外,父子级文档真的是让我又爱又恨。

爱的是,父子级文档的设计使一个文档下的其他文档我不用再去创建一个文件夹,硬生生割裂开来,哪怕是 Obsidian 再一个页面做目录去链接,我依旧觉得复杂且麻烦(低效)。因为如果一个文档下有其他子文档,能直接在这个文档下展开,何必还要去搞个页面目录呢。

恨的是父子级文档的展开体验确实难受。

但也正是这种不满,所以尽我所能的去提出我的感受与建议,希望能给 D 大 V 姐提供灵感,解决这个 B 痛点。

彩蛋

image.png

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    22011 引用 • 87764 回帖 • 2 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • RenaEmiya 1

    唔,“想展开文档却变成点击打开文档”这个问题啊。。

    你说浏览器收藏夹的设计很好

    类似的这个方案你说可行不:

    1. 当鼠标悬浮在展开按钮上的时候,文档树展开
    2. 如果点击鼠标,文档树将保持展开状态
    3. 如果不点击鼠标,当鼠标离开展开按钮时,文档树将重新折叠

    不过其实展开按钮蛮大的啊。。养成习惯,每次想展开文档的时候,鼠标往文档树面板左侧靠(如下图),就很不容易点成打开文档啊。。问一下,你点成打开文档,具体是点到了哪里呀。。

    1661437537920.png

    1 回复
  • 感谢你的回复:)

    关于你在回复中提到的方案,我认为「悬停在按钮上」这个方案算是一种可以的,但既然可以这样设计,为何不直接设计一个设置「点击该文档时默认为展开呢。」

    关于这点其实我有必要说明一下我的看法,因为我不懂技术,所以我一直不知道提出一个功能该如何让开发者更好的理解,也不知道提出的功能会不会在技术上较难实行。所以我索性不去想技术,专注提出功能特性和使用场景。

    也正因为如此,我说“既然可以这样设计,为何不直接设计一个设置「点击该文档时默认为展开呢。」”有点类似何不食肉糜的话。

    我自然是想说能不能像文件夹结构那样,点击一下就展开,然后点击我所需要的文档,像语雀那样,提供「新建文档」或「新建分组」。

    因为我不懂开发,所以说话显得比较无知,也导致思源开源,让程序员朋友们不仅能够提出功能建议,更能修改、提交代码的方式去实行的时候,而我却没这个实力,说话也有些“何不食肉糜”


    这个展开按钮的区域确实会随着文档层级的加深而变大,但是我依旧会出现误触到展开按钮边缘的情况出现,又或者点击到**「修改图标」**的按钮,误触一次就难受一次。

    image.png

    不知道能不能看清,我总是会误触到绿色框图中很边缘的,不属于按钮所在的位置。(也许这和我鼠标灵敏度高有关系)

    所以我在对这个痛点进行阐述并建议的时候,下意识的忽略对这个令我难受的展开按钮优化的方向。

    但话又说回来,在现有的设计下,双击文档我也会误触,但展开按钮确实是一种比双击文档效率更高的使用习惯,所以我会有意识的培养,谢谢你的建议:)

    1 回复
  • RenaEmiya

    误触展开按钮外的部分是个问题嗷…

    不过解决起来应该不困难,改改 css 文件,把边缘弄得尽可能小应该就好了…

    不知道有没有人有时间搞,或者有没有其他解决方案 😂