V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
CodingNET
V2EX  ›  设计

让思路更清晰——我是怎样使用思维导图的

  •  
  •   CodingNET · 2016-01-09 13:59:42 +08:00 · 6718 次点击
    这是一个创建于 3240 天前的主题,其中的信息可能已经有所发展或是发生改变。

    原文: https://blog.coding.net/blog/coding-mindmap
    作者:[email protected]

    思维导图无处不在

    使用思维导图的场景无处不在,无论是做产品还是做设计,我们都需要清晰的思路,明确自己需要做些什么,最后需要达到什么效果,这时候,如果有一张清晰的思维导图,就能很快的理清自己的思路。作为互联网公司自称是产品型设计师(也就是既需要帮助老板整理需求梳理产品,也要设计漂亮的界面)的我更是如此。

    下面我从产品、设计等方面谈谈我是如何运用思维导图整理我的工作的。

    1 、 需求分析——完善最初的想法

    一般老板只会告诉我们大概需要一个什么东西,具体的细节还需要我们去整理。这时候,我会把大概涉及到的基本点写在纸上,想到一条写一条,特别是一些需要注意的地方。

    这是很早之前设计冒泡话题列出来的一些关键点,我先把我想到的点列出来之后再去整理。
    图片

    在纸上列得差不多了,再新建一个 XMind 文档,把之前列的一些点一一转到电脑上,然后整理分类。

    下面这个图片是当时在梳理码市需求时画的,这个图其实是不全面的,只是把重要的一些点列出来,为之后梳理产品的功能结构做准备。
    图片

    还有,更重要的是在梳理需求时,我们也就得出一个网站或者 APP 整体有哪些大功能组成部分,也就是在写产品需求文档时需要的功能逻辑图。从这个图你可以看到整个项目的主要功能点。
    图片

    2 、产品设计——梳理产品功能结构

    大概的需求点及需要注意的地方出来之后,并不着急画原型,我一定会先把整个产品的功能结构完整的列出来,包括页面上所有需要展示的内容,甚至基本的交互流程等。因为如果不这样做,很容易遗漏一些重要的点。

    有了这个功能结构图,画原型的时候就可以一一对照了。当然这个图也是会实时更新的,我会一边画原型一边更新功能结构,画原型的时候会很具体的知道每个元素每个交互的过程,在思维导图里面有些地方并不合理,这时候就需要我们来及时调整思路了。梳理功能结构和画原型是产品设计过程中相互迭代的过程。

    下面这个图是码市功能结构中的发布悬赏功能部分:
    图片

    然后得到下面的原型:
    图片

    3 、设计——寻找灵感

    我在设计一个东西一开始基本上是脑子短路,毫无想法,这个时候我会把一些可能的设计点列出来,然后一个个去搜索相关的设计,从其他设计中寻找灵感。因为对我来说设计根本不存在毫无根据的灵光一现,我必须立足一个个点慢慢发散,然后在中间找到一些靠谱的点去实现。

    这是我在之前《如何设计一个“高大上”的 logo 》博客中的例子,从猴子这个点出发根据具体的要求发散,得到现在的 logo 。

    图片

    图片

    不仅 logo 设计,网站或者 APP 设计同样需要这样的灵感,特别是那些需要设计感比较强的首页、专题或者引导页面等。把能够表现这个主题的元素或基本点列出来,然后去网络上浏览相关的设计图会找到一些靠谱的灵感。

    下面是去年中秋送月饼的一个专题活动,我列出“猴子捞月”“中秋”“月饼”等一系列关键词找了很多可参考的图片寻找灵感。
    图片

    然后自己手绘出基本的草图,整理修改得到了下面这个专题页面。
    图片

    还有,在做交互比较复杂的设计并且没有人来画原型时,把上面第二点说到的功能结构列出来就显得非常重要了。

    当然,有时候我们并需要完整的思维导图,也许几个扩展的关键词就足够你设计一个好看的东西了,这是帮朋友设计的他们同学聚会的 T 恤。

    图片

    图片

    4 、其他——思维导图让工作、生活更有条理

    除了产品和设计上的事情,其实只要我遇到比较杂的事情都会用思维导图的形式来进行梳理。

    比如读书笔记,把自己认为重要的部分记录下来,并标注重点。
    图片

    比如做旅行用品清单,这是准备自驾去云南的时候列出来的,本来是想直接写在备忘录里面,写了几条后发现东西实在太多了,必须要分类好,在网上翻看了别人列出来的大张需要物品的清单,瞬间晕菜了,用思维导图分类整理一下是不是很清楚了?而且可以用图标标注一下当前的状态,并把重要的事情标星。
    图片

    再比如,写这篇文章,我会把我想到的一些点先列出来,慢慢整理调整,这是写的过程中的一张图:
    图片

    慢慢的变成了最后的这张图:
    图片

    思维导图绘制形式

    最后再说说思维导图的形式,其实思维导图并不一定就是一张网状的图,也可以是一个个清晰的列表、简单的关键词。可以写在纸上,或打开电脑新建一个 XMind 文档,又或者突然想到什么的时候打开手机的备忘录,一条条的列出来,都可以。

    关于纸笔

    拿出纸笔,把自己的一些思路圈圈画画是很有意思的事情。现在的很多人都忘记了写字,把自己想到的东西写下来确实可以很直观的梳理脑海中的想法。

    我最近在练字,大家也看到上面我手写的那些字确实是很潦草,我现在也相信字如其人,希望自己以后能够手绘出更加漂亮的思维导图。能把字写漂亮也是一件很厉害的事情吧。

    关于工具

    上面的大部分思维导图我都是用 XMind 画的,大家也可以尝试其他的思维导图工具。不过今天我还想推荐大家用 Markdown 来写东西,简单的#、##..来标识标题层级,直接用 [TOC] 标出目录,简直不能更好用了,我一般就用 Coding 文件里面自带的 MD 编辑器。

    手机自带的备忘录也是很好的记录想法的工具。

    最后再说一句,思维导图并不是什么稀奇的东西,其实只需要我们能够随时把自己的想法记录下来,不管什么工具都可以。

    17 条回复    2016-01-10 15:04:01 +08:00
    xingshu
        1
    xingshu  
       2016-01-09 14:28:19 +08:00   ❤️ 1
    国外 bitbucket 太慢,切换用 coding

    添加了太多社交的
    完全没用上 --
    youngsterxyf
        2
    youngsterxyf  
       2016-01-09 15:59:34 +08:00   ❤️ 1
    写的不错!
    fanjingzhu1992
        3
    fanjingzhu1992  
       2016-01-09 16:05:59 +08:00   ❤️ 1
    不仅能做得更快,更能做得更好!
    bdbai
        4
    bdbai  
       2016-01-09 16:34:00 +08:00 via iPhone   ❤️ 1
    Coding 能支持团队项目思维导图分享就更好了。
    CodingNET
        5
    CodingNET  
    OP
       2016-01-09 16:39:00 +08:00
    Hi @xingshu,
    我们已记录您的需求,感谢您的反馈!

    Happy Coding,
    Coding.net
    timothyye
        6
    timothyye  
       2016-01-09 16:41:08 +08:00   ❤️ 1
    不错的分享,顶一个
    CodingNET
        7
    CodingNET  
    OP
       2016-01-09 16:41:26 +08:00
    Hi @bdbai ,
    亲可以使用 Coding.net 的文件共享功能与团队成员分享思维导图,我们也会考虑整合第三方思维导图制作服务,感谢您的反馈!

    Happy Coding,
    Coding.net
    maomaomao001
        8
    maomaomao001  
       2016-01-09 16:42:41 +08:00 via Android   ❤️ 1
    谢谢分享,希望 V2EX 上这样的技术分享越来越多。
    maomaomao001
        9
    maomaomao001  
       2016-01-09 16:59:26 +08:00 via Android   ❤️ 1
    @CodingNET 既然有官方人员,我好像问一个问题,我使用的第一个版本管理平台算是你们 coding 了,体验确实很好(除了冒泡那个页面很卡以外)
    还有个很不错的功能是,有演示平台(这个非常好)
    那么问题来了----演示平台为什么每 7 天会自动关闭,需要管理员去重新启动,你们不觉的这样很麻烦吧? 我实在想不通这样有什么意义(7 天断,需要手动开启),防止别人搭博客,或者别的产品???这也不能吧?
    能不能搞成 7 天清一次文件系统,然后自动重启的那种?
    angryRabbit
        10
    angryRabbit  
       2016-01-09 17:01:07 +08:00
    不喜欢脑图,纯粹就是好看。做个 todo list 多简单。
    我在 wiz 笔记上直接这样写,比脑图清晰多了

    + h1
    + h2
    + h3
    + h2
    + h1
    + h1
    angryRabbit
        11
    angryRabbit  
       2016-01-09 17:01:43 +08:00
    。。。 空格都丢掉了,大家自己脑补空格吧
    sjrong
        12
    sjrong  
       2016-01-09 17:09:07 +08:00
    脑图这种东西,真是“帮人帮己”呀~
    bdbai
        13
    bdbai  
       2016-01-09 17:18:42 +08:00 via iPhone
    @CodingNET 期待思维导图功能上线。个人觉得预览比在线制作有用,能支持 UML 就更好了。
    hqs123
        14
    hqs123  
       2016-01-09 19:05:35 +08:00
    楼主大神啊,向你学习,话说对应你目前水平你学这个学了多长时间啊?
    7gugu
        15
    7gugu  
       2016-01-09 20:23:37 +08:00
    经常用 baidu 的脑图,感觉非常不错
    endosome
        16
    endosome  
       2016-01-10 05:41:08 +08:00
    楼主的手写汉字,让人印象颇深。
    CodingNET
        17
    CodingNET  
    OP
       2016-01-10 15:04:01 +08:00
    Hi @maomaomao001 ,
    感谢您的反馈,演示平台应用挂起是指当连续 24 小时没有人访问该应用,该应用会被自动停止,当有人访问进入时,演示平台会自动启动被挂起的应用,延时大约 3 秒左右。挂起对于用户来说是透明的,绝大部分情况下不影响用户使用。
    同时您也可以选择升级您的项目 [1] ,这样该项目的演示平台就不会挂起了。

    [1] https://coding.net/upgrade

    Happy Coding,
    Coding.net
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2677 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 12:23 · PVG 20:23 · LAX 04:23 · JFK 07:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.