国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

前言

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

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

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

以用戶的視角來看看表單

從開始填寫到提交完成，用戶的行為和思考的邏輯是怎樣的呢？

1、表單整體查看

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

2、單項查看、填寫、檢查

用戶開始一項項填寫時，會經(jīng)歷一個查看、填寫、檢查的過程。

• 查看：這個單項要輸入什么？怎么操作？要沒有什么要求？
• 填寫：明白了要寫什么后，盡可能方便地填寫自己想輸入的值。
• 檢查：填寫完成后，需要核對下是否填的正確。

3、整體檢查

每個單項都填寫完成后，整體檢查一遍。有沒有漏填的？有沒有填錯的？整體檢查確認(rèn)無誤后，再來提交。

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

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

為用戶設(shè)計表單

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

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

1、分步驟

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

2、分組

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

3、排版

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

二、為了方便用戶單項查看、填寫、檢查

1、文本標(biāo)簽

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

2、輸入提醒

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

常用的輸入提醒方式

上圖中的輸入建議、輸入提示、輸入幫助的提醒程度是由弱到強的，通常弱程度的提醒足夠表達提醒時，無需再使用強程度的提醒。

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

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

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

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

5、選填/必填

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

6、暗提示

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

7、校驗反饋

對用戶輸入值進行校驗，并給出反饋。

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

反饋方式：

輸入項附近文字

圖標(biāo)上的浮層

全局反饋

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

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

表單常用組件

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

結(jié)語

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

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

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

相關(guān)閱讀

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

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

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