首页 > 前端技术 > 以思维导图为例,探讨基于web的可视化软件UI和交互设计
2014
06-21

以思维导图为例,探讨基于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。


以思维导图为例,探讨基于web的可视化软件UI和交互设计》有 4 条评论

  1. Pingback 引用通告: 刹车胶管

  2. Pingback 引用通告: 防虫网

  3. Pingback 引用通告: 钢格栅板

  4. Pingback 引用通告: 硝基漆

留下一个回复

你的email不会被公开。