一、术语定义
我们在这个部分不仅介绍了我们的专有名词,还对于项目的整体架构做出了一个“名词性”的描述,方便设计和团队沟通。
概念以树的形式组织,提供中英文双名。这种组织形式要优于表格结构,因为对于不同概念进行了分类细化。使用 Xmind 工具进行记录,这种工具的好处是显然的(有一种说法是敏捷开发对于高效工具的需求是很强的)。
二、概念设计
2.1 Ficus 树(Ficus Tree)
文档内的组织结构。
将以行为最小单位的一段 md 代码转换成一种树形结构,用户可以浏览和编辑这棵树,并且对于 Ficus Tree 的编辑操作会映射到这段 md 代码上。
树的非叶子节点包括:
- 各级标题
- 列表虚拟节点(这是因为在 markdown 中没有像 latex 一样的
itemize
一样的总体结构)
树的叶子节点包括:
- 文本段
- 数学块
- 代码块
- 引用
- 列表
- 表格
需要注意的是,以下 md 实体并不是叶子节点:
- 加粗
- 斜体
- 下划线
- 链接
- 图片
对于 Ficus 树,需要为其生成虚拟根节点,使得树结构一定存在(而不是森林结构)。
对于如下 md 源码
# 一级标题 1
## 二级标题 1
```c
int main(){return 0;}
```
$$ 1 = 1 + 1 $$
### 三级标题 1
一段文字
> 一段引用
## 二级标题 2
- item1
- item2
- item3
# 一级标题 2
生成如下 Ficus 树
需要注意这是一颗有序树,也就是兄弟节点之间是有顺序的。
2.2 Ficus 森林(Ficus Forest)
多个文档构成的一种视图,将每个文档视为一个 Ficus 树,用户可以选择多个文档后进入 Forest。
对于如下两个 md 文档
doc1.md
# 一级标题 1
# 一级标题 2
## 二级标题 1
doc2.md
# 一级标题 1
## 二级标题 1
### 三级标题 1
选择 doc1.md 和 doc2.md 生成 Ficus Forest 的结构如下所示
森林中每棵树的根节点表示文档的路径和文件名信息。他们也可以被称为基座。与后文结合,基座持有 Ficus 的根和柱信息,但是不持有 Ficus 须信息,Ficus 须的信息由文本持有。
2.3 Ficus 图(Ficus Graph)
2.3.1 Ficus 根(Ficus Root)
由文件系统组织起来的 Ficus 关系。一个目录与他目录中的直接内容形成一个关系,与嵌套内容并不形成关系,对于如下目录结构
.
├── dir1
│ ├── doc2.md
│ └── doc3.md
└── doc1.md
应当生成如下结构
2.3.2 Ficus 柱(Ficus Prop)
由单层 tag 组织起来的 Ficus 关系,一个 md 文档可以具有多个 tag。一个 tag 对应一个节点,所有具有该 tag 的文档与这个 tag 节点间都有一条边。可以被看做一种以 tag 为中心的星形图。
在上文中的目录结构,tag 情况如下:
此时的 Ficus 柱(黑线)如图所示,这幅图上同时也展示了 Ficus 根:
2.3.3 Ficus 须(Ficus Aerial)
由拓展 md 语法 [[file_path]]
构建出的关系。这种关系是一种无向的关系,关系的两个端点分别是引用文档和被引用文档。
对于上文的示例,存在引用关系:
那么对应的 Ficus 须的结构如下所示(为图中的绿色线条):
三、典型用户
3.1 B 站知识区 UP 主
姓名 | Miss Wang |
---|---|
年龄 | 26 |
职业 | 英语 UP 主 |
专业 | 英语专业 |
工作生活 | 录制视频给学生讲解英语知识 |
需求 | 英语零碎的知识点不容易成体系,制作 PPT 太过麻烦 |
占比 | 30% |
3.2 高二生物竞赛生
姓名 | 张无雨 |
---|---|
年龄 | 17 |
职业 | 高中学生 |
专业 | 高中生物竞赛生 |
工作生活 | 整理生物笔记备考竞赛 |
需求 | 生物知识过于庞大,盘根错节,难以整理 |
占比 | 15% |
3.3 调研强迫症
姓名 | 秦斯 |
---|---|
年龄 | 22 |
职业 | 大学生 |
专业 | 考古学 |
工作生活 | 在实验室完成写论文综述的任务 |
需求 | 论文之间的联系不容易看出,很难梳理出一个学科的发展脉络 |
占比 | 30% |
3.4 知识博主
姓名 | 郭笑笑 |
---|---|
年龄 | 23 |
职业 | 自由职业 |
专业 | 计算机 |
工作生活 | 在博客上发表自己的知识博客 |
需求 | 博客内容的呈现形式需要反复地斟酌润色 |
占比 | 25% |
四、典型场景
4.1 制作有条理的讲义
今天是天气晴朗的一天,Miss Zhang 打算开始她的工作,,一想到做 PPT 的时候要反复调整各种格式,她就头疼欲裂,学生还经常评论她的网课毫无条理,她感到十分委屈,英语的逻辑性本来就不强,自己已经尽可能地整理出逻辑了。
听她的男朋友说 Ficus 是一款很好用的软件,所以她决定试一试。打开界面后很像一个记事本,她了解到这是一个 markdown 的所见即所得的编辑器,但是她并不知道什么意思。她在写了一些内容后发现可以在导航栏处设置标题,被设置成标题的文字会变黑变大。
“这也和 word 没什么不同啊,只不过不用调整格式了,但是这种文本也没法给学生讲啊”,在她写完后不禁抱怨道。突然她注意到在右边有一个像榕树一样的图标,她尝试点了一下,发现眼前突然出现了这样的场景:
此时她的讲义中的内容完整地展现在她的面前,“原来我是这么平铺直叙的讲述啊,有些东西可以被归为一类的,人家还真是一个笨蛋美人呢”,然后她发现她可以在这个界面似乎可以调整她的结构,她尝试移动一下这些方块,发现是可以更改层次顺序的,就变成了这样
这样果然有条理了很多,而且她决定讲课的时候,就在这个视图下完成了授课,他发现这种树形结构真的超级有条理啊!
结束了授课后,她关掉这个界面打算开始整理讲义,她发现她的讲义已经被调整过了,所有的内容都按照在那个界面里的结构调整过了,所以她只花了很少的时间就完成了讲义的润色。
“我的男朋友真的推荐了一款好的软件啊,今天晚上节省下来的时间,就好好奖励他一下吧”,想到这里,Miss Zhang 嘴角流露出一股媚意,一步一摇地向着那个点起小灯的温暖卧室走去。
4.2 科学备战省赛
今天是天气晴朗的一天,张无雨早早到学校打算开始复习,还有五个月就要省赛了,自己的成绩还是很差。明明知识都是过了一遍的,但是每次遇到做题还是完全想不起来知识点。
“张姑娘,嘛呢?”,张无雨不用回头,就知道后面的那个冒失小子是诚哥。诚哥是班里的第一名,大家都说他是省队的苗子。“我怎么也记不住这些知识,你咋这么聪明啊”,诚哥虽然冒失,但是无雨并不讨厌他。“嗨,人能记忆的东西是有限的,最重要的不是完全记住,而是要记住找到记忆的方法啊”,诚哥俯下身,在草稿纸上画出一个像一棵树一样的结构,“你要把知识组织起来啊,不要让他们成为零碎的知识点,要像树一样组织啊,我推荐你一款软件,叫 Ficus,很好用的”。阳光打过来,张无雨看见了诚哥有点透明的褐色眼睛。
“Ficus 是吗?”张无雨回家下载了这款软件,似乎也没什么不同,她之前就用 markdown 写过笔记,所以直接用 ficus 打开了目录,“这似乎没有什么区别啊?“她发 QQ 问诚哥。“不不不,你看你的笔记,都是平铺的,还说知识点不零散”,无雨看了看,好像确实是这样的,她的笔记是这样的
“那应该是什么样子的呢?“无雨问道。“我教你啊,你可以给每个文章很多个 tag,这样自然而然就有条理了”,就像这样
“可是这样分类虽然检索速度快了,但是感觉还是有些乱啊”,无雨道。
“你可以用 ficus 的‘柱根转换‘功能,把比较稳定的柱转成根,这样你就可以新建很多文件夹,将文档正确归类啦,考试的时候就可以按照根的路径去回想就会很快!最后你的记忆就会被构造成我这样的”,诚哥发过来他的 Ficus 散点图视图,他认真的时候很难把他和那个白天的冒失小子联系起来。
五个月后,诚哥和无雨双双进了省队。
“张姑娘,我的 ficus root 是你啊”。
4.3 梳理研究进展
今天是天气晴朗的一天,秦斯睡了一个懒觉,昨天在实验室整理文献整理到了很晚,可是基本上还是没有成果。论文不断引用其他论文,而其他论文又引用论文,根本看不完啊!一想到这里,秦斯用枕头蒙住了头,根本不想起来。
“秦斯,吃饭啦!”,是王帅博,秦斯的同居男友,“烦死了,老子不吃不吃!”。秦斯一头钻进洗手间,重重地摔上门。
“好好好,都听少奶奶的”,王帅博对于秦斯总是无条件包容的,不过看见秦斯这么焦虑,他也想帮帮秦斯。
“小论文套大论文,大论文套大大论文,我这是读论文,不是诛论文九族!”,在饭桌上,秦斯一边嚼面包一边抱怨。
“要不我帮你做吧”王帅博说“我一直用一款叫做 ficus 的软件,很好用的”。
“就你?”秦斯眯起狐狸眼,王帅博盯着那双狡黠又迷离的眼睛,坚定地说道“:就我”。
。。。
秦斯从实验室回来,刚把靴子放在玄关的鞋柜上,就看见王帅博坐在沙发上捧着电脑看着她。秦斯心头一热,她这个男友,对她总是那么不厌其烦的,自己早上似乎为难他了。她朝帅博走去,边走边把发带从头上扯了下来。
“少奶奶你看,我弄好了”,“什么?你弄好了?”秦斯不相信自己的耳朵,“你是咋弄的”,帅博电脑上的文献都条目清晰的放在不同的文件夹里,而且帅博打开了一张漂亮的图,这个图里有很多密密麻麻的线和节点,他们指示了文档间的联系,有些联系是秦斯完全没有考虑到的。
“这样,用 ficus,把你的论文的引用文献都先用 ficus 须连接起来,然后在利用 ficus 的柱须转换功能,将它们转成 ficus 柱,这样文档间的联系就变得更加容易理解了,最后我利用根柱转换功能帮你整理了一下文件夹。“
后来,秦斯从身上扯下来的,就不止发带了。
4.4 打磨博文
今天是天气晴朗的一天,但是郭笑笑没有心情欣赏,她已经失眠了整整一晚上了。前写日子与一个漂亮的维族小男孩接连成长了好几个夜晚,“像鱼一样滑!”那几天郭笑笑想出了很多的点子。“只是”,笑笑拍了拍自己如烟絮般的头发,“这些东西怎么组织成一篇文章呢?”这个问题成了她失眠的罪魁祸首。
笑笑已经给每个点子都写了一篇 md 文档,但是这些文档很难被组织成一篇博文。
“或许可以试试 ficus”,这是那个小男孩推荐给她的,说是他的大学同学都用 ficus 做笔记。或许,使用这个软件可以找到一些“青春”的气息,就像那几个晚上一样,缪斯女神会再次垂青笑笑。想到这里,笑笑舔了舔嘴角。
用 ficus 打开那些文档,笑笑注意到侧边栏有一个 forest 的按钮,点开后笑笑发现界面上出现了很多的树形结构
或许将他们都放在一起会更好?笑笑拖动了这些树:
不对不对,似乎应当改变一下不同的部分的逻辑关系,笑笑摇了摇头,然后分成两篇文章:
这样似乎就好了,笑笑舔了舔嘴唇,是那种鱼一样的感觉。
五、原型设计
5.1 编辑器交互
编辑器基础页面(古典主题视角):
5.2 界面模块
界面分为 Sidebar、Header、TextArea 三个基础模块。
5.2.1 SideBar
传统的文件资源管理器布局,用于展示当前工作区文件树和当前文件的目录大纲。文件树与目录大纲的树状内容都应当可折叠。双击当前工作区中的文件以将其打开编辑时,默认在当前窗口新建一个标签页,在该标签页中进行编辑。
Sidebar 右侧的白色 SVG 图形应当随着当前工作焦点上下平移,具体而言,在文件树视图下指向当前编辑文件,图形中轴线与文件名对应的 div 矩形区域中轴线重合;在目录大纲视图下指向当前编辑的 Block ,图形中轴线与 Block 对应的 div 矩形区域中轴线重合。
5.2.2 Header
非文本编辑功能的主要功能区,分为深色段和浅色段。
深色段左侧用 面包屑 展示当前编辑文件在工作区中的相对路径。针对一个元素数量为 n 的面包屑,单击面包屑的第 0 ~ n - 1 个元素(即文件夹),应当召出该文件夹下所有的可编辑文件以供点击并快捷访问。
点击面包屑最前端的软件图标,召出软件基础设置菜单栏,类似下图。
基础设置分为以下几个部分:
- 文件
- 新建文件
- 新建窗口
- 打开本地文件
- 打开工作区(选择一个本地文件夹打开,该文件夹及其子孙文件 / 文件夹将作为当前工作区)
- 打开最近文件
- 选择编码重新打开
- 保存
- 另存为
- 保存全部打开的文件
- 关闭当前标签页
- 关闭当前窗口
- 重命名
- 导出文件
- 打印文件
- 打开控制台
- 退出程序
- 编辑
- 撤销
- 重做
- 剪切
- 复制为纯文本
- 复制为 Markdown Text
- 复制为 HTML 代码
- 粘贴
- 粘贴为纯文本
- 搜索
- 提供文章内搜索
- 段落
- 提供快捷插入所有类型 Block 样式的入口
- 格式
- 加粗
- 下划线
- 斜体
- 删除线
- 行内代码
- 代码块
- 行内数学公式
- 数学公式块
- 高亮
- 上标
- 下标
- 注释
- 引用文件
- 超链接
- 图像
- 清除样式
- 视图和布局
- 进入 Ficus 视图
- 源代码模式
- 文本编辑模式
- 主题偏好
- 经典主题
- 暗黑主题
- 其他
- 官方文档
深色段中部提供了文本编辑模式切换滑动按钮,如下图所示。点击 文本模式
进入传统所见即所得窗口,点击 Ficus 模式
进入单文件 Ficus 树视图,点击 源码模式
进入左右分屏式的 Markdown 源码编辑渲染模式。
浅色段主要展示标签页与提供快捷工具。从左到右叙述为:
-
节点树图标:点击将 Sidebar 内容切换为当前文件的内容大纲,粒度为 Block 。
-
添加文件图标:点击在当前文件的同文件夹下创建新文件。
-
添加文件夹图标:点击在当前文件的同文件夹下创建新文件夹。
-
树叶图标:点击进入当前工作区下文件夹和文件的 Ficus 视图。
-
全局搜索栏
- 提供当前工作区下的全局搜索,键入字符串后会在 Sidebar 处展示搜索结果数量和所有符合条件的文件的快捷入口,类似:
- 白色的信息图标:点击查看当前文件的字数统计信息,如下图所示。
- 字符 A 图标:点击切换当前文本的字体风格,有 现代(无衬线字体) 和 古典(衬线字体) 两种风格供选择。
5.2.3 TextArea
正式的文本编辑界面,在此处可以编辑文本,或者展示 / 操作 Ficus 视图。在文本模式中,每一个 Block 前都附有一个自然段图标,鼠标悬浮在 Block 段落前时会显示。
点击该图标可以召出快捷菜单,提供 Block 级的剪切、复制行为和可供选择的 Block 样式,点击对应的样式可以将当前 Block 更改为对应样式的 Block。比如,可以将正文文本段落更改为引用文本段落。(下图为示意图,并非最终设计)
同时,拖拽该图标可以实现不同 Block 之间的顺序关系调整。
5.3 右键快捷交互
本节主要讲解 右键召出快捷菜单 的设置。我们不希望 Ficus 拥有一个类似幕布等软件的,需要用户自行记忆或者配置大量热键组合实现快捷操作的交互模式,我们希望尽可能多地将快捷操作安排在右键菜单、软件 Heading 栏主菜单或者段落前缀 Icon 召出的快捷菜单中。
5.3.1 Sidebar
右键单击 Markdown 文件,菜单栏内容应为:
- 剪切
- 复制
- 在新窗口中打开
- 在新标签页中打开
- 打开文件默认进入文本模式
- Ficus 视图
- 默认新建一个标签页,在该标签页中查看 Ficus 视图
- 重命名
- 提供 Refractor 模式,可以智能更改其在其他文件中的引用
- 在当前位置引用
- 在当前编辑位置创建该文件的文件引用
- 删除
按住 Ctrl 键选择了多个 Markdown 文件后,菜单栏内容应为:
- 剪切
- 复制
- 在新窗口中打开
- 在新标签页中打开
- 打开文件默认进入文本模式
- Ficus 视图
- 默认新建一个标签页,在该标签页中查看这些文件的 Ficus 森林视图
- 重命名
- 提供 Refractor 模式,可以智能更改其在其他文件中的引用
- 在当前位置引用
- 在当前编辑位置创建该文件的文件引用
- 删除
右键单击文件夹,菜单栏内容应为:
- 剪切
- 复制
- 在新窗口中打开
- 默认新建工作区
- Ficus 视图
- 默认新建一个标签页,在该标签页中查看该文件夹下文件的 Ficus 视图
- 重命名
- 删除
按住 Ctrl 键选择了多个文件夹后,菜单栏内容应为:
- 剪切
- 复制
- 在新窗口中打开
- 默认新建工作区
- Ficus 视图
- 默认新建一个标签页,在该标签页中查看这些文件夹构成的 Ficus 视图
- 重命名
- 删除
右键单击 Sidebar 空白处,若当前 Sidebar 内容为文件树,则菜单栏内容应为:
- 新建文件
- 新建文件夹
- 粘贴
- 如果剪贴板内有文件 / 文件夹,则在当前工作区下粘贴
- Ficus 视图
- 点击进入当前工作区下文件夹和文件的 Ficus 视图
- 关闭工作区
- 默认退出软件
右键单击 Sidebar 空白处,若当前 Sidebar 内容为内容大纲,则菜单栏内容应为:
- 新建段落
- 提供快捷插入所有类型 Block 样式的入口
- 默认在当前编辑位置处插入子 Block
- 高亮当前标题
- 折叠所有章节
- 展开所有章节
- 查找
- 提供文章内搜索
5.3.2 Header
主要针对标签页。在标签页处右键单击,菜单栏内容应为:
- 关闭标签页
- 关闭其他标签页
- 固定标签页
5.3.3 TextArea
主要针对文本选择。选中一段文本后,应当在文本边自动展示菜单栏,菜单栏内容应为所有的 格式编辑内容,即:
- 加粗
- 下划线
- 斜体
- 删除线
- 行内代码
- 代码块
- 行内数学公式
- 数学公式块
- 高亮
- 上标
- 下标
- 注释
- 引用文件
- 超链接
- 图像
- 清除样式
菜单栏样式考虑设计为类似下图的横型,更符合用户的交互习惯。
如果选中文本后右键单击,则召出普通的菜单栏:
- 剪切
- 复制
- 粘贴
- 复制 / 粘贴为…
- 纯文本
- Markdown Text
- HTML 文本
- 文档内搜索
5.4 Ficus 图交互
5.4.1 基础交互模式
Ficus 图在 TextArea 区域以一般的导图样式进行展示,在图上方提供缩放和结构选择的菜单栏,如下图所示。
鼠标悬浮于缩放比例数字处时会召出下图所示的滑动条调节画面比例。而图结构则提供了左侧、右侧和星状三种选择。
针对图节点,拖拽图节点可以调节其(具体而言,是以该节点为根节点的子树)在图中的同级顺序关系,也能通过将某节点移动到另一节点后实现父节点的更换。在这里,我们对节点矩形绘图区域进行监视:
- 如果将另一节点移动到上边及以上,认为该节点的顺序变换到了当前节点之前
- 如果将另一节点移动到下边及以下,认为该节点的顺序变换到了当前节点之后
- 如果将另一节点移动到左边及更左 / 右边及更右,认为该节点的顺序变换到了当前节点之后,即变为当前节点的子节点
我们将在有效区域提供高亮,提示用户当前的节点变更行为。
在文件 Ficus 视图的单一节点内,双击节点可以进入文本编辑模式,在该处,一切的交互特性与文本模式下单个 Block 内的交互模式与内容相同,选择文本后的快捷交互内容亦相同。
在文件树 Ficus 视图的单一节点内,双击节点并编辑节点内容的操作将被视为“重命名”。所有的重命名操作都应当符合 Refractor 模式。
5.4.2 快捷交互
此处讨论右键单击节点时召出菜单栏的行为。
在 Ficus 树视图内:
- 右键单击空白处召出菜单栏内容
- 新建基座
- Ficus 森林视图下才有的选项
- 折叠所有节点
- 展开所有节点
- 定位到根节点
- 具体而言,是将根节点位置移动到画面中心,并且将缩放比例变更为 100%
- 新建基座
- 右键单击节点召出菜单栏内容
- 剪切
- 复制
- 粘贴
- 如果剪贴板内为普通文本内容,新建一个样式为正文文本的子 Block ,并将剪贴板内的内容粘贴到子 Block 中
- 如果剪贴板内为图片链接等一般的 Markdown Text ,操作逻辑相同
- 如果剪贴板内为一个 Ficus 节点或者一棵 Ficus 树,则将其直接作为当前 Block 的子节点 / 子树插入
- 如果剪贴板内为普通文本内容,新建一个样式为正文文本的子 Block ,并将剪贴板内的内容粘贴到子 Block 中
- 插入子 Block
- 类似点击文本段落图标时提供的快捷菜单,通过展开二级子菜单提供可供选择的 Block 样式,点击对应的样式可以创建该样式的子 Block
- 更改样式
- 类似点击文本段落图标时提供的快捷菜单,通过展开二级子菜单提供可供选择的 Block 样式,点击对应的样式可以将当前 Block 更改为对应样式的 Block。比如,可以将正文文本段落更改为引用文本段落。
- 删除
- 该操作将删除以当前节点为根节点的子树
- 如果子树中有任何节点与其他节点产生了联系,考虑联合删除
- 该操作将删除以当前节点为根节点的子树
- 展开子节点
- 收缩子节点
在文件树 Ficus 视图内:
- 右键单击空白处召出菜单栏内容
- 折叠所有节点
- 展开所有节点
- 定位到根节点
- 具体而言,是将根节点位置移动到画面中心,并且将缩放比例变更为 100%
- 新增标签
- 新建悬浮的标签节点
- 右键单击 […] 召出的菜单栏内容
- 共性内容
- 剪切
- 复制
- 粘贴
- 如果剪贴板内为一个 Ficus 节点或者一棵 Ficus 树,则将其直接作为当前 Block 的子节点 / 子树插入
- 删除
- 该操作将删除以当前节点为根节点的子树
- 如果子树中有任何节点与其他节点产生了联系,考虑联合删除
- 该操作将删除以当前节点为根节点的子树
- 展开子节点
- 收缩子节点
- 作为文件夹的节点
- 转换为 Ficus 柱
- 插入子节点
- 等同于在该文件夹下新建文件
- 森林视图
- 打开新标签页,进入该文件夹下所有文件构成的森林视图
- 作为标签的节点
- 转换为 Ficus 根
- 作为文件的节点
- 添加标签
- 指示文件引用关系的 Ficus 须
- 解除引用
- 指示标签归属关系的导图边
- 解除引用
- 共性内容
如果用户对 Ficus 的操作不符合功能设计规则,则应当予以报错。
六、Alpha,Beta 阶段划分
划分 Alpha 和 Beta 阶段的标准如下:
- Alpha:
- 架构性的难点技术
- 亟需用户反馈的设计
- 框架技术
- 设计成熟的功能
- Beta:
- 设计不成熟的功能
- 插件式功能
我们决定将功能中的“森林功能”放到 Beta 阶段,同时对于 “图” 功能设计不完善的地方,我们也放到了 Beta 阶段,对于一些“插件式、增强式”的功能,我们也放到了 Beta 阶段。
对于 “树功能”,编辑器基本功能,我们放到 Alpha 阶段实现。
我们给每个任务都创建了 Issue ,同时在 notion 中进行了看板管理:
只有当任务通过测试并关闭 issue 时,看板上的 card 才能进行状态转移,我们采用这种方式保证任务的达标。
七、Beta 阶段补充
7.1 md 编辑完善
7.1.1 悬浮工具栏
- 悬浮工具栏的透明度和间距可能有一些需要调整的地方,我感觉它很妨碍我打字,而且似乎只能悬浮在段首
- 当点击到标题的时候,会出现一个 <ID Alt + Enter> 字样的东西,似乎啥用都没有?
- 悬浮工具栏应当集成最基础的“格式”功能,具体有哪些还需要再设计
7.1.2 渲染美化
似乎 vditor 对于一些渲染的东西,比如说代码块,标签,数学公式之类的,都是采用两个版块用于输入,一个版块用于渲染,然后结束后在只保留一个渲染版块,我对于这种做法没啥厌恶之感,但是目前这两个版块没有被美工优化过,实在是太丑了,具体的表现就是字体很小,输入很不方便,而且还单纯的丑。
7.1.3 图片增强
- 图片应当支持外部的复制粘贴
- base64 似乎并不是一个不好的东西,他可以让图片变成内嵌在 md 文档中的,这种特性或许可以更加方便 这里有解释
7.1.4 数学公式强化
- 交给香老师负责了
- 支持补全
- 支持 snippet
7.1.5 杂项
- 类似于下部光标,上部光标也比较靠上(紧贴着 tab 栏),需要往下调一下
- 源码模式下能不能优化一下源码的美工,现在看着有点土气,和 word 很像,我觉得可以从这几个方面入手,将
#
等限定符加粗一点(其实我局的哪里都需要加粗一点,可能是我被 jetbrain 的字体惯坏了),行间距和字体也需要稍微调整一下。其他的可能还需要调整 - 咱们的文本区感觉还是太窄了,要是能再宽一点就好了
- 在进入列表后,我打了几个以后打算退出列表,我没有办法通过 shift + Tab 的方式退出,实际上我好想没有任何办法退出。
- 目前引用是没有下划线的
- 撤销时光标发生变化,应该记录光标
7.2 榕功能
7.2.1 文档事宜
我的功能文档没有补写完全,导致用户可能没有办法完全理解所有的功能,我打算抽点时间将功能文档补写一下,然后再进行两个方面的补救措施:
- 通知现有用户我们更新了文档。
- 在新的平台进行二次宣发。
其实这么多的文档,要是能发动大家去写文档,通过搭建一个社区平台来完成就更好了。
7.2.2 榕树
- 节点的折叠展开
- 叶子节点的渲染问题
- 目前拖拽操作并不很容易,经常出现难以拖拽的情况
- 第一次没法正确渲染,依然有重叠的问题
- 文本过长,需要截断的问题
- 节点的右键菜单里应该有复制,粘贴,删除
- 节点内容编辑
7.2.3 榕林
- 榕林模式面对的困难是任何具有相对路径的写法在改变位置的时候都会造成混乱
- 如何选择进入榕林模式的多个文档呢?目前规定在同一文件夹下的文档才可以进入榕林模式。那么就需要一个和资源管理器一样的选择器来选择进入榕林的文档。导出。
- 榕林应该也展示 tag,需要将 tag 的信息也也显示在榕林上
7.2.4 榕图
- “数据视图”按钮去掉
- 榕图的边需要时有向的,且是不同的,是可以区分“根、柱、须”的
- 目前的榕图还是太自由粗糙了,要计算出榕图的样式而不是随机生成
- 溢出现象需要解决
7.3 软件完善
7.3.1 备份文件
似乎 word,vim,emacs 都是有一个备份文件,本质上只是对于备份文件的读写,只有再主动要求的时候,才会对最终文件进行读写,这种方式在我们这里合适吗?
7.3.2 更新
- 似乎 github 的 realease 依然维持在 0.1.0,是不是有点难看
- 那个联网更新的问题解决了吗?
7.3.3 打开文件和文件夹
- 应该对着一个 md 文档直接可以用 ficus 打开
- 对着文件夹也应该可以
7.3.4 杂项
- linux 图标依然是原始图标
7.4 UI 完善
7.4.1 逻辑布置
- 经过使用,我个人还是建议在 UI 布局的时候,遵循逻辑合理的原则。
- 比如说对于“文本、榕树、源码”的模式切换,建议还是移入 TextUI 区域,避免逻辑上的混乱
- 对于榕林模式或者榕图模式,都隐藏 tab
- 或许对于快捷键设置、偏好设置、欢迎界面和内置文档,单独占据一个 tab 页
7.4.2 菜单栏
- 目前菜单栏无论是几级的,都是顶端对齐的,我觉得应该和对应的展开项对齐
- logo 菜单栏并不明显,很多用户都不知道可以点开,考虑加一个 hover 效果
- 如果选择了打字机模式,前面应该有一个 √,其他的也类似
- 菜单栏上应该有对应操作的快捷键,参考 typora
- 面包屑的 > 符号太丑了,考虑换一个图片而不是一个字符
7.4.3 侧边栏
- 必须把 sidebar 宽度设置宽一点!!!必须!
- 可以考虑将侧边栏设置成可以调节的
- 悬停在一些只有图标,没有汉字的按钮上,没有汉字的提示(比如说“新建文件夹”,“榕图模式”)之类的。
大纲模式
目前默认侧边栏是资源管理器,但是我觉得或许是大纲模式更加好一些。
资源管理器
- 不需要保留复制、剪切、粘贴功能,需要删除、重命名、复制为路径的功能
- “复制为相对路径”这个操作目前是错的,比如我现在会被复制成
beta/UI完善.md
,但是实际上是./UI完善.md
- 打开文件夹之后的默认状态最好是已经展开工作目录了,不然还需要用户自己去点击
- 在未打开工作目录时,除了“打开文件夹”还应当有“创建文件夹”的按钮
- 应当有复制为引用的功能,或者直接插入引用的功能,不然手敲实在是太麻烦了
- 目前即使一个文件夹是空的,或者里面全是图片,也会在资源管理器中显示,会显得略微有些冗余(但是还没有好的解决办法,或许这是一个可以配置的选项)
引用与被引用
- 改名“榕须管理器”
- 目前点击文档没有跳转功能
- 目前展示的信息还是以文档为单位,要是能看到具体引用的文本就好了
标签管理器
- 目前没有基于标签的搜索功能,即点击一个标签,就出现这个标签对应的所有文档。也就是要另开一个栏目,上面罗列着所有的现有标签
7.4.4 榕图
- 目前的设计感觉还是很杂乱,焦点前进或者后退啥的有一些无厘头,还是删掉吧
- 只是尽力展示当前的焦点的基本信息即可。
- 或许可以在右侧有一个 list 显示图上的所有点和边,然后可以勾选哪些在图上显示。
- 对于文件夹节点,可以修改文件夹名字,有一个转变为 tag 的操作
- 对于 tag 节点,可以修改 tag 名字,有一个可以转变为文件夹的操作
- 对于文件节点,有一个可以展示所以可达须的列表,并可以将其转变为一个 tag
7.4.5 内置文档
应当有个内置文档来介绍使用方法,但是我没有想好以什么形式去做。
要不然就在程序里保存一个文档,这个文档就是一系列的 md 文档,然后展示?
7.4.6 偏好设置
- 偏好设置是直接提供一个 json 文件,还是提供一个 GUI 界面呢?
- 需不需要弄一个二级菜单,来展示不同方向的
- 设置的内容:
- 字体:可以考虑不同的地方的字体进行不同的设置
- 图片:存储路径啥的
- 数学公式渲染器
- 保存设置
- 布局
7.4.7 快捷键绑定
- 要有一个图形界面
- 就是可以呈现一个列表,有事件和对应的快捷键
7.4.8 欢迎界面
目前的欢迎界面还较为没有干货,考虑加入一些引导介绍,类似于 Vscode
7.4.9 杂项
- 目前删除文件夹后不会实时将文件夹更新。
- 新建文件的时候自动补齐 md 描述似乎不够清楚,我已经写了很多次
xx.md
然后报错了。 - 新建文件和文件夹的时候不会自动将焦点放置于输入框内容,而且输入框没有颜色或者边框之类的标识。
- “字数统计”现在点击后会出现一个没有边框的东西,真的好丑,因为没有边框或者不同的底色
- 没有“新建文件夹”的操作
- 撤销功能目前会导致光标清零
- 性能优化
7.4.10 搜索替换
- 文档内搜索
- 文档内替换
- 全局搜索
- 全局替换