列表侧边竖线改进

目前改进之后的效果非常奇怪

思源:

image.png

workflowy:

image.png

我觉得这部分还是直接使用大纲软件的设计比较好,贸然自己设计一套和大纲软件不同的逻辑有很大风险,比如可以参考 workflowy 的设计。

其他的大纲软件以及 1.4.0 之前思源的竖线逻辑很简单,1.20 之前用 css 自己加竖线也是用同样的原则,对于一个列表块,如果不是第一级(等价于有父列表),就在左边加上竖线。类似这样:

.vditor ul ol,
.vditor ol ol,
.vditor ul ul,
.vditor ol ul {
    border-left: 1px solid rgba(19, 18, 18, 0.2);
    margin-left: -0.93em !important;
    padding-left: 2.5em !important;
}

还有这条线除了优化视觉外,它的真实语义是什么,个人认为其中一个语义是包裹子列表,从 roam research 的这个功能中就可以看出这层语义:

test63.gif

而思源现在的设计中,这条竖线失去了这层语义。

换个角度,这条线其实可以等价于下面图片中的大括号:

image.png

image.png

总的来说,对于竖线的实现逻辑有两种:

一种是按照其他的大纲软件或者说 1.4.0 之前思源的竖线逻辑,判断列表块有无父列表,有的话在列表块左边加竖线。

另一种是 wolai 的逻辑,判断列表项有无子列表,有的话从这一个列表项的圆点开始向下延伸,直到这一个列表项结束。

由于思源中有子段落块,和大纲软件有一点不同,所以可能还是按照判断列表项有无子列表来好一点点,更加统一。

其他大纲软件以及思源 1.4.0 之前:

image.png

wolai:

image.png

再补充一个 roam research 在列表上的设计供参考,roam research 中可以把当前列表项在列表中的路径非常清晰地显示出来:

image.png

广告 我要投放

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • fangly 3 赞同 1 评论
    订阅者 作者

    只能说使用方式不同,你按照 wolai 的逻辑用思源的列表,我按照大纲软件的逻辑用思源的列表。我确实能确定我要马上回到上一级,没有同子级的其它内容了,你说的这些我全部都会放在子列表中,所有大纲软件都是这种逻辑。两次回车成一个段落块你觉得常用,我是几乎用不到的。你可能以前用惯了 wolai 之类的,大纲软件的逻辑全部都是按照思源这样的。 而且,这不能叫做冗余的操作,两次回车回到上一级在大纲软件中是非常常用的操作。 我也可以说两次回车生成子段落块是冗余的操作,因为回车 +backspace 也能达到同样的效果。无非一种是第二个回车=shift+tab,另一种是第二个回车=backspace

    你举的这个例子,按照大纲软件的逻辑要么使用软换行认为是同一个块的内容,要么使用子列表说明是子层级。

    你强调美观,所以你会这样排版:

    image.png

    我强调逻辑,所以我会这样排版:

    image.png

    不同人的思维方式和习惯确实有很大差别。

    回到软件操作,我觉得回车 +backspace 生成子段落,写完这个子段落后回车仍然是子段落,在空的子段落中回车回到父列表节点(也就是写完最后一段后回车两次回到父列表节点中)。这种操作我觉得比较合适,对你来说,只是把最开始的回车 + 回车换成回车 +backspace,后面的换段操作和 wolai 相同,最后想从段落中跳回父列表,wolai 中操作就比较麻烦,思源只需要两次回车就好,整体操作上还是顺畅的。

    更何况,wolai 中想要生成子段落块,需要回车 +tab+ 回车/backspace,比我上面所说的操作还要麻烦。两次回车生成的并不是你想要的子段落块,而是上一级的段落块。思源现在在从列表项到生成第一个子段落块上的操作比 wolai 要方便。

    对于没有子段落的标准大纲的操作,还是学习“大纲软件之神”workflowy 比较好,不容易受到别人的质疑。

    1 回复
    4 操作
    fangly 在 2021-10-10 02:19:01 更新了该回帖
    fangly 在 2021-10-10 02:15:39 更新了该回帖
    fangly 在 2021-10-10 01:51:18 更新了该回帖
    fangly 在 2021-10-10 01:41:36 更新了该回帖
    支持你的观点! 大纲就用大纲结构,文档就用文档结构
    Achuan-2
  • 其他回帖
  • fangly
    订阅者 作者

    看了一下 wolai 的设计,感觉模仿 wolai 的列表设计也行。

    我猜 Naro 兄弟在另一个帖子中所说的需求就是 wolai 中的列表设计吧,但 wolai 的列表中有一个我觉得不方便的设计,就是在列表项末端回车两次后是变成子段落块,而在标准大纲软件中回车两次,第二次回车相当于 shift+tab。个人认为这里还是按照大纲软件来比较好,回车 +backspace 生成子段落块,然后写了一些内容之后的回车可以按照 Naro 兄弟所说的生成子段落块(子段落块中没写内容直接又按回车应该是生成同级节点)。

    1 回复
    2 操作
    fangly 在 2021-10-10 00:51:04 更新了该回帖
    fangly 在 2021-10-10 00:45:52 更新了该回帖
  • Vanessa 1 赞同
    订阅者

    感觉你是需要在列表项里面创建多个块,然后不想每次创建一个块就多按一次删除键。这样的话可以如图在 aaaa 下方创建一个空块,然后把光标移动到 aaaa 后回车,这样回车产生的就永远都是同级段落块了。

    image.png

  • crowds21 1 评论
    订阅者

    干脆出一个大纲浏览模式算了. 一个大标题就整体缩进一下.trollface 省的列表项嵌套有时候还有各种乱七八遭问题.D 大天天优化也累.

    H1
    |    H2
    |    ----------
    |    ----------
    |    |    H3
    |    |    --------
    |    |    --------
    |    H2
    H1
    --------
    --------
    
    
    之前试着用 CSS 实现类似的效果,结果无限套娃,不更改 Html 标签的组织方式就弄不成
    crowds21
  • 查看全部回帖