01
正式版按鈕改為「編輯」
正式版的內頁仍可修改版本說明與開放複製。按鈕如果寫「查看」，會讓人誤以為完全不能改。真正唯讀的封存版才用「查看」。
專案摘要
Cr.ED 的模組會不斷推出新版本，「版本複製」功能上線前，得先回答每個版本處在什麼狀態、在這個狀態下使用者能做什麼。我先定義三種版本狀態，再決定每個狀態能按哪些按鈕、能改哪些欄位，最後用一張 Flow 和 PM 對齊，交付前後端工程師直接實作。
3種版本狀態，逐級收緊
3個關鍵設計判斷
1張 Flow 交付前後端
01 — 背景
狀態多、規則不明，工程師缺乏判斷依據
接手這套系統時，介面規範並不完整，工程師調整介面時沒有依據可循。新功能如果直接畫畫面，每個按鈕能不能按、每個欄位能不能改，都會變成各自猜測。所以我先從「狀態」下手，把判斷寫清楚。
02 — 狀態設計
先定義狀態，再決定每個狀態能做什麼
三個狀態逐級收緊：可編輯 → 正式版 → 封存版。送出發布單後成為正式版；發布新版本後，舊版自動封存。每個狀態能按的按鈕、能改的欄位都不同。
03 — 設計判斷
我做的三個設計判斷，各有清楚的理由
每個判斷都對應一個使用者可能誤會的地方。畫面以 Ant Design 重新繪製，點擊可放大。
02
發布後鎖定，保留說明欄可修正
發布前應確定的欄位，發布後一律停用並標示鎖定；版本說明保留可編輯，方便修正錯字或補充內容。
03
「開放複製」放在內頁
列表只呈現結果（✓ / ✗），設定集中在內頁。這樣也預留了空間，未來新增更多版本層級的設定時，不必再擠進列表。
04 — Flow 交付
一張 Flow，同時回答流程與情境
我與 PM 口頭對齊後產出 Flow，並與前後端工程師溝通實作。頁面與元件都是既有的，工程師直接套用，不另做 Prototype。下圖為交付給前後端的版本編輯流程。
工程師的回饋
前後端都看整張圖。Flow 比 Prototype 更能立即看出按鈕連到哪些頁面。
頁面與元件皆為既有，難點在「哪個狀態能做什麼」。Flow 能把按鈕、跳轉與欄位狀態放在同一張圖上，所以這次不另做 Prototype。
狀態總覽
三種狀態，各自能做什麼
05 — 總結
先定義狀態，再決定每個狀態能做什麼；一張 Flow，讓前後端直接落地。
我做的三件事
定義三種版本狀態
可編輯、正式版、封存版逐級收緊，每個版本都有明確的位置。
把權限寫清楚
每個狀態能按什麼、能改什麼都有依據，不靠工程師各自判斷。
用 Flow 交付
和 PM 對齊後一張圖交付前後端，沿用既有頁面與元件直接實作。
- 方法
- 狀態與規則
- 可延伸的產品情境
- 需發布鎖定、又要保留修正空間的功能，如班表、規則設定
- 對應能力
- 狀態設計與元件規則
流程概念示意已交付
AI 轉譯 Skill
為 Business Insider 中文版設計影片翻譯與描述欄 Skill，讓中文版跟上英文版出片節奏。