列表侧边竖线改进

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

思源:

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
    订阅者 作者

    看了一下 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 更新了该回帖
  • 其他回帖
  • Naro

    主要还是样式太糙,太难看了,并不是侧边线要不要涵盖子级块的问题:

    image.png

    现在的侧边线是接续的太严实,一点缓和的空隙都没有,而且样式还有改进空间,所以看起来不好看!

    image.png

  • deerain 3 评论
    支持者 订阅者

    @Vanessa

    思源 v1.4.1:

    image.png

    workflowy:

    image.png

    roam research

    image.png

    大纲编辑器都是根据有没有子节点来决定有没有竖线的,现在 v1.4.1 的逻辑好像是下面有同级节点就会产生竖线,这样会搞出很多种比较丑的形状,像下面这张图里的 5 9 7 就跟被列表块孤立了一样,视觉上完全丧失了列表的结构性

    image.png

    1 回复
    连线要不要向上补长都是小问题,真正的问题是我这层里提到的
    deerain
    @deerain “有没有子节点来决定有没有竖线”这个是 wolai 的逻辑;其他的大纲软件或者说 1.4.0 之前思源的逻辑要更加简单粗暴,判断列表块有无父列表,有就在这个列表块左边加竖线,在 1.2.0 之前的远古版本自己改 css 加竖线也是用的这个逻辑。1.4.1 的竖线逻辑是错误的这个基本已经是共识了,但现在其实面临两个选择,一个是直接回退到 1.4.0 之前思源的逻辑或者说其他的大纲软件的逻辑,另一个是改成 wolai 的逻辑,我之前帖子没有表述清楚,可能有点误导,我刚刚又改了一下。
    fangly
    @fangly 这个选择题用 css 有个更统一的描述:到底该给什么样的元素加上 border-left?加在父列表上或加在子列表上都可以做出跟 1.4.0 一样的宏观表现,但是加在父列表上比较方便调整长度,这里 border-left 改短似乎是比改长好弄一点,要是 V 姐觉得两种都好改那就没有区别了。
    deerain
  • Naro

    NoNo,你体验的太少了。当列表块编辑结束了,你确定你要马上回到上一级?没有同子级的其它内容了?比如段落块、代码块、数学公式块、网页标签块……而 shift+Tab 方便做的事,为什么还要再占用一个同样的功能操作策略呢?冗余的同时,路都走窄了,两次回车成一个段落块,一是因为它常用,二是因为它敲命令变成其它块方便。可以说他就是无格式的纯小白,任你调教!

    你操作操作这种就知道了,列表块编辑完了,还有其它的:

    image.png

    1 回复
  • 查看全部回帖