我們是袋鼠云數(shù)棧 UED 團(tuán)隊(duì)，致力于打造優(yōu)秀的一站式數(shù)據(jù)中臺產(chǎn)品。我們始終保持工匠精神，探索前端道路，為社區(qū)積累并傳播經(jīng)驗(yàn)價(jià)值。

本文作者：大喜

相關(guān)文章：袋鼠云出品！數(shù)棧UI 5.0全新體驗(yàn)升級，設(shè)計(jì)背后的故事

前言

表單是B端產(chǎn)品中最常見的組件之一，主要?于數(shù)據(jù)收集、校驗(yàn)和提交。比如登陸流程的賬號密碼填寫，注冊流程的郵箱、用戶名等信息填寫，都是表單應(yīng)用的常見案例，在數(shù)棧產(chǎn)品中也是出現(xiàn)頻率?常?的組件。

盡管表單應(yīng)用十分普遍，但在我們對舊版數(shù)棧產(chǎn)品進(jìn)行調(diào)研時(shí)，發(fā)現(xiàn)許多產(chǎn)品同學(xué)都反饋了關(guān)于表單的問題。所以在實(shí)際設(shè)計(jì)時(shí)關(guān)于「表單」會有很多需要去思考的問題:

• 標(biāo)簽是使?左右布局還是上下布局更合適？
• 標(biāo)簽?本過?要怎么解決？
• 提示信息怎么顯示不會形成?擾？
• 操作按鈕居左還是居右？
• 控件?度整體排列還是按輸?預(yù)期錯(cuò)落有致？
• ……

本文就根據(jù)數(shù)棧UI 5.0的設(shè)計(jì)邏輯，從表單構(gòu)成、表單布局，以及表單的交互形式等多?度梳理了這篇文章，希望能給大家?guī)鞡端產(chǎn)品設(shè)計(jì)不一樣的啟示，這些干貨知識相信你一定用的上。

表單的構(gòu)成

盡管我們都對表單很熟悉，但為了確保清晰，我們還是先介紹一下它的構(gòu)成。一個(gè)基礎(chǔ)的表單通常由標(biāo)簽、表單域、提示信息、校驗(yàn)信息和操作按鈕等基礎(chǔ)組件構(gòu)成。

標(biāo)簽

標(biāo)簽主要?于告知?戶要錄?的內(nèi)容，通常需要簡明扼要便于?戶理解。

標(biāo)簽的放置分三種形式?平排列（右標(biāo)簽），上下排列（頂標(biāo)簽），顯示輸?框內(nèi)（?內(nèi)標(biāo)簽）。

數(shù)棧?前的表單?以上下排列的表單樣式為主，?平排列的表單為輔。數(shù)棧UI5.0使?上下表單形式?的也是為了解決UI4.0中?平表單所存在的問題，?如標(biāo)題過?、對?、備注提示信息位置不統(tǒng)?、視覺的整體性等。但不管標(biāo)簽是上下排列還是左右排列都有各?的優(yōu)劣勢，具體運(yùn)?到??中還是需要考慮實(shí)際的使?場景。還有?類?內(nèi)標(biāo)簽應(yīng)?較少，主要?于搜索框組件的使?。

上下排列-頂標(biāo)簽

應(yīng)用場景：
適?基礎(chǔ)表單、分布表單、抽屜、彈窗等表單交互形式。

優(yōu)勢：

• 相?于左右對?標(biāo)簽可容納更多字?jǐn)?shù)
• 標(biāo)簽與表單域聯(lián)系更加緊密，視覺橫向移動距離?，最適合快速瀏覽操作（上下表單：單個(gè)標(biāo)簽到輸?區(qū)平均耗時(shí)50毫秒；?平表單：單個(gè)標(biāo)簽到輸?區(qū)平均耗時(shí) 240 毫秒）
• 信息擴(kuò)展性更強(qiáng)，可容納更多提示信息來幫助?戶更具象的理解以及預(yù)防錯(cuò)誤發(fā)?
• 表單整體布局更加規(guī)則且有秩序

劣勢：
?定程度上占??量的縱向空間，縱向空間利?率不?。

左右排列-右標(biāo)簽

應(yīng)用場景：
?于表格篩選等縱向空間有限時(shí)，使?橫向排列減少???度占?，?如：表格篩選可使?橫向表單來減少占??度，對??式按照輸?框?qū)?。

表單域

表單域包含文本框、多行文本框、單選框、復(fù)選框和下拉選擇框等，用于采集用戶輸入或選擇的數(shù)據(jù)。根據(jù)不同類型的數(shù)據(jù)，選擇與之對應(yīng)的錄入方式能夠提高表單操作的效率和用戶體驗(yàn)。

文本錄入

?本錄?是最基礎(chǔ)的信息輸??式。按照輸?的內(nèi)容分為單?輸?框、多?輸?框和數(shù)值輸?框。但需要注意的是輸?項(xiàng)過多，操作就會變得繁瑣，在之前發(fā)布的?章可?性原則中有提到過系統(tǒng)識別勝過記憶原則，?選擇代替輸?可以減少?戶的記憶負(fù)擔(dān)，也能減少輸?錯(cuò)誤等問題，可以有效的提升操作效率。

應(yīng)用場景：
當(dāng)用戶輸入的內(nèi)容不可預(yù)測或*度程度高時(shí)使用。使用單行文本框適用于輸入文本字符數(shù)較少的場景；多行文本框適用于輸入文本字符數(shù)較多時(shí)，可以選擇使用拖拽文本框樣式或?本?動撐?的功能。

復(fù)合輸入框

輸?的內(nèi)容帶單位/符號，使?復(fù)合輸?框讓輸?信息更具整體性。

選擇錄入

選擇錄?是為?戶預(yù)先提供了?定的選擇范圍，在指定范圍中選擇?標(biāo)選項(xiàng)進(jìn)?錄?，在數(shù)棧的產(chǎn)品中?較常?的組件有單選、多選、選擇器、開關(guān)、時(shí)間選擇器等。

Radio單選

在?組相關(guān)且互斥的數(shù)據(jù)中，?戶僅能選擇?個(gè)選項(xiàng)。

應(yīng)用場景：

• 當(dāng)選項(xiàng)數(shù)量少于5個(gè)時(shí)，使?平鋪可以減少?戶的操作步?，當(dāng)選項(xiàng)過多時(shí)建議使?下拉選擇器
• 在?組單選框中，可以設(shè)置?個(gè)最有可能被選擇或者最安全的選項(xiàng)作為默認(rèn)選項(xiàng)

Checkbox復(fù)選

允許?戶選擇?個(gè)或多個(gè)獨(dú)?選項(xiàng)。

應(yīng)用場景：

• ?于篩選或批量處理的操作：?于過濾??、菜單中的數(shù)據(jù)，表格批量操作等
• ?于條款或條件級：選中復(fù)選框表明?戶同意這些條款或條件
• 當(dāng)選項(xiàng)內(nèi)容較少時(shí)（滿?(7±2 )法則），平鋪的交互效果更友好，?便?戶點(diǎn)選取消

Switch開關(guān)

互斥性的操作控件，?戶可打開或關(guān)閉某個(gè)功能。

應(yīng)用場景：
對于?戶更改后?即?效的設(shè)置，使?開關(guān)。

Select選擇器

當(dāng)?戶需要從?組同類數(shù)據(jù)中選擇?個(gè)或多個(gè)時(shí)，可以使?下拉選擇器，點(diǎn)擊后選擇對應(yīng)項(xiàng)。

應(yīng)用場景：

• 主要?于表單填寫（錄?）和屬性選擇（篩選）場景
• 當(dāng)選項(xiàng)?于5個(gè)以上時(shí)，使?選擇器，保持潔?簡潔，避免混亂

?期/時(shí)間選擇器

這個(gè)?較明確，僅?于時(shí)間/?期的選擇或篩選。

應(yīng)用場景：
當(dāng)?戶需要輸??期、時(shí)間信息時(shí)，提供基礎(chǔ)的時(shí)間、?期篩選功能。

穿梭框

左右兩側(cè)布局的多選組件，分為候選區(qū)和已選區(qū)，兩側(cè)數(shù)據(jù)平鋪在??上，?戶可以以直觀的?式將數(shù)據(jù)從?側(cè)即時(shí)移到另?側(cè)，完成選擇或移除數(shù)據(jù)的交互?為。

應(yīng)用場景：
需要更清晰的展示選擇內(nèi)容時(shí)，穿梭框?直觀的?式展示出了更多的選項(xiàng)信息，能夠減少因信息隱藏造成的錯(cuò)誤，?便?戶實(shí)時(shí)了解選擇的內(nèi)容，增加?戶的確定感。

上傳錄?

?于傳輸?件或者提交相應(yīng)的內(nèi)容，?前數(shù)棧多數(shù)場景都是使?單個(gè)上傳樣式。

提示與反饋

在之前的文章中，我們提到了尼爾森十大可用性原則中的“系統(tǒng)可見性原則”和“幫助用戶發(fā)現(xiàn)、判斷和修復(fù)錯(cuò)誤”，這些都強(qiáng)調(diào)了提示與反饋的重要性。在用戶進(jìn)行任務(wù)操作的過程中，適當(dāng)?shù)姆答伳軌蜃層脩袅私猱?dāng)前的狀態(tài)，并引導(dǎo)用戶進(jìn)行正確的交互行為。

為了提供更好的用戶體驗(yàn)，數(shù)棧UI5.0提供了多種組件類型，來應(yīng)對不同場景下的提示與反饋交互，例如警告提示、文本提示、必填項(xiàng)提示、Tooltips文字氣泡提示、Popover氣泡卡片提示等。此外，對于操作結(jié)果的反饋方式，我們也可以采用校驗(yàn)反饋、全局提示、通知提醒框、Modal對話框、Popconfirm氣泡確認(rèn)框、頁面反饋等。在整個(gè)表單填寫過程中，及時(shí)給予用戶相應(yīng)的提示與反饋，可以顯著提高填寫的效率。

文本提示

提升?戶輸?內(nèi)容的準(zhǔn)確性和效率，使?提示性?案的?式顯示在操作區(qū)域。

應(yīng)用場景：

• 在輸?框內(nèi)顯示提示?案，告知?戶輸?規(guī)則，在?戶還未輸?任何字符時(shí)顯示
• 在表單域上?提示，對業(yè)務(wù)規(guī)則或輸??的等信息進(jìn)?說明

必填項(xiàng)提示

當(dāng)??需要填寫的表單過多時(shí)，多數(shù)?戶都會表現(xiàn)出排斥，如果能明確告知?戶必填的表單，能夠極?簡化?戶錄?的流程，減少不必要的信息?擾。
數(shù)棧UI5.0沿?了之前的“*”星號作為必填提示，也是?前?戶普遍?較習(xí)慣的?種形式。

應(yīng)用場景：

• 任務(wù)中必須完成的操作需要標(biāo)記星號
• ?個(gè)表單所有都是必填項(xiàng)時(shí)，為了避免產(chǎn)?理解性的錯(cuò)誤，我們還是建議標(biāo)記星號，因?yàn)椴糠?戶會習(xí)慣判斷?星號的表單不是必填內(nèi)容

Tooltips?字?泡提示

常?于解釋說明，僅承載簡單的?案信息。

應(yīng)用場景：

• 展示幫助性信息：解釋說明、幫助信息這類提示更偏向于業(yè)務(wù)屬性，隨著?戶深?使?產(chǎn)品，這些信息會變得不再重要，?戶查看的頻率也會越來越低。所以我們通常會將這類信息收起，當(dāng)?戶不理解某個(gè)功能，或想要獲得更多信息時(shí)，通過訪問“?”問號 icon 查看相關(guān)聯(lián)的更多幫助性信息。
• 增強(qiáng)交互的確定感：當(dāng)?戶與界?進(jìn)?交互時(shí)，?字提示能夠幫助?戶增強(qiáng)對所交互元素效果的確定感（如按鈕的操作提示）
• ??位置有限時(shí)：當(dāng)??位置有限時(shí)，?些UI元素需要以簡化的形式出現(xiàn)（如單獨(dú)的圖標(biāo)），或者?字省略，使??字提示能夠更好的幫助?戶理解信息

Popover?泡卡?提示

常?于承載信息和操作，承載的內(nèi)容和形式更為多樣。

應(yīng)用場景：
在使?場景上，?泡彈窗（Popover）可以像?字提示（Tooltip）?樣為?戶提供幫助，但整體來說擴(kuò)展性更強(qiáng)。???，Popover 可以承載更多的圖?信息，提供詳情預(yù)覽的功能；另??? Popover 允許?戶在其中進(jìn)??些簡單操作，在功能上更接近彈窗。

警告提示

向?戶傳遞與當(dāng)前??相關(guān)的?為反饋、公告信息。提示較為醒?，通常顯示在??頂部，或者彈窗頂部，隨容器寬度?適應(yīng)。?浮層的靜態(tài)展現(xiàn)形式，始終展現(xiàn)，不會?動消失，?戶可以點(diǎn)擊關(guān)閉。

應(yīng)用場景：

• ?于向?戶傳遞產(chǎn)品或系統(tǒng)的重要提醒，與?戶的任務(wù)或狀態(tài)?關(guān)，會?直存在，直到被?戶處理或關(guān)閉
• 僅在必要時(shí)使?提示，且應(yīng)將提示限制在與之內(nèi)容相關(guān)的任務(wù)界?中

校驗(yàn)反饋

?于表單等控件的結(jié)果反饋，顯示在對應(yīng)控件下?，在操作后消失。

應(yīng)用場景：
?于表單、表格等數(shù)據(jù)錄?場景下，當(dāng)?戶輸?的內(nèi)容不符合字段或表單的要求顯示。

全局提示

全局展示操作反饋信息，可提供成功、警告和錯(cuò)誤等反饋信息，頂部居中顯示并?動消失，是?種不打斷?戶操作的輕量級提示?式。

應(yīng)用場景：

• ?于執(zhí)?操作后提供的操作結(jié)果反饋，如成功、失敗等提示
• 只提供結(jié)果反饋，不提供給操作按鈕，如果需要?戶對結(jié)果做出回應(yīng)，建議使? Modal 對話框

通知提醒框

向?戶反饋重要的警告提示和通知消息，?般顯示在??的右上?，可以?動關(guān)閉，也可以設(shè)置時(shí)間?動關(guān)閉，?前數(shù)棧產(chǎn)品內(nèi)是在彈出?秒后?動關(guān)閉。

應(yīng)用場景：

• ?般?于系統(tǒng)級通知，需要吸引?戶關(guān)注但?不強(qiáng)制?戶去處理的場景
• 通知提醒框?yàn)閮?nèi)容提供的空間有限，因此內(nèi)容必須簡短明了，?戶應(yīng)該能夠快速瀏覽通知，了解情況，并知道下?步該做什么

頁面反饋

以??的形式展示操作結(jié)果反饋，或進(jìn)?步引導(dǎo)。

應(yīng)用場景：

?于某個(gè)任務(wù)流結(jié)束后的結(jié)果反饋，且?戶?常關(guān)注此任務(wù)的結(jié)果時(shí)，建議使?落地?反饋結(jié)果。

表單操作按鈕布局

在數(shù)據(jù)錄?完成后，需要對任務(wù)進(jìn)?保存、提交或者取消等操作。除了對表單任務(wù)進(jìn)?保存/提交操作外，還需提供?戶能夠隨時(shí)取消當(dāng)前執(zhí)?的任務(wù)的操作。所以通常表單?都應(yīng)提供兩個(gè)按鈕，確定/保存和取消操作。

按鈕之間需要區(qū)分主次關(guān)系，按鈕作為主要的視覺引導(dǎo)，在?個(gè)焦點(diǎn)任務(wù)中最多只使??個(gè)主按鈕。同時(shí)存在多個(gè)主按鈕會讓?戶失去操作焦點(diǎn)，造成信息?擾。

按鈕居左

當(dāng)表單內(nèi)容靠左時(shí)，按鈕居左邊，主次關(guān)系從左到右排列。尼爾森團(tuán)隊(duì)發(fā)表過一份關(guān)于《眼睛軌跡的研究》報(bào)告，其中提到了“F”型瀏覽模式。用戶的閱讀習(xí)慣一直以來都是從上到下、從左到右。因此，按照“F”型順序延伸，當(dāng)表單布局靠左時(shí)，按鈕組合的位置也應(yīng)靠左。

再說到按鈕的主次關(guān)系布局，我們通常將靠近邊緣的按鈕視為主要按鈕。這是因?yàn)榉破澏芍杏幸粭l叫做邊角利用，邊界對于用戶的操作來說是“無限可觸發(fā)”的。當(dāng)內(nèi)容置于邊緣時(shí)，操作失誤率會大大降低。

按鈕居中

當(dāng)表單內(nèi)容分步時(shí)，步驟條位于??中?，對應(yīng)的操作按鈕同樣居中顯示。垂直布局下，?戶瀏覽時(shí)的眼動路徑單純向下，這種由上?下的瀏覽效率是最?的。因此，對應(yīng)的主次關(guān)系布局應(yīng)該遵循方向性原則，主按鈕帶有明確?向，具有下?步性質(zhì)的按鈕。

按鈕居右

彈窗的布局是按照“Z”型構(gòu)圖法，按鈕布局在“Z”的末尾，按照古騰堡原則（對?線平衡法則）這個(gè)區(qū)域是?戶瀏覽?為的最終落點(diǎn)區(qū)域。當(dāng)?戶任務(wù)進(jìn)?到這個(gè)部分時(shí)需要采取措施，所以通常在這?放置按鈕或者?動點(diǎn)。主按鈕放在邊緣最右側(cè)，便于?戶快速獲得?標(biāo)操作。

表單的布局

表單的布局形式影響著表單的操作效率，在表單設(shè)計(jì)時(shí)，我們通常會根據(jù)信息的容量以及內(nèi)容的關(guān)聯(lián)性來選擇合適的內(nèi)容組織形式。內(nèi)容組織形式分為三種基礎(chǔ)表單、分布表單、分組表單。

基礎(chǔ)表單

基礎(chǔ)表單是最簡單的布局形式，將所有需填寫表單內(nèi)容項(xiàng)直接羅列在??上。

應(yīng)用場景：

適用于內(nèi)容較少、結(jié)構(gòu)簡單的場景，表單項(xiàng)采用單列縱向排列。較短寬度且具有相關(guān)性的表單項(xiàng)可以組合在一行中，形成弱分組的暗示。通常，操作按鈕會跟隨內(nèi)容之后，當(dāng)內(nèi)容超出一屏幕后，操作按鈕會懸浮固定在底部。

分組表單

分組表單是按照一定相關(guān)性進(jìn)行分組的表單，是遵循《簡約至上-交互設(shè)計(jì)四策略》中提到的四?策略之?“組織”的應(yīng)?。在基礎(chǔ)平鋪的基礎(chǔ)上，將表單項(xiàng)中相關(guān)聯(lián)的表單項(xiàng)進(jìn)行分組，使表單顯得更有規(guī)律和組織性。即使表單項(xiàng)較多，也不會顯得雜亂無章，減輕了用戶的心理壓力和視覺疲勞，提高了操作體驗(yàn)。

應(yīng)用場景：

適用于需要填寫大量內(nèi)容的單次任務(wù)表單頁中，且不同內(nèi)容之間存在一定的可分類歸納性時(shí)。

分步表單

分布表單同樣應(yīng)?了四?策略中的另?項(xiàng)策略“轉(zhuǎn)移”——當(dāng)任務(wù)較復(fù)雜時(shí)，為了更簡單易?，可以對復(fù)雜任務(wù)進(jìn)?巧妙拆解轉(zhuǎn)移。將?戶需要錄?的復(fù)雜信息按照線性流程組織拆解，利?步驟條告知?戶完整流程和進(jìn)度。分步表單的流程化明顯，后?步填寫的內(nèi)容常基于前?步來填寫。

應(yīng)用場景：

分步表單適?于內(nèi)容較多，并且前后步驟之間存在線性關(guān)系的情況。在數(shù)棧產(chǎn)品中，?般步驟?的信息承載量普遍都會較?，按照縱向單列布局，導(dǎo)致?屏橫向空間空?過多，縱向路徑過?。所以為了確保信息的屏效?（?屏幕的內(nèi)容曝光率），我們在做分布表單布局時(shí)，采?多列平鋪的樣式。

優(yōu)勢：
節(jié)省??縱向空間，可以承載更多表單項(xiàng)，能夠放置更多的控件單元。

劣勢：
“Z”字型的視覺動線較為復(fù)雜，填寫體驗(yàn)會相對差?些。

同樣?度的屏幕，多列平鋪的表單能夠顯示更多內(nèi)容

表單的交互形式

?前表單常?的交互形式有??跳轉(zhuǎn)、抽屜、彈窗、?泡卡?、原位編輯。在什么場景下選擇什么樣的交互形式，通常會根據(jù)內(nèi)容的承載量以及關(guān)聯(lián)度來判斷，從少到多依次為：?泡卡? – 原位編輯 – Modal對話框 – 抽屜 – ??跳轉(zhuǎn)。

氣泡卡片

不會影響原有任務(wù)進(jìn)程，承載內(nèi)容少。把內(nèi)容的編輯修改操作及校驗(yàn)放在?泡卡?上完成，不會打斷原有任務(wù)進(jìn)程。

原位編輯

其編輯內(nèi)容也為展示內(nèi)容，默認(rèn)展示狀態(tài)操作，可切換為編輯狀態(tài)，屬于輕量型的信息采集表單。

Modal對話框

?戶在不離開當(dāng)前?的情況下繼續(xù)操作，是流程步驟中的分??為，只能承載簡單的表單內(nèi)容。

抽屜

拓展性更強(qiáng)，可承載?彈窗更復(fù)雜?些的表單內(nèi)容。

頁面跳轉(zhuǎn)

最常?的?式，適?于絕?部分的表單，?持構(gòu)建復(fù)雜的表單。

總結(jié)

表單是產(chǎn)品內(nèi)操作成本較?的組件，操作中很容易引起?戶抵觸?理，所以在表單的整體完善度、組件的豐富度、交互的流暢度上還需要更深?的去探索。

希望本文能幫助你們優(yōu)化表單功能，更多地考慮功能實(shí)現(xiàn)與體驗(yàn)設(shè)計(jì)的平衡。

最后

歡迎關(guān)注【袋鼠云數(shù)棧UED團(tuán)隊(duì)】~
袋鼠云數(shù)棧 UED 團(tuán)隊(duì)持續(xù)為廣大開發(fā)者分享技術(shù)成果，相繼參與開源了歡迎 star

• 大數(shù)據(jù)分布式任務(wù)調(diào)度系統(tǒng)——Taier
• 輕量級的 Web IDE UI 框架——Molecule
• 針對大數(shù)據(jù)領(lǐng)域的 SQL Parser 項(xiàng)目——dt-sql-parser
• 袋鼠云數(shù)棧前端團(tuán)隊(duì)代碼評審工程實(shí)踐文檔——code-review-practices
• 一個(gè)速度更快、配置更靈活、使用更簡單的模塊打包器——ko
• 一個(gè)針對 antd 的組件測試工具庫——ant-design-testing

總結(jié)

以上是生活随笔為你收集整理的袋鼠云数栈UI5.0设计实战｜B端表单这样设计，不仅美观还提效的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。