列表侧边竖线改进

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

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

思源:

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

  • 思源笔记

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

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

    22357 引用 • 89471 回帖 • 1 关注

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 等大家充分讨论完,我们再决定改进方向。

  • 其他回帖
  • Naro

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

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

    image.png

    1 回复
  • 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 评论

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

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

    @88250

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

    @Vanessa

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

推荐标签 标签

  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 660 关注
  • 微软

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

    8 引用 • 44 回帖 • 1 关注
  • Scala

    Scala 是一门多范式的编程语言,集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 130 关注
  • SSL

    SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 431 关注
  • Love2D

    Love2D 是一个开源的, 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 530 关注
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    123 引用 • 74 回帖
  • 智能合约

    智能合约(Smart contract)是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易,这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖 • 5 关注
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    90 引用 • 899 回帖 • 1 关注
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    209 引用 • 358 回帖
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis,2010 年这个项目由 Apache 软件基金会迁移到了 google code,并且改名为 MyBatis ,2013 年 11 月再次迁移到了 GitHub。

    170 引用 • 414 回帖 • 386 关注
  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 588 回帖
  • golang

    Go 语言是 Google 推出的一种全新的编程语言,可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克(Rob Pike)说:我们之所以开发 Go,是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    497 引用 • 1387 回帖 • 283 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 30 关注
  • Quicker

    Quicker 您的指尖工具箱!操作更少,收获更多!

    32 引用 • 131 回帖 • 2 关注
  • 设计模式

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

    200 引用 • 120 回帖
  • API

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

    77 引用 • 430 回帖 • 1 关注
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库,专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 62 关注
  • Solidity

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

    3 引用 • 18 回帖 • 398 关注
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    266 引用 • 665 回帖 • 1 关注
  • Electron

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

    15 引用 • 136 回帖
  • Google

    Google(Google Inc.,NASDAQ:GOOG)是一家美国上市公司(公有股份公司),于 1998 年 9 月 7 日以私有股份公司的形式创立,设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”,它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎,它提供了简单易用的免费服务。不作恶(Don't be evil)是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖 • 1 关注
  • 宕机

    宕机,多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态,也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态,也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 52 关注
  • 爬虫

    网络爬虫(Spider、Crawler),是一种按照一定的规则,自动地抓取万维网信息的程序。

    106 引用 • 275 回帖
  • Flutter

    Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作,它正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖
  • 创业

    你比 99% 的人都优秀么?

    84 引用 • 1399 回帖
  • 职场

    找到自己的位置,萌新烦恼少。

    127 引用 • 1705 回帖
  • 百度

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

    63 引用 • 785 回帖 • 177 关注