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

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

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

该多小？

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

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

最直观地是：

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

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

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

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

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

最小宽度

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

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

做得更极端点是 190px：

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

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

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

最小高度

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

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

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

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

设置界面

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

纵向排版

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

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

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

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

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

复选框

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

min-width

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

总结

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

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

2022 年 12 月 27 日