本文是作者在表單設計過程中，根據自身的工作經驗，同時尋找搜集了一些案例資料，完成了表單設計的歸納與總結，以供有需要的小伙伴做參考。

最近，筆者在做一個Web端業務較為復雜的產品系統交互、視覺設計工作，涉及到很多表單類型頁面。

表單的內容容量不定且組件形式多樣，工作時，在用戶輸入流程、頁面排版、以及形式統一等多方面有較多的掣肘。在優化功能交互流程，理清交互布局層次的基礎上，力求提升用戶輸入信息的體驗，提升輸入效率，同時，希冀給用戶帶來小驚喜。

在表單設計過程中，根據自身的工作經驗，同時尋找搜集了一些案例資料，完成了表單設計的歸納與總結，以供有需要的小伙伴做參考。

本文結構框架

一、表單定義

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

二、表單構成

表單通常由標簽、輸入域、填寫提示、操作按鈕等幾部分組成。根據輸入流程，可將用戶的輸入過程分為輸入前、輸入中、輸入后。

表單構成示例

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

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

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

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

填寫提示：幫助用戶有效正確填寫信息的引導內容或反饋內容。

提示一般可分為引導提示和反饋提示兩類。引導提示發生在用戶輸入前，引導用戶正確輸入信息或對輸入信息的要求進行說明。反饋提示發生在輸入中或輸入后，界面根據用戶的輸入而顯示的提示信息。

操作按鈕是指填寫完表單各項內容后，所要進行的操作動作（eg：保存、取消、提交、確定等）來結束當前操作流程或在流程之中或之后開啟新的功能操作。

三、表單表現形式

1. 頁面樣式

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

（1）頁面跳轉

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

頁面跳轉包含兩種：新頁面打開和當前頁面跳轉。

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

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

（2）輸入彈窗

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

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

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

（3）就地編輯

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

就地編輯一般為嵌入在列表內、卡片中，信息展示區域通過雙擊或點擊特定的操作按鈕即變為激活編輯狀態。其存在的意義在于完善或者增強主功能的操作，而不是打斷。

2. 標簽樣式

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

（1）右對齊

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

• 優點：節約垂直空間。
• 缺點：降低可讀性，標簽長度和輸入框彈性小。
• 舉個栗子：騰訊藍鯨的故障自愈平臺的告警收斂的新建收斂規則表單頁面，采用了左對齊的布局，方便用戶快速操作，完成新建收斂規則表單的填寫。

右對齊案例

（2）頂對齊

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

• 優點：有最快的瀏覽和處理速度；標簽長度彈性大。
• 缺點：非常占垂直空間。

（3）左對齊

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

• 優點：文字開頭按閱讀視線對齊，方便閱讀，節約垂直空間。
• 缺點：填寫速度慢，標簽長度和輸入框彈性小。
• 舉個栗子：騰訊云，購買云產品的表單界面，讓用戶細看、謹慎選擇，采用了左對齊的方式。

左對齊案例

3. 輸入域樣式

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

（1）組件樣式

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

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

（2）單例與多列布局

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

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

（3）分模塊

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

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

分模塊案例

（4）分步驟

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

舉個栗子：優云平臺的注冊表單被分為賬號設置、完善資料、注冊完成3個步，讓用戶分步填寫。每屏僅展示當前步驟下的輸入組件，讓用戶分步進行，明確用戶行為，減少用戶的心理負擔。反饋校驗及時，也避免了填寫完才發現其中某項輸入不正確。

分步驟案例

（5）高級（非重要必填項默認收起，點擊展開）

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

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

高級示例（默認收起）

高級示例（展開）

4. 提示樣式

從提示信息所處的位置和提示出現的時機，提示可分為輸入框內提示、輸入框外提示、激活輸入框提示、圖標懸停提示及單獨區域提示等。根據前文的分類，提示樣式分為引導提示與反饋提示兩種。

（1）引導提示

引導提示是對用戶輸入信息規則的注釋與說明，在用戶輸入前，輸入框內提示、輸入框外提示、激活輸入框提示可歸為引導提示。

可細分為：全局性提示和定位提示。

• 全局提示：使用場景如下：在告知用戶填寫表單會帶來怎樣的益處，有利于用戶完善相關表單內容（益處提示）。在登錄頁等字段內容較少時或者提示的內容項也不多，一般位于整個表單的上方（注釋說明）。告知用戶信息采集的用途以及使用保證（安全提示），解除用戶輸入顧慮。
• 定位提示：適用于表單內容比較多，字段內容較少時，應在相應錯誤位置進行提示，幫助用戶快速定位到錯誤內容。

（2）反饋提示

反饋提示是頁面系統對用戶的輸入給與校驗，并對校驗結果予以展示的提示形式。反饋提示是根據用戶輸入而顯示的提示，出現在輸入中與輸入后，可細分為：即時校驗反饋、局部校驗反饋和全局校驗反饋。

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

舉個栗子：Behance網站的注冊表單頁面，密碼設置要求用戶輸入的密碼必須要滿足其下方的條件，根據用戶輸入的密碼實時作出相應反饋。

即時校驗案例

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

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

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

5. 操作按鈕形式

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

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

四、控件選用

對于用戶來說，最好的體驗是沒有表單輸入，體驗再好的表單都是都不符合用戶的心理預期。因此設計表單時，要盡可能的減少用戶的思考、操作、理解負擔，減少用戶對表單的厭煩情緒，同時提高表單的輸入效率，這是表單輸入最核心的原則。因此，控件類型與樣式的選用尤為重要。

1. 選擇框優于輸入框

任何高密度的操作，都會引起用戶的不適。因此，在輸入項的選擇時，用選擇來代替鍵盤輸入。

• 一方面，簡化用戶的操作，點擊次數遠小于輸入，減少用戶的操作密度；
• 另一方面，減輕用戶的認知、記憶負擔。相較于輸入框，選擇操作步驟少，相對來說效率較高，同時，用戶用思考輸入值，也不用承擔輸入錯誤要重新輸入的風險。用戶可以通過選擇項，清晰明確的知道有哪些值可以選擇，對于一些無關緊要，或者用戶較難理解的輸入項，可以預制默認值，可以照顧到各階段的用戶。

2. 單選框與下拉選擇框

作為同一類型的輸入項，單選框與下拉選擇框的優點類似，使用的場景有較大的差異。

單選框較為適合選項較少（少于五個），同時選擇項之間較為類似，需要強調或對比時，可以優先考慮單選框。另外，當選項能見度和快速響應優先時，也建議優先考慮單選框。因為相較于下拉選擇，用戶可以通過展示出來的選項，直接選中目標選項，提升輸入效率。

下拉選擇框較為適合選項較多（超過五個），有默認選項，或者選擇項之間有較大差異，同時下拉選擇最好不要引起隨后輸入項數量以及頁面的變化，否則下拉選擇的收起以及頁面的變化，易引起用戶不適。

若選項過多，超過二十個，最好引入模糊匹配以及一定排序規則（首字母排序、數字排序等），方面用戶提前預知選項的大致位置，或通過模糊檢索找到相應的選項。

3. 合并相鄰字段／結構化格式

當兩個輸入框關聯性很強時，可以前后拼接，減少頁面空間，即合并相鄰字段。如：服務器的IP和端口、聯系方式的區號和號碼、時間范圍的選擇等。

雖然用戶輸入或選擇的字段操作并沒有減少，但在其視覺會簡潔，用戶心理層面上的壓力會降低。用戶對輸入的內容很熟悉，且系統不希望接受任何偏離期望的格式，可使用結構化輸入框格式。

舉個栗子：注冊淘寶網賬號時，由于淘寶網用戶群體遍布全球，顧將手機號前的與手機號碼做了結構化處理，前者只需用戶選擇即可。同時，驗證過程加入了一個簡單有效的動畫，給用戶某種程度上的驚喜。

結構化案例

4. 層級聯動

所在地區和郵政編碼進行聯動，用戶選擇所在區域后，郵政編碼會進行自動識別填寫，當然支持用戶再次進行編輯。類似還有很多，省市區的級聯選擇、組織層級、事物所屬列別等。

層級聯動示例

5. 智能聯想

智能聯想是給予用戶鍵入字段的聯想功能，方便用戶進行選擇，將原有輸入變成了選擇。如：郵件可以給予常見域名的聯想，@后會出現163.com、126.com、qq.com等域名讓用戶選擇。

舉個栗子：注冊百度賬號時，由于百度使用基數大，注冊用戶數多，很多常見的字段都已被注冊占用。當用戶輸入某個已被注冊的用戶名時，除了后方出現的反饋提示，下方還出現了根據用戶輸入的用戶名相類似的推薦用戶名。

即由用戶輸入的字段智能聯想到相關類似可用的用戶名，供用戶選擇。雖然，最終用戶未必會選擇下方智能聯想推薦的用戶名，但在一定程度上優化了用戶體驗，讓用戶感受到設計者的用心，有小驚喜。

智能聯想案例

五、應用原則與技巧

1. 明確告知要輸入的信息內容

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

為初級用戶／偶爾訪問的用戶提供白話作為『標簽』，為領域專家提供專業術語作為『標簽』。當需要用戶提供敏感信息時，通過『輸入提示』來說明系統為什么要這么做，例如：需要獲取身份證號碼、手機號碼時。

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

使用『良好的默認值』、『結構化的格式』、『輸入提示』、『輸入提醒』等方式，避免讓用戶在空白中完成輸入。

3. 標簽簡潔、精確

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

4. 必填項

必填項一般要有明確標識，除非全部是必填項，且必填項數量在7個以內。選填項比較少時，互聯網產品一般必填項不做標識，非必填項后面則標注選填字樣。

5. 具有容錯性

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

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

6. 精簡不必要的輸入項

在能完整獲取需要信息的前提下，輸入項越少越好，能夠對用戶的輸入信息進行充分的利用。例如：讓用戶輸入了身份證號后，就不要讓用戶再一次輸入生日，此時可以從用戶的身份證號中讀取用戶的生日，從而減少用戶的輸入。

7. 合理分類

輸入信息的分類，是有效的減少用戶操作疲勞度的方法。分類的維度有多種，根據表單輸入內容的相關性、內容的所屬類別，可以將同類型的數據統一輸入，減少用戶輸入信息的跨度，提高輸入效率。

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

8. 合理分步驟

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

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

9. 主按鈕的禁用原則

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

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

舉個栗子：網易七魚密碼設置模塊保存主按鈕采用了禁用，當用戶正確填寫完愿密碼、新密碼，保存按鈕即時變為可用狀態。

禁用案例

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

舉個栗子：網易七魚新增客服表單頁，一屏展示不完，保存按鈕即使禁用，用戶也很難看到注意到。

不禁用案例

10. 局部校驗和全局校驗

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

舉個栗子：大家熟悉的淘寶網注冊表單頁面，輸入完手機號之后，后面出現相應的提示（成功或失敗的原因）。按住滑塊拖動完成后，后面出現相應的提示（成功或失敗的原因）。

局部校驗案例

11. 簡單有效的動畫

填寫表單的過程中加入一個簡單有效的動畫，給用戶某種程度上的驚喜?？蓯?、簡潔而有趣的動畫有助于減輕并降低用戶在輸入表單時的反感和焦慮，展現了服務提供方在產品設計上具有創新性，以及對用戶體驗極致的追求。

舉個栗子：Readme的登錄頁面，輸入 「Email 」時是明文，貓頭鷹攤開雙手，睜大眼睛去看，展現其比較好奇的心理。輸入「Password」時是密文，貓頭鷹用雙手捂住眼睛，展現密碼輸入的安全性、隱私性。

• 一方面，提示用戶輸入密碼時要注意防止他人偷窺以竊取你的賬號密碼；
• 另一方面，向用戶暗示，服務提供方非常注重用戶隱私與保護。（體驗網址http://www.daimabiji.com/codedemo/1443）

動效示例

寫在最后

看似常見、容易的輸入表單設計，設計原則與技巧絕不僅限于本文所聊到的這些。要想提高表單使用者的體驗，尚需大家多學習，多總結，多實踐應用。文中的不足之處，請讀者多擔待，期待大家的反饋與交流。

#專欄作家#

弘毅道，公眾號：UIUX設計工作坊，人人都是產品經理專欄作家。關注to B業務，尤其擅長后臺程序界面設計，包括需求溝通，原型設計以及后期的設計評審等。

本文原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Pexels，基于 CC0 協議