編輯導語：表單是我們比較常見的一個信息錄入工具，糟糕的表單設計會帶來令用戶抓狂的交互體驗。本文作者結合案例對表單的構成及注意事項進行了詳細的說明，相信對表單設計不熟悉的同學看完後肯定會有不少的收穫~
說到表單其實在生活中可以接觸到各種各樣的表單，主要目的就是讓用戶填寫來【收集用戶信息】
如：
初看這些表單，你可能覺得很簡單，就是一些標籤、基礎的小組件，但是在實際業務中，想要將這些小組件組合拼裝成合適的表單卻需要推敲非常多的細節，常常會讓設計師陷入無限的糾結中，比如：
文字標籤是左對齊還是右對齊？
確定按鈕是放左邊還是右邊？
控制項顆粒長度是整齊劃一還是與輸入預期一樣錯落有致？
反饋內容怎麼顯示
……
所以針對這些問題，我從【框架】>【細節】的邏輯與大家一起探討「如何設計一份體驗好的表單」。
01 表單拆分
在UX Collective中有個作者名為「Taras Bakusevych」 進行了詳細的闡述，對表單的組成部分進行了詳細的拆解與說明
（1）標籤：標籤文本主要是解釋輸入項的含義，一般不宜太長，需要簡明扼要，快速讓用戶理解；還有一部分是告知用戶哪些是必填項。
（2）佔位提示：直接展示在輸入項中，採用弱提示文本對所需信息描述、示意，當用戶輸入信息時即消失。
（3）校驗：對輸入項進行驗證，並給出反饋提示，如：用戶未填寫，格式錯誤、內容錯誤等
常見的校驗類型
（4）基礎組件：可交互輸入的區域，是構成表單的核心內容，主要有：輸入框、單（復）選框、上傳、時間選擇器、開關……
（5）提示：描述該輸入項需要的輸入類型，如：上傳的文件類型
（6）按鈕：用戶完成輸入後，點擊按鈕進行提交、進入下一步等，按鈕一般是跟隨的最後一個輸入項後面，若輸入項超出一屏顯示，則按鈕懸浮固定在底部；按鈕「確定」放左、右統一即可，沒必要過分糾結。
02 表單類型
看了很多文章，對表單類型的劃分主要是：基礎表單、分步表單、高級表單（分組表單）[1]
（1）基礎表單：常見於輸入項較少的表單場景，如：登錄、註冊。
如：登錄
（2）分步表單：常用於輸入項較多，業務本身具有流程化特性（如：轉帳）
為了提高用戶填寫效率，減少用戶心理負擔，將一個冗長或用戶不熟悉的表單任務拆分成多個步驟，一步步指導用戶完成。
分步表單可以緩解用戶需要填寫較多內容時候的牴觸情緒，並且通過拆分步驟，聚焦於每次填寫的內容，提升用戶在不同模塊間的瀏覽效率。
來源：Ant Design Pro
（3）高級表單（分組表單）：主要用於需要一次性輸入、提交 大批量數據的場景。高級表單與分步表單有點類似，都是為了減輕用戶填寫壓力，將填寫內容進行分塊。不同的點在於，分步表單的流程化明顯，後一步填寫的內容都是基於前一步來填寫、是前一步反饋。
如：站酷上傳作品
但是以上說的基礎表單、分步表單、高級表單都是基於業務需要而進行選擇，但是實際在設計時，往往還需要考慮的是：這些表單應該是以什麼承載結構展示？
是整頁展示、彈窗展示、側邊欄展示？表單內部布局方式，一定是平鋪的一欄麼，是否可以增加側邊目錄？
這些都是設計師需要進行全盤考慮的問題，所以在設計表單的時候需要先確定這些框架，由外>內，層層深入，再對細節進行處理。所以接下來我會針對如何由外>內設計表單進行詳細的陳述。
03 表單頁設計步驟
在詳細闡述如何設計表單頁前，先明確下我對於表單頁的劃分：
我將表單頁大體劃分成【頁面框架】和【表單內容區】
這樣劃分是出於我對 AJAX之父Jesse James Garrett在2007年出版了一本名為《用戶體驗要素》的書，提出了從5個要素自下而上的建設用戶體驗，即：戰略層、範圍層、結構層、框架層、表現層，這種逐層的思考邏輯對於設計表單是十分必要的，因為在設計表單的時候，常常需要考慮這個表單頁所需承載的業務訴求（戰略上）基礎上去做後面的優化體驗。
所以在設計表單的時候應：
明確該表單的業務類型，因為不同的業務訴求的表單在設計中的展現形式會有不同，即「頁面框架」會有不同（這也是我上面為何將表單頁分成頁面框架和表單內容區的原因）
在確定頁面框架後，就需要對表單需展示的內容進行明確的劃分，如：表單的內容是否要展示流程進度？表單內容是否有不同層級的導航？確定了這些後，我們表單內容的大致布局框架就可以確定下來，我們才能進入下一步（內容區具體的陳列方式）的設計；
表單內容區主要是對輸入項的陳列方式，對齊方式，進行體驗優化；
最後對所有輸入項進行統一整理，檢查是否與用戶預期一致？與其他輸入項的關係是否清晰等。
整體而言可以分為以下四步：
1. 確定【頁面框架】
這裡得頁面框架指的是承載著整個表單頁的頁面框架，即：整頁式（新頁面）、彈窗式、側邊欄式。因為其頁面面積大小不一樣，所以使用情境有所不同。[2]
整頁式：最常用方式，適用於絕大部分的表單，可以支持構建複雜的表單。
彈窗式：通過小面積的彈窗進行輕量化的編輯，方便快速進行增、刪、改、查；輸入項較少，一般不會有滾動條。
側邊欄式：與彈窗式相似，通過小面積的側邊欄進行編輯；可承載比彈窗更複雜一些的表單內容，可以有滾動條。
以上這些就是常見的表單頁面框架，我們在考慮採用何種樣式時需要綜合以下幾個因素考慮：
內容多少 —— 內容較多不適合使用彈窗式
與原頁面關係強度 —— 需與原頁面保留強關聯建議使用彈窗式、側邊欄式
表單內容區複雜程度 —— 一般高級表單、分組表單、分步驟表單、有表格聚合的表單、聯動表單等都建議採用整頁式的框架來展現。
2. 確定【表單內容區布局】
如上圖所示，一個正常的表單內容區主要有：標題區、二級導航區、主內容區
1）其中標題區是必須要有的，標題區可以讓用戶快速明白該表單是需要收集什麼內容
2）二級導航可以根據業務需要進行配置
3）主內容區則是表單填寫的主區域，通常我們直接將這個區域稱之為「表單內容區」，該區域布局樣式可以分為三種：
通欄式，即：在頁面中居中顯示，從上到下直接平鋪控制項顆粒。
左右式，即：在表單域內容區左邊放置導航欄、或在右側放置輔助信息欄（如：流程節點展示）。
左中右式，即：分別在表單域內容區左側放置導航欄，右側放置輔助信息欄。
以上三種樣式就是常見的表單內容區的布局，採用哪種布局，可以綜合以下幾個因素考慮：
內容多少——如果內容很多導致頁面很長，則可以考慮將內容分類，作為左側導航欄，採用左右式布局。
內容類型——導航作用內容必須放置左側（有些分步驟的表單也會將步驟條放置左側），而輔助信息的內容建議放在右側（因為人眼瀏覽習慣都是從 左 > 右，所以信息重要度建議按照該視線路徑放置）
3. 確定【表單內容排列方式】
在該步驟中，主要確定表單內容區控制項顆粒的排列方式：單列布局 or 多列布局
在輸入項不多的情況下，建議採用單列布局，因為單列布局，用戶填寫的路徑就是從上>下的一條直線，十分符合用戶的視覺動線，能夠提高用戶瀏覽與填寫的效率。
多列布局的表單會導致用戶的視覺路徑變長，用戶需以 Z 字形的視覺動線掃描表單，會提高瀏覽與填寫的效率，並且多列表單容易造成用戶填寫時的混亂，易填錯，體驗差。
但是有時部分業務訴求和某些特性的場景要求，會需要在有限的空間上放入更多的控制項顆粒來收集用戶的信息，這時就不得不使用多列布局的樣式，因為多列能夠省縱向空間。
so 根據單列布局、多列布局的優劣勢，結合實際業務需要來選擇：
【單列布局】
優：視覺路徑清晰，填寫效率高，體驗好；
劣：佔用縱向空間。
【多列布局】
優：省空間，能夠放置更多的控制項顆粒；
劣：視覺路徑模糊，填寫成本高，填寫易出錯。
在這個環節中，除了需要考慮單列式布局還是多列式布局，還有一個也是需要全盤考慮的——【標籤的對齊方式】
在設計時，到底是採用左對齊、右對齊還是頂部對齊呢？
Matteo Penzo《Label Placement in Forms》文章中，有對標籤不同的方式方式優劣勢進行了說明。[3][4]