<tfoot id="9hskl"></tfoot><span id="9hskl"><input id="9hskl"></input></span>

B端設(shè)計復盤系列——表單頁

2021-11-17 ui設(shè)計分享達人

01表單概念

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

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

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

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

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

02設(shè)計原則

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

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

明確：用戶可以快速定位重要信息和目標選項，表單文案和組件可以準確傳達任務(wù)含義

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

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

03表單構(gòu)成

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

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

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

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

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

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

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

表單標簽

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

右對齊標簽（冒號對齊）

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

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

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

左對齊標簽

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

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

場景：詳情陳列

頂部標簽

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

缺點：縱向空間利用不高

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

行內(nèi)標簽

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

缺點：當用戶輸入狀態(tài)時，標簽消失，增加用戶記憶負擔

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

表單域

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

定義操作框大小

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

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

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

提示信息

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

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

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

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

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

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

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

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

04交互方式

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