列表侧边竖线改进

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

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

思源:

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

  • 思源笔记

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

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

    20651 引用 • 80726 回帖 • 1 关注

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 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
  • 其他回帖
  • crowds21 1 评论

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

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

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

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

    image.png

    1 回复
  • Naro 1 评论

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

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

    @88250

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

    @Vanessa

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

推荐标签 标签

  • gRpc
    11 引用 • 9 回帖 • 51 关注
  • Redis

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

    285 引用 • 248 回帖 • 105 关注
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 605 关注
  • Scala

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

    13 引用 • 11 回帖 • 115 关注
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖 • 1 关注
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言,应用广泛。C++ 支持多种编程范式,面向对象编程、泛型编程和过程化编程。

    106 引用 • 152 回帖 • 3 关注
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 525 关注
  • Ubuntu

    Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的 Linux 操作系统,其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词,意思是“人性”、“我的存在是因为大家的存在”,是非洲传统的一种价值观,类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    123 引用 • 168 回帖
  • SSL

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

    70 引用 • 193 回帖 • 461 关注
  • Latke

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

    70 引用 • 533 回帖 • 747 关注
  • Typecho

    Typecho 是一款博客程序,它在 GPLv2 许可证下发行,基于 PHP 构建,可以运行在各种平台上,支持多种数据库(MySQL、PostgreSQL、SQLite)。

    12 引用 • 65 回帖 • 456 关注
  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 383 回帖 • 2 关注
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。

    20 引用 • 23 回帖 • 717 关注
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations,简称 DJI),成立于 2006 年,是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商,客户遍布全球 100 多个国家。通过持续的创新,大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖
  • Lute

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

    25 引用 • 191 回帖 • 21 关注
  • H2

    H2 是一个开源的嵌入式数据库引擎,采用 Java 语言编写,不受平台的限制,同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式,可以兼容一些主流的数据库,因此采用 H2 作为开发期的数据库非常方便。

    11 引用 • 54 回帖 • 651 关注
  • 区块链

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

    91 引用 • 751 回帖
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目,是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台,为开发者提供便利的 API 接口来调用服务,让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 458 关注
  • Elasticsearch

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

    116 引用 • 99 回帖 • 247 关注
  • 友情链接

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

    24 引用 • 373 回帖
  • 尊园地产

    昆明尊园房地产经纪有限公司,即:Kunming Zunyuan Property Agency Company Limited(简称“尊园地产”)于 2007 年 6 月开始筹备,2007 年 8 月 18 日正式成立,注册资本 200 万元,公司性质为股份经纪有限公司,主营业务为:代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 716 关注
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架,它对 JDBC 进行了非常轻量级的对象封装,使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 705 关注
  • 互联网

    互联网(Internet),又称网际网络,或音译因特网、英特网。互联网始于 1969 年美国的阿帕网,是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连,形成逻辑上的单一巨大国际网络。

    98 引用 • 344 回帖
  • 锤子科技

    锤子科技(Smartisan)成立于 2012 年 5 月,是一家制造移动互联网终端设备的公司,公司的使命是用完美主义的工匠精神,打造用户体验一流的数码消费类产品(智能手机为主),改善人们的生活质量。

    4 引用 • 31 回帖
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。

    21 引用 • 140 回帖 • 2 关注
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    337 引用 • 1751 回帖
  • Shell

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

    122 引用 • 73 回帖