01表單概念

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

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

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

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

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

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

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

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

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

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

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

03表單構(gòu)成

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

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

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

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

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

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

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

表單標(biāo)簽

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

右對齊標(biāo)簽（冒號對齊）

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

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

場景：普通表單填寫，多用于web端

左對齊標(biāo)簽

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

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

場景：詳情陳列

頂部標(biāo)簽

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

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

場景：多用于移動端表單填寫，多語言適配頁面

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

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

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

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

表單域

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

定義操作框大小

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

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

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

提示信息

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

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

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

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

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

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

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

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

04交互方式

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

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

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

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

分組方式：

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

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

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

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

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

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)