列表侧边竖线改进

本贴最后更新于 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 引用 • 77717 回帖

相关帖子

欢迎来到这里!

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

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

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

    分割线指的是?
    Vanessa
    @Vanessa 是指输入 --- 生成的分割线吧,除了在思源里幻灯片模式下会进行页面切割没觉得有什么用,也许有人会做视觉上的调整
    Randir
    @Randir 确实是这个线。我有时用它来表示一下内容的分割。
    Osiris
  • 其他回帖
  • 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
  • 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
  • 查看全部回帖

推荐标签 标签

  • OAuth

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

    36 引用 • 103 回帖 • 16 关注
  • golang

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

    495 引用 • 1386 回帖 • 329 关注
  • 人工智能

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

    77 引用 • 159 回帖
  • OpenStack

    OpenStack 是一个云操作系统,通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成,同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 5 关注
  • BND

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

    107 引用 • 1281 回帖 • 29 关注
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流,分享无限上传的图片,发布链接和视频,更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 458 关注
  • SQLite

    SQLite 是一个进程内的库,实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    4 引用 • 7 回帖
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”,在线用户由 1999 年的 2 人(马化腾和张志东)到现在已经发展到上亿用户了,在线人数超过一亿,是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 160 关注
  • 反馈

    Communication channel for makers and users.

    124 引用 • 907 回帖 • 223 关注
  • Redis

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

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

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成,还支持通过插件进行扩展。

    10 引用 • 5 回帖
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具,主要功能包括:位置相关的内容递送;用户认证和授权;集中式网络监控。

    1 引用 • 7 回帖 • 561 关注
  • GraphQL

    GraphQL 是一个用于 API 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时(类型系统由你的数据定义)。GraphQL 并没有和任何特定数据库或者存储引擎绑定,而是依靠你现有的代码和数据支撑。

    4 引用 • 3 回帖 • 16 关注
  • 倾城之链
    23 引用 • 66 回帖 • 121 关注
  • 京东

    京东是中国最大的自营式电商企业,2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月,京东在美国纳斯达克证券交易所正式挂牌上市(股票代码:JD),是中国第一个成功赴美上市的大型综合型电商平台,与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 403 关注
  • iOS

    iOS 是由苹果公司开发的移动操作系统,最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统,最初是设计给 iPhone 使用的,后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样,属于类 Unix 的商业操作系统。

    84 引用 • 139 回帖 • 1 关注
  • PHP

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

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

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 724 关注
  • 单点登录

    单点登录(Single Sign On)是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖 • 2 关注
  • Markdown

    Markdown 是一种轻量级标记语言,用户可使用纯文本编辑器来排版文档,最终通过 Markdown 引擎将文档转换为所需格式(比如 HTML、PDF 等)。

    165 引用 • 1474 回帖
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖 • 3 关注
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 149 关注
  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 23 关注
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量,事件及实时分析。

    2 引用 • 55 关注
  • 服务器

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

    124 引用 • 580 回帖
  • 996
    13 引用 • 200 回帖 • 6 关注
  • Latke

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

    70 引用 • 533 回帖 • 735 关注