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

本文作者：大喜

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

前言

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

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

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

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

表單的構(gòu)成

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

標(biāo)簽

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

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

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

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

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

優(yōu)勢(shì)：

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

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

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

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

表單域

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

文本錄入

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

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

復(fù)合輸入框

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

選擇錄入

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

Radio單選

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

應(yīng)用場(chǎng)景：

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

Checkbox復(fù)選

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

應(yīng)用場(chǎng)景：

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

Switch開(kāi)關(guān)

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

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

Select選擇器

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

應(yīng)用場(chǎng)景：

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

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

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

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

穿梭框

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

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

上傳錄?

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

提示與反饋

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

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

文本提示

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

應(yīng)用場(chǎng)景：

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

必填項(xiàng)提示

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

應(yīng)用場(chǎng)景：

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

Tooltips?字?泡提示

常?于解釋說(shuō)明，僅承載簡(jiǎn)單的?案信息。

應(yīng)用場(chǎng)景：

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

Popover?泡卡?提示

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

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

警告提示

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

應(yīng)用場(chǎng)景：

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

校驗(yàn)反饋

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

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

全局提示

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

應(yīng)用場(chǎng)景：

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

通知提醒框

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

應(yīng)用場(chǎng)景：

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

頁(yè)面反饋

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

應(yīng)用場(chǎng)景：

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

表單操作按鈕布局

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

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

按鈕居左

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

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

按鈕居中

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

按鈕居右

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

表單的布局

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

基礎(chǔ)表單

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

應(yīng)用場(chǎng)景：

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

分組表單

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

應(yīng)用場(chǎng)景：

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

分步表單

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

應(yīng)用場(chǎng)景：

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

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

劣勢(shì)：
“Z”字型的視覺(jué)動(dòng)線較為復(fù)雜，填寫(xiě)體驗(yàn)會(huì)相對(duì)差?些。

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

表單的交互形式

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

氣泡卡片

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

原位編輯

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

Modal對(duì)話框

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

抽屜

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

頁(yè)面跳轉(zhuǎn)

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

總結(jié)

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

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

最后

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

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

總結(jié)

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

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