思源笔记 electron 界面改进:菜单、设置

本贴最后更新于 324 天前,其中的信息可能已经事过景迁

tl;dr 加入 disabled 的菜单项目样式。右键菜单调整。设置美化。

菜单

菜单会在与用户与其交互时显示其选项,从而在 App 或游戏中以高效利用空间的方式呈现命令。

Human Interface Guidelines

上面的“苹果人机交互指南”的要点:

  1. 上下文菜单 显示键盘快捷键。因为它已经提供了可快速执行任务特定操作的方式。
  2. 清晰简洁的描述性标签
    • 可发起操作的菜单项,使用描述操作的动词或动词短语,如拷贝共享 App关闭
    • 可切换属性或状态的菜单项的状态,表明其当前的状态。
  3. 需要用户提供额外信息才能完成操作时,菜单项的标签后附加省略号(…)。
  4. 向用户表明不可用的菜单项。变暗显示,不响应交互。如果某个菜单的所有菜单项都不可用,请确保该菜单本身仍保持可用,以便用户可以将其打开并了解其所包含的命令。

HIG 是产品设计的教科书,值得重视。

快捷键一条,苹果要求全局的菜单栏里加入快捷键提示,同时制定一套标准快捷键,所以快捷键提示可以省略。思源并不符合这些条件,还是保留现状吧。figma 腾讯文档等 web app 也有快捷键提示。

菜单项标签名称

编辑器,块的弹出菜单“复制”下的子菜单繁杂。或许可以这样改:

image.png

最常见的“复制、剪切、粘贴、删除”合并到一行,新的苹果微软操作系统也这么设计了。

“带子标题和下方块”合并到子菜单里。

“复制”与“复制为”区分开。“复制为”去除了很多,ID、文本、路径……,它们应该有更明确地提示复制的内容,于是加入了“详细…”的弹出窗口,里面包含几个标签页:

image.png

这个弹出窗的按钮都需要 tooltip,提示快捷键。

排序

思源的文件树排序的名称很繁复,可以模仿 mac os:

image.png

升序、降序按照最常见的自动选择。用户实在要特殊排序的,放“更多”的弹出窗里,像 excel。

省略号

大致来说,有弹出窗的菜单项,其名称末尾都要加…。例如:文件树里的“文件历史”、布局保存、闪卡管理等等。请逐一排查。

添加 disabled 样式

如果一个菜单项目,点击后只有个提示:请先 xxx,这让用户有挫败感。最好直接菜单里禁止点击。

image.png

上图中的几个菜单项,不可用时,应该改为 disabled 样式。同时加上 tooltip,告诉原因。

还有很多:微信提醒、收集箱、同步……

父菜单项是 disabled,子菜单可以展开,它们全是 disabled 样式。

隐藏菜单项并不好

例子是标签栏:

image.png

只有一个标签时,隐藏了“关闭其他”等 4 个按钮。更好的做法是 Google Chrome 这样:

image.png

单标签时,把“关闭其他”等菜单项 disabled。菜单项目忽多忽少,不容易记忆,也不容易让用户发现新功能:打开菜单,原来还有这些功能!

上文“复制”的菜单项名称里,父块会多 3 个“复制 标题及下方块”等,子块没有这个菜单项。也该 disabled。

可以 disable 的按钮

按钮不可用时,也应该换成禁用效果。

image.png

上图“未找到相关内容”,那么删除按钮应该不可用。

增加功能

在编辑器里,不选中文字,右键菜单是这些:

image.png

我认为可以更丰富些,加入上文块“下拉菜单”的功能:

  • “复制 剪切 删除”块
  • 复制引用
  • 起始插入行
  • 末尾插入行
  • 聚焦
  • 折叠
  • 块信息…

还可以加“此处插入”,子菜单就是按下 / 键弹出的内容。

设置

思源现在的设计像 iPhone 的系统设置,所有自带 app 都从《设置》里调整。思源的 Alt + P 就是苹果的“设置”。但思源的设置内容太多,新人经常不知道有哪些设置项,就在群里、论坛里提出“初级问题”。要设计得更容易些。

增加入口

在用到某功能时,弹出设置页。而不是让用户先研究完设置页,再用某功能。研究太难了!

例如:

导出功能

思源原本采用多级菜单。

image.png

可以改成“弹出窗口”。点击“导出…”菜单项后,弹出这个窗口:

image.png

文档树设置

文档树面板的“更多按钮”下拉菜单里加入“文档树设置…”

闪卡设置

闪卡管理界面加入“闪卡设置…”按钮。

排版

设计圈有个“米勒定律”,人的工作记忆有限,所以页面里若有大量元素需要分组。此外,思源的设置里标题、副标题文案多有重复,可精简。

举例:外观

image.png

示例图做得很粗糙,意思到了就够。这张图的细节:

  • 左侧导航栏分组,与文本编辑最相关的一组“基础”、联网的一组“服务”、剩下的一组“管理”。
  • 主题选择模仿了某些应用商店。大量使用封面图。点击封面图就打开详细页。
  • 封面图所在的卡片,可以右击,弹出:
  • image.png
  • 下载更多 或 更多 按钮,打开相关的集市页:
  • image.png
  • 在“已下载”的卡片上右键,弹出“详细,使用,仓库,打赏,删除,置顶,更新,冻结版本,举报,评分”菜单。在详细页里也有相关功能。

举例:编辑器

我还做了编辑器设置的示范,按照简短、分段的原则排版:

image.png

历史记录部分不用文本框,而是下拉选择,避免用户填写离谱的数字。最后添加“恢复默认”的按钮。

举例:搜索

搜索页主要把“开关”组件换成“复选框”。开关的含义是:立即执行变化。它应该是种行为,通常是动词。搜索页面这里更符合“多选”的意思。

同理,Ctrl + P 搜索里的搜索类型过滤也应该是复选框。

下图制作是粗糙的示例:

image.png


为了走向世界,需要把“语言”“无障碍”放到设置里左侧导航栏里,与“编辑器”“AI”等等同等级。同时要提高作者信息、版权信息、用户协议等的优先级,放到“关于”页的顶部。

使用前端框架

我试着阅读思源的代码,很困难。若要贡献代码,必须熟悉思源全部的 css 类(思源频繁用 document.querySelector 找元素),各组件的源码(没有测试、文档,只能啃源码),也要时刻留意全局对象 window.siyuan 的变化。

我在使用思源笔记时,遇到一些问题:切换主题、图标、语言、暗黑模式、Google Analatics 等会刷新网页,会中断插件的后台任务。可以不刷新吗?

关于界面,我还有很多想法,可这里太小,写不下 😋 。

如果 V 姐能迁移到前端框架,有文档、有测试,就能大幅降低我们贡献代码的难度,上面的麻烦也会轻松很多。

不用框架,往往是担心太臃肿。但有太多成功例子(Logseq, Roam Editor, FlowUs, Wolai, Notion, Figma 等全用了 React)。如果担心性能,那只在界面上用框架,Vditor 这个核心仍旧手写 Dom,两全其美。

用了框架,就有一套风格统一的组件库,这利好插件作者。

V 姐若是支持迁移,我也会参与其中,不过水平差请见谅 🙈 。

  • 思源笔记

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

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

    19639 引用 • 75015 回帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 进 QQ 群:1017854502 吧,跟我们一起讨论思源技术问题和建议。

  • 很厉害的设计见解。学习到了~~
    关于前端框架,我也同意作者的观点,如果使用 vue,react 这些前端框架,应该不仅可以提升一些开发效率,也方便我们这些菜鸟前端贡献代码,例如上述说的,有些按钮,如果不可用,设置为 disable,并且附加 tooltip 提示,这种比较细枝末节的优化工作,如果有框架的话,大家修改起来会比较容易上手。但是思源都开发到这个份上了,切换到框架的话会不会有些困难。。
    UI 其实可以搞一套自己的 UI 库,方便开发者作者们使用,也能一定程度上保证各个主题,挂件,插件等风格统一,减少 bug,但是,emmm,开发者只有俩人,估计不太现实了

  • 关于用不用框架的问题,讨论过多次。我印象里 V 的观点是框架缺乏稳定性,而不是人数之类的问题。现在开发者社区里用 Vue 和 Svelte 的比较多,Svelte 好几个热门插件有使用

  • 别的不说,我个人倒是希望在空间够的时候都显示快捷键呢.有时候不记得快捷键了可以直接看一下

    1 回复
  • 有想法,有设计的大佬希望多多给思源提出意见,甚至是可直接去 git 上提问题,D 大会更关注,

  • 看到了你的建议,已经做了快捷键插件,可以从右下角直接点击显示快捷键面板方便查看了

  • 确实,看了前端源码几眼,我这个半桶水前端已经没办法看下去了 😭

请输入回帖内容 ...