登录 注册

1.8.7 折叠小三角的位置问题

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

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

image.png

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

image.png

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

image.png

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

  • 思源笔记

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

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

    22020 引用 • 87815 回帖 • 2 关注
1 引用
1， 小三角在列表前面时不显示，仅接触列表时才显示 2. 折叠标题内容时有点迟钝，没列表折叠快，慢很多 • 88250
1 操作
deerain 在 2022-03-05 23:46:06 更新了该帖
3 感谢
1 关注
1 收藏
6 赞同
1 引用
1 操作
14 回帖
3
1.6k 278 251 509 36 27 438

相关帖子

14 回帖
1.8.7 折叠小三角的位置问题

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • fangly • • 2 赞同
    订阅者 先知

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

    temp128.gif

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

    temp129.gif

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

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

    1 回复
    1 操作
    fangly 在 2022-03-06 00:05:43 更新了该回帖
  • mozhu • • 1 评论
    订阅者 付费者 支持者 捐赠者

    第一个问题，可能是主题宽度问题

    image.png

    换成默认主题也是这样，因为我同时开启了左右侧栏，中间编辑器区域一窄块标和小三角就会变成竖排了
    deerain •
  • Vanessa •
    订阅者 付费者 MOD

    三角形一直都显示的话会不会有点不好看？

    4 回复
  • Belf •
    付费者

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

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

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

    image.png

  • abbj • • 1 评论
    订阅者 支持者 勇士

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

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

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

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

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

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

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

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

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

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

  • mozhu • • 1 评论
    订阅者 付费者 支持者 捐赠者

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

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

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

    为了保持一致，标题也是从外观上来进行区别
    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 •
  • szukkboy •
    订阅者 支持者 恶龙

    我的鼠标放在前面，可以自动出现那些图标啊。

    动画.gif

  • mind •

    ScreenShot20220326at9.58.31PM.png

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

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

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

    哇塞，这个建议不错~

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

    希望可以考虑~ @Vanessa

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

近期热议

推荐标签 标签

  • CSDN

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

    14 引用 • 155 回帖 • 1 关注
  • ZooKeeper

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

    59 引用 • 29 回帖 • 3 关注
  • webpack

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

    41 引用 • 130 回帖 • 257 关注
  • 正则表达式

    正则表达式（Regular Expression）使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖 • 1 关注
  • Solidity

    Solidity 是一种智能合约高级语言，运行在 [以太坊] 虚拟机（EVM）之上。它的语法接近于 JavaScript，是一种面向对象的语言。

    3 引用 • 18 回帖 • 383 关注
  • 开源

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

    406 引用 • 3571 回帖
  • TextBundle

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

    1 引用 • 2 回帖 • 45 关注
  • 知乎

    知乎是网络问答社区，连接各行各业的用户。用户分享着彼此的知识、经验和见解，为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 461 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起，它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖
  • Oracle

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

    105 引用 • 127 回帖 • 394 关注
  • SQLite

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

    5 引用 • 7 回帖
  • Ant-Design

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

    17 引用 • 23 回帖
  • Angular

    Angular 是 AngularJS 的新版本。

    26 引用 • 66 回帖 • 533 关注
  • Google

    Google（Google Inc.，NASDAQ：GOOG）是一家美国上市公司（公有股份公司），于 1998 年 9 月 7 日以私有股份公司的形式创立，设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”，它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎，它提供了简单易用的免费服务。不作恶（Don't be evil）是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划，本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE，直到 1999 年 Sun 买下此公司。Sun 于次年（2000 年）六月将 NetBeans IDE 开源，直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 672 关注
  • Laravel

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

    20 引用 • 23 回帖 • 723 关注
  • CentOS

    CentOS（Community Enterprise Operating System）是 Linux 发行版之一，它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码，因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    238 引用 • 224 回帖
  • Webswing

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

    1 引用 • 15 回帖 • 619 关注
  • 倾城之链
    23 引用 • 66 回帖 • 138 关注
  • abitmean

    有点意思就行了

    • 30 关注
  • Typecho

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

    12 引用 • 65 回帖 • 453 关注
  • Solo

    Solo 是一款小而美的开源博客系统，专为程序员设计。Solo 有着非常活跃的社区，可将文章作为帖子推送到社区，来自社区的回帖将作为博客评论进行联动（具体细节请浏览 B3log 构思 - 分布式社区网络）。

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

    1433 引用 • 10052 回帖 • 484 关注
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器，可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API，可通过 DOM，CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 482 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等，它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比，Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 353 关注
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息，资讯有时效性和地域性。

    55 引用 • 85 回帖
  • PWA

    PWA（Progressive Web App）是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术，在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 150 关注

最新标签