01表單概念

表單頁(yè)作為基礎(chǔ)通用組件，也是B端產(chǎn)品中臺(tái)、后臺(tái)出現(xiàn)比較頻繁的頁(yè)面之一?？此坪?jiǎn)單的頁(yè)面我們?cè)谠O(shè)計(jì)時(shí)卻有很多值得推敲的點(diǎn)，在細(xì)節(jié)處提升用戶易用度，我通過(guò)日常的學(xué)習(xí)和公司項(xiàng)目，在這里總結(jié)復(fù)盤了自己的經(jīng)驗(yàn)。

表單的適用場(chǎng)景比較廣泛，常見(jiàn)的基礎(chǔ)表單比如登錄注冊(cè)頁(yè)面，這一類往往信息簡(jiǎn)單，格式比較固定，除此之外就是分步表單、高級(jí)表單。常見(jiàn)的場(chǎng)景主要用于新建信息、申請(qǐng)、客戶信息、商品信息等等。這類表單可能存在復(fù)雜邏輯關(guān)系和功能，有時(shí)會(huì)給我們?cè)斐衫_。以下我將以這一類表單為主要案例，一一進(jìn)行拆解。

登錄注冊(cè)頁(yè)：表單內(nèi)容簡(jiǎn)單，操作簡(jiǎn)單。

分步表單：具有流程化特點(diǎn)，具有先后邏輯關(guān)系，內(nèi)容較多的業(yè)務(wù)類型，比如轉(zhuǎn)賬，新建商品訂單等。分步填寫可以減緩用戶壓力，起到安撫用戶情緒的作用。

高級(jí)表單：主要用于需要一次性輸入、提交 大批量數(shù)據(jù)的場(chǎng)景。也成為分組表單，和分布表單一樣都是為了減輕用戶填寫壓力。

02設(shè)計(jì)原則

首先我們需要明確表單頁(yè)的主要功能：表單頁(yè)承載了系統(tǒng)中絕大多數(shù)系統(tǒng)數(shù)據(jù)的錄入、增刪、修改、查看，是系統(tǒng)中人機(jī)交互最為頻繁和典型的數(shù)據(jù)媒介。表單頁(yè)通常需要用戶錄入大量的信息或數(shù)據(jù)，在設(shè)計(jì)時(shí)我們的核心目標(biāo)應(yīng)該是讓用戶明確當(dāng)前表單頁(yè)面要完成什么任務(wù)，輕松理解項(xiàng)目含義及生效的結(jié)果，思考如何幫助用戶高效、準(zhǔn)確、輕松的完成任務(wù)。

表單設(shè)計(jì)基本原則：明確、高效、安全

明確：用戶可以快速定位重要信息和目標(biāo)選項(xiàng)，表單文案和組件可以準(zhǔn)確傳達(dá)任務(wù)含義

高效：易理解易操作的交互方式，盡量減少交互步驟，減少用戶任務(wù)路徑步長(zhǎng)，配合合理的信息布局引導(dǎo)，準(zhǔn)確的選擇合適的組件傳達(dá)信息，幫助用戶高效的完成任務(wù)。

安全感：操作前有效的防錯(cuò)機(jī)制，操作中有明確的狀態(tài)反饋與容錯(cuò)，允許糾正錯(cuò)誤。操作后及時(shí)的保存，取消機(jī)制。

03表單構(gòu)成

一個(gè)完整的表單通常包括表單標(biāo)題、表單標(biāo)簽、表單域、提示信息、占位符、操作按鈕幾部分。

標(biāo)題：起到說(shuō)明表單模塊的作用，是用戶快速明確任務(wù)和定位頁(yè)面位置的重要標(biāo)識(shí)。

表單標(biāo)簽：內(nèi)容項(xiàng)的名稱，說(shuō)明對(duì)應(yīng)填寫項(xiàng)含義及說(shuō)明用戶該填入什么信息。

表單域：表單的核心操作區(qū)域，用戶操作最頻繁，最集中的地方，這里的可選擇組件樣式也會(huì)根據(jù)內(nèi)容需要而變化，類型最為豐富多樣。需要注意的是同一類型的組件需保持一致性原則。

占位符：一般出現(xiàn)在用戶未填寫內(nèi)容時(shí)，用于輔助提示用戶錄入線索。

提示信息：輔助提示用戶的作用。分為普通提示和錯(cuò)誤提示，也是很好的防錯(cuò)糾錯(cuò)機(jī)制體驗(yàn)。

操作按鈕：“結(jié)束”表單任務(wù)的觸發(fā)器，用于向服務(wù)器提交數(shù)據(jù)或者放棄操作。

表單標(biāo)簽

表單標(biāo)簽樣式常見(jiàn)的有4種，左對(duì)齊標(biāo)簽、右對(duì)齊標(biāo)簽、頂部標(biāo)簽和行內(nèi)標(biāo)簽，不同的對(duì)齊方式各有優(yōu)勢(shì)和缺點(diǎn)，適應(yīng)在不同的場(chǎng)景。

右對(duì)齊標(biāo)簽（冒號(hào)對(duì)齊）

優(yōu)點(diǎn)：標(biāo)簽指向明確，操作效率高，節(jié)約縱向空間

缺點(diǎn)：可讀性低，不適用于狹長(zhǎng)空間或需要適配多語(yǔ)言的頁(yè)面

場(chǎng)景：普通表單填寫，多用于web端

左對(duì)齊標(biāo)簽

優(yōu)點(diǎn)：閱讀性高，節(jié)約縱向空間

缺點(diǎn)：不適用于狹長(zhǎng)空間或需要多語(yǔ)言適配的頁(yè)面，操作效率低

場(chǎng)景：詳情陳列

頂部標(biāo)簽

優(yōu)點(diǎn)：視覺(jué)對(duì)齊舒適，節(jié)約橫向空間

缺點(diǎn)：縱向空間利用不高

場(chǎng)景：多用于移動(dòng)端表單填寫，多語(yǔ)言適配頁(yè)面

行內(nèi)標(biāo)簽

優(yōu)點(diǎn)：視覺(jué)對(duì)齊和空間最節(jié)約的方式

缺點(diǎn)：當(dāng)用戶輸入狀態(tài)時(shí)，標(biāo)簽消失，增加用戶記憶負(fù)擔(dān)

場(chǎng)景：多用于登錄注冊(cè)，修改密碼等內(nèi)容極少，不需要記憶的頁(yè)面

表單域

表單域是一個(gè)表單頁(yè)面的主體部分，其內(nèi)容豐富多樣，從而它可選擇形式也最多，不同的內(nèi)容我們?cè)谠O(shè)計(jì)的時(shí)候應(yīng)該選擇最合適的組件，以及應(yīng)該注意同類型內(nèi)容選擇統(tǒng)一的組件進(jìn)行設(shè)計(jì)。

定義操作框大小

在實(shí)際項(xiàng)目中我們往往會(huì)遇到內(nèi)容長(zhǎng)度不能統(tǒng)一的時(shí)候，那怎么這種情況該怎么處理呢？

以往我的處理方式是強(qiáng)行拉長(zhǎng)對(duì)齊，但我們可以發(fā)現(xiàn)強(qiáng)行對(duì)齊的時(shí)候，視覺(jué)沒(méi)有得到很大優(yōu)化，反而在隱喻傳達(dá)給用戶錯(cuò)誤的信息，當(dāng)用戶在操作1功能的時(shí)候，可能會(huì)錯(cuò)誤的認(rèn)為這個(gè)選項(xiàng)可以選擇很多，因?yàn)槲覀兘o的選擇框很長(zhǎng)，而實(shí)際上它只能選一個(gè)。這樣就會(huì)給用戶造成不必要的理解成本。

比較好的方式處理方式是我們?cè)O(shè)計(jì)組件庫(kù)時(shí)就設(shè)定不同尺寸的操作框，來(lái)適應(yīng)不同場(chǎng)景下不同內(nèi)容需求。如果不能對(duì)齊，那就讓它參差不齊。

提示信息

提示信息在表單中起到提示、糾錯(cuò)的作用。形式主要有以下幾種：行內(nèi)占位符提示、操作框下方文字提示、tost提示、氣泡提示。

行內(nèi)占位符：這是一種基礎(chǔ)應(yīng)用，它即可用于占位，也可用于任務(wù)說(shuō)明提示，當(dāng)我們說(shuō)明文字很少的時(shí)候可選擇的一種方式。需要注意的是內(nèi)容務(wù)必簡(jiǎn)潔易懂，減少閱讀成本，不要說(shuō)“正確的廢話”，語(yǔ)句應(yīng)該是完整的陳述句。

氣泡提示：當(dāng)提示文字很多，主要用于對(duì)標(biāo)簽的名字釋義時(shí)，氣泡彈窗是個(gè)不錯(cuò)的選擇。它的優(yōu)勢(shì)在于可以將更多內(nèi)容折疊，不占用空間，缺點(diǎn)是不直觀，增加了用戶操作步驟。

Tost提示：Tost提示一般是在出發(fā)操作按鈕后給出的提示，可以是操作結(jié)果提示，也可以是內(nèi)容填寫提示。

操作框下方文字提示：當(dāng)提示內(nèi)容很多時(shí)，還可以考慮操作框下方提示，多用于對(duì)輸入內(nèi)容的輔助說(shuō)明場(chǎng)景。應(yīng)用場(chǎng)景包括以下幾種：

組件組合后在表現(xiàn)層的設(shè)計(jì)

提示信息在頁(yè)面中還是一個(gè)輔助性的角色，常規(guī)情況下的視覺(jué)層級(jí)應(yīng)該是 表單內(nèi)容>表單標(biāo)簽>提示信息。當(dāng)用戶有錯(cuò)誤操作時(shí)“錯(cuò)誤提示”優(yōu)先級(jí)是最高的，我們一般用帶有警示性的顏色給以醒目顯示。

為了使用戶更好的辨別任務(wù)項(xiàng)，需要注意組件與組件、組件與說(shuō)明文字之間的間距差別。

04交互方式

表單中的交互方式根據(jù)其內(nèi)容選擇對(duì)應(yīng)最合適的形式，內(nèi)容簡(jiǎn)單而少的可以直接在原位編輯，操作快捷，關(guān)聯(lián)性最強(qiáng)，所見(jiàn)即所得，內(nèi)容容量低于5個(gè)。其次內(nèi)容較多的，或者針對(duì)全局操作的可以選擇氣泡卡片，比如全局設(shè)置等。第三種是彈窗或者抽屜，兩者形式是一致的，區(qū)別在于對(duì)內(nèi)容的承載量上，彈窗容量較小，內(nèi)容較多的情況下抽屜式彈窗（側(cè)拉彈窗）是更好的選擇。最后，內(nèi)容承載最大的就是頁(yè)面跳轉(zhuǎn)，同時(shí)這種方式與原頁(yè)面的關(guān)聯(lián)性最弱。

組件構(gòu)成表單，實(shí)際項(xiàng)目中，我們的表單往往內(nèi)容會(huì)多而復(fù)雜，設(shè)計(jì)時(shí)可以考慮在布局上優(yōu)化去提升使用體驗(yàn)。

常用的方式有幾種：信息分組、錨點(diǎn)定位、標(biāo)簽頁(yè)、分步驟。

在格式塔鄰近性原則中提到，人們將彼此接近的事物、元素，傾向于認(rèn)為它們是相關(guān)的。在設(shè)計(jì)中很早就運(yùn)用到這種認(rèn)識(shí)傾向。所以我們?cè)谛畔⒎纸M時(shí)可以運(yùn)用設(shè)計(jì)手法將相關(guān)信息從視覺(jué)上區(qū)分開，提升信息閱讀有效率。

分組方式：

1.簡(jiǎn)單的內(nèi)容使用標(biāo)題分組或卡片分組就可以達(dá)到目的。

2.而內(nèi)容很多，組別之間沒(méi)有關(guān)聯(lián)性時(shí)用標(biāo)簽分組。

3.頁(yè)面內(nèi)容很長(zhǎng)需要連續(xù)下滑操作時(shí)，錨點(diǎn)定位就可以提供便捷的操作體驗(yàn)。

4.在任務(wù)有先后邏輯關(guān)系時(shí)，分步驟是最好的選擇。

標(biāo)簽分組與錨點(diǎn)定位在表現(xiàn)形式上類似，區(qū)別點(diǎn)在于操作后的結(jié)果。標(biāo)簽分組切換標(biāo)簽后頁(yè)面數(shù)據(jù)會(huì)刷新，一般沒(méi)有自動(dòng)保存功能，錨點(diǎn)定位則是每次點(diǎn)擊定位頁(yè)面不刷新數(shù)據(jù)，始終保持在同一數(shù)據(jù)頁(yè)面。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加：ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)