關(guān)于中后臺(tái)產(chǎn)品的表單設(shè)計(jì)，相信這篇文章一定可以給你帶來(lái)幫助。

前言

表單是數(shù)據(jù)錄入和信息提交的通用形式，web端和移動(dòng)端都很常見(jiàn)，通常由標(biāo)簽、輸入項(xiàng)、提交按鈕等多種元素構(gòu)成。

中后臺(tái)產(chǎn)品是服務(wù)于業(yè)務(wù)的。由于業(yè)務(wù)的復(fù)雜性，表單往往呈現(xiàn)出字段多、類(lèi)型雜、專(zhuān)業(yè)性強(qiáng)的特點(diǎn)，設(shè)計(jì)上需要考慮更多的內(nèi)容。

本文通過(guò)自己的項(xiàng)目經(jīng)驗(yàn)，參考了antd的內(nèi)容，提煉出了一套適用于中后臺(tái)產(chǎn)品的表單設(shè)計(jì)規(guī)范。在此共享出來(lái)，希望能夠給大家一些幫助。

以用戶的視角來(lái)看看表單

從開(kāi)始填寫(xiě)到提交完成，用戶的行為和思考的邏輯是怎樣的呢？

1、表單整體查看

用戶在看到一個(gè)表單時(shí)，需要迅速地知道一些大概情況。例如：表單是做什么用的？需要填寫(xiě)多少東西？花多長(zhǎng)時(shí)間？當(dāng)對(duì)表單有一定了解后，開(kāi)始進(jìn)行下一步。

2、單項(xiàng)查看、填寫(xiě)、檢查

用戶開(kāi)始一項(xiàng)項(xiàng)填寫(xiě)時(shí)，會(huì)經(jīng)歷一個(gè)查看、填寫(xiě)、檢查的過(guò)程。

• 查看：這個(gè)單項(xiàng)要輸入什么？怎么操作？要沒(méi)有什么要求？
• 填寫(xiě)：明白了要寫(xiě)什么后，盡可能方便地填寫(xiě)自己想輸入的值。
• 檢查：填寫(xiě)完成后，需要核對(duì)下是否填的正確。

3、整體檢查

每個(gè)單項(xiàng)都填寫(xiě)完成后，整體檢查一遍。有沒(méi)有漏填的？有沒(méi)有填錯(cuò)的？整體檢查確認(rèn)無(wú)誤后，再來(lái)提交。

4、提交，再修改，提交成功

由于一些輸入項(xiàng)需要做后端判斷，在首次提交后，可能會(huì)有部分輸入項(xiàng)不符合條件。此時(shí)需要再次修改，提交，直至提交成功。

為用戶設(shè)計(jì)表單

知道了用戶的需求，我們需要對(duì)表格對(duì)用戶需求做針對(duì)性的設(shè)計(jì)和優(yōu)化。

一、為了方便用戶整體查看

1、分步驟

字段較多的表單，需要分解成幾個(gè)步驟。用戶可直觀地看到步驟的數(shù)量、名稱(chēng)、說(shuō)明。

2、分組

同一步驟內(nèi)的具有共性的字段，可歸納到一個(gè)組里。組與組之間通過(guò)分隔線區(qū)分，組標(biāo)題能體現(xiàn)該組的內(nèi)容。

3、排版

用戶的視線路徑是從上到下的。為了易讀和美觀，需要標(biāo)簽右對(duì)齊、輸入?yún)^(qū)寬度統(tǒng)一。

二、為了方便用戶單項(xiàng)查看、填寫(xiě)、檢查

1、文本標(biāo)簽

文本標(biāo)簽承擔(dān)著對(duì)輸入項(xiàng)的解釋的作用。文本標(biāo)簽需要合理設(shè)置，幫助用戶理解輸入項(xiàng)。

2、輸入提醒

文本標(biāo)簽不足以對(duì)輸入項(xiàng)準(zhǔn)確說(shuō)明時(shí)，需要使用輸入提醒。輸入提醒能承擔(dān)更多的文字。

常用的輸入提醒方式

上圖中的輸入建議、輸入提示、輸入幫助的提醒程度是由弱到強(qiáng)的，通常弱程度的提醒足夠表達(dá)提醒時(shí)，無(wú)需再使用強(qiáng)程度的提醒。

3、良好的默認(rèn)值

在一些輸入項(xiàng)的值大概率能推測(cè)出來(lái)時(shí)，建議為其設(shè)置默認(rèn)值。良好的默認(rèn)值會(huì)節(jié)省用戶的填寫(xiě)時(shí)間。注意，默認(rèn)值的不恰當(dāng)使用，也容易對(duì)用戶造成干擾。

4、結(jié)構(gòu)化格式

一些具有固定格式的輸入值，需要以格式化的形式展示，如銀行卡號(hào)、身份證號(hào)、手機(jī)號(hào)、貨幣、百分?jǐn)?shù)等等。結(jié)構(gòu)化的格式能極大地避免用戶犯錯(cuò)，也能使頁(yè)面更加美觀易讀。

5、選填/必填

表單的輸入項(xiàng)通常既有必填字段，也有選填字段。必填還是選填，需要明確地告知用戶。通常采用加*號(hào)的方式表示必填，標(biāo)簽后加可選的方式表示選填。

6、暗提示

使用通用的認(rèn)知，以較弱的方式給用戶以提示。如需要限制文字?jǐn)?shù)量的文本輸入?yún)^(qū)，可使用下列的方式：通過(guò)已輸入字符數(shù)量和數(shù)量上限的對(duì)比來(lái)提示用戶。

7、校驗(yàn)反饋

對(duì)用戶輸入值進(jìn)行校驗(yàn)，并給出反饋。

• 校驗(yàn)內(nèi)容：是否為空、類(lèi)型格式是否正確、是否符合業(yè)務(wù)邏輯
• 校驗(yàn)方法：前端校驗(yàn)一般使用正則表達(dá)式，后端校驗(yàn)需要考慮業(yè)務(wù)邏輯
• 校驗(yàn)的觸發(fā)：前端校驗(yàn)一般使用即時(shí)校驗(yàn)和焦點(diǎn)離開(kāi)時(shí)校驗(yàn)，后端校驗(yàn)一般在提交后。
• 反饋類(lèi)型：正確、錯(cuò)誤、警告（有風(fēng)險(xiǎn)點(diǎn)但可通過(guò)校驗(yàn)）

反饋方式：

輸入項(xiàng)附近文字

圖標(biāo)上的浮層

全局反饋

三、為了方便用戶整體檢查和提交

提交后進(jìn)行后端校驗(yàn)，不符合業(yè)務(wù)邏輯的內(nèi)容需要有反饋內(nèi)容，便于用戶定位修改。

表單常用組件

常用組件的內(nèi)容不是本文的重點(diǎn)，不做展開(kāi)詳解。有興趣的用戶請(qǐng)移步antd了解。

結(jié)語(yǔ)

之前做過(guò)一版《表格規(guī)范》，發(fā)出來(lái)后得到了很多反饋，也對(duì)其做了一些完善。希望本次的表單規(guī)范能夠?qū)Υ蠹矣兴鶈l(fā)，歡迎大家反饋。

下一次計(jì)劃寫(xiě)關(guān)于圖表規(guī)范的內(nèi)容，主要涉及到數(shù)據(jù)可視化方面的內(nèi)容。

原型下載鏈接：https://pan.baidu.com/s/1g70dMVlZuDjBHIjq9YjbCA

相關(guān)閱讀

中后臺(tái)產(chǎn)品的表格設(shè)計(jì)，看這一篇就夠了（原型規(guī)范下載）

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

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