思源笔记 1.5.5 在小尺寸下 UI 设计的改进建议

本贴最后更新于 458 天前,其中的信息可能已经时异事殊

我会把笔记软件缩小放在屏幕角落里,像便签 App 一样使用。在小的界面下,思源笔记的 UI 设计还能在细节上优化。下面是我的一些想法。

结论是:思源的 Electron App 应该设置最小窗口尺寸,宽 518px,高 411px。这是保证功能的极限。设置界面的 UI 需要多考虑小尺寸的场合。

该多小?

工作生活中,我们常常会打开几个窗口,忙忙碌碌地来来回回操作。通常的操作是,把 App 缩小,扔到屏幕角落里。有时手一抖,App 缩小过头了,软件没了样子,只能颤颤巍巍地拖大窗口。所以 App 的制作者们会给窗口设置“最小窗口尺寸”属性。是一种防呆设计,也是一种边界情况。

把软件拖到最小,用 QQ 截图就能知道软件的大小了。列一个表格:

App 最小界面的尺寸
思源笔记 48 * 39 px
Logseq 136 * 39 px
Obsidian 200 * 150 px
VSCode 400 * 270 px

最直观地是:

image.png

Logseq 似乎不准,这里问题不大。

通常来说,界面的最小尺寸要保证该窗口的核心功能依旧可用。思源和 Logseq 应该没有考虑过这种边缘情况。

笔记软件的最小尺寸时,应该提供什么功能?

  1. 恢复正常。或许是手误,或许只是试探一下,用户希望能变回熟悉的样子。但是此时的思源没有最大化窗口的按钮,也无法移动窗口。
  2. 产品辨识。始终保持住直观地对软件的认知,让人认得出来,这是思源笔记。
  3. 节省显示面积。用户希望尺寸能小,使用场景通常是多个窗口之间查看、操作。
  4. 常用操作。包括粘贴文档、简单排版、常见设置……

下面开始寻找最小尺寸应该设置为何?

最小宽度

为了恢复正常显示,要露出最大化按钮。为了拖动窗口位置,思源笔记需要露出标题栏的字(只有这里能拖动)。得到了最小的宽度 518px。

image.png

但这并不是最佳的,顶部工具栏密密麻麻,可以学习 VSCode,把一些不常用的按钮合并到“更多”按钮。

image.png

做得更极端点是 190px:

image.png

有一个细节,VSCode 的左上角 Logo 可以拖动整个窗口,也能双击最大化,还有右键操作。这是个好设计,如果标题字是空格,那么用户很难找到能拖动窗口的位置,而 Logo 固定在最熟悉的位置。

如果能优化下顶部工具栏,那么最小宽度能更窄,474px——文档编辑时弹出工具条的宽度。

image.png

这个工具条不能折叠显示,如果修改下,能让最小宽度更小。但开发功能劳神费心。这里采用上文提到的,最容易实现的 518px

最小高度

产品辨识的最小尺寸,能基本展示 layout 结构。当思源的竖向空间不足时,窗口右侧会多出滚动条,编辑器右侧也会多出滚动条,同时编辑器底部会有空白。因此,竖向尺寸找到避免滚动条的最小高度。

image.png

试验下来,最小高度为 411px。

我试着找了下这两个滚动条的原因。外侧的是因为左停靠栏的 5 个按钮撑起。内侧是因为 WYSIWYG 编辑器的右侧有虚拟滚动条的按钮。

最理想的高度是 284px,正好显示 5 个停靠栏按钮。但又会牵扯到虚拟滚动条的设计与实现,牵一发动全身。总之最小高度只能是 411px

设置界面

拿着刚刚的最小尺寸 540*411px ,我们试着模拟日常操作。文档树、关系图、搜索、双栏都可用。但设置界面里的排版错位就太多了。

纵向排版

image.png

image.png

首先,右上角的出现了两个关闭按钮,一个是关闭设置模态窗的,一个是关闭整个软件的。但此时点击它没有任何反应,模态窗、思源软件都不会关闭。

上面两图,一个文本框、一个按钮,都是固定宽度,有个 fn_size200 的 CSS 类。在小宽度下,会过分挤压说明文字的宽度,让它挤成了一柱擎天。

解决方法之一是,说明和控件,在小尺寸下换成上下分布,而不是左右分栏。请观察 Logseq,它甚至会把 标签-二级设置窗 也上下分布(思源不必做到,518px 够宽)。

image.png

image.png

如今很多公司的 App,会把 “label、description、控件” 上下排布,这样容易做响应式。

解决方法之二是,加个滚动条。这容易实现,VSCode 也是这么处理:

image.png

复选框

搜索的二级设置页。这里我建议换成 复选框组件,而不是开关。同一个话题下的“选择”一部分功能,传统上就是用复选框。小尺寸下响应式地减少每行数量。

image.png

min-width

账号设置页已经面目全非,修改起来太难了,建议设置 min-width 再加滚动条。

image.png

总结

谢谢各位大佬制作出的思源笔记,它很优秀,很全面。一些边缘情况可能没有精力考虑到,我也是一家之言。518*411px 对部分人来说,还是不够小,所以需要更多用户表达观点,是否可行。

设置窗口的响应式 UI 改进,我十分希望能否实现。

2022 年 12 月 27 日

  • 思源笔记

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

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

    18150 引用 • 66977 回帖 • 1 关注

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...