淺談通用配置化表單設(shè)計(jì)

1 評(píng)論 11300 瀏覽 53 收藏 7 分鐘

編輯導(dǎo)語(yǔ):在不同的地區(qū)項(xiàng)目信息都會(huì)存在不同的差異,并且由于它們會(huì)不定期發(fā)生更新和變化,導(dǎo)致產(chǎn)品每一次都需要重新開(kāi)發(fā)和研究,為了解決這個(gè)問(wèn)題,作者提出了通用化配置表單這個(gè)概念。讓我們一起來(lái)看看吧!

筆者近期參與了一個(gè)涉及到多地區(qū)的項(xiàng)目,在項(xiàng)目過(guò)程中發(fā)現(xiàn),不同的地區(qū)在面對(duì)“項(xiàng)目信息收集”和“項(xiàng)目信息審核”這兩個(gè)小產(chǎn)品中都存在差異化場(chǎng)景,且會(huì)不定期發(fā)生字段級(jí)的更新和變化,這讓產(chǎn)品和開(kāi)發(fā)同學(xué)每次都需要去調(diào)整需求和重新發(fā)版。由于每一次的重新開(kāi)發(fā)和缺少?gòu)?fù)用,也直接導(dǎo)致了測(cè)試和開(kāi)發(fā)資源的浪費(fèi)以及業(yè)務(wù)效率的下降,因此筆者開(kāi)始思考如何通用建立一套“通用化配置表單”來(lái)解決當(dāng)前面對(duì)的高成本低效率的現(xiàn)象。

一、什么是通用配置化表單

顧名思義,通過(guò)搭建一套通用解決方案,配置化地解決用戶的操作流程、信息填寫(xiě)收集、后臺(tái)審核等核心模塊,在靈活支持新業(yè)務(wù)規(guī)則情況下,同時(shí)減少新需求接入時(shí)的開(kāi)發(fā)量。

二、設(shè)計(jì)思路

通用表單的設(shè)計(jì)方案將基于底層的項(xiàng)目、流程、表單、規(guī)則配置提供服務(wù),并體現(xiàn)在前臺(tái)的用戶信息提交頁(yè)面和后臺(tái)用戶信息審核頁(yè)面。

三、產(chǎn)品介紹

1. 項(xiàng)目配置

可以簡(jiǎn)單理解為每一次要單獨(dú)配置化支持的一個(gè)業(yè)務(wù),筆者的項(xiàng)目中可以將每一個(gè)地區(qū)項(xiàng)目理解為一個(gè)單獨(dú)的配置化項(xiàng)目。

此時(shí)我們需要錄入project_name/description:

e.g. CN通用表單方案:應(yīng)用于CN地區(qū)的表單信息收集和審核。

2. 流程配置

流程配置分為基礎(chǔ)信息和步驟配置:

基礎(chǔ)信息包含:

  • flow_name
  • flow_description

步驟信息包含:

  • step_name
  • step_description
  • redirection_url: 此項(xiàng)支持配置定制化landing page或者其他內(nèi)部業(yè)務(wù)模塊組件;
  • step_order: 步驟順序

基于上述配置,我們可以結(jié)合前端渲染初步實(shí)現(xiàn)如下效果:

3. 表單配置

表單配置即用戶在填寫(xiě)表單,錄入信息時(shí)涉及到的字段、樣式、聯(lián)動(dòng)效果等;

主要包含如下信息:

  • field_type:包括不限于輸入框、下拉選項(xiàng)、單選、多選、文件上傳、日期等
  • field_content
  • validation_rule
  • is_review
  • etc…

在表單配置中,由于存在多種不同的字段類(lèi)型,所以對(duì)應(yīng)的校驗(yàn)規(guī)則也會(huì)不一樣,包括是否需要后臺(tái)審核。

4. 審核規(guī)則配置

由于不同的業(yè)務(wù)是否需要審核并不是必要的場(chǎng)景,所以審核可根據(jù)實(shí)際需要去選擇接入or不接入,當(dāng)然在流程&表單配置中,也可以靈活設(shè)置是否針對(duì)整個(gè)步驟的信息進(jìn)行審核,或者精細(xì)到每個(gè)步驟中特定字段的審核。

審核規(guī)則配置主要用于配置模版,此模版用于審核人員在approve/reject時(shí)所應(yīng)對(duì)的原因選項(xiàng)等,其他應(yīng)用場(chǎng)景待拓展。

四、如何應(yīng)用

1. 用戶端頁(yè)面

用戶端頁(yè)面主要包含三個(gè)部分:歡迎落地頁(yè),核心表單頁(yè),結(jié)束頁(yè)面;

  • 歡迎落地頁(yè):可用固定的landing page url進(jìn)行配置;
  • 核心表單頁(yè):基于項(xiàng)目、流程、表單配置化,結(jié)合前端的固定渲染效果進(jìn)行呈現(xiàn);
  • 結(jié)束頁(yè)面:可用固定的landing page url進(jìn)行配置;

2. 管理端審核頁(yè)面

管理端頁(yè)面如果包含三個(gè)部分:列表頁(yè),詳情頁(yè),log頁(yè);

  • 列表頁(yè):由通用篩選組件+列表組件+通用批量工具組成(列表頁(yè)可使用固定樣式,不接入通用表單);
  • 詳情頁(yè):由流程基礎(chǔ)信息+流程表單信息+審核規(guī)則配置組成;每個(gè)流程or步驟展示為單獨(dú)的一個(gè)信息模塊,每個(gè)模塊or每個(gè)模塊內(nèi)的字段的審核根據(jù)審核規(guī)則配置進(jìn)行實(shí)現(xiàn);
  • log頁(yè):由操作人+操作時(shí)間+操作項(xiàng)+操作內(nèi)容組成(log頁(yè)可使用固定樣式,不接入通用表單)。

五、總結(jié)

基于上述的簡(jiǎn)單介紹,相信大家對(duì)通用表單的基本原理和實(shí)現(xiàn)方式有了大概的了解,在實(shí)際業(yè)務(wù)中去使用和落地也可參考部分設(shè)計(jì)思路,如有更多的拓展場(chǎng)景,也歡迎大家多多交流~

 

本文由 @茶底世界 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 學(xué)習(xí)了。樓主還有更詳細(xì)的內(nèi)容可以分享嗎?坐等更新??

    來(lái)自廣東 回復(fù)