以思维导图为例，探讨基于web的可视化软件UI和交互设计

最近我在做一个决策树的可视化例程，它的架构、流程和最终成品，都将是未来一个基于web的可视分析平台的基础。其中可视化的表达与实现技术是重中之重。并且，就具体的UI和交互设计，其实有很多需要注意的细节，我们有必要参考成熟的商业软件中的做法。决策树和思维导图都属于层次化数据的表达方式，在可视化的表达和实现技术上，有很多共同之处。不过，决策树主要应用在统筹学和科学计算领域，相关的商业软件极少并且非常专业化，比起面向更广泛人群的思维导图软件，在易用性和交互设计上都弱很多。故而参考成熟的在线思维导图制作软件，对于探讨决策树，乃至于其他各种基于web的可视化软件的可视化表达和实现技术，以及UI和交互设计，都有重要的帮助作用。

 mind42

mind42是我之前就推荐过的在线思维导图绘制工具，是一个典型的交互式可视化软件，来自德国。

1、mind42的基本功能：

• 在线制作功能：在线制作思维导图，只要联网即可实时保存内容，支持导出为图片、pdf，freemind等多种格式。
• 基本的思维导图设置功能：制作思维导图时，支持给节点设置标注，链接，图片和小图标，允许修改字体格式
• 拥有社交功能：可以把自做好的思维导图发布到社交网络，以iframe格式内嵌于其他网页，还有gallery浏览或者协同编辑其他人的作品

2、接着我们来看mind42的界面设计，有如下特点：

• 界面异常简洁，没有多余的装饰，背景为网格图。风格接近于bootstrap2.0版本的工程制图效果。
• 与思维导图绘制相关的功能按钮都以图标方式显示，只有鼠标悬停的时候显示文字说明。（考虑到思维导图的功能较为简单并且有了约定俗成的规范，因此这样做是可行的）
• 与思维导图绘制不直接相关的功能，如发布，合作编辑，登录、退出等，都影藏在界面最上部的标题栏内。只有鼠标悬停才会出现。
• 界面属于流式布局，可适应各种大小屏幕，但对移动端并没有特别的优化。总的来说还是适合桌面操作。
• 不支持定制界面风格、思维导图主题样式。

3、然后我们再看mind42的交互设计：

A. 树形图的节点操作：

节点的增删改，可以通过三种方式：(1)选择节点后，通过页面左侧的功能菜单进行增删改操作；(2)选择节点后，节点之下会显示一个极为精简的功能菜单栏（如上图所示），该功能菜单栏不会遮挡任何其他元素，但是功能也不如左侧菜单的功能强大；(3)使用约定的快捷键进行操作。快捷键的键位会在鼠标悬停于对应的功能按钮时提示。

节点的层次关系变更：依靠鼠标拖拽对应节点来进行。

B.重配或重新编码

预定义样式只有一种，不支持重配（展示一个不同的可视化配置）或重新编码（指展示一个不同的视觉编码表现）；不支持自由布局。

C.概览和导航模式

导航：概览+细节的交互模式：(1) 可缩放的用户界面，允许对思维导图进行缩放，但只有固定的三个级别可以选择。(2)多层次视图，界面右上角还可以显示一个鸟瞰图，用来导航。(3)可以一键返回根节点，在节点很多的时候非常有用。

D.数据关联

可以把标注、todolist、网页连接、wiki链接，其他思维导图的连接、图片、图标加载到指定节点上。

E.按需提供细节

(1)添加了标注、todolist、图片或者链接的节点，会在节点内显示小图标。可以指定图片完整地显示在节点里，但是其他  内容只有鼠标悬停在这些小图标上时，才会用浮动框的形式显示这些内容。(2)对于思维导图的树形结构，所有分支都可以一键收缩，用户可以按需求点击加号按钮一个一个打开分支。

F.记录

提供redo和undo的按钮和快捷键，但是不会提供操作的历史记录。

4、mind42可视化实现技术：

通过我用开发人员工具查看，mind42的web前端使用的是javascript重型框架dojo， 辅之以bootstrap。dojo作为一个老牌框架本身自带一些绘图功能插件。但是mind42的思维导图绘制应该是开发者基于dojo自己开发的，具体我没有深究。

bubblus

 

bubbl.us是美国的一个在线制作思维导图的flash软件。功能够用。

1、基本功能：

• 拥有与mind42类似的在线思维导图制作功能。
• 在思维导图定制上，可以提供更好看的样式和自定义布局，除此以外其他定制功能略逊于mind42。
• 拥有社交功能，但是似乎没有gallery功能。

2、UI设计

• UI设计风格比较卡通，有种好几年前的感觉
• 所有的按钮都采用图标+文字的显示方式来显示，个人感觉不如mind42简洁。毕竟诸如undo,redo这样的功能，一个图标就足够了。同样的，也暴露了太多的功能按钮于界面上，整体界面也不如mind42整洁。
• 主体功能采用鼠标悬停时于节点时显示小菜单+功能按钮来实现。但由于几乎所有按钮采用图表+文字的显示方式来显示，所以这个小菜单还是比较大的，显示时可能会遮盖其他元素。同时这种悬停显示菜单的方式与Mind42完全不同，需要适应。
• 对思维导图元素的颜色定制功能较强大，可以做出颜色靓丽的节点。

3、交互设计：

A. 树形图的节点操作：

节点的增删改，可以通过2种方式：(1)通过鼠标悬停于节点时，显示的小菜单来操作；(2)使用约定的快捷键进行操作。但是快捷键较少，不能实现全部功能。

节点的层次关系变更：依靠鼠标拖拽对应节点来进行。

B.重配或重新编码

支持自由布局。不支持自动重新布局。（自由布局是个双刃剑，一方面可以让用户摆出更好看的的布局样式，也可能因为用户的误操作导致节点重合等问题。所以通常自由布局应当与机器自动布局相结合——在任何情况下允许一键自动布局。）

C.概览和导航模式

导航完全依赖可缩放的用户界面，允许对思维导图进行缩放，并且幅度从30%到759%，非常平滑，这点优于mind42。除此以外没有鸟瞰图和一键返回根节点的功能，略微不爽。

D.数据关联

bubbl.us似乎也有给节点添加连接、图片的功能，但是由于要求升级为付费用户才能使用，因而我没有用过。

E.按需提供细节

没有一键收缩分支的功能，不如mind42. 至于节点内联信息如何隐藏，因为要付费所以不清楚。

F.记录

提供redo和undo的按钮和快捷键，但是不会提供操作的历史记录。

4、可视化实现技术：

bubbl.us是一个典型的flash应用。

mindpin

mindin是国产的在线思维导图软件。坦白说该软件的思维导图编辑器v0.8比较贫弱，我目前申请了该软件的升级版本的公测，但是还未被审核通过。

1、mindin的基本功能：

• mindin基本功能完全类似于mind42，但却在给节点添加额外内容、自定义布局和社交功能上不如mind42，在思维导图样式定制不如bubblus。

2、界面设计

• 界面很简洁，但是远不如Mind42精致。感觉像是7，8年前的web应用，或者说是新浪博客的水准。
• 主要功能按钮都集中于右键菜单中。但是右键菜单一方面会遮盖其他元素，另一方面会覆盖掉浏览器本身的右键菜单。所以一直是个争议较大的UI设计。
• 右边的侧边栏大部分情况下是无用的，虽然可以点击按钮隐藏。这方面还是mind42做的比较好。
• 界面属于流式布局，可适应各种大小屏幕，但对移动端并没有特别的优化。总的来说还是适合桌面操作。
• 不支持定制界面风格、思维导图主题样式。

3、交互设计：

与mind42基本相同，或是略微不如。就不一一介绍了。

4、mindin可视化实现技术：

prototype + jquery + html5 canvas。

mindomo

mindmo跟mind42一样都是来自德国的在线思维导图制作工具。它的出现令我眼前一亮，感觉就像mind42的完全加强版，甚至可以做PPT！

1.基本功能

• mind42拥有的在线思维导图制作、社交功能等mindmo全都有。
• mindmo还拥有强大的风格定制、自动布局和节点内容查询机制，并且有多国语言选择（可以选择中文界面啦！）。这方面超过了以上所有软件。
• mindmo有在线聊天功能，应该是专门给协同制作思维导图准备的。
• mindmo还拥有PPT制作功能！没错，就是做完思维导图以后，可以以该思维导图为基础，定制一个浏览概要，最后用动画效果显示出来，太炫酷了！

2.UI设计

•  mindmo的界面风格与mind42一样简洁，但是按钮图片稍大。不用查看开发人员工具，就能感受到一股bootstrap3.0的设计风格扑面而来。
•  主体功能也是分为左侧 思维导图功能按钮区 和顶部 高级操作按钮区 两个部分。与mind42一样，大部分按钮都是只显示图标，只在鼠标悬停的时候显示功能介绍和快捷键说明；同时对不常用的文件级操作也做了很好的隐藏。
• 不过mindmo依然把思维导图功能用全局右键菜单和节点右键菜单实现了一遍。完全屏蔽了浏览器默认的右键菜单。mindmo的右键菜单功能复杂，面积也比较大，会遮盖其他内容。其形式如下图所示。

3. 交互设计

A. 树形图的节点操作：

节点的增删改，可以通过左侧功能按钮栏、右键菜单和快捷键三种方式来进行。

节点的层次关系变更：依靠鼠标拖拽对应节点来进行。

B.重配或重新编码

支持自由布局。而且支持多种形式的重新布局！ 优于上文中提到的所有软件。

C.概览和导航模式

导航主要依赖可缩放的用户界面，允许对思维导图进行几十个层级的缩放。缩放的时候不如bubblus那般平滑，但毕竟不是flash做的软件，何况这样已经够用了。同时也有一键返回根节点的设定。没有鸟瞰图。总的来说，优于mind42和bubblus。

D.数据关联

给节点添加文字说明、图片、语音，网页连接等多媒体内容的功能一应俱全。并且提供一定的存储空间，允许用户把文件拖拽上传，并显示在节点内。非常强大。

E.按需提供细节

与mind42一样。(1)添加了标注、图片或者链接的节点，会在节点内显示小图标。可以指定图片完整地显示在节点里，但是其他  内容只有鼠标悬停在这些小图标上时，才会用浮动框的形式显示这些内容。(2)对于思维导图的树形结构，所有分支都可以一键收缩，用户可以按需求点击加号按钮一个一个打开分支。

4. 可视化实现技术

从上文可以看出该软件是相当强大的，使用的技术也相当新。通过开发人员工具粗略查看，使用了html5 canvas, html5 socket, bootstrap3, 还有某前端模版。

下图是使用mindmo制作PPT的过程图。

mind meister

mind meister也是来一款自于德国的在线思维导图制作软件，功能不输mindmo。考虑到mind42, mindmo这两个NB软件也都来自德国，我不禁陷入了深深的思考——这是德国人思辨情结的反映么？考虑到mind meister与mindmo非常相似，故而这里简要介绍区别。

• mind meister不能免费使用！不付费的话只有一个demo可用，不能保存。
• 除了在社交功能上稍弱，mind meister的有着mindmo的几乎所有功能，包括PPT制作，在做PPT的时候甚至更强！
• 值得一提的是它还有移动端版本，没错这类软件的移动端肯定是要专门设计的，并且是采用移动APP的方式，目前有ios和android版本。
• 扁平化的设计风格，看得出跟mindmo一样是近两年才开发的新品。界面也是十分简洁。
• mindmo没有左边栏思维导图功能按钮，而是几乎完全靠右键菜单来提供思维导图主体功能。右侧有一个大型面板，用来做详细设定。搞的界面很像photoshop.

最终结论

以上对比了5个在线思维导图软件，得出结论，就整体功能而言，mind meister和mindmo并列第一，各有千秋；mind42次之，完全够用；bubblus再次，mindpin最低，勉强够用。

通过分析这些软件的UI设计、交互设计和实现模式，给我了如下启发：

UI设计

1. UI设计一定要简洁。例如对于能用图标就表明意思的地方，就不要摆字，如undo, redo, sign out等等。但是对于决策树这样的科学计算软件，与思维导图还是不同的。很多情况下按钮的功能不能自明，需要解释。在这种情况下，则需要显示最简单的文字标识，并在鼠标悬停时显示介绍。

2. 对于树的操作，如果是简单的功能组，可以以类似mind42的小按钮组或者bubblus的鼠标悬停按钮组的方式来显示。但是对于复杂功能组，右键菜单是没有办法的办法（如mindmo和mind meister）。右键菜单有着覆盖其他元素、覆盖浏览器默认菜单的缺点，但其实也用不着对右键菜单过于排斥。例如在移动端上可以用“长按”操作来体现鼠标右键。

3. 边栏或者导航栏的按钮组，是不能替代以上小按钮组或者右键菜单的，因为交互延时太高，用户不爱用。事实上，边栏或导航栏按钮组的最大功能是介绍软件有什么功能。

交互设计

1.关于树的操作，最好是三管齐下：右键菜单或小按钮组 + 边栏或导航栏按钮组 + 快捷键。

2.重配或重新编码：（1）允许用户自由布局是把双刃剑，一方面可以让用户摆出更好看的的布局样式，也可能因为用户的误操作导致得不偿失。所以通常自由布局应当与机器自动布局相结合——在任何情况下允许一键自动布局。这无疑增加了开发难度。对于像决策树这种科学计算应用，应当以计算为主要目的，不允许用户自由布局，简化操作。当然，未来可酌情考虑是否增加多种形式的布局方案，以提升用户体验。（2）多主题样式设置通常是加分选项，对主体功能影响不大。

3.概览和导航模式：层次数据的可视化应用通常应具备两个导航方式：界面缩放， 一键返回根节点。至于鸟瞰图，或者上下文放大镜，在有界面缩放的情况下，仅仅是加分项。

4.数据关联：允许添加节点的关联数据是必须的。

5.按需提供细节：对于关联数据，用户应该可以选择节点上的关联数据是否直接显示在界面上，并且可以选择全部隐藏或显示某类关联数据；对于树的节点，必须可以缩放。类似mind42那样一键缩放全部节点的功能，其实可以扩展为按层次缩放树的节点，更有价值。

F.记录：通常软件都应具有redo, undo的功能。至于提供历史记录或者log信息，仅仅是加分项。

实现技术

1. 很明显，现在基于javascrpt类库的html5技术已经是主流，可以实现近似于flash的效果，并且兼容性很强。svg, html5 canvas是主要的绘图工具。web socket更是提供了实时通讯的法宝。

2.不要奢求移动端实现：虽然现在移动端大火特火，但是直接把这类有着复杂交互操作的web应用搬去移动端，效率往往堪忧。在以上对比的5个在线思维导图制作工具中，只有mind meister有移动端版本，并且都是重新定制的mobile APP。