編輯導(dǎo)語(yǔ)：近年來(lái)低代碼/無(wú)代碼的概念很火，它可以讓技術(shù)、運(yùn)營(yíng)同學(xué)通過(guò)少量甚至無(wú)代碼的方式快速搭建出網(wǎng)站、小程序、表單、協(xié)同表格等產(chǎn)品，幫助用戶解決實(shí)際業(yè)務(wù)問(wèn)題。本文從低代碼表單的概念和整體功能設(shè)計(jì)方面，對(duì)低代碼表單進(jìn)行了分析，一起來(lái)看一下吧。

近些年低代碼/無(wú)代碼概念很火，本人之前有專門(mén)做過(guò)低代碼產(chǎn)品，也對(duì)低代碼很感興趣。

所以計(jì)劃寫(xiě)一個(gè)低代碼專欄，介紹如何實(shí)現(xiàn)一個(gè)低代碼表單mvp產(chǎn)品0-1落地。

圍繞表單mvp產(chǎn)品落地，從表單基礎(chǔ)功能設(shè)計(jì)、表單應(yīng)用權(quán)限管理、表單數(shù)據(jù)自動(dòng)化對(duì)接三個(gè)功能來(lái)介紹低代碼表單產(chǎn)品。

這篇文章會(huì)跟大家介紹低代碼表單的概念和整體功能設(shè)計(jì)，接下來(lái)會(huì)接著發(fā)應(yīng)用權(quán)限管理和數(shù)據(jù)自動(dòng)化對(duì)接文章，可以關(guān)注下哦。

一、概念介紹

1. 低代碼/無(wú)代碼

低代碼/無(wú)代碼可以讓技術(shù)、運(yùn)營(yíng)同學(xué)通過(guò)少量代碼甚至無(wú)代碼的方式在平臺(tái)快速拖拽模塊，搭建出網(wǎng)站、小程序、表單、協(xié)同表格等產(chǎn)品，幫助用戶解決實(shí)際業(yè)務(wù)問(wèn)題。

國(guó)內(nèi)比較有名的低代碼平臺(tái)有阿里的宜搭，騰訊云的微搭，輕流、明道云、金數(shù)據(jù)等，國(guó)外有OutSystems、webflow等。

市面上常見(jiàn)的低代碼平臺(tái)

2. 表單

大家對(duì)表單產(chǎn)品應(yīng)該不陌生，我們上學(xué)時(shí)經(jīng)常填的問(wèn)卷調(diào)查、日常也會(huì)接觸到的線上測(cè)評(píng)、投票、報(bào)名等，都是通過(guò)表單產(chǎn)品實(shí)現(xiàn)的。

表單通常用來(lái)解決的場(chǎng)景有問(wèn)卷調(diào)查、線上考試、售后工單、投票、預(yù)約登記等。目前國(guó)內(nèi)低代碼平臺(tái)專門(mén)做表單產(chǎn)品的有金數(shù)據(jù)、問(wèn)卷星、輕流等。

二、為什么要做低代碼表單

為了讓大家閱讀更有體感，我們假設(shè)做這個(gè)低代碼表單MVP產(chǎn)品的背景和目的。

小王是某交易平臺(tái)的產(chǎn)品經(jīng)理，今年核心okr是幫助商家售后客服降本提效。小王深耕售后多年，了解到平臺(tái)的商家售后客服有以下幾個(gè)痛點(diǎn)：

1）售后問(wèn)題登記量大，客服成本高

大部分場(chǎng)景有標(biāo)準(zhǔn)化的問(wèn)題和登記內(nèi)容，用戶回答具體問(wèn)題后，再由客服代客發(fā)起。這種方式客服人力成本高，效率低。

2）協(xié)同流程較復(fù)雜，進(jìn)度獲取困難

客服在接待過(guò)程中，有部分場(chǎng)景是客服當(dāng)下無(wú)法給出答案的，比如改地址、質(zhì)量問(wèn)題處理等，需內(nèi)部協(xié)同流轉(zhuǎn)處理。但協(xié)同進(jìn)度幾乎不可視，無(wú)法給用戶準(zhǔn)確反饋。

3）多端操作成本高

在平臺(tái)產(chǎn)生的咨詢問(wèn)題，有些客服還會(huì)在自家erp系統(tǒng)再重復(fù)錄入處理，多端操作導(dǎo)致處理效率低下。

小王打算著手解決以上的售后客服痛點(diǎn)，小王調(diào)研商家后，發(fā)現(xiàn)可以通過(guò)售后表單（工單）來(lái)解決上訴問(wèn)題。用戶填寫(xiě)標(biāo)準(zhǔn)化場(chǎng)景表單后，客服收到用戶的表單訴求，通過(guò)表單處理狀態(tài)實(shí)時(shí)跟進(jìn)。

當(dāng)小王準(zhǔn)備出標(biāo)準(zhǔn)化表單方案時(shí)，發(fā)現(xiàn)一個(gè)問(wèn)題。

即便是同一個(gè)場(chǎng)景，商家的表單內(nèi)容也可能是不一樣的，標(biāo)準(zhǔn)化表單解決不了大部分商家訴求。

小王想到了低代碼/無(wú)代碼表單，即提供基礎(chǔ)的表單內(nèi)容，商家可根據(jù)自身需求靈活拖拽組件組成新的表單。跟技術(shù)同學(xué)溝通后，大家一致認(rèn)為這個(gè)方案可行，小王整理思緒后，給出了產(chǎn)品策略：

• 無(wú)代碼表單：商家根據(jù)模板表單或者是空白表單，在頁(yè)面編輯器中通過(guò)拖拽組件和編輯組件屬性，搭建出符合需求的表單。表單支持客服代客發(fā)起和用戶自助填寫(xiě)。
• 權(quán)限和流程管理：商家可根據(jù)角色設(shè)定表單權(quán)限，進(jìn)行表單功能和狀態(tài)處理操作。
• 數(shù)據(jù)自動(dòng)流轉(zhuǎn)：通過(guò)webhook功能實(shí)現(xiàn)數(shù)據(jù)打通，減少多端操作成本，提升效率。

再說(shuō)明下，小王是虛構(gòu)人物，舉這個(gè)例子是想通過(guò)一個(gè)售后場(chǎng)景讓大家了解低代碼表單產(chǎn)品應(yīng)該如何設(shè)計(jì)，如何解決類似的登記場(chǎng)景和流程處理問(wèn)題。

當(dāng)然落到具體方案上還需要考慮更多的業(yè)務(wù)細(xì)節(jié)，這里介紹下我針對(duì)這個(gè)售后表單的方案設(shè)計(jì)思路。

三、無(wú)代碼表單產(chǎn)品設(shè)計(jì)思路

1. 原子組件

什么是組件？

在低代碼/無(wú)代碼產(chǎn)品中，搭建表單/網(wǎng)頁(yè)就好比拼樂(lè)高，通過(guò)一塊塊積木可以拼出樂(lè)高，你可以理解一個(gè)通用的積木就是我們接下來(lái)要說(shuō)的組件。

這就要求組件必須足夠抽象化和原子化，才能拼出不同的樂(lè)高（滿足商家搭建不同表單場(chǎng)景的訴求）。

回到商家售后表單的真實(shí)訴求中來(lái)，以售后退差價(jià)場(chǎng)景（商家自主承諾價(jià)保）和用戶物流催促（長(zhǎng)時(shí)間未更新物流狀態(tài)）來(lái)看，用戶需要告知商家以下信息：

從以上兩個(gè)表單登記場(chǎng)景來(lái)看，我們初步可以找出些填寫(xiě)內(nèi)容的格式和要求。根據(jù)填寫(xiě)的內(nèi)容，我將我們的組件梳理成兩類組件，分別是通用組件和業(yè)務(wù)組件。

• 通用組件：這類組件兼容性強(qiáng)，不依賴登記場(chǎng)景特性，比如圖片組件（用戶上傳圖片憑證）、選擇組件（用戶單選或者多選內(nèi)容）、輸入框（用戶輸入內(nèi)容說(shuō)明情況）等
• 業(yè)務(wù)組件：這類組件帶有業(yè)務(wù)或某類場(chǎng)景特性。比如訂單填寫(xiě)，通過(guò)配置一個(gè)輸入框，讓用戶輸入

訂單id也可以解決，但這種方式用戶體驗(yàn)太差，所以通過(guò)做一個(gè)訂單選擇器組件，用戶點(diǎn)擊下拉選擇在店鋪購(gòu)買(mǎi)過(guò)的訂單。

根據(jù)咱們的售后場(chǎng)景，我初步梳理了以下組件：

2. 業(yè)務(wù)數(shù)據(jù)建模

我們現(xiàn)在只知道要做一個(gè)無(wú)代碼表單和需要的組件，那么商家要接入表單進(jìn)行組件配置。

商家應(yīng)該怎么做？

這就涉及到業(yè)務(wù)數(shù)據(jù)建模，業(yè)務(wù)數(shù)據(jù)建模是指將業(yè)務(wù)的核心數(shù)據(jù)對(duì)象特征進(jìn)行提煉，歸納并設(shè)計(jì)對(duì)應(yīng)的底層數(shù)據(jù)模型的過(guò)程。

說(shuō)人話就是商家在配置表單組件過(guò)程中，需要?jiǎng)?chuàng)建什么，操作什么，具體操作業(yè)務(wù)對(duì)象有哪些？

我將核心的業(yè)務(wù)對(duì)象梳理成商家、表單、表單場(chǎng)景類型、組件、用戶、表單內(nèi)容。

• 商家：配置表單的商家賬號(hào)（賬號(hào)權(quán)限在本章不展開(kāi)，下一篇會(huì)講到）
• 表單：承載組件的容器
• 表單模板類型：表單歸屬于某一場(chǎng)景模板（比如退差價(jià)場(chǎng)景、物流催促場(chǎng)景等），歸屬后該表單會(huì)先配置了部分組件
• 組件：組件包括基礎(chǔ)組件和業(yè)務(wù)組件，可以在配置表單時(shí)，對(duì)組件進(jìn)行屬性配置
• 用戶：填寫(xiě)表單的用戶
• 表單內(nèi)容：表單配置好后，用戶和商家都可自助填寫(xiě)表單從而產(chǎn)生的內(nèi)容。商家對(duì)表單的管理顆粒度要落到內(nèi)容，可以對(duì)表單內(nèi)容進(jìn)行增、改、內(nèi)容狀態(tài)處理等

這些業(yè)務(wù)對(duì)象之間的關(guān)系如下圖的UR圖所示：

上面ER圖表達(dá)的意思是：

• 一個(gè)商家可以創(chuàng)建n個(gè)表單
• 一個(gè)表單對(duì)應(yīng)0個(gè)或1個(gè)表單模板類型，同時(shí)1個(gè)表單模板類型可以對(duì)應(yīng)n個(gè)表單
• 一個(gè)表單由n個(gè)組件組成，同時(shí)組件也可以用于別的表單
• 一個(gè)表單可以被登記n條表單內(nèi)容，該條表單內(nèi)容只能屬于一個(gè)表單
• 用戶和商家都可以登記1個(gè)到n個(gè)表單內(nèi)容

抽象出這些業(yè)務(wù)對(duì)象和梳理好關(guān)系后，說(shuō)明我們已經(jīng)初步弄清楚了業(yè)務(wù)邏輯。后續(xù)的流程設(shè)計(jì)和界面設(shè)計(jì)可以根據(jù)ER圖去細(xì)化細(xì)節(jié)。

3. 業(yè)務(wù)流程

四、無(wú)代碼表單產(chǎn)品功能設(shè)計(jì)

1. 表單配置功能

前面的業(yè)務(wù)流程里有說(shuō)明商家配置表單的操作，這里簡(jiǎn)要說(shuō)明下商家側(cè)表單配置需要的功能：

• 創(chuàng)建表單：支持模板選擇或者是創(chuàng)建空白表單
• 表單編輯頁(yè)：支持商家拖拽控件和編輯控件屬性，搭建表單
• 表單規(guī)則設(shè)置：對(duì)表單配置對(duì)應(yīng)的規(guī)則，比如配置狀態(tài)流程功能、用戶填寫(xiě)次數(shù)等

1）創(chuàng)建表單

無(wú)代碼上手搭建對(duì)于商家運(yùn)營(yíng)同學(xué)來(lái)說(shuō)，依然是有非常高的學(xué)習(xí)和上手成本，提供售后模板場(chǎng)景能極大提高表單生成率和使用率。

所以我們要提供開(kāi)箱即用的模板表單。

創(chuàng)建表單功能核心是要提供模板表單和空白表單給商家選擇，商家選擇后，產(chǎn)品側(cè)要做的事情是記錄商家創(chuàng)建了一個(gè)表單：

• 模板表單：默認(rèn)模板表單的名稱和圖標(biāo)即新表單名稱和圖標(biāo)
• 空白表單：用戶點(diǎn)擊創(chuàng)建后，商家還需要輸入表單名稱和圖標(biāo)，才能真正創(chuàng)建成功

2）表單編輯頁(yè)

宜搭表單編輯頁(yè)面

輕流表單編輯頁(yè)面

如上圖所示，我體驗(yàn)了下宜搭和清流的表單編輯器頁(yè)面，都是常規(guī)的三分編輯器，左邊區(qū)域是組件庫(kù)，中間區(qū)域是編輯畫(huà)布，右邊區(qū)域是組件的屬性配置。

舉個(gè)例子，從左邊拖入單選組件進(jìn)到中間的畫(huà)布區(qū)域后，可在右邊組件屬性配置區(qū)域配置選項(xiàng)名稱、選項(xiàng)內(nèi)容等。

這塊功能后續(xù)核心要做組件的擴(kuò)展，通過(guò)提供更多原子組件來(lái)滿足商家場(chǎng)景訴求。

3）表單規(guī)則設(shè)置

用戶是否可以多次填寫(xiě)同一個(gè)表單（重復(fù)校驗(yàn)），表單是否要開(kāi)啟狀態(tài)流轉(zhuǎn)處理，表單是否允許商家代客填寫(xiě)等，這些規(guī)則統(tǒng)統(tǒng)可以收攏在表單規(guī)則設(shè)置頁(yè)面。

設(shè)置好之后，我們就可以獲取用戶側(cè)表單投放鏈接了。

關(guān)于表單投放，后續(xù)可以再進(jìn)行重點(diǎn)迭代，具體原因下文會(huì)講到。

2. 用戶登記表單

用戶側(cè)的表單功能重點(diǎn)關(guān)注兩個(gè)地方：

1）怎么合理觸達(dá)用戶

觸達(dá)用戶渠道越多，表單UV越高，表面上看起來(lái)表單產(chǎn)品價(jià)值越高，但實(shí)際上可能會(huì)給用戶造成非必要的觸達(dá)。

售后核心是要解決用戶購(gòu)后問(wèn)題，提升用戶體驗(yàn)。所以在觸達(dá)渠道投放設(shè)計(jì)上要克制，應(yīng)該結(jié)合售后場(chǎng)景進(jìn)行合理觸達(dá)。

以催促物流場(chǎng)景為例，當(dāng)用戶物流狀態(tài)24小時(shí)未更新，可以在物流詳情頁(yè)有工單入口供用戶進(jìn)行登記和投訴；以改地址場(chǎng)景為例，當(dāng)用戶下單后，客服可以自動(dòng)下發(fā)表單卡片，供用戶進(jìn)行改地址表單申請(qǐng)。

2）怎么告知用戶表單狀態(tài)

表單狀態(tài)同步更新在表單詳情中，讓用戶可視目前的表單處理進(jìn)度，產(chǎn)品核心要做表單提交后的處理進(jìn)度展示功能。

表單完結(jié)后，可以通過(guò)客服自動(dòng)化發(fā)信息告知用戶。

還是那句話，觸達(dá)用戶的設(shè)計(jì)要克制，可以考慮設(shè)計(jì)每天最多觸達(dá)次數(shù)和用戶可自主關(guān)閉觸達(dá)機(jī)制功能。

3）表單處理功能

用戶填寫(xiě)表單后，表單管理列表會(huì)記錄表單內(nèi)容，如下圖所示：

表單處理功能核心是給商家進(jìn)行表單內(nèi)容處理，以下為主要功能介紹：

• 表單列表：提交的表單內(nèi)容展示在列表中，支持列表內(nèi)容自定義展示、排序、內(nèi)容查詢等功能
• 表單詳情頁(yè)信息展示：表單信息除了展示用戶提交的內(nèi)容，還需要根據(jù)業(yè)務(wù)訴求提供更全的信息，比如提供創(chuàng)建日期、用戶信息、訂單信息、狀態(tài)處理信息等
• 表單狀態(tài)處理：對(duì)表單狀態(tài)進(jìn)行操作，比如有申領(lǐng)、指派、狀態(tài)進(jìn)度處理、回復(fù)用戶等
• 表單內(nèi)容導(dǎo)入/導(dǎo)出：導(dǎo)入指的是商家可以代客發(fā)起表單申請(qǐng)；導(dǎo)出指的是商家可以將表單內(nèi)容數(shù)據(jù)導(dǎo)出去

五、總結(jié)

以上為低代碼表單產(chǎn)品設(shè)計(jì)思路介紹，不展開(kāi)詳細(xì)功能方案設(shè)計(jì)，比如怎么設(shè)計(jì)組件功能配置、表單狀態(tài)處理流程等。

如果要展開(kāi)講，那就是一篇上萬(wàn)字的prd了。

如果你要去設(shè)計(jì)類似的低代碼產(chǎn)品或者是偏抽象化組件的設(shè)計(jì)，我覺(jué)得可以參考:

1）了解做低代碼產(chǎn)品目的和價(jià)值

并不是所有表單產(chǎn)品都需要做成低代碼形式，核心要看標(biāo)準(zhǔn)化表單是否能滿足大部分商家需求。如果符合大部分商家訴求，直接提供標(biāo)準(zhǔn)化表單，對(duì)商家來(lái)說(shuō)才是更佳方案。

所以我們?cè)诔龇桨盖埃欢ㄒ肭宄鉀Q的問(wèn)題是什么，怎么衡量低代碼產(chǎn)品價(jià)值。

2）抽象原子組件

低代碼搭建就如同拼樂(lè)高，所以抽象出最基礎(chǔ)的原子組件是非常重要的。

無(wú)論是表單類組件，或者是中臺(tái)類組件，都需要從業(yè)務(wù)視角出發(fā)，抽象出業(yè)務(wù)真實(shí)要用的東西和共性。

組件足夠原子化，才能兼容不同場(chǎng)景。

3）想清楚業(yè)務(wù)鏈路

有些同學(xué)在出方案的時(shí)候，直接一步到位就到功能頁(yè)面設(shè)計(jì)，后期往往漏洞百出。

功能頁(yè)面能跑通，核心是業(yè)務(wù)處理層和數(shù)據(jù)層在支撐。所以我們?cè)谠O(shè)計(jì)功能頁(yè)面前，可以通過(guò)業(yè)務(wù)數(shù)據(jù)建模理清楚業(yè)務(wù)對(duì)象和數(shù)據(jù)底層，通過(guò)業(yè)務(wù)流程圖想清楚系統(tǒng)之間的流轉(zhuǎn)關(guān)系。

最后，還有兩個(gè)問(wèn)題：

1. 商家內(nèi)部哪些員工可以操作表單，對(duì)表單內(nèi)的數(shù)據(jù)進(jìn)行處理？
2. 用戶提交表單后，內(nèi)部ERP系統(tǒng)怎么接收表單數(shù)據(jù)，無(wú)需多平臺(tái)操作？

作者：蘇Eddie，微信公眾號(hào)：蘇Eddies

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

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