思維導(dǎo)圖，英文名叫 The Mind Map，是一種用來開展、記錄發(fā)散性思維的圖形工具。可以說是目前職業(yè)辦公中使用最廣泛最基礎(chǔ)的圖形工具，無論是做故事大綱、頭腦風(fēng)暴、任務(wù)拆解，都會進(jìn)行應(yīng)用。

 

通常，思維導(dǎo)圖會有一個到兩個中心主題，然后中心會擴(kuò)展出不同的子節(jié)點，并使用連線進(jìn)行關(guān)聯(lián)。每個子節(jié)點，都可以繼續(xù)建立更下級的節(jié)點，依次類推。

通過這種方法，我們可以建立出比較結(jié)構(gòu)化的信息層級，中心主題是宏觀內(nèi)核，越往下級拓展的，就是越細(xì)節(jié)的信息。

而隨著思維導(dǎo)圖軟件的發(fā)展和完善，除中心主題、連線、節(jié)點外，我們還可以在這個圖形中添加關(guān)聯(lián)、備注、圖標(biāo)、待辦、圖片和附件等內(nèi)容。創(chuàng)建思維導(dǎo)圖的工具在今天隨手可得，無論是桌面端還是網(wǎng)頁端，想要創(chuàng)建思維導(dǎo)圖，從下方選擇一個即可。

 

思維導(dǎo)圖存在的價值，并不僅僅是我們要做一個方便別人理解的架構(gòu)圖形，而是通過它本身包含的結(jié)構(gòu)層級屬性，來幫助我們梳理自己的思路、想法、靈感。比如你要搞清楚進(jìn)階設(shè)計師應(yīng)該具備哪些能力，如何進(jìn)行學(xué)習(xí)，那就可以通過思考，查找資料，以樹狀圖的形式記錄和整理。

 

它最大的價值，就是幫助我們在繪制的過程規(guī)范我們的思維形式，能針對不同節(jié)點實現(xiàn)聚焦和深入探索與思考。而不讓想法特別離散一會兒插畫，一會兒體驗，過一會兒又是平面四要素般毫無章法。

在互聯(lián)網(wǎng)團(tuán)隊中，使用思維導(dǎo)圖輸出除了日常工作內(nèi)容計劃外，最多應(yīng)用于和產(chǎn)品需求相關(guān)的表述上，有一些專用的思維導(dǎo)圖類型需要我們認(rèn)識，包含下面三種：

1. – 產(chǎn)品功能結(jié)構(gòu)圖
2. – 產(chǎn)品頁面結(jié)構(gòu)圖
3. – 產(chǎn)品信息結(jié)構(gòu)圖

下面我們將從這三個思維導(dǎo)圖入手，了解如何實現(xiàn)它們的輸出，以及如果應(yīng)用思維導(dǎo)圖工具來提升日常工作的效率，以及規(guī)劃自己的職業(yè)技能發(fā)展。

 

功能、頁面、信息結(jié)構(gòu)圖，都是產(chǎn)品經(jīng)理輸出的內(nèi)容產(chǎn)物，通常會置入到 PRD 中供團(tuán)隊成員查看和理解。但是，這三種思維導(dǎo)圖不僅看起來差別不大，而且很容易搞混。

2.1 產(chǎn)品功能結(jié)構(gòu)圖：

我們首先介紹的第一個結(jié)構(gòu)圖類型，叫產(chǎn)品功能結(jié)構(gòu)圖，用來解釋產(chǎn)品本身功能的樹狀圖。如果學(xué)習(xí)過用戶體驗五要素的同學(xué)，就可以把它理解成它決定的就是范圍層的內(nèi)容。

 

通常，產(chǎn)品再開始進(jìn)行一個新產(chǎn)品功能規(guī)劃的時候，第一件事就是啟動思維導(dǎo)圖工具，開始整理該產(chǎn)品會包含的具體功能，和對應(yīng)的功能層級，這應(yīng)該非常好理解。

比如我們用潮汐這個 APP 舉例，如果我要規(guī)劃一個這樣的產(chǎn)品，我會先考慮它包含的核心功能白噪音，然后向后思考白噪音包含哪些種類，如專注、睡眠、小憩、呼吸。每個白噪音類型里，我再根據(jù)對應(yīng)場景提供更細(xì)節(jié)的功能出來。

 

然后，我再想到，白噪音不是只有固定一種的，而是包含非常多種，是不是就該提供一個放不同白噪音的地方，于是就增加了探索的模塊。在這個模塊里，包含搜索、廣告位推薦、分類推薦功能。每個獨立的白噪音，還可以對它進(jìn)行收藏、分享等功能。

 

再然后，就還有添加用戶系統(tǒng)，增加會員功能，統(tǒng)計功能，個性化定制等，就可以進(jìn)一步完善這個圖表將所有想到的功能多羅列出來。

 

雖然產(chǎn)品需求的推導(dǎo)前面還有別的專業(yè)分析步驟，但落實到具體包含功能的制定上，過程和結(jié)果都如上方的一致。通過思維導(dǎo)圖逐個模塊添加和細(xì)化，明確它們的類型、層級。

一個修訂完整的功能結(jié)構(gòu)圖，就能清晰的表示這款產(chǎn)品包含了哪些功能和服務(wù)。

 

2.2 產(chǎn)品頁面結(jié)構(gòu)圖：

產(chǎn)品頁面結(jié)構(gòu)圖，是一個和功能結(jié)構(gòu)圖非常容易搞混的圖形。很多產(chǎn)品經(jīng)理在 PRD 中會在做完功能結(jié)構(gòu)圖以后緊跟頁面結(jié)構(gòu)圖，兩張圖形中會包含大量重復(fù)的名稱和相似的結(jié)構(gòu)，讓新手一頭霧水。

頁面結(jié)構(gòu)圖等同于體驗五要素中的結(jié)構(gòu)層，用來詮釋產(chǎn)品包含的頁面、層級、分支。

 

首先明確一個概念，就是功能并不等于頁面。

一個頁面中可能包含多個功能，比如專注頁面中，就包含了時間、開始、暫停、停止、模式、標(biāo)簽、場景設(shè)置的功能。

 

 

而一個功能模塊，也可能包含多個頁面，比如我們在功能結(jié)構(gòu)圖中可能會簡單表示添加聲音的功能，但這個管理需要比較多的操作步驟和頁面來完成。

 

既然我們知道功能和頁面不是一回事，那么頁面的類型、結(jié)構(gòu)有沒有必要表現(xiàn)呢？答案必然是肯定的，頁面也需要通過樹狀圖做完整的梳理并展示。

 

一個產(chǎn)品有什么樣的頁面，層級如何制定，都是基于功能分析出來的，合理的情況，是先把功能定好，再想怎么做頁面。功能是產(chǎn)品的內(nèi)核，而頁面涉及到具體的表現(xiàn)形式。

所以，外行在規(guī)劃一個產(chǎn)品的時候，往往是從頁面入手，告訴你整個產(chǎn)品包含了哪些頁面，大概的層級，但對功能的具體規(guī)劃卻往往語焉不詳。

頁面結(jié)構(gòu)圖對于設(shè)計師來說至關(guān)重要，因為它決定了我們應(yīng)該設(shè)計哪些頁面，可以說是決定了我們的版本設(shè)計任務(wù)和工作量。不管產(chǎn)品有沒有提供這個圖形，我們都要自己梳理出來。

 

2.3 產(chǎn)品信息結(jié)構(gòu)圖：

功能和頁面的問題解決了，就所有結(jié)構(gòu)性問題都解決了嘛？顯然還沒有。

五要素中還包含一個框架層和視覺層，視覺層指具體頁面的樣式，那得用設(shè)計圖來表示，顯然不是思維導(dǎo)圖工具能實現(xiàn)的。那么，就剩下框架層一個還需要我們注意了。

 

框架層的表現(xiàn)無外乎就是單個頁面包含的內(nèi)容、交互、布局。交互和布局都是由原型圖來呈現(xiàn)的，但不管你有什么跨時代的交互思路還是殿堂級的排版能力，都要面對一個嚴(yán)肅的問題 —— 界面里要擺啥？

雖說功能地圖有一定的描述，但顯然還是比較寬泛模糊的，設(shè)計師是需要更具體的字段內(nèi)容的。這就是信息結(jié)構(gòu)圖存在的價值，描述每個功能模塊或頁面下方，包含哪些信息字段內(nèi)容。

比如在白噪音的詳情頁中，要放哪些信息？就一個音頻文件，我們要往里塞什么好。如果作為產(chǎn)品我的出發(fā)點就會是豐富這個頁面的一些信息，讓用戶更有欲望使用，或者進(jìn)行識別。

 

仔細(xì)整理這些信息，你會發(fā)現(xiàn)不少頁面雖然看起來簡單，但是實際信息量一點都不少。而這些信息，不是設(shè)計師還是開發(fā)隨手做的，都是經(jīng)過產(chǎn)品規(guī)劃才落地的。

每個具體的信息，類似開發(fā)環(huán)境中常說的 “字段”，它也確實是產(chǎn)品經(jīng)理工作中后續(xù)和開發(fā)梳理字段表的雛形。

所以，到這里我們也就基本了解了項目中最常用的三個具體思維導(dǎo)圖。它們包含一定的先后順序，“功能 —— 頁面 —— 信息” 依次推導(dǎo)，從核心到細(xì)節(jié)。

梳理這些內(nèi)容，對后續(xù)我們展示、理解項目會起到非常積極的作用，也是 PRD 文檔中必備的圖形元素之一。即使項目環(huán)境中不需要設(shè)計師自己上手，你也要保證可以明白它們各自的作用，以及看懂它們在實際文檔中表述的內(nèi)容。

 

除了在產(chǎn)品說明中使用思維導(dǎo)圖，它還可以應(yīng)用在我們工作和學(xué)習(xí)領(lǐng)域中的方方面面。我們就分別從這兩個領(lǐng)域切入來講一下設(shè)計師如何利用思維導(dǎo)圖，提升自身能效。

3.1 工作領(lǐng)域

在工作上，設(shè)計師可能也需要在競品分析里輸出上面這3種圖形，但還有很多別的工作場景需要我們應(yīng)用，最常見的莫過于工作待辦事項的整理了。

比如我們對一整個項目的工作內(nèi)容進(jìn)行梳理和評估，那我們就可以根據(jù)時間線或者內(nèi)容類型，將所有要做的事情梳理成樹狀圖。

 

 

或者，做用戶現(xiàn)場訪談這種調(diào)研，一個跨度接近一周的工作，我們也可以用思維導(dǎo)圖將前后需要完成的工作和順序解構(gòu)記錄下來。

 

任何復(fù)雜的工作流程，只要經(jīng)過結(jié)構(gòu)化的拆解，就可以細(xì)化成更容易理解和執(zhí)行的步驟。也更能幫助我們判斷工作量和制定時間計劃。

 

3.2 學(xué)習(xí)領(lǐng)域

在學(xué)習(xí)領(lǐng)域上，思維導(dǎo)圖最常用的在我看來有兩個方向，一個是對自己知識體系的整理，另一個是對于學(xué)科、書本的知識點整理。

雖然我們可能在各個干貨或者公開課里，看到很多有關(guān)職業(yè)技能樹的說明，并伴隨不同的通行類型。但它們都只是對內(nèi)容講解和輸出的一種抽象圖形解釋，用來輔助作者意圖的表達(dá)。

比如我們 B 端課程中使用的 B 端設(shè)計師技能掌握圖形，采取圓的形式，這樣講解起來更方便，也更好展現(xiàn)流程（樹狀圖會太長根本放不下去）。

 

但對于個人的實際學(xué)習(xí)來說，這種圖形是沒辦法直接進(jìn)行記憶的，而且顯然可以整理得更細(xì)致，所以我們就可以通過思維導(dǎo)圖的形式，對自己職業(yè)需要掌握的技能整理下來，作為自己的學(xué)習(xí)目標(biāo)。

 

一個靈活的思維導(dǎo)圖，會隨著你對職業(yè)的認(rèn)識加深和計劃的調(diào)整始終處于一個更新的狀態(tài)，輔助你對當(dāng)前已經(jīng)掌握的，和準(zhǔn)備掌握的技能有更全面的認(rèn)識。強(qiáng)烈建議所有同學(xué)都培養(yǎng)這種習(xí)慣。

再者，就是進(jìn)入到更細(xì)節(jié)的領(lǐng)域，比如一個簡單的技能，還是一本書，通過思維導(dǎo)圖完成知識點的拆解和整理。這在網(wǎng)上是最常見的思維導(dǎo)圖，就不在這里多做介紹了。

 

最后一點，就要簡單解釋思維導(dǎo)圖的輸出了。如果我們做的思維導(dǎo)圖僅僅是給自己看的，那么就沒有輸出的需求，但如果思維導(dǎo)圖是要展示給別人的呢？

對于一般的評審還是方案說明，我們只需要在導(dǎo)出思維導(dǎo)圖前，根據(jù)展示的畫布，調(diào)節(jié)方向、類型，以及精簡展示內(nèi)容的數(shù)量，讓文字能被正常看見即可。

 

但如果我們要在作品集中展示呢？相信大家已經(jīng)看過不少作品集中包含思維導(dǎo)圖展示頁面結(jié)構(gòu)的案例了。

 

見過非常多新人在問這類思維導(dǎo)圖要用什么軟件制作，答案是本文羅列的那些工具都做不到上方案例的效果。要想在作品集的展示中獲得良好的觀感，就只能自己手動繪制。

也就是說，你們要自己用 PS/AI/Sketh/XD/Figma 等軟件畫一遍。你可以根據(jù)當(dāng)前的場景和氛圍去設(shè)計合適的樹狀圖樣式，我就不慢慢做怎么畫樹狀圖的軟件教學(xué)了，只強(qiáng)調(diào)一個細(xì)節(jié)，就是連接的弧線應(yīng)該要怎么畫才準(zhǔn)確。

不管你使用上下還是左右的布局，如果應(yīng)用到弧線，就不能每個弧線全用肉眼預(yù)估來拖拽貝塞爾。最簡單的做法，先確定出包含幾個二級節(jié)點，畫出等距離的橫線，然后先拖出最上或者最下的弧線，確?？刂贫它c都處于水平方向。然后復(fù)制這個弧線，將對應(yīng)一側(cè)的端點移動到對應(yīng)橫線上去即可。

 

切記要保證弧線的一致和穩(wěn)定，而不是歪歪扭扭的。再之后，想要設(shè)計成什么樣的風(fēng)格，增加什么樣式，就根據(jù)你們自己的想法決定了。

 

強(qiáng)烈建議大家日常多使用思維導(dǎo)圖，因為它能很好的鍛煉我們結(jié)構(gòu)化思維能力。用的越多，你就會發(fā)現(xiàn)在你生活困擾你的問題就會越來越少。

之后，還會出一篇完整的流程圖介紹，繼續(xù)解釋和圖形有關(guān)的知識。

下篇再見~