列表侧边竖线改进

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

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

思源:

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

  • 思源笔记

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

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

    25034 引用 • 103147 回帖 • 1 关注

相关帖子

欢迎来到这里!

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

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

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

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

    @88250

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

    @Vanessa

    2 操作
    Naro 在 2021-10-12 09:57:37 更新了该回帖
    Naro 在 2021-10-12 06:49:36 更新了该回帖
    快捷键可在帮助文档中查看。
    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
  • 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
  • 查看全部回帖

推荐标签 标签

  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3196 引用 • 8215 回帖
  • 区块链

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

    92 引用 • 752 回帖
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端,也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。

    23 引用 • 32 回帖 • 5 关注
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    34 引用 • 467 回帖 • 761 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 387 关注
  • SVN

    SVN 是 Subversion 的简称,是一个开放源代码的版本控制系统,相较于 RCS、CVS,它采用了分支管理系统,它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 689 关注
  • Lute

    Lute 是一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。

    28 引用 • 197 回帖 • 32 关注
  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    325 引用 • 1395 回帖
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言,在 20 世纪 90 年代中期由日本的松本行弘(まつもとゆきひろ/Yukihiro Matsumoto)设计并开发。在 Ruby 社区,松本也被称为马茨(Matz)。

    7 引用 • 31 回帖 • 252 关注
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    181 引用 • 821 回帖
  • Jenkins

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

    54 引用 • 37 回帖
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 53 关注
  • FreeMarker

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

    23 引用 • 20 回帖 • 454 关注
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    200 引用 • 120 回帖
  • Solidity

    Solidity 是一种智能合约高级语言,运行在 [以太坊] 虚拟机(EVM)之上。它的语法接近于 JavaScript,是一种面向对象的语言。

    3 引用 • 18 回帖 • 435 关注
  • BND

    BND(Baidu Netdisk Downloader)是一款图形界面的百度网盘不限速下载器,支持 Windows、Linux 和 Mac,详细介绍请看这里

    107 引用 • 1281 回帖 • 37 关注
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高,单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 101 关注
  • Spark

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

    74 引用 • 46 回帖 • 567 关注
  • Maven

    Maven 是基于项目对象模型(POM)、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    187 引用 • 318 回帖 • 255 关注
  • 友情链接

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

    24 引用 • 373 回帖
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 29 关注
  • AngularJS

    AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 505 关注
  • 知乎

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖 • 1 关注
  • JSON

    JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    52 引用 • 190 回帖
  • ngrok

    ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 647 关注