中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

表單的核心作用是支持用戶提交信息，無論是SaaS產品，還是內部工具，或是C端產品，表單都是不可或缺的一部分。表單如此重要，以至于很多低代碼產品本質上就是表單驅動型的產品，開發者在搭建表單的同時，也定義了應用的數據模型。本文作者分享了低代碼的表單設計，一起來看一下吧。

你可能不太了解什么是表單，但它在你的日常生活中已經無處不在。當我們注冊商場會員時，需要填寫個人信息，這時你正在填寫的，就是表單；當我們在運營后臺新錄入一條商品數據時，我們填寫的也是表單。

表單的核心作用是支持用戶提交信息。無論是 SaaS 產品，還是內部工具，或是 C 端產品，表單都是不可或缺的一部分。

表單如此重要，以至于很多低代碼產品本質上就是表單驅動型的產品，例如輕流、簡道云等，開發者在搭建表單的同時，也定義了應用的數據模型。

本文主要與大家分享低代碼中的表單設計，所分享內容來自我在所負責的表單項目中積累的實踐經驗，如果偏頗，請多包涵。

如果你負責低代碼相關產品，那本文對你從事表單設計會有所幫助，如果你是 B 端產品，本文亦能對你有所啟發。

國內的低代碼產品有兩種核心路線：一種是表單驅動型，其應用搭建思路是表單+流程，一般適用于簡單的業務場景；一種是模型驅動型，其應用搭建思路是數據模型+頁面+流程，一般適用于更復雜的業務場景。

鑒于筆者的實踐經驗，本文主要分享模型驅動型低代碼產品中的表單設計，但我相信對表單驅動型產品也是有借鑒意義的。

一

聊表單，首先要聊數據模型。

前面說到，表單的核心作用是支持用戶提交信息。大多數時候，這些信息是需要記錄在數據庫的，例如會員信息、商品信息等，信息提交到記錄在數據庫的過程，我們簡稱為「落庫」。

那需要提交什么樣的信息，取決于這個信息本身所關聯的表是什么結構，而表的結構，核心在于字段是什么類型。（這里涉及一些數據庫的知識，我就不展開了）

歸根到底一句話，啟動表單設計前，需要搞清楚當前低代碼產品的數據模型有哪些能力。更直接一些，就是搞清楚支持哪些數據字段，每種字段的屬性到底如何。

在 Js 中，常見的五種數據字段類型分別是：string、number、boolean、null、undefined，而在低代碼中，如果直接根據這五種原始字段類型設計表單，則基本不可用。

舉個例子，姓名和郵箱都是string 類型的信息，但他們的錄入體驗和校驗規則完全不一樣，很難在同一種規范下進行設計。

所以，很多低代碼產品會在原始數據字段類型的基礎上，進一步封裝一層業務數據字段，常見的包括：文本、富文本、數字、日期、日期時間、選項、文件、布爾、手機號、郵箱、圖片等等。

需要支持哪些字段并沒有統一的規則，唯一需要考慮的是，新增一種字段類型帶來的收益，是否大于與之對應的開發成本，即可。

二

在數據模型之上，我們需要進一步考慮表單項。

在用戶輸入信息的過程中，需要提供一些額外的能力來幫助填寫，其中最重要的就是校驗和提示。而表單項，就是承載字段輸入、校驗和提示這三個能力的一類組件。

字段輸入：提供對應的輸入控件，支持用戶完成信息輸入。例如文本輸入框，其在移動端的交互就是用戶點擊輸入框后，喚起鍵盤，完成文本信息輸入后，信息回填在輸入框內。

校驗：對用戶輸入信息按照一定規則做校驗，例如中國大陸手機號的長度必須是 11 位。校驗是表單中十分重要的能力，因為表單數據如果要落庫的話，需要盡可能保障數據庫中數據的規范性，避免引入無效數據。

提示：為了優化用戶填寫表單的體驗，很多時候填寫的字段旁邊會有一些解釋文案。這部分文案的配置也是在表單項內完成。

在表單項的設計過程中，我們需秉持一個原則：任何一種已有的字段，都必須有對應的表單項，才能保障數據的正常流轉。

因此，如果要從 0 到 1 設計表單，表單項的設計是最開始也是工作量最大的一步。只有保證表單項是完備的，我們才能考慮下一步：表單的設計。

需要說明的是，表單項的設計也有兩種不同的思路：一體化和原子化。

一體化的思路中，所有的屬性都在表單項的配置中完成。例如字段的 label、校驗規則、表單項中輸入控件的樣式等，這種思路的好處是操作成本更低，在一個地方集中完成配置。與之對應的，其缺點也很明顯，就是不夠靈活。

而原子化的思路，就是表單項是一個復合的組件，其中的字段 label、提示文案、校驗文案、輸入控件等，都可以單獨選中配置。這樣的設計思路下，表單項的靈活性會非常高，當然使用成本也隨之升高。

具體選擇哪種思路，得需要跟當前低代碼產品的整體設計原則匹配。

三

表單項完備了，下面就要進入最核心的環節：表單容器的設計。

表單容器是模型驅動型低代碼產品特有的組件。因為是組件，所以它的層級比頁面更低，這也就意味著，一個表單不是一個頁面，而是頁面中的一個模塊。

表單容器是一個數據容器組件，對這個組件來說，需要綁定某個數據源，這是組件的輸入；而組件的輸出就是與數據源對應的一條記錄。

表單的提交，就是將表單輸出的數據在下游進行流轉：傳遞到其他頁面或流程中使用，或者是直接落庫。

從邏輯上說，當我們有了表單項之后，就已經具備了搭建出一個表單所需要的全部能力了。但這種搭建成本會非常高，需要字段 by 字段地去流轉數據。

而表單容器組件的目的，就是最大程度降低表單搭建的門檻，提升它的易用性。那它是怎么做到的呢？這就不得不說到模型驅動。

四

模型驅動低代碼產品的典范是微軟的Powerapps（如果你想做低代碼，建議多研究它），我對模型驅動的理解是，圍繞模型做應用搭建。

為了方便你的理解，我以前面提到的商品數據維護為例做說明。

對于商品來說，它的數據模型就是它的主數據。比如商品的名稱、定價、所屬品牌、生產日期等等，所有與商品有關的信息，且在系統中需要用到并維護的信息，最終都落在一張表上。

可以認為，這張表就是商品背后的數據模型。

模型驅動的意思是，在應用搭建時，圍繞商品的數據源快速生成數據獲取、展示、落庫等核心模塊，即：

模型是表單內的最小單位。

如果你去體驗 Powerapps 就會發現，當我們將表單關聯某個數據源時，就會自動生成對應的表單項，且表單項的默認配置與字段在數據庫中的屬性對應。

例如，如果字段是必填，則表單項的校驗規則中也會默認必填。

Powerapps 做得更徹底，當表單生成后，表單項默認是鎖住的狀態，如果需要修改，首先需要解鎖。這無疑傳遞了一個很強的信號：

系統已經根據數據源的特征幫你生成了表單，肯定好用，沒事不要亂改。

當表單提交時，Powerapps 也會執行 submit 函數，函數的參數是 form ，這里的意思也很明顯：數據提交背后，真正進行數據流轉的是模型，而不是表單項代表的字段。

當我們嘗試向表單內拖入一個輸入控件后，會發現這個控件完全是游離在表單之外的存在，與表單本身沒有任何關系。

因為，這個獨立的輸入控件不是由模型控制的，跟模型沒有任何關系。因此在模型驅動的思路下，這樣的產品邏輯無疑是非常合理的。

老實說，第一次使用的時候我覺得很奇怪，似乎這里的表單不是那么靈活，哪哪都限制了。但真正弄懂背后的邏輯后，我無比為它的嚴謹和一致性而嘆服。

我見過很多功能大而全的產品，典型的「既要又要」邏輯下的產物。你說不上好用，也說不上難用，但就是沒什么記憶點。

而用過一些優秀且經典的產品后，我發現，能將某種設計原則從始至終貫徹到底的產品，才真正令人佩服。

順便說說，表單的落庫設計比較簡單，基本都是 SQL 相關語法的產品化，包括insert、update、upsert 等操作，在產品設計上按語法要求指定對應的參數即可。

例如，insert 操作只需要指定要插入的數據和表即可，但 update 操作需要指定更新的數據源、更新前的數據以及更新后的數據。

普遍的做法是，將 SQL 相關語法包裝為對應的數據源方法，在表單提交時調用對應的方法，按要求配置方法的入參即可。

五

以上都是從應用搭建的角度聊聊低代碼中對應的表單設計。事實上，表單作為一種在不同業務中都經常用到的工具，其擴展性遠不止于此。

其中我認為最需要關注的一點是，表單字段的聯動。

聯動場景隨處可見，例如當我在性別選項中選擇了男性時，我的衣服尺碼可能就默認為 L，選擇女性時，就默認為 S。

性別字段和尺碼字段本來是兩個獨立的字段，但如果尺碼的默認值能夠根據性別字段的值而改變，則對于填寫者來說，體驗會好很多。這樣的例子非常多見。

在非低代碼場景下的產品設計中，產品經理一般會將這樣的聯動邏輯用語言甚至是流程圖描述清楚，然后開發用代碼實現。

但是在低代碼場景下，我們需要實現的能力是，讓開發者能通過不寫代碼的方式，配置出它想要的任何聯動效果。

這里順便說下，低代碼產品經理的思維模式與普通產品經理的不同在于，面對業務訴求時，他們思考的不是需求的實現邏輯，而是實現該需求背后的工具的組裝邏輯。

就好像我們經常用的那個比喻，用戶需要光，普通產品經理便給他們一把合適的錘子，可以鑿壁偷光，但低代碼產品經理考慮的是，如果這個用戶想到大錘子，那個用戶想要小錘子，我該如何提供樂高玩具一般的工具，讓他們自己組裝錘子。

說回字段聯動，其本質是 A 表單項中的某些屬性配置需要消費到 B 表單項里的信息。依賴兩個底層能力：

1. 表單項的屬性需要可以綁定動態數據。這一點可以參考 powerapps 的設計，組件的所有屬性都可以綁定公式。
2. 表單項的屬性支持暴露被消費。結合 1，整個鏈路就是，當表單項 A 的屬性在綁定公式時，可以在公式中引用表單項 B 的屬性。

再結合我們上面的例子，尺碼字段有一個屬性是 default value，它可以綁定一個公式，公式的邏輯是：如果性別字段的 value 是男，則公式返回 L，如果是女，則返回 S。

這樣，上述的聯動邏輯就搭建完成了。

而更多更復雜的邏輯，也是在這兩個底層能力的基礎上完成。后面有機會我也會詳細說說這兩個底層能力的產品化設計。

尾聲

關于低代碼產品中的表單設計，就分享到這里。最后想說的是，低代碼產品很難做，你可以看到，光是業務中常見的表單工具，背后的無代碼邏輯就有這么復雜。

但另一方面，在如此深的地方去思考需求實現邏輯，能幫助我們對需求本身理解得更徹底，這也是做低代碼的樂趣之一。