新技能Get:如何繪製智能硬體的狀態轉換圖?

身為產品經理，若要保證所有必要的狀態轉換和事件都完整、準確的在產品功能需求中描述出來，狀態轉換圖是必不可少的強力工具。

絕大多數智能硬體產品是一個包含狀態轉換、數據操作和功能執行的綜合系統（這個系統的狀態是有限的），它在任何時刻都處於眾多狀態中的某一種狀態。只有當某個特定的事件發生或某個被定義的標準被滿足時，系統的狀態才會發生轉換，由一種狀態向另一種狀態發生轉變。比如，當處於「關閉」狀態的電燈的開關系統接收到用戶的指令時（用戶按開關即是「事件」），電燈從「關閉」狀態變為「開啟」狀態。

一、為什麼需要繪製狀態轉換圖？

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

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

二、狀態轉換圖有哪些組成要素？

狀態圖樣例

狀態圖（STD）表示系統狀態和引起狀態改變的事件，它包含三種關鍵元素：

01.可能的系統狀態

系統在任何時候都會處於某種狀態中，所有系統都有狀態，一個狀態代表系統的一種行為模式。比如手機具備「待機」、「通話中」、「關機」等狀態，處於「關機」狀態的手機無法接聽電話（消息），而處於「待機」狀態的手機則可以接聽電話。這說明系統所處的狀態決定了系統對事件的響應方式或所接受的消息。

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

系統狀態一般用圓角矩形表示，如上圖所示。其中可能還包括處於該狀態時將要執行的非原子動作（可中斷）的簡單描述，以Do引出，動作完成後狀態就結束，然後一個從當前狀態出發的轉換被觸發。

狀態還可能包括進入動作和退出動作，進入動作指進入狀態時執行的原子動作（不可中斷），以Entry引出，比如手機進入「充電」狀態後屏幕就顯示充電圖標。退出動作指退出狀態時執行的原子動作，以Exit引出，比如手機退出「充電」狀態後屏幕就不再顯示充電圖標，進入「待機」狀態。

02.允許的狀態轉換

即狀態之間的轉換關係，比如電腦可以從「待機」狀態轉換「睡眠」狀態。

狀態的轉換一般用連接兩個圓角矩形的箭頭表示，如上圖所示。

03.導致狀態發生轉換的事件

事件使得系統從一個狀態轉換為另一個狀態，比如用手指點擊一個處於「開啟」狀態的智能音箱的電源，使智能音箱變為「關閉」狀態，在智能音箱狀態的變化是被「用手指點擊開關」這個動作引起的，所以「用用手指點擊開關」就是一個事件。

事件主要分為四類：信號事件、調用事件、變化事件、時間事件。事件一般用狀態轉換箭頭上的文字標籤來表示，如上圖所示。

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

三、繪製狀態圖的步驟有哪些？

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

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

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

產品邏輯梳理清楚之後，我們下面開始繪製狀態轉換圖。

步驟1：列出產品/系統的所有狀態

梳理產品邏輯，列出產品/系統可能出現的所有狀態，比如：待機狀態、強力洗滌、快速洗滌、水量設置、可工作狀態（就緒）、不可工作狀態（異常）、正在工作等。

羅列狀態

步驟2：列出每個狀態須執行的動作

在狀態名稱下方列出該狀態下所包含的所有動作，即用Entry，Do，Exit標註進入動作、執行動作和退出動作。比如：待機狀態下執行等待指令動作、強力洗滌狀態下設置洗滌模式為強力洗滌等。

羅列動作

步驟3：確認並繪製出引起狀態發生轉換的事件

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

狀態轉換表

使用狀態表梳理出所有引起狀態發生轉換的事件後，就可以通過箭頭連接可以發生轉換的狀態，並在箭頭上標註出引起該狀態轉換的事件或條件。比如：系統處於待機狀態時，用戶可以點擊強力洗滌按鈕進入強力洗滌狀態或點擊快速洗滌按鈕進入快速洗滌狀態，當用戶改變想法時可以點擊另個一洗滌模式按鈕。設置好水量並且關閉倉門後，點擊開始按鈕，智能洗衣機就會開始一個工作周期，工作周期完成後系統回到待機狀態。

繪製並標註事件

步驟4：標註初態和終態並細化狀態圖

在步驟3的基礎上標註出初態和終態，然後補充更多系統狀態和系統事件方面的細節，可以用表格的形式來展現，下面的兩個表格也可以分別在進行步驟2和步驟3時創建，這樣一份完整的狀態轉換圖就完成了！

完整的狀態轉換圖

狀態描述表

事件描述表

四、超態與子狀態

由於智能硬體的系統越來越複雜，系統的狀態數量急速增加。因此，對於比較複雜的系統模型，我們需要隱藏一些系統執行處理的細節，僅展示系統狀態的變化。此時就需要引入超態（superstate）和子狀態（(substate），它們是一種嵌套關係，超態中嵌套了兩個或兩個以上的子狀態。這兩個概念的引入，可以幫助我們更好的繪製和解釋複雜系統的狀態轉換關係。

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

超態與子狀態

五、繪製狀態轉換圖的工具

工欲善其事必先利其器，可以繪製狀態轉換圖的工具有很多，除了原型繪製工具外，還可以嘗試一些專業繪圖工具。

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

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

六、結語

狀態轉換圖無須展示系統數據處理的細節，它只需完整的展示系統運行可能導致的狀態的變化。狀態轉換圖提供了一種橫跨多個用戶故事或用例的更高層視圖，且每個用戶故事或用例都可能涉及系統狀態的轉換。它幫助項目干係人快速理解系統狀態聯繫，更快理解系統的預期行為。狀態轉換圖涵蓋了所有狀態可能發生變化的關鍵路徑，測試人員可以由狀態圖衍生出測試用例，使早期的測試工作更順利的展開。

 

作者：少穻，知乎：少穻

本文由 @少穻 原創發布於人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash，基於 CC0 協議

收藏已收藏 | {{ postmeta.bookmark }} 點讚已贊 | {{ postmeta.postlike }}