1.8.7 折叠小三角的位置问题

本贴最后更新于 775 天前,其中的信息可能已经天翻地覆

下图中,箭头标出的小三角其实是属于第一个列表项,但是它所在的位置却很难直观感受出这一点:

image.png

另外,块标和小三角都需要鼠标悬浮到内容块上才显示,假设鼠标本来在下图中的 A 位置,经过箭头标出的路径移到 B 位置,块标和小三角都不会显示,而这本来是最符合直觉的鼠标移动路径:

image.png

这样一来,为了点击到小三角,鼠标移动时就不得不走以下两种曲折路径:

image.png

总之感觉这个小三角的交互还有很大优化空间

  • 思源笔记

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

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

    18584 引用 • 69139 回帖 • 1 关注
1 操作
deerain 在 2022-03-05 23:46:06 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • fangly 2 赞同

    像在 workflowy 里面,鼠标放在圆点左边就会显示标志:

    temp128.gif

    而在思源中,鼠标放在圆点左边不会触发任何东西:

    temp129.gif

    这个问题我很早就想提了,但当时我还能凑合用,因为对我来说,面向块标的最高频操作是复制列表项的块引用,而列表项的块标和圆点等价,因此我点击圆点就好,不用绕一圈来显示块标

    现在有了小三角后,和其他软件一对比,交互的别扭就体现得格外明显

    1 回复
    1 操作
    fangly 在 2022-03-06 00:05:43 更新了该回帖
  • 第一个问题,可能是主题宽度问题

    image.png

    换成默认主题也是这样,因为我同时开启了左右侧栏,中间编辑器区域一窄块标和小三角就会变成竖排了
    deerain
  • 三角形一直都显示的话会不会有点不好看?

    4 回复
  • Belf

    关于这个内容我也提一个建议。

    假如我的列表项里嵌套了一个任务项,那这个块的块标会特别多(如下),小三角的位置很气管,也不好操作。都很容易就点错了。

    我一直觉得列表项块和列表块的区分,导致一个块有好几种块类型的情况不是很合理。也就是 D 大以前说的一炮三响的问题,这个我还是觉得需要再考虑,只是我也提不出啥建设性的意见,也是不好意思。

    image.png

  • abbj 1 评论

    感觉被折叠的内容一直显示三角形好一点,可以直观的看出哪些内容是折叠状态的。视觉上可以做些适当弱化,应该也不太影响美观。

    折叠状态可以通过前面的圆点样式来区别
    Vanessa
  • bgt 1 评论

    思源只有鼠标先悬浮在块上左边才会出现块的标志,这个一直感觉有些不方便

    觉得鼠标直接放在左边块标志就出现比较好

    这个容我在想想代码要怎么写
    Vanessa
  • fangly 1 1 赞同 1 评论

    核心问题不在于小三角要不要一直显示吧

    核心问题在于思源里面块标及小三角的触发逻辑,例如现在鼠标放在列表圆点左边不会触发块标及小三角,这是不符合直觉的

    这个问题处理后,下一个问题才是小三角要不要一直显示

    这个容我再想想要怎么实现
    Vanessa
  • yjmsiyuan

    核心问题是鼠标放在列表圆点左边可以触发

  • 有了小三角很不错,希望再优化一下。

    比如标题的折叠,折叠后只是标题大小进行了缩放,希望能参考其他程序,折叠状态下默认显示小三角。

    对于列表项的,可以通过圆点状态这个问题不大。

    为了保持一致,标题也是从外观上来进行区别
    Vanessa
  • p1120 1 评论

    GIF2022313164617.gif

    取消小三角动画是否合理?纯个人感觉,小三角的浮现动画在快速翻阅有大量列表和标题的长文时,有点过于吸引眼球,比较习惯无动画的块表

    感谢反馈,可关注 Issue #4166 · siyuan-note/siyuan
    Vanessa
  • fangly 5 评论

    @Vanessa 帖子中的另一个问题,就是在窄窗口情况下,块标的排列顺序是不是需要修改一下,就是下面这个图中,三个块标的顺序应该颠倒一下更符合逻辑

    image.png

    离圆点最近的应该是小三角,然后是列表项块,最后是列表块,像正常情况下的逻辑就是这样的:

    image.png

    这个整体上移也会有点奇怪,最上面的图标就会和其他块对齐了,这个还要再想想怎么弄。
    Vanessa
    @Vanessa 我的意思不是说整体上移,是说三个块标位置颠倒,小三角和列表块图标交换位置。这样设计的话,想要折叠展开,只需要把鼠标放在圆点旁边就能触发小三角;想要点击或拖动列表项块标,直接点击或拖动圆点是等价的,也很方便;而列表块块标用的次数相比前两者用的次数会少很多,这样设计的话基本就能满足大部分场景了。
    fangly
    @fangly 图标是从上到下,从左到右,如果竖排倒序的话会不会有点奇怪,要不再想想?
    Vanessa
    @Vanessa 按我的想法从下到上的话,相当于把横排的布局逆时针旋转 90 度就是竖排的布局(如果是整体上移就相当于顺时针旋转 90 度);另一种角度看,小三角在横排时是最靠近圆点的,竖排时也最靠近圆点,列表块横排时最远离圆点,竖排时也最远离圆点。我觉得这种是比较符合直观逻辑的,而且用起来更加方便,鼠标放在圆点左边就可以马上折叠展开了。
    fangly
    @fangly 好像很有道理,看看还有没有人有类似的需求 Issue #4374 · siyuan-note/siyuan
    Vanessa
  • 我的鼠标放在前面,可以自动出现那些图标啊。

    动画.gif

  • mind

    ScreenShot20220326at9.58.31PM.png

    这个问题其实和折叠关系很大,目前标题块和列表块折叠后不容易看出有折叠的内容(即使灰圈圆点),小三角是鼠标放上去才显示

    Concise 主题专门对标题块和列表块的折叠做了处理,增加了红色三点提示。其中列表折叠红色三点是换行显示(如图),小三角位置也指向红色三点提示。这样即便是窗口宽度缩小了,折叠后感觉仍然还可以

    1 操作
    mind 在 2022-03-27 14:22:47 更新了该回帖
  • kobi 2 评论

    哇塞,这个建议不错~

    我也想要一直显示折叠的小三角,不然都不知道下面还有内容~ 其他的小三角的颜色可以浅一些,和当前块的父级及以上的小三角有所区分。

    希望可以考虑~ @Vanessa

    我这个回帖中的建议和你所说的建议貌似并不是一个建议😂,我这个回帖中的建议很早之前已经实现了。workflowy 中并不是一直显示折叠的小三角,而是对所有有子列表的列表项显示小三角,无论有没有折叠,只要有子列表都显示小三角
    fangly 1
    @fangly 不好意思,那搞错了,当我没提~😂
    kobi
请输入回帖内容 ...

推荐标签 标签

  • ngrok

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

    7 引用 • 63 回帖 • 596 关注
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    395 引用 • 3408 回帖
  • InfluxDB

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

    2 引用 • 53 关注
  • PWL

    组织简介

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

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

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

    Chrome 又称 Google 浏览器,是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写,包括 WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。

    60 引用 • 287 回帖
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展,它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖 • 4 关注
  • OAuth

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

    36 引用 • 103 回帖 • 7 关注
  • Ubuntu

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

    123 引用 • 168 回帖 • 1 关注
  • 倾城之链
    23 引用 • 66 回帖 • 96 关注
  • Git

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

    205 引用 • 357 回帖
  • PHP

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

    164 引用 • 407 回帖 • 524 关注
  • wolai

    我来 wolai:不仅仅是未来的云端笔记!

    1 引用 • 11 回帖
  • Redis

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

    284 引用 • 247 回帖 • 183 关注
  • QQ

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

    45 引用 • 557 回帖 • 227 关注
  • 域名

    域名(Domain Name),简称域名、网域,是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称,用于在数据传输时标识计算机的电子方位(有时也指地理位置)。

    43 引用 • 208 回帖
  • Sillot

    Sillot (汐洛)孵化自思源笔记,致力于服务智慧新彖乄,具有彖乄驱动、极致优雅、开发者友好的特点
    Github 地址:https://github.com/Hi-Windom/Sillot

    13 引用 • 3 回帖 • 26 关注
  • 链书

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

    链书社

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

    14 引用 • 257 回帖
  • Gzip

    gzip (GNU zip)是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件,它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式,或者说一种文件格式。

    9 引用 • 12 回帖 • 111 关注
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 24 关注
  • LaTeX

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

    9 引用 • 32 回帖 • 169 关注
  • Laravel

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

    19 引用 • 23 回帖 • 680 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 1 关注
  • WiFiDog

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

    1 引用 • 7 回帖 • 547 关注
  • Latke

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

    70 引用 • 532 回帖 • 711 关注
  • Typecho

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

    12 引用 • 60 回帖 • 469 关注
  • 笔记

    好记性不如烂笔头。

    303 引用 • 777 回帖
  • Scala

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

    13 引用 • 11 回帖 • 107 关注