面包屑样式改进提议

本贴最后更新于 1149 天前,其中的信息可能已经时移世易

目前面包屑的展示样式存在一些问题,其中一个很明显的问题在 引用块悬浮窗的问题 帖子中有提到。

而且思源的面包屑在不同地方的面包屑显示逻辑也不同,有的地方会换行有的地方不会换行,我认为有必要做一下统一与改进。

思源目前面包屑的设计可以总结为:单节点缩略显示 + 面包屑完全显示 + 有时候换行有时候不换行

和其他软件的面包屑样式进行对比:

roam research 中是:单节点完全显示 + 面包屑完全显示 + 换行

image.png

roam research 这种设计的优势在于可以显示最完整的面包屑上文,缺点在于当面包屑很长时会占据顶端位置,缩减了正文页面大小

logseq 中是:单节点完全显示 + 面包屑中间缩略显示(保留文档名 + 当前聚焦点往上三个层级)+ 换行

image.png

logseq 这种设计的优势就是解决了 roam 面包屑的缺点,缺点也就是缺少了 roam 面包屑可以显示完整上文的优势。

如果要 roam research 的设计和 logseq 的设计中选一个的话,我倾向于 logseq 的设计,因为更可控,roam research 有可能导致面包屑爆炸直接占满半个屏幕。

或许还可以结合 roam research 和 logseq 两者的优点:在默认情况下和 logseq 类似,然后用户点击面包屑上面的省略号时,将展示完整的面包屑。这样能糅合两者的优点,同时避免了缺点。

  • 思源笔记

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

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

    26357 引用 • 109605 回帖
1 操作
fangly 在 2022-05-23 00:25:02 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • yjmsiyuan 1 赞同

    111111(限定数字,多少可选)>222222>333333>444444>555555>

    666666666666666666666(不限定)》7777777777777

    1 回复
  • fangly

    这思路也不错,相当于单节点中间缩略显示(保留文档名 + 保留当前聚焦点往上 3 个层级的单节点 + 其他缩略显示)+ 面包屑完全显示 + 换行

    2 操作
    fangly 在 2022-05-23 12:03:29 更新了该回帖
    fangly 在 2022-05-23 11:37:30 更新了该回帖
  • 感谢反馈,我先改一版你品品,不满意再来 trollface Issue #4982 · siyuan-note/siyuan

    5 回复
  • fangly 1 1 评论

    2.0.12 的逻辑是单节点固定 7 字符长度缩略显示 + 面包屑完全显示 + 换行 + 滚动条,目前感觉挺不错

    目前还有一个问题是,无法判断某个节点是否缩略,我觉得可以在缩略的节点后加一个点来表示缩略

    image.png

    类似于在钉住的标签页上加点:

    image.png

    还有一个问题是,当鼠标浮在面包屑非块标位置时,最好显示该位置对应的全文而不是缩略内容,不然这个悬浮就没有意义了:

    image.png

    1 操作
    fangly 在 2022-05-23 17:03:30 更新了该回帖
    感谢反馈,下个版本继续改进 Issue #4989 · siyuan-note/siyuan
    Vanessa
  • fangly 3 评论

    针对 2.0.13 的面包屑样式的一些建议,主要关于哪些要缩略,哪些不要缩略:

    image.png

    我觉得原先 2.0.12 的面包屑样式的逻辑就挺不错的,感觉比 2.0.13 好,也比我上面这张图上讲的逻辑要好。因为有了滚动条,不用担心 roam research 设计中可能出现的面包屑占了半个屏幕的问题,没必要让面包屑中间的这些节点都缩略到长度为 1,2.0.12 的“除了浮窗面包屑中的文档路径,其他所有节点统一最大长度为 7”这种逻辑我认为是合适的。

    我觉得可以回到类似 2.0.12 的逻辑

    同时,可以提高 面包屑鼠标悬浮文字显示 的速度,现在貌似大概要 1 秒,可以更快一点,一放上去马上显示,因为鼠标放在面包屑的非块标的地方,用户的意图要么是想悬浮文字显示完整内容,要么是想点击聚焦,一放上去马上显示 不会对用户差生干扰

    4 操作
    fangly 在 2022-05-26 01:27:04 更新了该回帖
    fangly 在 2022-05-26 01:25:56 更新了该回帖
    fangly 在 2022-05-26 01:18:27 更新了该回帖
    fangly 在 2022-05-26 01:17:07 更新了该回帖
    这个缩略是逐个计算的,如果高度大于 2 行就缩略。按照你的描述,是否把缩略的 1 个字换成 7 个字即可?
    Vanessa
    @Vanessa 不止是这个,目前面包屑中第一个节点和最后的几个节点在高度大于 2 行缩略时,会缩略到大概 40 个字,这个我觉得没啥必要,在图中我也说明了原因。所有节点在缩略时的策略应当是相同的,没有哪几个节点是有特权的(主要是要设计特权比较麻烦,logseq 和思源在面包屑设计上还是有很多不同的,直接照搬不太行, 2.0.13 这种逻辑没有太大意义)
    fangly
    @fangly 呃,没太明白。
    Vanessa
  • fangly 5 评论

    举个例子,比如下面这张图中,我框起来的这几个也可以改成缩略到 7 个字,现在全部显示意义不大,比如像图中最后两个“00000000000000000000”,我光标就在这个位置,我直接在文档正文中看就好了,面包屑上又把我光标所在的内容全部显示出来了,比较冗余,看面包屑绝大多数情况是为了看上文,当前块没必要在面包屑中完全显示

    image.png

    我大概明白了,就是该 1 个字的还是 1 个字,否则就是 7 个字?
    Vanessa
    @Vanessa 我觉得这里面 1 个字的也应该变成 7 个字,因为有滚动条,没必要缩略到 1 个字。换句话说,我建议是 2.0.12 的缩略逻辑 +2.0.13 的动态计算,超过一行了就开始缩略,从左往右逐个缩到 7 个字
    fangly
    @fangly 12 版本是固定的 7 个字,然后缩略为一个字。现在就是保持现状不变,缩略的时候变为 7 个字? Issue #5019 · siyuan-note/siyuan
    Vanessa
    @Vanessa 感觉有点说不太清楚,2.0.14 出来后再体验看看吧trollface
    fangly
    @fangly 👌
    Vanessa
  • LiulangZ

    辛苦反馈建议!

  • fangly 1 评论

    补充一个点,如果是只有一行横向滚动的话,还需要考虑定位的问题,也就是说面包屑要自动滚动到最右边(也不一定要是最右边,可以再研究一下),保障面包屑中能显示当前光标所在的块

    IDE 的面包屑应该都有类似这种定位逻辑(我用的 vscode 是这样的),或许可以参考一下它们的逻辑

    IDE 居然不会滚。做的时候想了一下,当时没想好,现在也没想好。
    Vanessa
  • fangly 1

    我用的 vscode 里面会滚动的,或许可以参考下:

    temp242.gif

请输入回帖内容 ...

推荐标签 标签

  • 招聘

    哪里都缺人,哪里都不缺人。

    188 引用 • 1057 回帖
  • DevOps

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

    59 引用 • 25 回帖 • 3 关注
  • abitmean

    有点意思就行了

    35 关注
  • OpenShift

    红帽提供的 PaaS 云,支持多种编程语言,为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 662 关注
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器,详细介绍请看 将 Java Swing 应用变成 Web 应用

    1 引用 • 15 回帖 • 642 关注
  • 持续集成

    持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。

    15 引用 • 7 回帖
  • iOS

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

    89 引用 • 150 回帖 • 4 关注
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 649 关注
  • Shell

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

    125 引用 • 74 回帖
  • Anytype
    3 引用 • 31 回帖 • 28 关注
  • Sandbox

    如果帖子标签含有 Sandbox ,则该帖子会被视为“测试帖”,主要用于测试社区功能,排查 bug 等,该标签下内容不定期进行清理。

    441 引用 • 1238 回帖 • 598 关注
  • Maven

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

    188 引用 • 319 回帖 • 237 关注
  • Spring

    Spring 是一个开源框架,是于 2003 年兴起的一个轻量级的 Java 开发框架,由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构,分层架构允许使用者选择使用哪一个组件,同时为 JavaEE 应用程序开发提供集成的框架。

    947 引用 • 1460 回帖
  • LaTeX

    LaTeX(音译“拉泰赫”)是一种基于 ΤΕΧ 的排版系统,由美国计算机学家莱斯利·兰伯特(Leslie Lamport)在 20 世纪 80 年代初期开发,利用这种格式,即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能,能在几天,甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式,这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    12 引用 • 59 回帖
  • JetBrains

    JetBrains 是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄国的圣彼得堡及美国麻州波士顿都设有办公室,该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境:IntelliJ IDEA

    18 引用 • 54 回帖
  • GAE

    Google App Engine(GAE)是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 826 关注
  • CodeMirror
    2 引用 • 17 回帖 • 173 关注
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    134 引用 • 1127 回帖 • 109 关注
  • 酷鸟浏览器

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

    3 引用 • 59 回帖 • 52 关注
  • 倾城之链
    23 引用 • 66 回帖 • 167 关注
  • JRebel

    JRebel 是一款 Java 虚拟机插件,它使得 Java 程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 682 关注
  • PWL

    组织简介

    用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织,“用爱发电”象征开源与贡献精神,加入组织,代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入:用爱发电组织邀请帖
    用爱发电组织官网:https://programmingwithlove.stackoverflow.wiki/

    用爱发电组织的核心驱动力:

    • 遵守开源守则,体现开源&贡献精神:以分享为目的,拒绝非法牟利。
    • 自我保护:使用适当的 License 保护自己的原创作品。
    • 尊重他人:不以各种理由、各种漏洞进行未经允许的抄袭、散播、洩露;以礼相待,尊重所有对社区做出贡献的开发者;通过他人的分享习得知识,要留下足迹,表示感谢。
    • 热爱编程、热爱学习:加入组织,热爱编程是首当其要的。我们欢迎热爱讨论、分享、提问的朋友,也同样欢迎默默成就的朋友。
    • 倾听:正确并恳切对待、处理问题与建议,及时修复开源项目的 Bug ,及时与反馈者沟通。不抬杠、不无视、不辱骂。
    • 平视:不诋毁、轻视、嘲讽其他开发者,主动提出建议、施以帮助,以和谐为本。只要他人肯努力,你也可能会被昔日小看的人所超越,所以请保持谦虚。
    • 乐观且活跃:你的努力决定了你的高度。不要放弃,多年后回头俯瞰,才会发现自己已经成就往日所仰望的水平。积极地将项目开源,帮助他人学习、改进,自己也会获得相应的提升、成就与成就感。
    1 引用 • 487 回帖 • 4 关注
  • MongoDB

    MongoDB(来自于英文单词“Humongous”,中文含义为“庞大”)是一个基于分布式文件存储的数据库,由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。它支持的数据结构非常松散,是类似 JSON 的 BSON 格式,因此可以存储比较复杂的数据类型。

    91 引用 • 59 回帖
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统,是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议,并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。

    955 引用 • 944 回帖
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖 • 1 关注
  • JVM

    JVM(Java Virtual Machine)Java 虚拟机是一个微型操作系统,有自己的硬件构架体系,还有相应的指令系统。能够识别 Java 独特的 .class 文件(字节码),能够将这些文件中的信息读取出来,使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖 • 1 关注
  • 旅游

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

    100 引用 • 905 回帖