今天分享的主題還是圍繞組件展開，即工作流組件。這是近年出現(xiàn)頻率越來越高，使用場景也越來越多的復(fù)雜組件類型。

一、什么是工作流

工作流是英文 Workflow 的翻譯，這是一個商務(wù)術(shù)語，指“業(yè)務(wù)過程的部分或整體在計算機應(yīng)用環(huán)境下的自動化”。

簡單來說就是使用計算機編程制定一套固定的操作、計算流程，用于完成指定的工作任務(wù)。比如企業(yè)的 OA 系統(tǒng)記錄員工的打卡情況，并每月匯總數(shù)據(jù)生成報告，然后發(fā)送給人事郵箱，就是一套工作流。

除此之外，工作流還可以應(yīng)用在非常多其它場景，大大提高了各行各業(yè)的生產(chǎn)效率。工作流是自動化概念中的一個不可獲取的角色，也是數(shù)字化服務(wù)、生產(chǎn)的基礎(chǔ)建設(shè)。

在過去，工作流主要由產(chǎn)品經(jīng)理制定，再由工程師開發(fā)，以一個完整可用的形式交付。但固定的工作流局限性太大，隨著技術(shù)和 SaaS 行業(yè)的發(fā)展，有越來越多的產(chǎn)品將工作流的定義交給用戶自己完成。

這么做的好處有兩個，一個是滿足用戶多樣化的使用需要，只有客戶最了解自己的需求和邏輯，不用一一和他們對接。另一個是實時響應(yīng)高速迭代和優(yōu)化的業(yè)務(wù)，不用等待漫長的開發(fā)周期。

最常見的工作流應(yīng)用場景就是在低代碼 Lowcode 開發(fā)平臺，因為本身就要使用可視化的界面完成程序的開發(fā)，那么定義工作流的過程就是必不可少的。

以及這兩年就開始大火的 AIGC 領(lǐng)域，對工作流的使用也越來越多。比如著名的繪圖軟件 StableDiffusion 除了基礎(chǔ)的 WebUI 界面以外，專業(yè)用戶都轉(zhuǎn)向使用工作流模式的 Comfy UI。

或者類似字節(jié)開發(fā)的 AI 產(chǎn)品 COZE，讓用戶自己結(jié)合 AI 模型定義工作流，制作專屬的 AI 工具。

雖然 B 端的工作流定義在這幾年才開始普及起來，但這類組件在設(shè)計行業(yè)并不少見，有很多工具中都有他們的身影，比如 Blender 的渲染流程，UE4 的藍圖，Orgami 的動效設(shè)置等等。

工作流組件的主要特點，就是 —— 靈活，自由度更高，而且做出來的圖形結(jié)果看起來更直觀。

工作流圖例看起來很像 UML 圖，我們確實也可以把它當(dāng)成 UML 圖的某種變體，因為傳統(tǒng)工作流開發(fā)中產(chǎn)品經(jīng)理要通過類圖、活動圖、時序圖的繪制來解釋需求，而工作流組件就是模擬這個過程，并直接給出結(jié)果。

在一個常規(guī)的工作流模塊內(nèi)，包含兩個核心要素 —— 節(jié)點和關(guān)系。

節(jié)點指的是在流程中每次進行的獨立處理、判斷、計算步驟，可以簡單劃分成開始和結(jié)束節(jié)點，以及中間的操作節(jié)點。

開始節(jié)點即觸發(fā)工作流的條件，結(jié)束節(jié)點則是工作流完成工作后關(guān)閉流程。操作節(jié)點根據(jù)業(yè)務(wù)、產(chǎn)品類型的不同各不相同。

舉個例子，我們以生成員工當(dāng)月工資的任務(wù)做一個任務(wù)流，那么它的流程如下所示：

上面案例的節(jié)點都是簡化后的結(jié)果，而每個節(jié)點內(nèi)還會有一系列的處理步驟，比如扣除缺勤要先去獲取出勤數(shù)據(jù)，沒有就略過，有了就要根據(jù)一定的規(guī)則來計算缺勤所產(chǎn)生的處罰，比如事假和病假處罰比例不同，或是是年假不予處罰等。

這些復(fù)雜的操作可以以不同的形式在節(jié)點內(nèi)呈現(xiàn)，比如表單、選項、代碼、腳本、公式等等。

而之所以工作流叫流，就是因為工作流代表的是完整的流程，流程中的節(jié)點是有關(guān)聯(lián)性的，是能前后通過一定順序組織起來的，而我們會用連線來進行關(guān)系的表示。

連線一般在其中一側(cè)會有箭頭，代表了流程的方向。在復(fù)雜的工作流中，節(jié)點之間的關(guān)系并不一定只是一對 1 而已，可能還有 1 對多、多對 1 的關(guān)系。

比如上面的工資計算中，在得到本月實際工資時，還要計算五險一金，可以把它們拆分中同步進行的不同節(jié)點，再合并到下一個節(jié)點得到最終要發(fā)的實際工資。

工作流組件就是以這種模式搭建起來的，想要設(shè)計這類組件，首先要從業(yè)務(wù)和產(chǎn)品層面理解這套組件可以完成哪些工作，中間包含的節(jié)點類型，以及節(jié)點之間的聯(lián)系。

然后，我們才可以展開后續(xù)的工作。

二、工作流組件的設(shè)計

工作流組件本質(zhì)是一個圖形工具，有很多操作步驟和適應(yīng)邏輯，開發(fā)起來困難，設(shè)計起來也很困難，因為我們要確保設(shè)計的組件能落地。

所以，工作流組件的設(shè)計主要難點是交互層面的，而不是樣式上的，所以它的設(shè)計核心要點是定義一套符合當(dāng)前場景的圖形交互規(guī)范。

這個定義過程包含下面幾個要點：

1. 畫布規(guī)則

工作流圖形通常都放在一個畫布內(nèi)，和我們用的設(shè)計軟件模式一樣，所以我們首先要確定這個畫布的區(qū)域，以及畫布的操作規(guī)則。

確定畫布區(qū)域很容易無需多做介紹，但畫布不是一個靜態(tài)的區(qū)域，而是一個可以用來交互的對象。畫布本質(zhì)上是一個視圖窗口，下級包含的可視區(qū)域是大于這個窗口的。

所以，畫布內(nèi)要支持視圖平移，即上下左右移動。最簡單的交互模式就是使用滾動條，但這個模式太敷衍了，而且操作體驗很差。

常規(guī)的設(shè)計軟件平移會使用空格加鼠標(biāo)，但要記住這是平面設(shè)計類軟件的操作邏輯，而一般用戶并沒有這種操作習(xí)慣，所以非設(shè)計工具的畫布移動往往會采用別的模式，比如提供一個抓手按鈕，激活按鈕進入拖拽平移模式。

所以空格移動的交互可以加，但不能作為唯一的操作模式，盡量給出其它直觀的交互邏輯，如拖拽空白區(qū)域平移或增加抓手控件。

除了平移外第二個要點，就是縮放。雖然這個功能在設(shè)計軟件里必備，但要不代表自己項目里一定要有，因為縮放是一個非常難做好的功能，對程序員要求很高。

所以我們要評估這個工作流有沒有縮放的必要，尤其是就算能縮小看全所有節(jié)點，但是字基本都看不清了還有什么意義？如果想不出說服自己的理由，那么縮放就不做。

要做的話同理，要給縮放添加按鈕。而滾輪的操作，要確定把它分配給縮放，還是只給話不的上下平移。

2. 節(jié)點排版

第二個問題就是節(jié)點的排版問題了，有非常多選擇，也是最麻煩得部分，我舉例其中幾個最常用的類型。

第一個是完全自由的排版，用戶添加節(jié)點后，可以任意拖動節(jié)點卡片，沒有限制。這種做法看似自由做起來也最簡單，但會引發(fā)的小問題最多。

比如節(jié)點之間的層級關(guān)系，不可能給它做個圖層列表，那么一個小的節(jié)點被放進一個大節(jié)點后面直接在畫布內(nèi)“消失”的話怎么辦？或者兩個節(jié)點幾乎貼在一起，那么連線怎么表現(xiàn)，箭頭的指向是否能正常顯示？

第二個做法，則是使用網(wǎng)格布局，即元素全部放置到網(wǎng)格內(nèi)進行排版，元素尺寸要以網(wǎng)格遞增或遞減，元素之間的間距也以網(wǎng)格數(shù)為準(zhǔn)。

比如部分白板工具會在背景上顯示網(wǎng)點，就是讓用戶感知到元素尺寸和排版是根據(jù)這套網(wǎng)格來定義的。

第三個做法則是固定布局模式，即定義一套固定的節(jié)點排版邏輯，比如 Coding 的流程配置，從左到右表示節(jié)點的順序，上到下表示同一節(jié)點的不同操作。并且統(tǒng)一左右、上下的間距，實現(xiàn)穩(wěn)定和諧但不可控的布局模式。

這三種模式各有優(yōu)缺點，要根據(jù)場景進行選擇，也要和程序員溝通是否能夠?qū)崿F(xiàn)。

3. 節(jié)點適應(yīng)

節(jié)點適應(yīng)即節(jié)點的大小是否要根據(jù)內(nèi)容進行調(diào)整，如果節(jié)點的內(nèi)可操作，且包含的內(nèi)容五花八門，那么節(jié)點卡片大小就應(yīng)該自適應(yīng)。

只是自適應(yīng)不是上下左右無差別調(diào)整，通常都是寬度固定，高度適應(yīng)。吐過不了解組件的適應(yīng)規(guī)則可以看之前的分享解釋：

節(jié)點適應(yīng)的關(guān)注點，就是和排版之間的關(guān)系，除了完全自由的布局模式外，包含固定間距的排版模式就會受到影響，一個已經(jīng)編輯好的流程前面做修改，后面的一系列節(jié)點就全部要做出對應(yīng)的移動和重排？

這就是一個邏輯上很簡單但是技術(shù)上很難實現(xiàn)的問題，所以以 Coding 為主的產(chǎn)品，為了追求穩(wěn)定就會放棄對內(nèi)容的適配，每個節(jié)點卡片寬度固定，多出來的文本省略，且具體節(jié)點信息要點擊后才能查看。

4. 連線模式

連線模式就是表現(xiàn)節(jié)點之間關(guān)系的模式。每個節(jié)點都應(yīng)該有輸入和輸出的“點位”，常規(guī)的做法左側(cè)是輸入，右側(cè)是輸出，或者上方輸入下方輸出。

如果不統(tǒng)一這種模式，那么在一個線性的流程環(huán)節(jié)中就會迷失在線條的節(jié)奏里…

而在輸出點位上，還有個非常重要的細(xì)節(jié)，就是輸出是整個節(jié)點還是節(jié)點下的某個屬性。

比如 COZE 的可以在節(jié)點里面創(chuàng)建一個循環(huán)體屬性，這個屬性可以關(guān)聯(lián)一個獨立的循環(huán)節(jié)點給她返回數(shù)據(jù)。

輸出和返回都是圍繞這個屬性的，但是這個節(jié)點和上方的整個卡片輸出節(jié)點處于同一層級。并且兩個卡片上的節(jié)點都有輸入輸出屬性，但這個輸出順序卻讓人看得一頭霧水。

確定了點位，下一步就是確定連線的模式，用過思維導(dǎo)圖工具應(yīng)該都有注意到連線可以設(shè)置成曲線或折線的模式。

同理，在工作流中我們也需要制定連線使用曲線還是折線。曲線的實現(xiàn)最容易，但只適合應(yīng)用在節(jié)點數(shù)少的場景，否則就會非常的混亂，比如大家在設(shè)計軟件中做交互連線的結(jié)果。折線效果更好，但實現(xiàn)起來很復(fù)雜，只適合應(yīng)用在固定布局模式里。

最后，連線還要確定層級，連線的層級要像交互連線一樣高于內(nèi)容層遮擋節(jié)點，還是低于節(jié)點被遮擋。如果節(jié)點之間聯(lián)系的權(quán)重足夠高的話，那么建議覆蓋到節(jié)點上方，用戶覺得遮擋了自己調(diào)整節(jié)點位置。如果權(quán)重很低僅僅是做個意思，就可以放到下方。這個靠設(shè)計師自己判斷。

實際項目的交互細(xì)節(jié)遠(yuǎn)遠(yuǎn)不止這些誒，但以上四點是做工作流組件中最重要的交互框架，先確定完它們再根據(jù)需求補充后續(xù)的內(nèi)容，最后再完成視覺的設(shè)計即可（也沒什么好設(shè)計的）。

每一個項目的工作流組件都是獨一無二的，你很難找到一個一模一樣的案例進行復(fù)刻。所以多思考，多畫原型，多做溝通，才能輸出理想的結(jié)果。

結(jié)尾

復(fù)雜的組件解釋起來還是很蛋疼，因為它不存在標(biāo)準(zhǔn)的設(shè)計結(jié)果，每種做法都有優(yōu)缺點，得設(shè)計師自己取舍。有自己項目的案例也歡迎分享過來~

我們下篇再賤~

歡迎關(guān)注作者的微信公眾號：「超人的電話亭」