起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門(mén)專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)如何正確的畫(huà)出功能邏輯圖？
當(dāng)我們需要設(shè)計(jì)任務(wù)型功能的時(shí)候，除了基礎(chǔ)的線框圖和交互，更需要提前搞清楚整個(gè)功能的內(nèi)部邏輯流程，簡(jiǎn)稱功能邏輯圖。
舉幾個(gè)大家熟悉的任務(wù)型功能作為例子，方便大家理解概念。
比如電商的下單，大概包含查看商品→選擇數(shù)量→填寫(xiě)收貨地址→添加留言→付款。
其中的退貨也是，選擇商品→申請(qǐng)退貨→填寫(xiě)退貨信息→賣家審批→寄送商品→賣家確認(rèn)物品無(wú)誤→退款到賬。
包括優(yōu)惠券的使用，是生成訂單前還是訂單后都是有講究的。
一、為什么需要功能邏輯圖
當(dāng)需要設(shè)計(jì)這樣復(fù)雜步驟的功能，一定要學(xué)會(huì)畫(huà)出內(nèi)部的邏輯流程。
當(dāng)然有時(shí)候也需要結(jié)合功能結(jié)構(gòu)的思想，先拆分功能盡量少耦合，再畫(huà)出內(nèi)部邏輯。
然后和后端工程師過(guò)一遍邏輯，如果沒(méi)有問(wèn)題。再去設(shè)計(jì)具體的前端頁(yè)面，最后才是專注于視覺(jué)細(xì)節(jié)。
如果沒(méi)有先產(chǎn)出功能邏輯圖，而是只畫(huà)線框圖和交互，那修改迭代的次數(shù)至少是上百次。
二、功能邏輯圖是什么
表現(xiàn)功能內(nèi)部的邏輯走向?？芍笇?dǎo)設(shè)計(jì)具體的頁(yè)面和交互。
功能邏輯圖和功能結(jié)構(gòu)圖的區(qū)別
注意是功能內(nèi)部的邏輯流程，不是誤認(rèn)為是拆分功能。后者詳見(jiàn)《如何正確的畫(huà)出功能結(jié)構(gòu)圖》。
兩種圖形的使用場(chǎng)景是不一樣的，分析功能的維度是不一樣的。
一般來(lái)說(shuō)先從業(yè)務(wù)上拆分功能到最細(xì)的粒度，然后再去畫(huà)功能邏輯圖。有時(shí)候最細(xì)粒度的功能很簡(jiǎn)單，邏輯圖可不畫(huà)。
多啰嗦一句，區(qū)分這2者也可以使用UML的用例思想來(lái)區(qū)分。
功能邏輯圖和狀態(tài)機(jī)的區(qū)別
通俗意義上的功能邏輯圖表現(xiàn)是行為這個(gè)維度以及變化，而狀態(tài)機(jī)是狀態(tài)間的變化，維度是狀態(tài)。后者詳見(jiàn)《如何繪畫(huà)狀態(tài)機(jī)來(lái)描述業(yè)務(wù)變化》。
功能邏輯圖和UML時(shí)序圖的區(qū)別
算是時(shí)序圖的簡(jiǎn)易版吧，UML學(xué)起來(lái)有一定門(mén)檻。但是功能邏輯圖很容易上手，只是欠缺一些uml的特性。
三、如何畫(huà)功能邏輯圖
繼續(xù)以電商APP的下單功能為例來(lái)講一下如何畫(huà)下單這個(gè)功能的邏輯圖。
因?yàn)檫@個(gè)功能實(shí)在是太復(fù)雜，不建議一次性畫(huà)出邏輯流程。建議先按照上文《如何正確的畫(huà)出功能結(jié)構(gòu)圖》拆分出多個(gè)子功能。
然后按照子功能分別畫(huà)出對(duì)應(yīng)的功能邏輯圖。注意這里只畫(huà)了立即購(gòu)買的下單功能，購(gòu)物車結(jié)算的可以查看加入購(gòu)物車，加載購(gòu)物車，展示購(gòu)物車，操作購(gòu)物車。
選擇商品
確認(rèn)訂單
提交訂單
四、功能邏輯圖的元素
建議使用Axure來(lái)畫(huà)，因?yàn)檫€支持跳轉(zhuǎn)到對(duì)應(yīng)的前端線框圖，方便閱讀。詳見(jiàn)Axure原型加流程圖功能的高效結(jié)合。
行為
使用矩形框表示，沒(méi)可以區(qū)分用戶行為和系統(tǒng)行為，uml時(shí)序圖中有區(qū)分。
流程
使用有向箭頭表示行為的流程。
判斷條件
使用菱形表示邏輯的多種路線。如果不復(fù)雜，可不用。
其他文字
用來(lái)輔助理解，可忽略。
五、總結(jié)
強(qiáng)調(diào)一下不要搞混功能邏輯圖和功能結(jié)構(gòu)圖的運(yùn)用場(chǎng)景。
我的建議是能拆分就拆分成功能結(jié)構(gòu)，不能拆分就畫(huà)功能邏輯。
相關(guān)閱讀
如何繪畫(huà)狀態(tài)機(jī)來(lái)描述業(yè)務(wù)變化
#專欄作家#
浪子，業(yè)務(wù)型PM，浪子PRD系列51prd.com，公眾號(hào)langzisay。
本文由 @浪子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
請(qǐng)問(wèn)功能邏輯圖和功能流程圖的區(qū)別在哪呢？
你好，小白請(qǐng)教一下，請(qǐng)問(wèn)“拆分功能到最細(xì)的粒度”，這個(gè)粒度怎么理解，是什么意思呢
應(yīng)該在功能結(jié)構(gòu)圖這篇文章里面有細(xì)講http://www.aharts.cn/rp/696450.html
可以理解為“維度”嗎
實(shí)際項(xiàng)目中功能結(jié)構(gòu)圖和功能邏輯圖都要畫(huà)嗎？還是說(shuō)視情況而定
一般來(lái)說(shuō)功能結(jié)構(gòu)圖還是需要畫(huà)的。功能邏輯圖視情況而定，不復(fù)雜的功能可以不畫(huà)。
嗯嗯，我目前就是這樣的，謝謝
看到第一位留言，我想說(shuō)，這個(gè)可能適合新手。
健健康康
干貨
質(zhì)量太低了
哪方面？
最好分一下實(shí)物商品、虛擬商品；加入購(gòu)物車、立即購(gòu)買對(duì)SKU的判斷，提升用戶體驗(yàn)
其他文章里面寫(xiě)了，這篇文章只是用商城的一些邏輯當(dāng)案例罷了。
6666