列表侧边竖线改进

本贴最后更新于 1168 天前,其中的信息可能已经渤澥桑田

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

思源:

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

  • 思源笔记

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

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

    23014 引用 • 92572 回帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • Naro 1 评论

    那你一定是没见过之前这样的:

    QQ 截图 20211008202057.png

    半包裹,半不包裹的!

    不过现在改进后仍有不足的地方,甚至可以说是 Bug

    Snipaste20211009234959.png

    1 回复
    1 操作
    Naro 在 2021-10-09 23:54:03 更新了该回帖
    老实说,为什么不直接用文档式书写呢,非要把文档的结构搬到大纲来。思源的标题可以折叠,不是更舒服 。这样书写,又不能折叠列表下的段落块,不难受吗
    Achuan-2 4 赞同
  • 视觉效果极差

    b5da7d6dc6292375bf0ae3e824fc7fe.png

  • Naro

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

    image.png

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

    image.png

  • fangly 1 评论

    你这个确实是属于比较特殊的情况,因为在其他大纲软件中无法实现你的这种排版。

    所以说我觉得优化方向应该是:

    • 普通的排版就按照以前的方法,也就是说在列表中不搞子段落块,按照标准的大纲方式书写时,按照以前的方法,也就是其他大纲软件的设计
    • 对于特殊的排版,比如你的这种,进行特殊化的设计
    不用特殊设计,主要是美化不行,你看我下一个图,思路一样,效果呈现天差地别
    Naro
  • 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

    这没有子级块,要什么侧边线啊,一个子级块都没有!

  • Naro

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

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

    image.png

    1 回复
  • 关注一下这个帖子,更新完之后,确实没有办法看了。trollface

  • 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
  • 感谢反馈,改粗糙了,下个版本继续改进。

    2 回复
  • 等大家充分讨论完,我们再决定改进方向。

  • 两次回车回到上一级是很常用的操作,我也已经习惯了这套操作。

    列表侧竖线抄个作业是比较稳的,因为有这些大纲软件背书,这些大纲软件的用户也习惯了这套逻辑。

    感叹句 roam research 里面这个竖线还有这个功能,看起来真不错啊。

    1 回复
  • Achuan-2 3 赞同

    思源也抄一抄 rr 的功能吧!

  • crowds21 1 评论

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

    H1
    |    H2
    |    ----------
    |    ----------
    |    |    H3
    |    |    --------
    |    |    --------
    |    H2
    H1
    --------
    --------
    
    
    之前试着用 CSS 实现类似的效果,结果无限套娃,不更改 Html 标签的组织方式就弄不成
    crowds21
  • Osiris 1 赞同 3 评论

    既然出了侧边竖线的改进,那希望能顺便把侧边竖线和分割线分成两个样式。我想把分割线调粗一点,结果发现只能改所有线的颜色。还是说我没有找到合适的修改位置?

    分割线指的是?
    Vanessa
    @Vanessa 是指输入 --- 生成的分割线吧,除了在思源里幻灯片模式下会进行页面切割没觉得有什么用,也许有人会做视觉上的调整
    Randir
    @Randir 确实是这个线。我有时用它来表示一下内容的分割。
    Osiris
  • deerain 1 评论

    这里 2 3 两个节点都没有子级,这根竖线没必要存在

    image.png

    1 操作
    deerain 在 2021-10-10 12:00:03 更新了该回帖
    然后 1 和 4 下面需要?
    Vanessa
  • 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
  • rr 的做法感觉非常有吸引力,如果能增加这层快捷收起的功能就太好了。

    原先的版本应该就是和 workflowy 一样吧,所以说唐突修改竖线难道是因为前两天群里有个人说段落前面空白感觉很怪???

    1 回复
  • Kitsuta

    我写的层级比较多,反正我是觉得连线这种方式整体的结构更清晰

  • lvaveh 2 赞同

    感觉 rr 那个显示当前列表路径那个功能很不戳trollface

  • 支持,现在同级下的竖线确实很丑

  • Vanessa 1 1 赞同 2 评论

    这样如何?

    image.png

    我觉得挺不错。就是相邻层级间的间距是不是太大了,就是 1 和 11 之间的水平距离,或者说相邻竖线之间的水平距离,好像比之前版本要大了。 顺带一提,默认的垂直距离也有点大,就比如说 12 和 13 之间的垂直距离,差不多是其他大纲软件的两倍多了,现在看着列表觉得整体上很松散,我觉得可以仿照其他大纲软件比如 workflowy 的间距设计调整一下水平间距和垂直间距。
    fangly
    @fangly 感谢建议,UI 后期优化。
    Vanessa
  • Naro 1 评论

    回到软件操作,我觉得回车 +backspace 生成子段落,写完这个子段落后回车仍然是子段落,在空的子段落中回车回到父列表节点(也就是写完最后一段后回车两次回到父列表节点中)

    这个赞同,有这种效果,就把光标是否停留在子级给区分开了,回车后用不着再删一次。

    我发帖长篇累牍的,说的一直是这个意思,虽然有其他设计理念上的交流,但这个引文中说的操作是小改动,能提升不少效率。只不过跟 V 姐讨论的时候,太绕了,我都晕 😂 。

    表述方式不一样,有时候会觉得冲突,但其实不冲突的。我从「是否进入列表子级」的角度提的改进操作,但是不被采纳,现在想再嵌入多个子级块,总需要删掉父级列表标记。

    原来的表述方式:

    image.png

    之前讨论的:

    QQ 截图 20211009203052.png

    image.png

    @88250 @Vanessa

    1 回复
    1 操作
    Naro 在 2021-10-12 06:48:56 更新了该回帖
    “现在思源的操作方式就是这种,很麻烦”这个不对吧,在你的例子中,现在只要一个回车就能生成一个和 2 同级的列表项,在 wolai 中的操作方式才是这种。还有我觉得有必要提醒你一下,你的使用方式并不是主流的列表使用方式,这是造成你与 V 姐讨论绕来绕去很难说清楚的根本原因,建议尝试使用一下 workflowy、roam research、remnote、logseq、幕布等主流大纲笔记软件体验一下常规的列表用法,思源在列表上的操作和这些软件是基本一致的,思源从 1.2.0 开始就是按照 workflowy 进行列表操作的改进的,大部分用户的使用习惯也都是和 workflowy 类似的,因此虽然思源在列表中的子段落块操作上确实有一点不便,但大部分人用不到这个,所以从 1.2.0 到现在四五个月的时间,你是第一个提出这个操作需求的用户。常规的列表使用方式强调层级逻辑,会把你的子段落块全部变成子列表项,你的这种排版更适合使用标题来划分层级,也就是把“提炼核心内容”作为一个标题,下面的内容直接放在标题下面。
    fangly
  • Naro 1 评论

    新版本 1.4.2 改进后好多了,但是还有问题,侧边线裂开了:

    image.png

    测试了一下,对齐问题有待改进:

    image.png

    image.png

    image.png

    @88250

    2 操作
    Naro 在 2021-10-12 07:35:15 更新了该回帖
    Naro 在 2021-10-12 07:31:45 更新了该回帖
    感谢反馈,下个版本修复
    Vanessa
  • Naro 1 评论

    增加快捷收起的话,那就很强了,完爆 woLai,全然囊括了幕布等大纲笔记优点。

    wolai 快捷收起是单独设计了一个折叠块的,嵌套的时候样式不如时下的大纲笔记。

    @88250

    收到 V 姐回复,但进行收起的时候还是发现一个问题:

    @Vanessa

    2 操作
    Naro 在 2021-10-12 09:57:37 更新了该回帖
    Naro 在 2021-10-12 06:49:36 更新了该回帖
    快捷键可在帮助文档中查看。
    Vanessa
  • Vanessa 1 赞同

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

    image.png

请输入回帖内容 ...

推荐标签 标签

  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点;但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中,从而不再需要读写 HDFS,因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 559 关注
  • 百度

    百度(Nasdaq:BIDU)是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 164 关注
  • 微软

    微软是一家美国跨国科技公司,也是世界 PC 软件开发的先导,由比尔·盖茨与保罗·艾伦创办于 1975 年,公司总部设立在华盛顿州的雷德蒙德(Redmond,邻近西雅图)。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖
  • 友情链接

    确认过眼神后的灵魂连接,站在链在!

    24 引用 • 373 回帖
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    12 引用 • 54 回帖 • 159 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 7 关注
  • 电影

    这是一个不能说的秘密。

    121 引用 • 604 回帖 • 1 关注
  • 微服务

    微服务架构是一种架构模式,它提倡将单一应用划分成一组小的服务。服务之间互相协调,互相配合,为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建,能够被独立的部署。

    96 引用 • 155 回帖
  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 464 关注
  • Swift

    Swift 是苹果于 2014 年 WWDC(苹果开发者大会)发布的开发语言,可与 Objective-C 共同运行于 Mac OS 和 iOS 平台,用于搭建基于苹果平台的应用程序。

    36 引用 • 37 回帖 • 535 关注
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 161 关注
  • CongSec

    本标签主要用于分享网络空间安全专业的学习笔记

    1 引用 • 1 回帖 • 15 关注
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    93 引用 • 113 回帖
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划,本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE,直到 1999 年 Sun 买下此公司。Sun 于次年(2000 年)六月将 NetBeans IDE 开源,直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 683 关注
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时,提供更无缝的用户体验。

    1 引用 • 2 回帖 • 53 关注
  • 工具

    子曰:“工欲善其事,必先利其器。”

    288 引用 • 734 回帖 • 2 关注
  • Unity

    Unity 是由 Unity Technologies 开发的一个让开发者可以轻松创建诸如 2D、3D 多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎。

    25 引用 • 7 回帖 • 159 关注
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发,最早发布于 2014 年 9 月。

    58 引用 • 22 回帖
  • 负能量

    上帝为你关上了一扇门,然后就去睡觉了....努力不一定能成功,但不努力一定很轻松 (° ー °〃)

    88 引用 • 1235 回帖 • 410 关注
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    132 引用 • 1114 回帖 • 125 关注
  • 持续集成

    持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。

    15 引用 • 7 回帖
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    76 引用 • 1737 回帖 • 1 关注
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    53 引用 • 37 回帖 • 3 关注
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    91 引用 • 751 回帖 • 1 关注
  • 自由行
    4 关注
  • API

    应用程序编程接口(Application Programming Interface)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

    77 引用 • 430 回帖 • 1 关注
  • 学习

    “梦想从学习开始,事业从实践起步” —— 习近平

    171 引用 • 512 回帖