1.8.7 折叠小三角的位置问题

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

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

image.png

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

image.png

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

image.png

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

  • 思源笔记

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

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

    19811 引用 • 75861 回帖
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
请输入回帖内容 ...

推荐标签 标签

  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    41 引用 • 130 回帖 • 288 关注
  • wolai

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

    2 引用 • 14 回帖 • 1 关注
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用,而且功能强大。你无需专门学习,只需看上几眼,就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 610 关注
  • 创业

    你比 99% 的人都优秀么?

    83 引用 • 1398 回帖
  • Lute

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

    25 引用 • 191 回帖 • 24 关注
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3169 引用 • 8208 回帖
  • Swift

    Swift 是苹果于 2014 年 WWDC(苹果开发者大会)发布的开发语言,可与 Objective-C 共同运行于 Mac OS 和 iOS 平台,用于搭建基于苹果平台的应用程序。

    34 引用 • 37 回帖 • 506 关注
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    332 引用 • 619 回帖
  • API

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

    76 引用 • 429 回帖
  • Python

    Python 是一种面向对象、直译式电脑编程语言,具有近二十年的发展历史,成熟且稳定。它包含了一组完善而且容易理解的标准库,能够轻松完成很多常见的任务。它的语法简捷和清晰,尽量使用无异义的英语单词,与其它大多数程序设计语言使用大括号不一样,它使用缩进来定义语句块。

    536 引用 • 672 回帖
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    34 引用 • 467 回帖 • 711 关注
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    22 引用 • 22 回帖
  • OAuth

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

    36 引用 • 103 回帖 • 11 关注
  • OnlyOffice
    4 引用 • 16 关注
  • SSL

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

    69 引用 • 190 回帖 • 483 关注
  • Sandbox

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

    379 引用 • 1221 回帖 • 589 关注
  • Facebook

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

    4 引用 • 15 回帖 • 455 关注
  • 域名

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

    43 引用 • 208 回帖 • 2 关注
  • Redis

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

    284 引用 • 247 回帖 • 148 关注
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎,可以结合 MySQL、PostgreSQL 做全文搜索,它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索。

    1 引用 • 192 关注
  • 音乐

    你听到信仰的声音了么?

    59 引用 • 510 回帖
  • 反馈

    Communication channel for makers and users.

    124 引用 • 907 回帖 • 209 关注
  • GitHub

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。

    207 引用 • 2031 回帖
  • ZooKeeper

    ZooKeeper 是一个分布式的,开放源码的分布式应用程序协调服务,是 Google 的 Chubby 一个开源的实现,是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件,提供的功能包括:配置维护、域名服务、分布式同步、组服务等。

    59 引用 • 29 回帖 • 18 关注
  • 旅游

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

    86 引用 • 896 回帖
  • BND

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

    107 引用 • 1281 回帖 • 31 关注
  • C++

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

    106 引用 • 152 回帖 • 1 关注