高保真原型 | XMind优化方案的设计过程

本文由作者 黄联樵 于社区发布

这是上个月我参加xMind面试的过程中设计的一个优化小方案。当时xMind给我一周的时间，让我自己找一个功能点然后出一份优化方案。我当时想着找一个小小的优化点，大概花个两天时间做一套方案。不过……画着画着就沉迷了，最后花了六天左右的时间，在deadline前半小时才发过去。

这是一个耗时只有几天的小方案，但是我很少做这么高保真的原型，我很爱这个文档。由于时间有限，功能设计上有很多坑，有很多过于复杂或者欠缺考虑的东西。

不过，单从文档的角度来看，它小而美，就跟xMind给我的感觉一样。当时我就琢磨着，如果我进xMind了，我就继续迭代它，改它百次千次！如果我没进去，我就把它写成一个短文发出来……所以，哈哈哈，我现在写一个短文把它发出来。

在文章的结尾，你可以找到这个原型的在线链接。

做优化方案首先当然要找痛点了。下图就是我找到的痛点的一部分体现，这些痛点都是关于xMind在维护思维导图的外观上的比较让人觉得混乱或头大的体现。也正因为比较混乱，所以我在写这篇文章给它们截图的时候，一会找到几个，一会又找到几个，总找不全，最后加起来8个凑数得了。

痛点1）样式不易维护

在选中一个方块之后，可以切换这个方块的4种样式。但是当你切换到“极其重要”的样式并且修改了之后，你总会忘记其它三个样式的字体、颜色、描边、分支到底是怎样的，结局就是4种样式之间越来越乱。

痛点2）层级外观与样式的冲突

在默认的情况下，越细的层级字也会越小。但是当你把一个方块的字体改大了，并且手滑点了“更新”之后，你会发现这种层级被打破了，它们全都变大了。

痛点3）样式与分支的混淆

在4种不同的样式下，你会发现它们的分支形状都可以独立设置。但是你设置了之后却发现是无效的，只有“普通”样式下的分支形状是有效的。

痛点4）“重设样式”不能恢复样式

当你不小心把一个方块的样式点了“更新”之后，你想要还原它，于是你点“重设样式”，然后你会发现它再也回不到主题的样式了。因为重设样式就是恢复到你手滑点了更新之后的样式。

痛点5）彩虹分支直接传递色号

当你在第一层设置了彩虹分支，而对于具体某个分支来讲，彩虹的颜色是黄色的时候，你会发现它们的颜色是具体的黄色。当你把它设置成绿色，你就打破了彩虹分支；而当你重设彩虹分支之后，你会发现前者依然是绿色，因为你已经改过了它的颜色。彩虹就这样永远连不起来了。

痛点6）结构与分支的冲突

当你把结构调成鱼骨图的时候，你会发现分支依然可以选，但是不管你怎么选，鱼骨图都是硬硬的鱼骨。

痛点7）多选有时不能调整结构

结构就是调整一个方块下层的具体结构，例如调成鱼骨图，或者调成向下的组织图。但是当你多选好几个方块的时候，有时它们看得到结构选项，有时候结构选项又莫名失踪了。

痛点8）切换主题才能重置主题

经过以上7个步骤，我们已经获得了一个玩坏了的思维导图，这个时候可以用主题把它们复原吗？不行。你得切换到另一个主题，再切换回来，它们才能复原。

---

相信很多人用xMind都跟我一样，几乎每次策划一个方案都要先用xMind，但是以上功能基本都会避开，只把xMind当作纯粹的脑图来用，做一些丑得只能给自己看的东西。要不是我为xMind设计优化方案而专门去体验这些功能，我也不知道会有这些坑的存在，我觉得这实际上是潜意识对于这些坑的规避。

对于很多简洁的软件来说，当它的简洁性是8分的时候，它的易用性也有8分；但是当你把它的简洁性提高到9分的时候，它的易用性可能会瞬间降到5分，这可能就是以上槽点的根源所在——易用性无条件作为首要设计准则而导致的深层逻辑的不优雅。

看到这些用扫帚藏在地毯里的逻辑，就像妈妈出差回家看到孩子的房间，有种莫名的兴奋。妈妈回来了，妈妈来收拾房间了！对了，在文档和下文中，我把xMind原有的“主题”叫做“方块”，把原有的“风格”叫做主题。另外，时间有限，所以我缩小了设计的范围，例如我只设计了单选方块的情况，以及避开了结构里面的表格样式，等等。

1

优化目前的界面

整个文档都是围绕着xMind右边这个边栏（我不知道叫什么，就叫他边栏吧）来设计的。我做的第一件事情，首先就是把边栏顶部的“样式/画布”切换去掉了，因为我觉得没有人会这样用。点击画布任意空白处，只要不是选择了一个具体方块，都可以快速切换成调整画布设置，那么何必再把鼠标移到这个位置来切换。

接下来就进入这个边栏的原型设计。

左图是目前的xMind的截图，右图是我的原型。我没有用到任何Axure之外的工具来画原型，图标是Axure最新版内置的，边框和阴影慢慢调它个十分钟就能达到跟xMind的UI一样的效果。

从布局来看，xMind原本的布局是有逻辑问题的。