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