上一篇文章寫到了根據(jù)業(yè)務(wù)流程去完成功能結(jié)構(gòu)圖，那么這篇就接著往下說，如何根據(jù)功能結(jié)構(gòu)圖來完成功能流程圖。

從功能結(jié)構(gòu)圖到功能流程圖

之前我們把買家的功能模塊梳理了出來，歸納為:

然后又拆分了一下購(gòu)買商品這個(gè)功能模塊，細(xì)化到了購(gòu)買商品的功能結(jié)構(gòu)圖。那么下一步就是將這四個(gè)功能模塊全部拆解一下，然后通過流程圖將這些功能點(diǎn)串起來形成一條完整的功能流程。分解的方法和上一章提到的一樣，將四個(gè)功能模塊全部拆解成功能結(jié)構(gòu)之后，根據(jù)功能流程將它們連接在一起就形成了功能流程圖。

這邊要強(qiáng)調(diào)一下，功能流程圖是寫給你自己看的，是最后梳理頁(yè)面流程用的，他不是畫給開發(fā)人員看的，所以其中是不包含邏輯，沒有if-else?？赡苤粫?huì)包含一些簡(jiǎn)單的跳轉(zhuǎn)邏輯。

完成了功能流程圖之后，接下來就是頁(yè)面流程圖了，這個(gè)就是要把上面的功能點(diǎn)對(duì)應(yīng)的放到相關(guān)的頁(yè)面當(dāng)中了，那么應(yīng)該如何做呢，又有哪些需要注意的地方呢？

終極目標(biāo):頁(yè)面流程圖

頁(yè)面流程圖的顆粒度其實(shí)就是我們用戶看到的界面了，通過界面中功能的遞進(jìn)來推進(jìn)頁(yè)面的切換。

看到上面的功能流程圖，是不是就會(huì)有一種一個(gè)功能對(duì)應(yīng)一個(gè)頁(yè)面的感覺。如果你真的這么去設(shè)計(jì)了，我打賭你的用戶絕對(duì)會(huì)罵街。APP設(shè)計(jì)的初衷就是幫助用戶更好更快的去處理生活中的問題，如果流程太多，頁(yè)面跳轉(zhuǎn)太過頻繁，會(huì)在某種程度上影響用戶體驗(yàn)。所以如果直接簡(jiǎn)單粗暴的一個(gè)功能點(diǎn)對(duì)應(yīng)一個(gè)界面的話，那就不好了。

那么一個(gè)頁(yè)面中間應(yīng)該包含多少個(gè)功能點(diǎn)呢？這個(gè)說實(shí)話沒有一定的要求，應(yīng)該按照項(xiàng)目的需求，具體問題具體分析。這邊我就說幾個(gè)設(shè)計(jì)頁(yè)面流程需要注意的點(diǎn):

1.目標(biāo)是為了完成一個(gè)功能模塊的功能點(diǎn)盡量放在一個(gè)頁(yè)面中，不要讓用戶的體驗(yàn)中斷，產(chǎn)生我是誰(shuí)，我在哪里的感覺。

舉例：一般我們不會(huì)把登錄界面拆成兩個(gè)頁(yè)面，一個(gè)頁(yè)面讓用戶輸入用戶名/手機(jī)，一個(gè)頁(yè)面讓用戶輸入密碼。

2.需要考慮到一個(gè)功能點(diǎn)需要展示的內(nèi)容，不要將過多元素一下子全部展現(xiàn)給用戶，該拆還是要拆開！

舉例：上面的功能流程圖中，挑選商品中就包含了查看商品列表的功能點(diǎn)，這個(gè)功能由于要展現(xiàn)所有相關(guān)的商品，所以展示信息較多，所以一般的做法是單獨(dú)成頁(yè)。

3.明確觸發(fā)頁(yè)面跳轉(zhuǎn)的trigger，即觸發(fā)條件。頁(yè)面跳轉(zhuǎn)肯定是有一定跳轉(zhuǎn)邏輯的，要明確好跳轉(zhuǎn)的邏輯。

4.完成頁(yè)面流程之后再次確認(rèn)一遍功能點(diǎn)已經(jīng)全部收納到頁(yè)面中了，防止功能缺失和遺漏。

按照上面幾點(diǎn)，我將之前的功能流程圖中的功能點(diǎn)收納到了下面6個(gè)頁(yè)面中:

之后明確了每個(gè)頁(yè)面需要包含的功能點(diǎn)，我們就可以開始單獨(dú)頁(yè)面的設(shè)計(jì)了。而頁(yè)面設(shè)計(jì)又是一個(gè)新的世界，又要考慮到許多東西，這邊就不再展開說了。

本篇文章也只是說了一種方法而已，我相信很多人在自己多年的工作經(jīng)驗(yàn)中，會(huì)產(chǎn)生很多自己直覺性的行為，形成自己獨(dú)有的，適合自己的一套流程體系，我相信適合自己的才是最好的。本文目的只是分享了我自己腦子里想到的東西，其中肯定也會(huì)有許多問題，也請(qǐng)大家多多指正，多多包涵。

相關(guān)閱讀

如何去完善一句話需求？（上）

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

題圖來自PEXELS，基于CC0協(xié)議