簡(jiǎn)單的功能直接畫(huà)l線框圖。但是復(fù)雜的功能怎么辦呢？文章為你解讀。

通常PM梳理完了產(chǎn)品的整體架構(gòu)，就進(jìn)入正式的原型設(shè)計(jì)。簡(jiǎn)單的功能直接畫(huà)l線框圖。但是復(fù)雜的功能怎么辦呢？

這時(shí)候初級(jí)PM估計(jì)還是一個(gè)頁(yè)面一個(gè)頁(yè)面的畫(huà)，一個(gè)控件一個(gè)控件的摳細(xì)節(jié)。然后畫(huà)到一半發(fā)現(xiàn)有問(wèn)題，再一個(gè)頁(yè)面一個(gè)頁(yè)面的往回修改。

從時(shí)間上來(lái)看，反反復(fù)復(fù)修改幾十遍，浪費(fèi)時(shí)間和精力。

從溝通上來(lái)看，技術(shù)會(huì)因?yàn)橐淮涡宰鲞@么復(fù)雜的功能，懟你們。

從結(jié)果上來(lái)看，大家看到的是一個(gè)細(xì)節(jié)很完美而整體復(fù)雜混亂的功能。

一、為什么需要功能結(jié)構(gòu)圖

碰到上述情況的時(shí)候，其實(shí)你應(yīng)該先把整體分析一下這個(gè)功能，畫(huà)出詳細(xì)的內(nèi)部結(jié)構(gòu)，然后和前后端工程師過(guò)一遍需求。讓大家清楚這個(gè)功能有幾部分組成，每部分是什么，以及各有什么作用。

最后根據(jù)公司的要求，是做完這些功能重要還是必須某個(gè)時(shí)間點(diǎn)上線重要，來(lái)綜合考慮是做完整個(gè)功能，還是這個(gè)功能的部分子功能。

這就是功能結(jié)構(gòu)圖的由來(lái)。

二、功能結(jié)構(gòu)圖是什么

功能結(jié)構(gòu)圖是用來(lái)表示復(fù)雜功能的內(nèi)部結(jié)構(gòu)，包含了哪些子功能。

設(shè)計(jì)特性

最好設(shè)計(jì)成獨(dú)立的模塊，和其他功能盡量不存在關(guān)聯(lián)。

注意是功能內(nèi)部結(jié)構(gòu)，不是誤認(rèn)為是功能間的關(guān)系。詳見(jiàn)如何正確的畫(huà)出功能流程圖。

三、如何畫(huà)功能結(jié)構(gòu)圖

以電商APP的下單功能l為例來(lái)講一下如何畫(huà)功能結(jié)構(gòu)圖。

分析功能結(jié)構(gòu)

當(dāng)我們接到這樣一個(gè)需求的時(shí)候，腦子中想到的是我們?cè)谔詫毦〇|等購(gòu)物平臺(tái)的下單步驟。很容易就想到至少要這樣做。

然后這時(shí)候就直接去畫(huà)頁(yè)面，或者照抄競(jìng)品來(lái)設(shè)計(jì)原型。

避免步驟頁(yè)面化

有3個(gè)步驟，那就畫(huà)3個(gè)頁(yè)面好了。

簡(jiǎn)單粗暴的“步驟=頁(yè)面”，只是偷懶的做法。

比如提交訂單可以只是一個(gè)提交的按鈕，選擇商品可以有多種方式，可能會(huì)涉及到多個(gè)頁(yè)面。

避免功能競(jìng)品化

貌似競(jìng)品淘寶有現(xiàn)成的啊，全部照抄一遍就好了。

事實(shí)上你們可能不是電商平臺(tái)，商品也沒(méi)有不同sku。

細(xì)化功能粒度

根據(jù)自身業(yè)務(wù)，將下單功能拆分到更細(xì)的粒度。

詳見(jiàn)訂單結(jié)構(gòu)，你可以結(jié)合下方的訂單物理結(jié)構(gòu)，訂單邏輯結(jié)構(gòu)，訂單金額結(jié)構(gòu)一起閱讀。

如果你愿意按照這種思路去拆分，可以避免把步驟當(dāng)做頁(yè)面去畫(huà)了。

再去對(duì)照自己的業(yè)務(wù)是不是也需要用購(gòu)物車，是否也需要有有優(yōu)惠券。如果是剛剛上線的，這2個(gè)子功能完全沒(méi)有必要設(shè)計(jì)。

控制細(xì)分粒度

沒(méi)必要無(wú)限制的去細(xì)分粒度，一般2到3層就夠了。比如上面的下單功能架構(gòu)圖就是如此。

不是不可以，而是一般情況下沒(méi)必要耗費(fèi)太多的精力。但是如果需要拆分最底交易系統(tǒng)架構(gòu)的時(shí)候，是有必要的。有興趣的朋友可以看看淘寶產(chǎn)品十年事或者有贊訂單系統(tǒng)的拆分。

四、使用Axure畫(huà)

建議使用Axure的流程圖功能來(lái)畫(huà)，因?yàn)檫€支持跳轉(zhuǎn)到對(duì)應(yīng)的前端線框圖，方便閱讀。詳見(jiàn)Axure原型加流程圖功能的高效結(jié)合。

矩形框

表示子功能，子子功能。

有向箭頭

表示子功能間的關(guān)系。

虛線框

用來(lái)表示這部分屬于哪個(gè)子功能。

五、總結(jié)

建議將這篇文章和如何正確的畫(huà)出功能流程圖一起閱讀，前者是功能內(nèi)部的結(jié)構(gòu)圖，后者是產(chǎn)品整體的功能流程圖。

我是對(duì)標(biāo)“任務(wù)型產(chǎn)品”來(lái)寫(xiě)了這2篇文章，但是也可以反過(guò)來(lái)應(yīng)用這2種圖形，比如滴滴出行的主體功能更適合用一個(gè)個(gè)功能結(jié)構(gòu)圖來(lái)畫(huà)。

相關(guān)閱讀

如何正確的畫(huà)出功能流程圖

如何正確地畫(huà)出頁(yè)面流程圖

Axure原型加流程圖功能的高效結(jié)合

#專欄作家#

浪子，人人都是產(chǎn)品經(jīng)理專欄作家，業(yè)務(wù)型PM，公眾號(hào)：langzisay。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。