當我們需要設(shè)計任務(wù)型功能的時候，除了基礎(chǔ)的線框圖和交互，更需要提前搞清楚整個功能的內(nèi)部邏輯流程，簡稱功能邏輯圖。

舉幾個大家熟悉的任務(wù)型功能作為例子，方便大家理解概念。

比如電商的下單，大概包含查看商品→選擇數(shù)量→填寫收貨地址→添加留言→付款。

其中的退貨也是，選擇商品→申請退貨→填寫退貨信息→賣家審批→寄送商品→賣家確認物品無誤→退款到賬。

包括優(yōu)惠券的使用，是生成訂單前還是訂單后都是有講究的。

一、為什么需要功能邏輯圖

當需要設(shè)計這樣復(fù)雜步驟的功能，一定要學(xué)會畫出內(nèi)部的邏輯流程。

當然有時候也需要結(jié)合功能結(jié)構(gòu)的思想，先拆分功能盡量少耦合，再畫出內(nèi)部邏輯。

然后和后端工程師過一遍邏輯，如果沒有問題。再去設(shè)計具體的前端頁面，最后才是專注于視覺細節(jié)。

如果沒有先產(chǎn)出功能邏輯圖，而是只畫線框圖和交互，那修改迭代的次數(shù)至少是上百次。

二、功能邏輯圖是什么

表現(xiàn)功能內(nèi)部的邏輯走向?？芍笇?dǎo)設(shè)計具體的頁面和交互。

功能邏輯圖和功能結(jié)構(gòu)圖的區(qū)別

注意是功能內(nèi)部的邏輯流程，不是誤認為是拆分功能。后者詳見《如何正確的畫出功能結(jié)構(gòu)圖》。

兩種圖形的使用場景是不一樣的，分析功能的維度是不一樣的。

一般來說先從業(yè)務(wù)上拆分功能到最細的粒度，然后再去畫功能邏輯圖。有時候最細粒度的功能很簡單，邏輯圖可不畫。

多啰嗦一句，區(qū)分這2者也可以使用UML的用例思想來區(qū)分。

功能邏輯圖和狀態(tài)機的區(qū)別

通俗意義上的功能邏輯圖表現(xiàn)是行為這個維度以及變化，而狀態(tài)機是狀態(tài)間的變化，維度是狀態(tài)。后者詳見《如何繪畫狀態(tài)機來描述業(yè)務(wù)變化》。

功能邏輯圖和UML時序圖的區(qū)別

算是時序圖的簡易版吧，UML學(xué)起來有一定門檻。但是功能邏輯圖很容易上手，只是欠缺一些uml的特性。

三、如何畫功能邏輯圖

繼續(xù)以電商APP的下單功能為例來講一下如何畫下單這個功能的邏輯圖。

因為這個功能實在是太復(fù)雜，不建議一次性畫出邏輯流程。建議先按照上文《如何正確的畫出功能結(jié)構(gòu)圖》拆分出多個子功能。

然后按照子功能分別畫出對應(yīng)的功能邏輯圖。注意這里只畫了立即購買的下單功能，購物車結(jié)算的可以查看加入購物車，加載購物車，展示購物車，操作購物車。

選擇商品

確認訂單

提交訂單

四、功能邏輯圖的元素

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

行為

使用矩形框表示，沒可以區(qū)分用戶行為和系統(tǒng)行為，uml時序圖中有區(qū)分。

流程

使用有向箭頭表示行為的流程。

判斷條件

使用菱形表示邏輯的多種路線。如果不復(fù)雜，可不用。

其他文字

用來輔助理解，可忽略。

五、總結(jié)

強調(diào)一下不要搞混功能邏輯圖和功能結(jié)構(gòu)圖的運用場景。

我的建議是能拆分就拆分成功能結(jié)構(gòu)，不能拆分就畫功能邏輯。

相關(guān)閱讀

如何正確的畫出功能結(jié)構(gòu)圖

如何繪畫狀態(tài)機來描述業(yè)務(wù)變化

如何正確的畫出功能流程圖

如何正確地畫出頁面流程圖

#專欄作家#

浪子，業(yè)務(wù)型PM，浪子PRD系列51prd.com，公眾號langzisay。

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