1.8.7 折叠小三角的位置问题

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

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

image.png

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

image.png

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

image.png

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

  • 思源笔记

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

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

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

推荐标签 标签

  • 生活

    生活是指人类生存过程中的各项活动的总和,范畴较广,一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1454 回帖 • 1 关注
  • 音乐

    你听到信仰的声音了么?

    61 引用 • 511 回帖
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年,是中国的 IT 社区和服务平台,为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖
  • danl
    146 关注
  • ngrok

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

    7 引用 • 63 回帖 • 627 关注
  • 锤子科技

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

    4 引用 • 31 回帖
  • 域名

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

    43 引用 • 208 回帖
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据。 这种动作(网页浏览,搜索和其他用户的行动)是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    36 引用 • 35 回帖
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    76 引用 • 1737 回帖
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器,在 1999 年被捐献给 ASF(Apache Software Foundation),隶属于 Jakarta 项目,现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范,同时也提供 HTTP 服务,是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖 • 4 关注
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 667 关注
  • Webswing

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

    1 引用 • 15 回帖 • 637 关注
  • Gzip

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

    9 引用 • 12 回帖 • 147 关注
  • 智能合约

    智能合约(Smart contract)是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易,这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖 • 2 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 106 关注
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时,提供更无缝的用户体验。

    1 引用 • 2 回帖 • 53 关注
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库,专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 76 关注
  • 百度

    百度(Nasdaq:BIDU)是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 164 关注
  • Oracle

    Oracle(甲骨文)公司,全称甲骨文股份有限公司(甲骨文软件系统有限公司),是全球最大的企业级软件公司,总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年,甲骨文已超越 IBM,成为继 Microsoft 后全球第二大软件公司。

    105 引用 • 127 回帖 • 370 关注
  • Lute

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

    26 引用 • 196 回帖 • 17 关注
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    178 引用 • 997 回帖
  • QQ

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

    45 引用 • 557 回帖 • 44 关注
  • JRebel

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

    26 引用 • 78 回帖 • 672 关注
  • RIP

    愿逝者安息!

    8 引用 • 92 回帖 • 363 关注
  • InfluxDB

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

    2 引用 • 76 关注
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 536 关注
  • OnlyOffice
    4 引用 • 3 关注