一、先搞懂：B 端工作流的核心本質(zhì)與價(jià)值

1. 工作流的核心價(jià)值：從 “固定” 到 “靈活” 的進(jìn)化

• 滿(mǎn)足多樣化需求：企業(yè)的業(yè)務(wù)邏輯千差萬(wàn)別，比如電商的 “訂單售后流程” 與教育的 “學(xué)員退費(fèi)流程” 差異極大，用戶(hù)自定義能避免產(chǎn)品反復(fù)定制開(kāi)發(fā)；
• 快速響應(yīng)變化：當(dāng)業(yè)務(wù)調(diào)整時(shí)（如審批層級(jí)增加、數(shù)據(jù)計(jì)算規(guī)則修改），用戶(hù)無(wú)需等待開(kāi)發(fā)排期，直接在界面上調(diào)整流程即可；
• 降低技術(shù)門(mén)檻：在低代碼平臺(tái)（如明道云）、AIGC 工具（如 Stable Diffusion 的 Comfy UI、字節(jié) COZE）中，工作流通過(guò)可視化界面讓非技術(shù)人員也能 “搭建流程”—— 比如 COZE 用戶(hù)可組合 “AI 模型調(diào)用→數(shù)據(jù)篩選→結(jié)果輸出” 節(jié)點(diǎn)，制作專(zhuān)屬 AI 工具。

2. 工作流的兩大核心構(gòu)成：節(jié)點(diǎn)與關(guān)系

• 節(jié)點(diǎn)：流程中的獨(dú)立操作單元，可分為三類(lèi)。
  • 開(kāi)始 / 結(jié)束節(jié)點(diǎn)：觸發(fā)流程的 “入口”（如 “每月 1 號(hào)”“用戶(hù)提交表單”）和流程終止的 “出口”（如 “推送結(jié)果通知”“數(shù)據(jù)歸檔完成”）；
  • 操作節(jié)點(diǎn)：流程中的核心處理步驟，根據(jù)業(yè)務(wù)不同形態(tài)各異 —— 比如計(jì)算節(jié)點(diǎn)（扣除員工缺勤工資）、判斷節(jié)點(diǎn)（“訂單金額＞1000 元需財(cái)務(wù)審批”）、功能節(jié)點(diǎn)（調(diào)用 AI 模型生成文案）。每個(gè)操作節(jié)點(diǎn)內(nèi)部還可包含細(xì)分邏輯，比如 “扣除缺勤工資” 需先獲取考勤數(shù)據(jù)，再按 “事假扣 20%/ 病假扣 10%” 的規(guī)則計(jì)算。
• 關(guān)系：節(jié)點(diǎn)間的連接邏輯，用 “連線(xiàn)” 表示。
  • 基礎(chǔ)關(guān)系是 “線(xiàn)性串聯(lián)”（如 “獲取基礎(chǔ)薪資→扣除缺勤→計(jì)算獎(jiǎng)金”）；
  • 復(fù)雜關(guān)系包括 “1 對(duì)多”（如 “計(jì)算完應(yīng)發(fā)工資后，同步計(jì)算個(gè)稅、五險(xiǎn)一金”）和 “多對(duì) 1”（如 “個(gè)稅、五險(xiǎn)一金計(jì)算完成后，合并得出實(shí)發(fā)工資”）。

    

二、設(shè)計(jì)難點(diǎn)：工作流模塊的 4 個(gè)核心交互挑戰(zhàn)

1. 畫(huà)布規(guī)則：定義 “流程搭建的操作空間”

• 平移：讓用戶(hù)能自由查看大流程

   

  畫(huà)布的可視區(qū)域有限，當(dāng)流程節(jié)點(diǎn)較多時(shí)，需要支持 “視圖平移”。常見(jiàn)的錯(cuò)誤做法是只依賴(lài)滾動(dòng)條 —— 操作笨重且體驗(yàn)差。更優(yōu)方案是：
  • 基礎(chǔ)交互：支持 “拖拽畫(huà)布空白區(qū)域” 平移，同時(shí)保留 “空格 + 鼠標(biāo)拖拽”（適配設(shè)計(jì)類(lèi)用戶(hù)習(xí)慣），并增加 “抓手按鈕”（點(diǎn)擊后進(jìn)入平移模式，適配非設(shè)計(jì)用戶(hù)）；
  • 避免陷阱：不要讓 “滾輪” 只控制 “上下平移”，可設(shè)置 “按住 Shift + 滾輪” 橫向平移，符合用戶(hù)直覺(jué)。
• 縮放：不是必選項(xiàng)，需評(píng)估必要性

   

  縮放看似能讓用戶(hù) “一覽全局”，但實(shí)際使用中容易出現(xiàn) “縮小后文字看不清”“放大后操作繁瑣” 的問(wèn)題。設(shè)計(jì)前需先判斷：
  • 若流程節(jié)點(diǎn)少（如 OA 審批流程），無(wú)需縮放；
  • 若流程復(fù)雜（如低代碼平臺(tái)的多模塊流程），需加 “縮放按鈕”（+/-），并明確滾輪功能 —— 建議 “滾輪控制縮放”，而非平移，避免與平移邏輯沖突。

2. 節(jié)點(diǎn)排版：平衡 “自由” 與 “規(guī)范”

• 模式 1：完全自由排版

   

  用戶(hù)可任意拖動(dòng)節(jié)點(diǎn)，無(wú)位置限制。優(yōu)點(diǎn)是開(kāi)發(fā)簡(jiǎn)單、靈活性高；缺點(diǎn)是容易混亂 —— 比如小節(jié)點(diǎn)被大節(jié)點(diǎn)遮擋、節(jié)點(diǎn)重疊導(dǎo)致連線(xiàn)指向模糊。

   

  適用場(chǎng)景：節(jié)點(diǎn)少、流程簡(jiǎn)單的工具，如 AIGC 工具的輕量任務(wù)組合（如 “輸入提示詞→調(diào)用模型→輸出圖片”）。
• 模式 2：網(wǎng)格布局

   

  畫(huà)布背景顯示網(wǎng)格線(xiàn)，節(jié)點(diǎn)尺寸、間距按網(wǎng)格遞增 / 遞減。優(yōu)點(diǎn)是排版整齊，用戶(hù)能清晰感知節(jié)點(diǎn)位置；缺點(diǎn)是靈活性低，不適合非規(guī)則流程。

   

  適用場(chǎng)景：需要規(guī)范排版的協(xié)作工具，如項(xiàng)目管理中的 “階段流程搭建”（需求評(píng)審→原型設(shè)計(jì)→開(kāi)發(fā)測(cè)試），確保團(tuán)隊(duì)成員能快速看懂流程結(jié)構(gòu)。
• 模式 3：固定布局

   

  定義固定的排版邏輯，比如 “從左到右是流程順序，從上到下是并行操作”，節(jié)點(diǎn)間距統(tǒng)一。優(yōu)點(diǎn)是流程清晰、不易混亂；缺點(diǎn)是靈活性差，無(wú)法適配非線(xiàn)性流程。

   

  適用場(chǎng)景：線(xiàn)性化、標(biāo)準(zhǔn)化的流程，如 Jenkins 的構(gòu)建流程配置（檢出代碼→單元測(cè)試→編譯→部署），每個(gè)階段按固定順序排列，無(wú)需復(fù)雜分支。

3. 節(jié)點(diǎn)適應(yīng)：讓節(jié)點(diǎn) “跟著內(nèi)容變，又不打亂流程”

• 基礎(chǔ)原則：寬度固定，高度自適應(yīng)

   

  多數(shù)場(chǎng)景下，節(jié)點(diǎn)寬度固定（如 200px），高度隨內(nèi)容增多自動(dòng)增加 —— 既能保證排版整齊，又能顯示完整內(nèi)容（如操作節(jié)點(diǎn)中的表單字段、計(jì)算規(guī)則）。

   

  反例：若節(jié)點(diǎn)寬度、高度都自適應(yīng)，容易導(dǎo)致相鄰節(jié)點(diǎn)間距不均，流程看起來(lái)雜亂。
• 關(guān)鍵矛盾：適應(yīng)后的排版聯(lián)動(dòng)

   

  當(dāng)一個(gè)節(jié)點(diǎn)高度增加（如新增表單字段），后續(xù)節(jié)點(diǎn)是否需要自動(dòng)后移？邏輯上合理，但技術(shù)實(shí)現(xiàn)難度高 —— 容易導(dǎo)致整個(gè)流程 “錯(cuò)位”。

   

  折中方案：參考 Coding 的流程設(shè)計(jì)，節(jié)點(diǎn)寬度固定，超出文本用 “...” 省略，點(diǎn)擊節(jié)點(diǎn)可查看完整內(nèi)容。雖犧牲部分直觀性，但能保證流程穩(wěn)定性，適合對(duì) “流程落地效率” 要求高于 “內(nèi)容完整性” 的場(chǎng)景（如開(kāi)發(fā)構(gòu)建流程）。

4. 連線(xiàn)模式：讓 “節(jié)點(diǎn)關(guān)系” 清晰不混亂

• 點(diǎn)位統(tǒng)一：明確輸入 / 輸出方向

   

  必須統(tǒng)一節(jié)點(diǎn)的 “輸入點(diǎn)” 和 “輸出點(diǎn)”，否則流程會(huì)混亂。常見(jiàn)規(guī)則是 “左入右出”（左側(cè)是輸入點(diǎn)，接收上一節(jié)點(diǎn)數(shù)據(jù)；右側(cè)是輸出點(diǎn)，傳遞數(shù)據(jù)到下一節(jié)點(diǎn)），或 “上入下出”（適合垂直排列的流程）。

   

  細(xì)節(jié)補(bǔ)充：輸出點(diǎn)需區(qū)分 “整個(gè)節(jié)點(diǎn)輸出” 和 “節(jié)點(diǎn)屬性輸出”。比如 COZE 的 “循環(huán)節(jié)點(diǎn)”，可單獨(dú)輸出 “循環(huán)結(jié)果” 這一屬性，關(guān)聯(lián)到其他節(jié)點(diǎn)，而非輸出整個(gè)循環(huán)節(jié)點(diǎn)的所有數(shù)據(jù)。
• 樣式選擇：曲線(xiàn)還是折線(xiàn)？

   

  連線(xiàn)樣式需結(jié)合排版模式選擇：
  • 曲線(xiàn)：開(kāi)發(fā)簡(jiǎn)單，適合 “自由排版” 或 “節(jié)點(diǎn)少” 的場(chǎng)景（如 AIGC 工具的輕量流程）；但節(jié)點(diǎn)多時(shí)，曲線(xiàn)會(huì)交叉纏繞，看不清走向；
  • 折線(xiàn)：開(kāi)發(fā)復(fù)雜，適合 “固定布局” 或 “線(xiàn)性流程”（如 OA 審批、開(kāi)發(fā)構(gòu)建流程）；折線(xiàn)可按網(wǎng)格對(duì)齊，避免交叉，讓流程更清晰。
• 層級(jí)判斷：連線(xiàn)是否遮擋節(jié)點(diǎn)？

   

  若節(jié)點(diǎn)間的連接邏輯是流程核心（如低代碼平臺(tái)的數(shù)據(jù)流），建議連線(xiàn)層級(jí)高于節(jié)點(diǎn) —— 即使遮擋部分節(jié)點(diǎn)，用戶(hù)可手動(dòng)調(diào)整節(jié)點(diǎn)位置；若連接僅為 “輔助示意”（如簡(jiǎn)單審批流程），連線(xiàn)層級(jí)可低于節(jié)點(diǎn)，避免遮擋內(nèi)容。

三、設(shè)計(jì)原則：從 “業(yè)務(wù)出發(fā)”，而非 “技術(shù)優(yōu)先”

1. 先明確業(yè)務(wù)場(chǎng)景，再定交互規(guī)則：比如低代碼平臺(tái)需兼顧 “復(fù)雜流程” 和 “非技術(shù)用戶(hù)”，應(yīng)優(yōu)先選擇 “網(wǎng)格布局 + 折線(xiàn)連線(xiàn)”，降低搭建難度；而 AIGC 工具的工作流面向 “專(zhuān)業(yè)用戶(hù)”，可支持 “自由排版 + 曲線(xiàn)連線(xiàn)”，提升靈活性。
2. 多和開(kāi)發(fā)溝通技術(shù)可行性：比如 “節(jié)點(diǎn)適應(yīng)后的排版聯(lián)動(dòng)”“折線(xiàn)連線(xiàn)的自動(dòng)對(duì)齊”，看似簡(jiǎn)單實(shí)則開(kāi)發(fā)成本高，若技術(shù)資源有限，可選擇折中方案（如固定節(jié)點(diǎn)寬度、用曲線(xiàn)連線(xiàn)）。
3. 用戶(hù)測(cè)試優(yōu)先于 “完美設(shè)計(jì)”：工作流的交互邏輯復(fù)雜，僅憑設(shè)計(jì)師主觀判斷容易出問(wèn)題 —— 可先用低保真原型（如 Figma 草圖）測(cè)試核心場(chǎng)景（如 “搭建包含并行節(jié)點(diǎn)的流程”），收集用戶(hù)對(duì) “畫(huà)布操作”“流程可讀性” 的反饋，再迭代優(yōu)化。

總結(jié)