公司要开发一款求职类app，香港的PO给我提供了两款国外公司的app做参考：cpjobs以及jobsDB。
我抽出一天时间把两个app玩了一遍。功能虽然简单，但因为是别人家的产品，且之前没有这类app的制作经验，单纯靠脑袋分析不免乱糟糟的。借助思维导图工具进行分析是很好的选择。文章最后附上的两张图即是用思维导图工具xMind制作的cpjobs和jobsDB的app结构图。
制作思维导图的要点
制作思维导图的一个要点，我认为就是不要预设定式，尤其是在用它摸索不熟悉的产品或领域时，不要预设你要做的是一张功能图还是UI元素图。思维导图，顾名思义，就是把你对产品、概念或领域的认识按你的思路把它自然发散出来。当然，在制图过程中，你的思路会逐渐清晰，这时可以再逐步理清和修正图中元素的逻辑，让最终以发散思路形成的导图不失严谨。
cpjobs和jobsDB这两张图，不能严格的定义它为功能结构图，或者是app导航图，又或者是类图（有类名、属性和操作），我就统称它为app结构图，因为它体现了这两个app的整体结构。它们是按我的思路绘制的，我相信不管过多长时间，我再拿起它们，只要稍微回想一下，就能对这两个app的玩法仍了然如胸。如果要向其他人展示，只要稍作讲解，相信也能很快让他人了解这两个app的基本结构。
对图片中所呈现逻辑的定义
上面有提到，在制图过程中，可以逐步制定出导图的逻辑。关于这两张图，我对图片中所呈现逻辑的定义是这样的（以cpjobs为例）：
- 中心主题是产品的名称“cpjobs iOS app”。
- 中心主题的下一层子主题（简称第一层），这一层是整体功能模块划分，基本上就是在登录前和登录后，从app菜单看到的内容，从这些内容可以看出制作方对app整体功能模块的切分。
- 列出第一层的功能模块之后，再查看是否还有下层功能（子菜单）。如果有，在第二层继续列出，比如“My account”和“Applied jobs”（“Applied jobs”只对登录用户可见）为“Profile”的下级菜单；如果点击第一层菜单进入的是表单界面，则在第二层列出界面上的元素，例如“Forgot your password”这个表单里需要填写的元素是“Email”，同时这个表单里还有一个操作点——发送Email的按钮“Send”，为了区别其他元素，以红色字列出。
- 如果表单界面隐藏的比较深，按以上逻辑可以延展至第三层、第四层。
- 有的时候，一个界面可能包含多个功能点，这时，需要依靠经验在导图中对它们进行抽像并归类，比如第一层的“Login”，它只有一个界面，里面包含了email登录、Facebook登录、Google+登录、Linkedin登录，凭经验，可以在导图中把后三者归纳为第三方登录“Connet with”，它与“Email login”同属“Login”的子主题。又比如“Search jobs”的搜索结果“Results”，这一层它有一个对搜索结果进行分组排序的功能，可以按“Date”、“Job level”、“Experience”进行分组排序，可以把这个功能点抽像为“Group by”，并以红色字表示。
- 对于列表（list）界面，可以用单词的复数形式表示这是一个集合、包含了多条记录，比如“Results”、“Saved jobs”（如果是中文，我想可以用“结果集”、“职位列表”等类似的字眼表述，当然，也可以用另外一种彩色字体表示）。
- 不同层之间的关系，可以用虚线带实心箭头的关联线表示。比如“Job”-“Save / Unsave”和“Saved jobs”的关联，表示保存的职位可以在“Saved jobs”列表中找到；而“Hot categories”-“Advanced search”和“Search jobs”的关联，表示这两者是相同的功能。如果担心关联的逻辑不够明显，可以在关联线上注上关联词。
总结
思维导图的目的是理清我们对一件事物的认识，它导出我们对一件事物从整体到细节、从粗略到具体的认识过程。它首先是发散性的，经过反复修正最终可以形成逻辑。这种逻辑，可以运用颜色、命名规则，还有制图工具中的其它符号表示。每个人都可以以自己特有的方式定义导图的逻辑。
附图
cpjobs iOS app.png
JobsDB iOS app.png
网友评论