關于中端和后端產(chǎn)品的表單設計，我相信這篇文章一定會對您有所幫助。
前言
表格是數(shù)據(jù)錄入和信息提交的常見形式。網(wǎng)絡和移動都很常見。它們通常由各種元素組成，例如標簽，輸入項和提交按鈕。
中端和后端產(chǎn)品為企業(yè)服務。由于業(yè)務的復雜性，表單通常呈現(xiàn)許多領域，混合類型和強大的專業(yè)性。需要考慮更多設計。
通過我自己項目的經(jīng)驗，本文引用了antd的內容，并提取了一套適用于中端和后端產(chǎn)品的表單設計規(guī)范。我將在這里分享，希望能給你一些幫助。
從用戶的角度看一下表單
從提交開始到完成，用戶的行為和思維是什么邏輯？
1，表格的整體視圖
當用戶看到表單時，他們需要快速了解一些常規(guī)情況。例如：用于什么形式？你需要填寫多少東西？多久時間？當您對表單有一些了解時，請開始下一步。
2，單項查看，填寫，檢查
當用戶啟動項目時，他或她將經(jīng)歷查看，填寫和檢查的過程。
查看：您想為這個單品輸入什么？怎么操作？有什么要求嗎？
填寫：在理解要寫入的內容后，盡可能輕松地填寫要輸入的值。
檢查：填寫完成后，需要檢查是否正確。
3.全面檢查
填寫完每個項目后，將其作為一個整體進行檢查。你錯過了嗎？你裝滿了嗎？如果整體檢查正確，請再次提交。
4.提交，修改，成功提交
由于某些輸入項需要由后端判斷，因此某些輸入項可能不符合首次提交后的條件。此時，您需要再次修改它并提交它，直到提交成功。
為用戶設計表單
了解用戶的需求，我們需要設計和優(yōu)化表單的用戶需求。
首先，為了方便用戶的整體觀點
1.一步一步
具有更多字段的表單需要分解為幾個步驟。用戶可以直觀地看到步驟的編號，名稱和描述。
2，分組
在同一步驟中具有共性的字段可以分組為一個組。組和組由分界線分隔，組標題可以反映組的內容。
3.排版
用戶的視線是從上到下。為了便于閱讀和美觀，標簽需要右對齊，輸入?yún)^(qū)域寬度均勻。
其次，為了方便用戶查看，填寫，簽入單項
1，文字標簽
文本標簽負責輸入的解釋。需要正確設置文本標簽以幫助用戶理解輸入。
2.輸入提醒
當文本標簽不足以準確描述條目時，需要輸入提醒。輸入提醒以接收更多文字。
常用的輸入提醒
上圖中輸入建議，輸入提示和輸入幫助的提醒級別很弱。通常，當弱提醒足以表達提醒時，不需要使用強提醒。
3，良好的默認值
建議在某些輸入項被推斷的概率很高時為其設置默認值。一個好的默認值將節(jié)省用戶填寫的時間。請注意，不正確使用默認值也很容易對用戶造成干擾。
4.結構化格式
某些具有固定格式的輸入值需要以格式化形式顯示，例如銀行卡號，ID號，手機號，貨幣，百分比等。結構化格式可以極大地避免用戶的錯誤，使頁面更美觀，更易于閱讀。
5.可選/必需
表單的輸入通常包含必填字段和可選字段。必需或可選，您需要明確告知用戶。通常，需要添加*符號，然后標簽后跟一個可選的方式來指示該選項。
6，黑暗提示
使用通用認知以較弱的方式向用戶提供提示。如果需要限制字符數(shù)的文本輸入?yún)^(qū)域，可以使用以下方法：通過比較輸入的字符數(shù)和數(shù)字的上限來提示用戶。
7.驗證反饋
驗證用戶輸入值并給出反饋。
檢查內容：是否為空，類型格式是否正確，是否符合業(yè)務邏輯
驗證方法：前端驗證通常使用正則表達式，后端驗證需要考慮業(yè)務邏輯
觸發(fā)檢查：前端檢查通常使用即時檢查和焦點離開時的檢查，后端檢查通常在提交之后。
反饋類型：正確，錯誤，警告（有風險點但可以通過驗證）
反饋方法：
在項目附近輸入文字
圖標上的浮動圖層
全球反饋
三，為方便用戶的整體檢查和提交
提交后，執(zhí)行后端驗證，不符合業(yè)務邏輯的內容需要有反饋內容，便于用戶定位和修改。
表格的常見組成部分
常用組件的內容不是本文的重點，不再詳細解釋。有興趣的用戶請到antd了解。
結論
之前我做過一個版本《表格規(guī)范》，在發(fā)送之后我得到了很多反饋，并且我也做了一些改進。我希望這個表單規(guī)范能夠鼓舞每個人，歡迎反饋。
下次我打算寫一下圖表的規(guī)格時，它主要涉及數(shù)據(jù)可視化的內容。
原型下載鏈接：https://pan.baidu.com/s/1g70dMVlZuDjBHIjq9YjbCA
本文最初由@流風發(fā)表。未經(jīng)許可，禁止復制。
該地圖來自PEXELS，基于CC0協(xié)議