列表侧边竖线改进

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

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

思源:

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

  • 思源笔记

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

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

    20156 引用 • 77721 回帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • Vanessa 1 1 赞同 2 评论

    这样如何?

    image.png

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

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

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

    image.png

    1 回复
  • Naro 1 评论

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

    QQ 截图 20211008202057.png

    半包裹,半不包裹的!

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

    Snipaste20211009234959.png

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

推荐标签 标签

  • DevOps

    DevOps(Development 和 Operations 的组合词)是一组过程、方法与系统的统称,用于促进开发(应用程序/软件工程)、技术运营和质量保障(QA)部门之间的沟通、协作与整合。

    45 引用 • 25 回帖 • 1 关注
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    7017 引用 • 31715 回帖 • 220 关注
  • 知乎

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

    10 引用 • 66 回帖
  • 链书

    链书(Chainbook)是 B3log 开源社区提供的区块链纸质书交易平台,通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书,我们共同构建这个全新的交易平台,让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线,也许以后还有计划重制上线。

    14 引用 • 257 回帖 • 1 关注
  • IBM

    IBM(国际商业机器公司)或万国商业机器公司,简称 IBM(International Business Machines Corporation),总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国,是全球最大的信息技术和业务解决方案公司,拥有全球雇员 30 多万人,业务遍及 160 多个国家和地区。

    16 引用 • 53 回帖 • 130 关注
  • 小薇

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

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

    34 引用 • 467 回帖 • 712 关注
  • Electron

    Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖 • 6 关注
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库,并提供多种语言的 API。从 2010 年 3 月 15 日起,Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始,Redis 的开发由 Pivotal 赞助。

    284 引用 • 248 回帖 • 123 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库。节点(Nodes)在图中表示数学操作,图中的线(edges)则表示在节点间相互联系的多维数据数组,即张量(tensor)。

    20 引用 • 19 回帖 • 1 关注
  • API

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

    76 引用 • 429 回帖
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于 RESTful 接口。Elasticsearch 是用 Java 开发的,并作为 Apache 许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便。

    116 引用 • 99 回帖 • 250 关注
  • V2Ray
    1 引用 • 15 回帖 • 2 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具,支持本地 Markdown 文件编辑,支持双向链接和关系图。

    A second brain, for you, forever.

    10 引用 • 88 回帖
  • 链滴

    链滴是一个记录生活的地方。

    记录生活,连接点滴

    143 引用 • 3752 回帖
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    70 引用 • 533 回帖 • 735 关注
  • 人工智能

    人工智能(Artificial Intelligence)是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    77 引用 • 159 回帖
  • LeetCode

    LeetCode(力扣)是一个全球极客挚爱的高质量技术成长平台,想要学习和提升专业能力从这里开始,充足技术干货等你来啃,轻松拿下 Dream Offer!

    209 引用 • 72 回帖
  • ngrok

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

    7 引用 • 63 回帖 • 613 关注
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统,它完整实现了 JMS 规范,是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 641 关注
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。

    54 引用 • 85 回帖
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态;标准是由主流手机厂商组成的快应用联盟联合制定;快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖 • 1 关注
  • 新人

    让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
    新手上路,请谨慎驾驶!

    51 引用 • 226 回帖
  • Openfire

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

    6 引用 • 7 回帖 • 94 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    713 引用 • 1174 回帖 • 104 关注
  • Docker

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的操作系统上。容器完全使用沙箱机制,几乎没有性能开销,可以很容易地在机器和数据中心中运行。

    483 引用 • 906 回帖
  • PHP

    PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。

    165 引用 • 407 回帖 • 509 关注
  • Jenkins

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

    51 引用 • 37 回帖 • 3 关注