Thoughts, stories and ideas.

背景

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

本设计的目的是使手机上编辑思维导图变得更容易。

现状

思考

我主要从以下两个方面入手:

样式与内容分离

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

专注于内容

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

交互设计

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

交互设计

语言设计方案

节点和子节点

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

节点

联系

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

联系

外框

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

外框

概要

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

概要

笔记

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

笔记

综合展示

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

综合展示