一、表單設(shè)計是什么意思

在UI設(shè)計中會經(jīng)常碰到表單設(shè)計，表單設(shè)計是指通過對表單的文字、布局、排版與操作進(jìn)行設(shè)計，從而提高用戶的整體效率與完成度，并且在用戶端也有好的體驗。在表單設(shè)計中，不同的應(yīng)用場景所對應(yīng)的表單也有所不同。

二、表單的釋義

表單的核心功能是采集數(shù)據(jù)信息，可以看成是采集、傳遞、提交數(shù)據(jù)的中間媒介。其作為獲取用戶輸入的重要交互方式，也承擔(dān)著將問題和答案進(jìn)行配對的角色。

表單通常由標(biāo)簽、輸入域、填寫提示、操作按鈕等幾部分組成。

1、標(biāo)簽

告訴用戶該表單需要填寫什么類型的信息，通常放置在表單文本框之外居左或上方的位置。極少數(shù)情況下也會放置于文本輸入框內(nèi)，激活輸入框，則消失。

標(biāo)簽一般為每個輸入項的名稱（eg：賬號、身份證號、服務(wù)器名稱）。按所要填寫信息的必要性又可分為必填項和非必填項。顧名思義，必填項是指用戶必須要輸入有效的文本信息，否則，該表單就不能正常提交、保存等操作；非必填項是指該項信息用戶可填可不填，根據(jù)用戶的意愿和需求度來自愿選擇填亦或不填。

2、輸入域

用來收集用戶操作的信息，每個輸入域字段包含一類型信息。

輸入域不僅僅是文本輸入框，從交互組件的角度來看，其包括文本輸入框、單選框、復(fù)選框、開關(guān)、選擇器、步驟條、上傳、Tab切換（主要指按鈕型）、滑塊、步驟條等多種。

3、填寫提示

幫助用戶有效正確填寫信息的引導(dǎo)內(nèi)容或反饋內(nèi)容。提示一般可分為引導(dǎo)提示和反饋提示兩類。引導(dǎo)提示發(fā)生在用戶輸入前，引導(dǎo)用戶正確輸入信息或?qū)斎胄畔⒌囊筮M(jìn)行說明。反饋提示發(fā)生在輸入中或輸入后，界面根據(jù)用戶的輸入而顯示的提示信息。

4、操作按鈕

操作按鈕是指填寫完表單各項內(nèi)容后，所要進(jìn)行的操作動作來結(jié)束當(dāng)前操作流程或在流程之中或之后開啟新的功能操作。操作按鈕包括提交按鈕、保存按鈕、復(fù)位按鈕和一般按鈕；用于將表單數(shù)據(jù)傳送到服務(wù)器上。

表單的組成

根據(jù)輸入流程，可將用戶的輸入過程分為輸入前、輸入中、輸入后。

三、表單設(shè)計原則與目標(biāo)

1、表單設(shè)計目標(biāo)

幫助用戶高效、準(zhǔn)確、一致、安全的完成數(shù)據(jù)錄入與數(shù)據(jù)編輯。

2、表單設(shè)計原則

(1)、高效性

通過合理的信息輸入組件與頁面布局和交互方式可以使用戶快速完成表單頁的信息填寫任務(wù)。

(2)、準(zhǔn)確性

表單的準(zhǔn)確性表現(xiàn)有很多，主要指不要讓你傳達(dá)的信息產(chǎn)生歧義，讓所有的用戶看到這個信息后的用戶行為保持一致，規(guī)避用戶犯錯。

(3)、一致性

針對同一產(chǎn)品下的頁面風(fēng)格/字號/組件使用都要保持一致，避免給用戶造成混淆增加理解成本。

(4)、安全感

要有一定的危險操作保護(hù)措施，例如，返回不保存表單的危險提示或即時保存表單的安全操作防止數(shù)據(jù)丟失；同時針對不同的使用場景增加返回上一步、重置填寫、撤銷填寫等幫助用戶修改錯誤的后悔藥功能。

四、表單頁面呈現(xiàn)樣式

表單頁面的展示形式有三種頁面跳轉(zhuǎn)、彈窗輸入、就地編輯。影響頁面形式的因素包括表單輸入容量及操作流程主次關(guān)系（即親密度）。

(1)、頁面跳轉(zhuǎn)

一個功能的主要操作流程在一個頁面中展示，保證主要功能的操作的流暢度。同時，若輸入內(nèi)容較多，建議采用頁面跳轉(zhuǎn)。頁面跳轉(zhuǎn)的信息承載能力強(qiáng)，對反饋的及時性要求不高；體量感比較重，給人感覺穩(wěn)定性更高一些，特別重要的功能表單填寫確認(rèn)建議用頁面跳轉(zhuǎn)。

頁面跳轉(zhuǎn)包含兩種：新頁面打開和當(dāng)前頁面跳轉(zhuǎn)。

新頁面打開為主要流程步驟中的分支流程，不會影響用戶對主流程的繼續(xù)操作，頁面功能具有一定的獨立性。

當(dāng)前頁面跳轉(zhuǎn)則為流程步驟中的關(guān)鍵步驟，提示用戶已進(jìn)入下一步驟。頁面間的跳轉(zhuǎn)體現(xiàn)了產(chǎn)品的基本使用流程，關(guān)鍵流程關(guān)鍵路徑建議在當(dāng)前頁面打開，讓產(chǎn)品流程更加清晰，更少的打開頁減少多余信息對用戶注意力的分散，讓用戶聚焦在當(dāng)前頁面的信息中。

(2)、輸入彈窗

彈窗樣式的輸入表單詩當(dāng)前頁面的分支操作，體現(xiàn)了頁面間的層級關(guān)系。輸入彈窗樣式的表單，輸入內(nèi)容的多少處于頁面跳轉(zhuǎn)和就地編輯兩種樣式之間。內(nèi)容稍多，交互頁面流程不適合就地編輯，同樣也尚未達(dá)到新頁面的程度，建議選擇輸入彈窗。

用戶在不離開當(dāng)前頁的情況下繼續(xù)插入性操作，為流程步驟中的分支行為，可由用戶選擇是否進(jìn)行，不覆蓋用戶已閱讀內(nèi)容。輸入彈窗輕量化，信息承載較頁面跳轉(zhuǎn)弱、較就地編輯強(qiáng)，輸入內(nèi)容數(shù)量有較大的彈性空間。

該類型的表單會打斷當(dāng)前的主操作流程需要及時響應(yīng)，帶給人的感受更局促一些，因此輸入內(nèi)容不宜過多，且不能過多地帶離用戶的注意力，否則會給用戶的主操作流程造成較強(qiáng)的割裂，降低輸入的流暢度。

(3)、就地編輯

就地編輯是輕量型信息采集表單，適用于輸入內(nèi)容較少，適用頻率較低，同時屬于主功能分支的場景。其優(yōu)點在于操作便捷，隨時啟用與退出，能夠保證用戶對主要功能的操作流暢度。

就地編輯一般為嵌入在列表內(nèi)、卡片中，信息展示區(qū)域通過雙擊或點擊特定的操作按鈕即變?yōu)榧せ罹庉嫚顟B(tài)。其存在的意義在于完善或者增強(qiáng)主功能的操作，而不是打斷。

五、表單設(shè)計方法

1、標(biāo)簽樣式

根據(jù)標(biāo)簽與輸入域的位置關(guān)系，其對齊方式可分為：右對齊、左對齊、頂對齊三種。每一種對齊方式都有一定的優(yōu)點與局現(xiàn)性，因此在合適的場景下選擇合適的標(biāo)簽樣式，可以提升用戶的輸入效率。

標(biāo)簽樣式

標(biāo)簽樣式對比說明

(1)、右對齊

當(dāng)既要減少垂直空間，又要加快填寫速度的場景，使用右對齊。采用右對齊方式標(biāo)簽的表單瀏覽時間，比頂部對齊標(biāo)簽的表單的時間長，但比左對齊方式所需的瀏覽時間短。頁面高度有限的話有限公司推薦這種對齊方式。

優(yōu)點：節(jié)約垂直空間。

缺點：降低可讀性，標(biāo)簽長度和輸入框彈性小。

舉個栗子：騰訊藍(lán)鯨的故障自愈平臺的告警收斂的新建收斂規(guī)則表單頁面，采用了左對齊的布局，方便用戶快速操作，完成新建收斂規(guī)則表單的填寫。

右對齊案例

（2）、頂對齊

希望用戶快速填寫表單，完成任務(wù)的場景使用頂部對齊。頂對齊方式對眼球移動的需求比其他對齊方式要更少。移動端表單頁面多使用此種形式，手機(jī)為下拉式交互，垂直高度不受限制。

優(yōu)點：有最快的瀏覽和處理速度；標(biāo)簽長度彈性大。

缺點：非常占垂直空間。

（3）、左對齊

希望用戶放慢速度，仔細(xì)思考表單中的每個輸入框的場景使用左對齊類型。采用左對齊標(biāo)簽方式的表單是三者之中所需瀏覽時間最長的，但這種對齊方式能夠在你想要用戶放慢速度閱讀，仔細(xì)考慮的時候使用（如一些重要的輸入）。

優(yōu)點：文字開頭按閱讀視線對齊，方便閱讀，節(jié)約垂直空間。

缺點：填寫速度慢，標(biāo)簽長度和輸入框彈性小。

舉個栗子：騰訊云，購買云產(chǎn)品的表單界面，讓用戶細(xì)看、謹(jǐn)慎選擇，采用了左對齊的方式。

左對齊案例

2、輸入域樣式

輸入域是表單的主題與核心。

(1)、組件樣式

表單常見的組價樣式包括文本框、文本域、選擇器、開關(guān)、Checkbox、Radio、步驟條、滑塊、上傳、標(biāo)簽頁等。對于組建的選用，在下文中將會做詳細(xì)探討。

輸入組件間距不宜窄，較大的文字輸入框、適度的留白空間會讓人更有填寫的欲望。在表單間距處理上，各區(qū)塊之前的間距，如單列中一組字段輸入框與另一組的間距，雙列中左一列及右一列的間距需要尤其注意。

(2)、單例與多列布局

在web頁面中，由于頁面的關(guān)系，導(dǎo)致跳轉(zhuǎn)頁面與彈窗的橫向空間較大，縱向空間不足，若出現(xiàn)較多的輸入內(nèi)容時，且不能采用分模塊、分步驟、高級等交互布局時，有的設(shè)計師會采用雙列或多列表單，以提高橫向空間的利用，這也是可以接受的。此時，要注意列與列間距的合理性以及遵守用戶的視覺流，可以參照菲茲定律。

但是作為表單，單列表單的瀏覽及填寫效率是最高的。用戶的視覺流較為順暢，可以提升填寫效率，同時能夠減少用戶的疲勞度。因此，建議表單多采用單列布局。

(3)、分模塊

對于內(nèi)容過多的表單輸入組件，分類、分模塊的排版方式讓用戶感覺更好，不是密密麻麻一大片，有條理。用戶可以在填寫好一段內(nèi)容后進(jìn)行心理上停頓休息，減少視覺疲勞和心理壓力。

舉個栗子：網(wǎng)易七魚客服平臺的基礎(chǔ)設(shè)置表單頁面，分為歡迎語設(shè)置、未選擇分類提示、在線會話關(guān)閉二次確認(rèn)、重復(fù)咨詢識別、會話計時設(shè)置、服務(wù)時間設(shè)置、轉(zhuǎn)接確認(rèn)設(shè)置、會話接入提示等多個小模塊。層次清晰、分明。

分模塊案例

(4)、分步驟

對于內(nèi)容過多的表單輸入組件，又有著明確的操作先后關(guān)系，可以選用分步驟，每屏僅展示該步驟下的表單輸入組件，同時校驗反饋也可分步進(jìn)行。

舉個栗子：一般注冊表單被分為賬號設(shè)置、完善資料、注冊完成3個步，讓用戶分步填寫。每屏僅展示當(dāng)前步驟下的輸入組件，讓用戶分步進(jìn)行，明確用戶行為，減少用戶的心理負(fù)擔(dān)。反饋校驗及時，也避免了填寫完才發(fā)現(xiàn)其中某項輸入不正確。

(5)、高級（非重要必填項默認(rèn)收起，點擊展開）

對于表單內(nèi)容很多，且存在一些沒那么重要的非必填項，可以選擇默認(rèn)隱藏，用戶有欲望填寫時點擊展開可進(jìn)行輸入填寫?；蛘咚阉鳁l件太多，默認(rèn)收起，展示更多的信息內(nèi)容；需要搜索時，點擊展開。

舉個栗子：阿里云的云服務(wù)器 ECS購買表單頁面里的詳細(xì)價格總覽模塊，搜索表單內(nèi)容項很多，默認(rèn)收起；用戶點擊展開過濾器按鈕，則搜索表單展開。節(jié)約頁面空間，讓用戶在默認(rèn)情況下看到更多列表等其他重要信息。

高級示例（默認(rèn)收起）

高級示例（展開）

4、提示樣式

從提示信息所處的位置和提示出現(xiàn)的時機(jī)，提示可分為輸入框內(nèi)提示、輸入框外提示、激活輸入框提示、圖標(biāo)懸停提示及單獨區(qū)域提示等。根據(jù)前文的分類，提示樣式分為引導(dǎo)提示與反饋提示兩種。

(1)、引導(dǎo)提示

引導(dǎo)提示是對用戶輸入信息規(guī)則的注釋與說明，在用戶輸入前，輸入框內(nèi)提示、輸入框外提示、激活輸入框提示可歸為引導(dǎo)提示。

可細(xì)分為：全局性提示和定位提示。

● 全局提示：使用場景如下：在告知用戶填寫表單會帶來怎樣的益處，有利于用戶完善相關(guān)表單內(nèi)容（益處提示）。在登錄頁等字段內(nèi)容較少時或者提示的內(nèi)容項也不多，一般位于整個表單的上方（注釋說明）。告知用戶信息采集的用途以及使用保證（安全提示），解除用戶輸入顧慮。

● 定位提示：適用于表單內(nèi)容比較多，字段內(nèi)容較少時，應(yīng)在相應(yīng)錯誤位置進(jìn)行提示，幫助用戶快速定位到錯誤內(nèi)容。

(2)、反饋提示

反饋提示是頁面系統(tǒng)對用戶的輸入給與校驗，并對校驗結(jié)果予以展示的提示形式。反饋提示是根據(jù)用戶輸入而顯示的提示，出現(xiàn)在輸入中與輸入后，可細(xì)分為：即時校驗反饋、局部校驗反饋和全局校驗反饋。

較為常見的即時校驗反饋是根據(jù)輸入字符數(shù)量而顯示密碼強(qiáng)度，從而時刻提示用戶當(dāng)前密碼強(qiáng)度是否符合要求。該方式的校驗條件多在本地，不需要實時向服務(wù)器發(fā)命令，以得到反饋。

● 局部校驗反饋：在注冊賬號時，輸入完整用戶名以后，提示用戶名是否可用，則為局部校驗反饋。校驗內(nèi)容存儲在遠(yuǎn)端，程序需要完整的輸入信息到遠(yuǎn)端進(jìn)行檢驗，并給出反饋。

局部校驗主要適用于輸入項較多，且某個輸入項具有先決條件，同時決定了接下來的輸入。該方式可以避免不完整輸入的即時反饋給用戶造成的干擾，同時可以減少對服務(wù)器的壓力。一般注冊、登錄、web端頁面頁面會采用局部校驗反饋。

● 全局校驗反饋：多指在輸入完成或者階段性完成時，界面給出的輸入反饋，用戶需要操作觸發(fā)。在用戶操作反饋動作按鈕后，界面在相應(yīng)位置（一般為單個輸入框的下方或右側(cè)）一次性給出不合乎要求的反饋提示。

5、操作按鈕形式

操作按鈕：填寫完表單各項內(nèi)容后，所要進(jìn)行的操作動作（eg：保存、取消、提交、確定等）。

表單輸入域完成后，必定要進(jìn)行最終的操作反饋，以便讓用戶明確自己所輸入的數(shù)據(jù)信息是否有效留存還是舍棄。操作按鈕無外乎保存、取消、提交、重置、上（下）一步、保存并提交等。

六、表單設(shè)計技巧

1、 明確告知要輸入的信息內(nèi)容

確保用戶了解要提供什么信息，以及為什么要提供這些信息。

為初級用戶／偶爾訪問的用戶提供白話作為『標(biāo)簽』，為領(lǐng)域?qū)＜姨峁I(yè)術(shù)語作為『標(biāo)簽』。當(dāng)需要用戶提供敏感信息時，通過『輸入提示』來說明系統(tǒng)為什么要這么做。

2、讓用戶能在上下文中獲取信息，幫助他完成輸入

使用『良好的默認(rèn)值』、『結(jié)構(gòu)化的格式』、『輸入提示』、『輸入提醒』等方式，避免讓用戶在空白中完成輸入。

3、標(biāo)簽簡潔、精確

標(biāo)簽字段簡潔，既利于標(biāo)簽排版的對齊，也減輕用戶的閱讀與理解難度。用詞精確可以避免讓用戶有其他的解讀，導(dǎo)致輸入有誤信息。另外，在輸入項較為明確的情況下，標(biāo)簽可省略，如登錄的用戶名和密碼。

4、必填項

必填項一般要有明確標(biāo)識，除非全部是必填項，且必填項數(shù)量在7個以內(nèi)。選填項比較少時，互聯(lián)網(wǎng)產(chǎn)品一般必填項不做標(biāo)識，非必填項后面則標(biāo)注選填字樣。

5、具有容錯性

對錯誤敏感，并盡可能寬容，具有容錯性。

通過不同的『校驗』規(guī)則和形式進(jìn)行反饋，避免用戶在點擊提交后才剛剛開始『校驗』，讓用戶提前糾正錯誤。依據(jù)『容錯格式』，允許用戶以多種格式和語法輸入，例如：用戶在電話號碼輸入框中多輸入了一個空格，系統(tǒng)存儲時可以主動刪掉空格，但是不需要告訴用戶這是一個錯誤。

6、精簡不必要的輸入項

在能完整獲取需要信息的前提下，輸入項越少越好，能夠?qū)τ脩舻妮斎胄畔⑦M(jìn)行充分的利用。例如：讓用戶輸入了身份證號后，就不要讓用戶再一次輸入生日，此時可以從用戶的身份證號中讀取用戶的生日，從而減少用戶的輸入。

7、合理分類

輸入信息的分類，是有效的減少用戶操作疲勞度的方法。分類的維度有多種，根據(jù)表單輸入內(nèi)容的相關(guān)性、內(nèi)容的所屬類別，可以將同類型的數(shù)據(jù)統(tǒng)一輸入，減少用戶輸入信息的跨度，提高輸入效率。

根據(jù)輸入信息的優(yōu)先級或重要性，進(jìn)行分類，將優(yōu)先級高的放在前面，優(yōu)先級低的放到最后或者折疊起來，將較少用到或建議默認(rèn)值的輸入項放到里面，普通用戶可以忽略這部分的輸入。

8、合理分步驟

對輸入表單進(jìn)行分步驟的處理，可以降低用戶的操作頻率，給與用戶一定的休息空間，用戶會有階段性的成就感，同時分步驟的輸入還有利于減少信息的錯誤率。

如果輸入表單的內(nèi)容較多，同時輸入內(nèi)容有邏輯上的先后順序，此時可以考慮將輸入表單進(jìn)行分步驟處理。

9、主按鈕的禁用原則

當(dāng)輸入框非常少時（一般少于 3 個），如果用戶沒有在必填項中輸入內(nèi)容，可禁用『提交』等主按鈕。當(dāng)輸入框非常多時（超過 5 項以上），不建議禁用主按鈕。

當(dāng)輸入框非常少時，用戶一輸入就會有反饋，因而主按鈕的禁用規(guī)則非常清晰，容易被用戶理解。

當(dāng)輸入框非常多時（尤其是輸入項中交叉了必填項和非必填項），整個反饋鏈路冗長又復(fù)雜，禁用規(guī)則難以被識別，容易引起困惑。

10、局部校驗和全局校驗

局部校驗需明確平臺相關(guān)內(nèi)容不只一處是這種操作方式，要不就會造成用戶使用上的困擾。全局保存要明確相關(guān)按鈕的清晰程度，如果這個還需要用戶去尋找，那就是明顯的體驗上的問題了。

七、表單設(shè)計注意事項

1、視覺動線避免Z字形

在表單中閱讀順序最好是從上到下的，如果是左右的，用戶閱讀體驗就是，左右左右左右，用戶動線就會變得比較復(fù)雜，容易產(chǎn)生閱讀疲勞。

2、標(biāo)題使用右對齊

標(biāo)題進(jìn)行右對齊可以讓用戶更輕松地瀏覽頁面并為你的表單創(chuàng)建對稱的視覺層次結(jié)構(gòu)。

3、提示文字顏色不要太重

提示文字不要太重，如果太重用戶潛意識會以為是已經(jīng)輸入好的文字。

4、使用單一CTA

如果你需要更多的CTA按鈕，建議把它作為輔助按鈕。比你的主CTA不突出。

5、選擇正確的輸入類型

不要什么都用文本字段！將字段的類型與其內(nèi)容相適應(yīng)。有許多內(nèi)容類型有特定的要求，需要特殊處理。

6、輸入字符提示

大多數(shù)領(lǐng)域都有某種限制。字符限制、號碼/日期范圍、電話號碼等。讓用戶事先了解限制，以防止他們感到困惑和懊惱。

總結(jié)

優(yōu)化猩SEO：表單設(shè)計是UI設(shè)計中經(jīng)常會碰到的，一個優(yōu)秀的表單設(shè)計可以提高用戶的整體效率與完成度，并且在用戶端也有好的體驗，從而幫助用戶將信息發(fā)送到網(wǎng)站或應(yīng)用，以實現(xiàn)最終目標(biāo)。

參考鏈接：

5個方面闡述：Web表單設(shè)計 人人都是產(chǎn)品經(jīng)理

http://www.woshipm.com/pd/1058591.html

如何設(shè)計一份體驗好的表單？來看這篇超全總結(jié)！ - 優(yōu)設(shè)網(wǎng)

https://www.uisdc.com/form-design-5

表單設(shè)計 - 優(yōu)設(shè)網(wǎng)

https://www.uisdc.com/tag/%E8%A1%A8%E5%8D%95%E8%AE%BE%E8%AE%A1

修改于2023-08-31