2022-9-1 資深UI設(shè)計者
思維導圖，英文名叫 The Mind Map，是一種用來開展、記錄發(fā)散性思維的圖形工具。可以說是目前職業(yè)辦公中使用最廣泛最基礎(chǔ)的圖形工具，無論是做故事大綱、頭腦風暴、任務(wù)拆解，都會進行應用。
通常，思維導圖會有一個到兩個中心主題，然后中心會擴展出不同的子節(jié)點，并使用連線進行關(guān)聯(lián)。每個子節(jié)點，都可以繼續(xù)建立更下級的節(jié)點，依次類推。
通過這種方法，我們可以建立出比較結(jié)構(gòu)化的信息層級，中心主題是宏觀內(nèi)核，越往下級拓展的，就是越細節(jié)的信息。
而隨著思維導圖軟件的發(fā)展和完善，除中心主題、連線、節(jié)點外，我們還可以在這個圖形中添加關(guān)聯(lián)、備注、圖標、待辦、圖片和附件等內(nèi)容。創(chuàng)建思維導圖的工具在今天隨手可得，無論是桌面端還是網(wǎng)頁端，想要創(chuàng)建思維導圖，從下方選擇一個即可。
思維導圖存在的價值，并不僅僅是我們要做一個方便別人理解的架構(gòu)圖形，而是通過它本身包含的結(jié)構(gòu)層級屬性，來幫助我們梳理自己的思路、想法、靈感。比如你要搞清楚進階設(shè)計師應該具備哪些能力，如何進行學習，那就可以通過思考，查找資料，以樹狀圖的形式記錄和整理。
它最大的價值，就是幫助我們在繪制的過程規(guī)范我們的思維形式，能針對不同節(jié)點實現(xiàn)聚焦和深入探索與思考。而不讓想法特別離散一會兒插畫，一會兒體驗，過一會兒又是平面四要素般毫無章法。
在互聯(lián)網(wǎng)團隊中，使用思維導圖輸出除了日常工作內(nèi)容計劃外，最多應用于和產(chǎn)品需求相關(guān)的表述上，有一些專用的思維導圖類型需要我們認識，包含下面三種：
- 產(chǎn)品功能結(jié)構(gòu)圖
- 產(chǎn)品頁面結(jié)構(gòu)圖
- 產(chǎn)品信息結(jié)構(gòu)圖
下面我們將從這三個思維導圖入手，了解如何實現(xiàn)它們的輸出，以及如果應用思維導圖工具來提升日常工作的效率，以及規(guī)劃自己的職業(yè)技能發(fā)展。
功能、頁面、信息結(jié)構(gòu)圖，都是產(chǎn)品經(jīng)理輸出的內(nèi)容產(chǎn)物，通常會置入到 PRD 中供團隊成員查看和理解。但是，這三種思維導圖不僅看起來差別不大，而且很容易搞混。
我們首先介紹的第一個結(jié)構(gòu)圖類型，叫產(chǎn)品功能結(jié)構(gòu)圖，用來解釋產(chǎn)品本身功能的樹狀圖。如果學習過用戶體驗五要素的同學，就可以把它理解成它決定的就是范圍層的內(nèi)容。
通常，產(chǎn)品再開始進行一個新產(chǎn)品功能規(guī)劃的時候，第一件事就是啟動思維導圖工具，開始整理該產(chǎn)品會包含的具體功能，和對應的功能層級，這應該非常好理解。
比如我們用潮汐這個 APP 舉例，如果我要規(guī)劃一個這樣的產(chǎn)品，我會先考慮它包含的核心功能白噪音，然后向后思考白噪音包含哪些種類，如專注、睡眠、小憩、呼吸。每個白噪音類型里，我再根據(jù)對應場景提供更細節(jié)的功能出來。
然后，我再想到，白噪音不是只有固定一種的，而是包含非常多種，是不是就該提供一個放不同白噪音的地方，于是就增加了探索的模塊。在這個模塊里，包含搜索、廣告位推薦、分類推薦功能。每個獨立的白噪音，還可以對它進行收藏、分享等功能。
再然后，就還有添加用戶系統(tǒng)，增加會員功能，統(tǒng)計功能，個性化定制等，就可以進一步完善這個圖表將所有想到的功能多羅列出來。
雖然產(chǎn)品需求的推導前面還有別的專業(yè)分析步驟，但落實到具體包含功能的制定上，過程和結(jié)果都如上方的一致。通過思維導圖逐個模塊添加和細化，明確它們的類型、層級。
一個修訂完整的功能結(jié)構(gòu)圖，就能清晰的表示這款產(chǎn)品包含了哪些功能和服務(wù)。
產(chǎn)品頁面結(jié)構(gòu)圖，是一個和功能結(jié)構(gòu)圖非常容易搞混的圖形。很多產(chǎn)品經(jīng)理在 PRD 中會在做完功能結(jié)構(gòu)圖以后緊跟頁面結(jié)構(gòu)圖，兩張圖形中會包含大量重復的名稱和相似的結(jié)構(gòu)，讓新手一頭霧水。
頁面結(jié)構(gòu)圖等同于體驗五要素中的結(jié)構(gòu)層，用來詮釋產(chǎn)品包含的頁面、層級、分支。
首先明確一個概念，就是功能并不等于頁面。
一個頁面中可能包含多個功能，比如專注頁面中，就包含了時間、開始、暫停、停止、模式、標簽、場景設(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)重要，因為它決定了我們應該設(shè)計哪些頁面，可以說是決定了我們的版本設(shè)計任務(wù)和工作量。不管產(chǎn)品有沒有提供這個圖形，我們都要自己梳理出來。
功能和頁面的問題解決了，就所有結(jié)構(gòu)性問題都解決了嘛？顯然還沒有。
五要素中還包含一個框架層和視覺層，視覺層指具體頁面的樣式，那得用設(shè)計圖來表示，顯然不是思維導圖工具能實現(xiàn)的。那么，就剩下框架層一個還需要我們注意了。
框架層的表現(xiàn)無外乎就是單個頁面包含的內(nèi)容、交互、布局。交互和布局都是由原型圖來呈現(xiàn)的，但不管你有什么跨時代的交互思路還是殿堂級的排版能力，都要面對一個嚴肅的問題 —— 界面里要擺啥？
雖說功能地圖有一定的描述，但顯然還是比較寬泛模糊的，設(shè)計師是需要更具體的字段內(nèi)容的。這就是信息結(jié)構(gòu)圖存在的價值，描述每個功能模塊或頁面下方，包含哪些信息字段內(nèi)容。
比如在白噪音的詳情頁中，要放哪些信息？就一個音頻文件，我們要往里塞什么好。如果作為產(chǎn)品我的出發(fā)點就會是豐富這個頁面的一些信息，讓用戶更有欲望使用，或者進行識別。
仔細整理這些信息，你會發(fā)現(xiàn)不少頁面雖然看起來簡單，但是實際信息量一點都不少。而這些信息，不是設(shè)計師還是開發(fā)隨手做的，都是經(jīng)過產(chǎn)品規(guī)劃才落地的。
每個具體的信息，類似開發(fā)環(huán)境中常說的 “字段”，它也確實是產(chǎn)品經(jīng)理工作中后續(xù)和開發(fā)梳理字段表的雛形。
所以，到這里我們也就基本了解了項目中最常用的三個具體思維導圖。它們包含一定的先后順序，“功能 —— 頁面 —— 信息” 依次推導，從核心到細節(jié)。
梳理這些內(nèi)容，對后續(xù)我們展示、理解項目會起到非常積極的作用，也是 PRD 文檔中必備的圖形元素之一。即使項目環(huán)境中不需要設(shè)計師自己上手，你也要保證可以明白它們各自的作用，以及看懂它們在實際文檔中表述的內(nèi)容。
除了在產(chǎn)品說明中使用思維導圖，它還可以應用在我們工作和學習領(lǐng)域中的方方面面。我們就分別從這兩個領(lǐng)域切入來講一下設(shè)計師如何利用思維導圖，提升自身能效。
在工作上，設(shè)計師可能也需要在競品分析里輸出上面這3種圖形，但還有很多別的工作場景需要我們應用，最常見的莫過于工作待辦事項的整理了。
比如我們對一整個項目的工作內(nèi)容進行梳理和評估，那我們就可以根據(jù)時間線或者內(nèi)容類型，將所有要做的事情梳理成樹狀圖。
或者，做用戶現(xiàn)場訪談這種調(diào)研，一個跨度接近一周的工作，我們也可以用思維導圖將前后需要完成的工作和順序解構(gòu)記錄下來。
任何復雜的工作流程，只要經(jīng)過結(jié)構(gòu)化的拆解，就可以細化成更容易理解和執(zhí)行的步驟。也更能幫助我們判斷工作量和制定時間計劃。
在學習領(lǐng)域上，思維導圖最常用的在我看來有兩個方向，一個是對自己知識體系的整理，另一個是對于學科、書本的知識點整理。
雖然我們可能在各個干貨或者公開課里，看到很多有關(guān)職業(yè)技能樹的說明，并伴隨不同的通行類型。但它們都只是對內(nèi)容講解和輸出的一種抽象圖形解釋，用來輔助作者意圖的表達。
比如我們 B 端課程中使用的 B 端設(shè)計師技能掌握圖形，采取圓的形式，這樣講解起來更方便，也更好展現(xiàn)流程（樹狀圖會太長根本放不下去）。
但對于個人的實際學習來說，這種圖形是沒辦法直接進行記憶的，而且顯然可以整理得更細致，所以我們就可以通過思維導圖的形式，對自己職業(yè)需要掌握的技能整理下來，作為自己的學習目標。
一個靈活的思維導圖，會隨著你對職業(yè)的認識加深和計劃的調(diào)整始終處于一個更新的狀態(tài)，輔助你對當前已經(jīng)掌握的，和準備掌握的技能有更全面的認識。強烈建議所有同學都培養(yǎng)這種習慣。
再者，就是進入到更細節(jié)的領(lǐng)域，比如一個簡單的技能，還是一本書，通過思維導圖完成知識點的拆解和整理。這在網(wǎng)上是最常見的思維導圖，就不在這里多做介紹了。
最后一點，就要簡單解釋思維導圖的輸出了。如果我們做的思維導圖僅僅是給自己看的，那么就沒有輸出的需求，但如果思維導圖是要展示給別人的呢？
對于一般的評審還是方案說明，我們只需要在導出思維導圖前，根據(jù)展示的畫布，調(diào)節(jié)方向、類型，以及精簡展示內(nèi)容的數(shù)量，讓文字能被正常看見即可。
但如果我們要在作品集中展示呢？相信大家已經(jīng)看過不少作品集中包含思維導圖展示頁面結(jié)構(gòu)的案例了。
見過非常多新人在問這類思維導圖要用什么軟件制作，答案是本文羅列的那些工具都做不到上方案例的效果。要想在作品集的展示中獲得良好的觀感，就只能自己手動繪制。
也就是說，你們要自己用 PS/AI/Sketh/XD/Figma 等軟件畫一遍。你可以根據(jù)當前的場景和氛圍去設(shè)計合適的樹狀圖樣式，我就不慢慢做怎么畫樹狀圖的軟件教學了，只強調(diào)一個細節(jié)，就是連接的弧線應該要怎么畫才準確。
不管你使用上下還是左右的布局，如果應用到弧線，就不能每個弧線全用肉眼預估來拖拽貝塞爾。最簡單的做法，先確定出包含幾個二級節(jié)點，畫出等距離的橫線，然后先拖出最上或者最下的弧線，確?？刂贫它c都處于水平方向。然后復制這個弧線，將對應一側(cè)的端點移動到對應橫線上去即可。
切記要保證弧線的一致和穩(wěn)定，而不是歪歪扭扭的。再之后，想要設(shè)計成什么樣的風格，增加什么樣式，就根據(jù)你們自己的想法決定了。
強烈建議大家日常多使用思維導圖，因為它能很好的鍛煉我們結(jié)構(gòu)化思維能力。用的越多，你就會發(fā)現(xiàn)在你生活困擾你的問題就會越來越少。
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
作者：酸梅干超人 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
藍藍設(shè)計的小編 http://sillybuy.com