Explore, learn, enjoy

背景

现在手机普遍采用软键盘作为主要输入方式,键盘占据了很大一部分屏幕空间;而思维导图往往又很大,这就意味着在手机上看思维导图要么缩小以看到更多内容,要么放大以看清具体条目,无法兼顾。

本设计的目的是使手机上编辑思维导图变得更容易。因为这个设计其实是XMind的面试作业,所以主要以实现XMind现有功能为核心。

现状

思考

主要有两个方面:

内容与样式分离

CSS和HTML是典型的样式与内容分离的例子。HTML提供内容,CSS提供样式,提高了可用性。在手机上不适合编辑思维导图的样式,但可以写大纲。如果用户能在手机上输入思维导图的大纲,程序自动生成相应的样式,就能解决“在手机编辑思维导图困难”的问题。

专注于内容

Markdown是一种轻量级标记语言,易学易写易读。它让人专注内容本身,不分心思考格式问题。MindMark在设计中可以参考Markdown的设计思想,利用简单的符号就实现XMind ZEN里的功能。

交互设计

编辑界面分为两部分:MindMark标记语言和思维导图,通过顶部tab切换。标记语言有代码高亮功能,将代表思维导图的功能通过不同颜色表示,如果代码有误则会报错。用户在输入的时候有自动补全功能。总之,在手机上更适合用标记语言的方式编辑思维导图。

交互设计

语言设计方案

节点和子节点

每个节点有唯一的编号,根据层级编号有不同的位数。这里的编号规则采用XMind分享后的网页端的MapOutline部分。

节点

联系

要将某主题连接到另一主题,需在该主题行加“@+对方主题编号”。可以增加自动补全功能。

连接

外框

外框用同一个外框的主题前后用方括号括起来。

外框

概要

概要的添加方式为“# 概要内容+[主题]”,之后可以将“#概要内容”作为新的父主题,为其继续添加子主题。

概要

笔记

笔记的设计参考了js中的注释。在该主题末尾添加“//笔记内容“可将这部分内容作为笔记。

笔记

综合展示

与现有方案相比,思维导图的可读性大大增强,编辑难度也减少很多。

整体效果

知识共享许可协议
MindMark:一种思维导图标记语言李大毛 采用 知识共享 署名-非商业性使用-禁止演绎 4.0 国际 许可协议进行许可。
基于城中村群租房上的作品创作。