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