身為產(chǎn)品經(jīng)理，若要保證所有必要的狀態(tài)轉(zhuǎn)換和事件都完整、準(zhǔn)確的在產(chǎn)品功能需求中描述出來，狀態(tài)轉(zhuǎn)換圖是必不可少的強力工具。

絕大多數(shù)智能硬件產(chǎn)品是一個包含狀態(tài)轉(zhuǎn)換、數(shù)據(jù)操作和功能執(zhí)行的綜合系統(tǒng)（這個系統(tǒng)的狀態(tài)是有限的），它在任何時刻都處于眾多狀態(tài)中的某一種狀態(tài)。只有當(dāng)某個特定的事件發(fā)生或某個被定義的標(biāo)準(zhǔn)被滿足時，系統(tǒng)的狀態(tài)才會發(fā)生轉(zhuǎn)換，由一種狀態(tài)向另一種狀態(tài)發(fā)生轉(zhuǎn)變。比如，當(dāng)處于“關(guān)閉”狀態(tài)的電燈的開關(guān)系統(tǒng)接收到用戶的指令時（用戶按開關(guān)即是“事件”），電燈從“關(guān)閉”狀態(tài)變?yōu)椤伴_啟”狀態(tài)。

一、為什么需要繪制狀態(tài)轉(zhuǎn)換圖？

當(dāng)我們用文字來描述一系列復(fù)雜的狀態(tài)轉(zhuǎn)換邏輯時，很可能會忽略某些關(guān)鍵的狀態(tài)變化過程，也可能導(dǎo)致某些狀態(tài)變化的重復(fù)和新增一些本不該出現(xiàn)的狀態(tài)變化。這就使需求不清晰，從而導(dǎo)致文檔的閱讀者（通常是工程師）無法全面的理解系統(tǒng)的行為變化。

這時候，我們就需要引入UML中的狀態(tài)轉(zhuǎn)換圖來展示系統(tǒng)狀態(tài)關(guān)系的全貌，狀態(tài)轉(zhuǎn)換圖英文全稱State transition diagram，縮寫STD，簡稱狀態(tài)圖。它屬于事件驅(qū)動模型，表示系統(tǒng)對外部事件的響應(yīng)方式，能清晰的描述系統(tǒng)狀態(tài)之間的轉(zhuǎn)換順序和狀態(tài)之間的關(guān)系，在節(jié)省大量文字描述的情況下幫助工程師更好的理解需求和討論設(shè)計思路，避免開發(fā)時出現(xiàn)狀態(tài)轉(zhuǎn)換邏輯錯誤，并且系統(tǒng)實現(xiàn)后還要用狀態(tài)模型來論證系統(tǒng)的結(jié)構(gòu)和操作。狀態(tài)圖還明確的定義了狀態(tài)發(fā)生轉(zhuǎn)換時必要的觸發(fā)事件和影響狀態(tài)轉(zhuǎn)換的關(guān)鍵因素，有利于在開發(fā)過程中避免非法事件的進入。通過繪制狀態(tài)圖，還可以幫助我們檢測系統(tǒng)設(shè)計中是否存在缺陷。狀態(tài)圖既可以表示系統(tǒng)循環(huán)運行過程，也可以表示系統(tǒng)單程生命期。所以，繪制狀態(tài)轉(zhuǎn)換圖這項技能對產(chǎn)品經(jīng)理是至關(guān)重要的。

二、狀態(tài)轉(zhuǎn)換圖有哪些組成要素？

狀態(tài)圖樣例

狀態(tài)圖（STD）表示系統(tǒng)狀態(tài)和引起狀態(tài)改變的事件，它包含三種關(guān)鍵元素：

01.可能的系統(tǒng)狀態(tài)

系統(tǒng)在任何時候都會處于某種狀態(tài)中，所有系統(tǒng)都有狀態(tài)，一個狀態(tài)代表系統(tǒng)的一種行為模式。比如手機具備“待機”、“通話中”、“關(guān)機”等狀態(tài)，處于“關(guān)機”狀態(tài)的手機無法接聽電話（消息），而處于“待機”狀態(tài)的手機則可以接聽電話。這說明系統(tǒng)所處的狀態(tài)決定了系統(tǒng)對事件的響應(yīng)方式或所接受的消息。

在狀態(tài)圖中定義的狀態(tài)主要有初態(tài)(即初始狀態(tài))、終態(tài)(即最終狀態(tài))和中間狀態(tài)。在一張狀態(tài)圖中只能有一個初態(tài)，而終態(tài)則可以有0至多個。

系統(tǒng)狀態(tài)一般用圓角矩形表示，如上圖所示。其中可能還包括處于該狀態(tài)時將要執(zhí)行的非原子動作（可中斷）的簡單描述，以Do引出，動作完成后狀態(tài)就結(jié)束，然后一個從當(dāng)前狀態(tài)出發(fā)的轉(zhuǎn)換被觸發(fā)。

狀態(tài)還可能包括進入動作和退出動作，進入動作指進入狀態(tài)時執(zhí)行的原子動作（不可中斷），以Entry引出，比如手機進入“充電”狀態(tài)后屏幕就顯示充電圖標(biāo)。退出動作指退出狀態(tài)時執(zhí)行的原子動作，以Exit引出，比如手機退出“充電”狀態(tài)后屏幕就不再顯示充電圖標(biāo)，進入“待機”狀態(tài)。

02.允許的狀態(tài)轉(zhuǎn)換

即狀態(tài)之間的轉(zhuǎn)換關(guān)系，比如電腦可以從“待機”狀態(tài)轉(zhuǎn)換“睡眠”狀態(tài)。

狀態(tài)的轉(zhuǎn)換一般用連接兩個圓角矩形的箭頭表示，如上圖所示。

03.導(dǎo)致狀態(tài)發(fā)生轉(zhuǎn)換的事件

事件使得系統(tǒng)從一個狀態(tài)轉(zhuǎn)換為另一個狀態(tài)，比如用手指點擊一個處于“開啟”狀態(tài)的智能音箱的電源，使智能音箱變?yōu)椤瓣P(guān)閉”狀態(tài)，在智能音箱狀態(tài)的變化是被“用手指點擊開關(guān)”這個動作引起的，所以“用用手指點擊開關(guān)”就是一個事件。

事件主要分為四類：信號事件、調(diào)用事件、變化事件、時間事件。事件一般用狀態(tài)轉(zhuǎn)換箭頭上的文字標(biāo)簽來表示，如上圖所示。

在繪制狀態(tài)圖（系統(tǒng)建模）時，圖形符號的使用通常是非常靈活的，不必嚴(yán)格遵守符號的形式和細(xì)節(jié)，比如描述系統(tǒng)狀態(tài)，不管是圓角矩形還是圓形都是可以的，但需要注意的是，對同一事物的描述要使用相同的符號，以保證表述的一致性。

三、繪制狀態(tài)圖的步驟有哪些？

為了便于理解，我們以一個簡化了的智能洗衣機控制系統(tǒng)來分析一下繪制狀態(tài)圖的方法。這款智能洗衣機具備：一個用來顯示按鈕和設(shè)備設(shè)置的觸控屏；一個用來選擇洗滌模式的按鈕，可以選擇強力洗滌和超快洗滌兩種方式；一個用來設(shè)置水量的數(shù)字鍵盤；一個能控制開始/停止的按鈕。還具備安全鎖功能，在沒關(guān)閉洗衣機倉門時洗衣機不會工作，工作中打開蓋子洗衣機會暫停工作，且工作完成后洗衣機會發(fā)出提示音提示用戶來取衣物。

假設(shè)該智能洗衣機的操作步驟如下：

1. 選擇洗滌模式，強力洗滌或超快洗滌；
2. 用數(shù)字鍵盤設(shè)置本次洗滌所需水量；
3. 點擊開始按鈕，使用相應(yīng)洗滌模式和水量開始洗滌。

產(chǎn)品邏輯梳理清楚之后，我們下面開始繪制狀態(tài)轉(zhuǎn)換圖。

步驟1：列出產(chǎn)品/系統(tǒng)的所有狀態(tài)

梳理產(chǎn)品邏輯，列出產(chǎn)品/系統(tǒng)可能出現(xiàn)的所有狀態(tài)，比如：待機狀態(tài)、強力洗滌、快速洗滌、水量設(shè)置、可工作狀態(tài)（就緒）、不可工作狀態(tài)（異常）、正在工作等。

羅列狀態(tài)

步驟2：列出每個狀態(tài)須執(zhí)行的動作

在狀態(tài)名稱下方列出該狀態(tài)下所包含的所有動作，即用Entry，Do，Exit標(biāo)注進入動作、執(zhí)行動作和退出動作。比如：待機狀態(tài)下執(zhí)行等待指令動作、強力洗滌狀態(tài)下設(shè)置洗滌模式為強力洗滌等。

羅列動作

步驟3：確認(rèn)并繪制出引起狀態(tài)發(fā)生轉(zhuǎn)換的事件

事件可以通過狀態(tài)表來梳理，狀態(tài)表是用矩陣的形式表示不同狀態(tài)之間存在的所有轉(zhuǎn)換，通過使用狀態(tài)表和分析矩陣中的每一個單元格，能確保遍歷所有的狀態(tài)轉(zhuǎn)換事件。首先，在表格的首行和首列分別列出系統(tǒng)的所有狀態(tài)。單元格表示列狀態(tài)到行狀態(tài)之間的轉(zhuǎn)換是否有效，如果是有效的轉(zhuǎn)換狀態(tài)，在單元格中寫出引起轉(zhuǎn)換的事件，如果是無效的轉(zhuǎn)換，則可以使用“”或“無”表示。這樣的狀態(tài)表能保證我們對所有的狀態(tài)轉(zhuǎn)換沒有遺漏，它可以幫助閱讀者直觀的理解可能存在的轉(zhuǎn)換順序。

狀態(tài)轉(zhuǎn)換表

使用狀態(tài)表梳理出所有引起狀態(tài)發(fā)生轉(zhuǎn)換的事件后，就可以通過箭頭連接可以發(fā)生轉(zhuǎn)換的狀態(tài)，并在箭頭上標(biāo)注出引起該狀態(tài)轉(zhuǎn)換的事件或條件。比如：系統(tǒng)處于待機狀態(tài)時，用戶可以點擊強力洗滌按鈕進入強力洗滌狀態(tài)或點擊快速洗滌按鈕進入快速洗滌狀態(tài)，當(dāng)用戶改變想法時可以點擊另個一洗滌模式按鈕。設(shè)置好水量并且關(guān)閉倉門后，點擊開始按鈕，智能洗衣機就會開始一個工作周期，工作周期完成后系統(tǒng)回到待機狀態(tài)。

繪制并標(biāo)注事件

步驟4：標(biāo)注初態(tài)和終態(tài)并細(xì)化狀態(tài)圖

在步驟3的基礎(chǔ)上標(biāo)注出初態(tài)和終態(tài)，然后補充更多系統(tǒng)狀態(tài)和系統(tǒng)事件方面的細(xì)節(jié)，可以用表格的形式來展現(xiàn)，下面的兩個表格也可以分別在進行步驟2和步驟3時創(chuàng)建，這樣一份完整的狀態(tài)轉(zhuǎn)換圖就完成了！

完整的狀態(tài)轉(zhuǎn)換圖

狀態(tài)描述表

事件描述表

四、超態(tài)與子狀態(tài)

由于智能硬件的系統(tǒng)越來越復(fù)雜，系統(tǒng)的狀態(tài)數(shù)量急速增加。因此，對于比較復(fù)雜的系統(tǒng)模型，我們需要隱藏一些系統(tǒng)執(zhí)行處理的細(xì)節(jié)，僅展示系統(tǒng)狀態(tài)的變化。此時就需要引入超態(tài)（superstate）和子狀態(tài)（(substate），它們是一種嵌套關(guān)系，超態(tài)中嵌套了兩個或兩個以上的子狀態(tài)。這兩個概念的引入，可以幫助我們更好的繪制和解釋復(fù)雜系統(tǒng)的狀態(tài)轉(zhuǎn)換關(guān)系。

依然拿智能洗衣機為例，它在工作開始前會檢測系統(tǒng)狀態(tài)，如果一切正常則啟動渦輪開始洗滌，洗滌完成后聲音模塊播放提示音，然后設(shè)備進入待機狀態(tài)；如果檢測到任何異常，則聲音模塊播放報警提示音，然后設(shè)備進入異常狀態(tài)。通過下圖可以看到，正在工作是超態(tài)，而檢測狀態(tài)、洗滌狀態(tài)、報警狀態(tài)、工作完成都是其子狀態(tài)。

超態(tài)與子狀態(tài)

五、繪制狀態(tài)轉(zhuǎn)換圖的工具

工欲善其事必先利其器，可以繪制狀態(tài)轉(zhuǎn)換圖的工具有很多，除了原型繪制工具外，還可以嘗試一些專業(yè)繪圖工具。

下面推薦一些簡潔易用的繪圖工具：

• Diagram Maker | Online Diagram Software
• Online Diagram and Flowchart Software | Cacoo
• Diagramming Software & Team Collaboration Tools | Gliffy
• ProcessOn – 免費在線作圖，實時協(xié)作
• 流程圖制作軟件，圖表制作軟件 – Microsoft Visio

六、結(jié)語

狀態(tài)轉(zhuǎn)換圖無須展示系統(tǒng)數(shù)據(jù)處理的細(xì)節(jié)，它只需完整的展示系統(tǒng)運行可能導(dǎo)致的狀態(tài)的變化。狀態(tài)轉(zhuǎn)換圖提供了一種橫跨多個用戶故事或用例的更高層視圖，且每個用戶故事或用例都可能涉及系統(tǒng)狀態(tài)的轉(zhuǎn)換。它幫助項目干系人快速理解系統(tǒng)狀態(tài)聯(lián)系，更快理解系統(tǒng)的預(yù)期行為。狀態(tài)轉(zhuǎn)換圖涵蓋了所有狀態(tài)可能發(fā)生變化的關(guān)鍵路徑，測試人員可以由狀態(tài)圖衍生出測試用例，使早期的測試工作更順利的展開。

作者：少穻，知乎：少穻

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

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