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

從功能結構圖到功能流程圖

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

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

這邊要強調一下，功能流程圖是寫給你自己看的，是最后梳理頁面流程用的，他不是畫給開發(fā)人員看的，所以其中是不包含邏輯，沒有if-else。可能只會包含一些簡單的跳轉邏輯。

完成了功能流程圖之后，接下來就是頁面流程圖了，這個就是要把上面的功能點對應的放到相關的頁面當中了，那么應該如何做呢，又有哪些需要注意的地方呢？

終極目標:頁面流程圖

頁面流程圖的顆粒度其實就是我們用戶看到的界面了，通過界面中功能的遞進來推進頁面的切換。

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

那么一個頁面中間應該包含多少個功能點呢？這個說實話沒有一定的要求，應該按照項目的需求，具體問題具體分析。這邊我就說幾個設計頁面流程需要注意的點:

1.目標是為了完成一個功能模塊的功能點盡量放在一個頁面中，不要讓用戶的體驗中斷，產生我是誰，我在哪里的感覺。

舉例：一般我們不會把登錄界面拆成兩個頁面，一個頁面讓用戶輸入用戶名/手機，一個頁面讓用戶輸入密碼。

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

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

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

4.完成頁面流程之后再次確認一遍功能點已經全部收納到頁面中了，防止功能缺失和遺漏。

按照上面幾點，我將之前的功能流程圖中的功能點收納到了下面6個頁面中:

之后明確了每個頁面需要包含的功能點，我們就可以開始單獨頁面的設計了。而頁面設計又是一個新的世界，又要考慮到許多東西，這邊就不再展開說了。

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

相關閱讀

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

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

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