tl;dr 加入 disabled 的菜单项目样式。右键菜单调整。设置美化。
菜单
菜单会在与用户与其交互时显示其选项，从而在 App 或游戏中以高效利用空间的方式呈现命令。
上面的“苹果人机交互指南”的要点：
- 上下文菜单 不 显示键盘快捷键。因为它已经提供了可快速执行任务特定操作的方式。
- 清晰简洁的描述性标签
- 可发起操作的菜单项，使用描述操作的动词或动词短语，如拷贝、共享 App 或关闭。
- 可切换属性或状态的菜单项的状态，表明其当前的状态。
- 需要用户提供额外信息才能完成操作时，菜单项的标签后附加省略号（…）。
- 向用户表明不可用的菜单项。变暗显示，不响应交互。如果某个菜单的所有菜单项都不可用，请确保该菜单本身仍保持可用，以便用户可以将其打开并了解其所包含的命令。
HIG 是产品设计的教科书，值得重视。
快捷键一条，苹果要求全局的菜单栏里加入快捷键提示，同时制定一套标准快捷键，所以快捷键提示可以省略。思源并不符合这些条件，还是保留现状吧。figma 腾讯文档等 web app 也有快捷键提示。
菜单项标签名称
编辑器，块的弹出菜单“复制”下的子菜单繁杂。或许可以这样改：
最常见的“复制、剪切、粘贴、删除”合并到一行，新的苹果微软操作系统也这么设计了。
“带子标题和下方块”合并到子菜单里。
“复制”与“复制为”区分开。“复制为”去除了很多，ID、文本、路径……，它们应该有更明确地提示复制的内容，于是加入了“详细…”的弹出窗口，里面包含几个标签页：
这个弹出窗的按钮都需要 tooltip，提示快捷键。
排序
思源的文件树排序的名称很繁复，可以模仿 mac os：
升序、降序按照最常见的自动选择。用户实在要特殊排序的，放“更多”的弹出窗里，像 excel。
省略号
大致来说，有弹出窗的菜单项，其名称末尾都要加…。例如：文件树里的“文件历史”、布局保存、闪卡管理等等。请逐一排查。
添加 disabled 样式
如果一个菜单项目，点击后只有个提示：请先 xxx，这让用户有挫败感。最好直接菜单里禁止点击。
上图中的几个菜单项，不可用时，应该改为 disabled 样式。同时加上 tooltip，告诉原因。
还有很多：微信提醒、收集箱、同步……
父菜单项是 disabled，子菜单可以展开，它们全是 disabled 样式。
隐藏菜单项并不好
例子是标签栏：
只有一个标签时，隐藏了“关闭其他”等 4 个按钮。更好的做法是 Google Chrome 这样：
单标签时，把“关闭其他”等菜单项 disabled。菜单项目忽多忽少，不容易记忆，也不容易让用户发现新功能：打开菜单，原来还有这些功能！
上文“复制”的菜单项名称里，父块会多 3 个“复制 标题及下方块”等，子块没有这个菜单项。也该 disabled。
可以 disable 的按钮
按钮不可用时，也应该换成禁用效果。
上图“未找到相关内容”，那么删除按钮应该不可用。
增加功能
在编辑器里，不选中文字，右键菜单是这些：
我认为可以更丰富些，加入上文块“下拉菜单”的功能：
- “复制 剪切 删除”块
- 复制引用
- 起始插入行
- 末尾插入行
- 聚焦
- 折叠
- 块信息…
还可以加“此处插入”，子菜单就是按下 / 键弹出的内容。
设置
思源现在的设计像 iPhone 的系统设置，所有自带 app 都从《设置》里调整。思源的 Alt + P 就是苹果的“设置”。但思源的设置内容太多，新人经常不知道有哪些设置项，就在群里、论坛里提出“初级问题”。要设计得更容易些。
增加入口
在用到某功能时，弹出设置页。而不是让用户先研究完设置页，再用某功能。研究太难了！
例如：
导出功能
思源原本采用多级菜单。
可以改成“弹出窗口”。点击“导出…”菜单项后，弹出这个窗口：
文档树设置
文档树面板的“更多按钮”下拉菜单里加入“文档树设置…”
闪卡设置
闪卡管理界面加入“闪卡设置…”按钮。
排版
设计圈有个“米勒定律”，人的工作记忆有限，所以页面里若有大量元素需要分组。此外，思源的设置里标题、副标题文案多有重复，可精简。
举例：外观
示例图做得很粗糙，意思到了就够。这张图的细节：
- 左侧导航栏分组，与文本编辑最相关的一组“基础”、联网的一组“服务”、剩下的一组“管理”。
- 主题选择模仿了某些应用商店。大量使用封面图。点击封面图就打开详细页。
- 封面图所在的卡片，可以右击，弹出：
- 下载更多 或 更多 按钮，打开相关的集市页：
- 在“已下载”的卡片上右键，弹出“详细，使用，仓库，打赏，删除，置顶，更新，冻结版本，举报，评分”菜单。在详细页里也有相关功能。
举例：编辑器
我还做了编辑器设置的示范，按照简短、分段的原则排版：
历史记录部分不用文本框，而是下拉选择，避免用户填写离谱的数字。最后添加“恢复默认”的按钮。
举例：搜索
搜索页主要把“开关”组件换成“复选框”。开关的含义是：立即执行变化。它应该是种行为，通常是动词。搜索页面这里更符合“多选”的意思。
同理，Ctrl + P 搜索里的搜索类型过滤也应该是复选框。
下图制作是粗糙的示例：
为了走向世界，需要把“语言”“无障碍”放到设置里左侧导航栏里，与“编辑器”“AI”等等同等级。同时要提高作者信息、版权信息、用户协议等的优先级，放到“关于”页的顶部。
使用前端框架
我试着阅读思源的代码，很困难。若要贡献代码，必须熟悉思源全部的 css 类（思源频繁用 document.querySelector 找元素），各组件的源码（没有测试、文档，只能啃源码），也要时刻留意全局对象 window.siyuan 的变化。
我在使用思源笔记时，遇到一些问题：切换主题、图标、语言、暗黑模式、Google Analatics 等会刷新网页，会中断插件的后台任务。可以不刷新吗？
关于界面，我还有很多想法，可这里太小，写不下 😋 。
如果 V 姐能迁移到前端框架，有文档、有测试，就能大幅降低我们贡献代码的难度，上面的麻烦也会轻松很多。
不用框架，往往是担心太臃肿。但有太多成功例子（Logseq, Roam Editor, FlowUs, Wolai, Notion, Figma 等全用了 React)。如果担心性能，那只在界面上用框架，Vditor 这个核心仍旧手写 Dom，两全其美。
用了框架，就有一套风格统一的组件库，这利好插件作者。
V 姐若是支持迁移，我也会参与其中，不过水平差请见谅 🙈 。
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于