表單是什麼？是用戶和app之間的對話。作為人機交互的一種重要入口，一個好的數據輸入方式是很有必要去考慮的。但現實中，我們大多設計師和產品經理前期設計的時候就沒有太多的考慮，到最後開發的時候就會發現問題，然後就草草了事了。那麼我們今天就來好好探究下表單設計時要注意的事項。
一、標籤的設置
標籤的設置，我們有時候會很糾結。移動端的興起在pc之後，所以很多pc的使用方法就應用在移動端設計上。首先，我們要知道標籤的作用是什麼，它是對輸入數據的歸類，對用戶輸入的一種提示。標籤分為圖標標籤和文字標籤，圖標標籤多用在登錄等容易理解的場景，用戶對這些圖標的感知度非常高了，但是也要結合後面的提示文字使用，沒有提示文字，用戶也會一臉懵逼。
但是，在表單內容過多的時候，文字標籤更常用。要知道，文字的識別度是遠高於圖標的識別的。常見的標籤有頂對齊、右對齊、左對齊。
馬泰奧·彭佐在2006年7月的眼動研究發現，標籤如果採用頂對齊方式，用戶的視線從標籤移動到輸入框只需要50毫秒，右對齊方式需要240毫秒，左對齊方式需要500毫秒。
如果從高效上講，應該是優先考慮標籤頂部對齊。但是，我們使用的時候要注意場景，不管是移動端還是pc端，如果全部採用頂對齊的方式，就會佔用更多的垂直空間，一旦表單項過多，對錶單頁的操作也會造成不便。移動端的尺寸很小，尤其需要注意。
所以，單從馬泰奧·彭佐來看，如果表單項不多，優先考慮標籤頂部對齊；要兼顧高效和頁面的垂直空間，則選擇右對齊方式。那是不是左對齊標籤無用呢？其實並不是，研究也有表明，在涉及到專業性過強，用戶不熟悉的表單，需要更長時間理解的標籤項時，則可以考慮左對齊方式。
我們試著想下50毫秒、240毫秒、500毫秒，對我們的輸入影響真那麼大麼。一個表單頁面的效率可不僅限於讀取標籤的速度，它還受到輸入形式，表單多少，表單佈局等各種因素的影響。
然而，移動端中的表單，我們經常看見的是標籤左對齊，其原因也以想象：節約空間、統一佈局。其實我們在考慮標籤的對齊方式的時候，也需要考慮輸入內容的對齊方式。常見的內容對齊方式有：左對齊、右對齊。
如果標籤採用頂對齊，毫無疑問，輸入文字做對齊。若標籤採用右對齊，輸入文字則採用左對齊。若標籤採用左對齊，則輸入文字可以採用左對齊或右對齊。
除了上面所說的標籤樣式外，浮動標籤是一個迅速獲得普及的新的交互設計方式。在它的設計中，標籤文字開始作為提示文字，然後一旦用戶開始填寫，標籤將升到上面，解決了上述提示文字消失的問題。
雖然這種方式還可以幫助減少頁面長度，在移動端特別有幫助。但是它不能解決文本框看上去已經被填補的問題。（Nielsen Norman Group曾做過的一項眼球追蹤研究就說明，空的輸入框比有提示文字的輸入框更能引起用戶的關注，而且與空的輸入框相比，用戶更容易忽略有提示文字的輸入框。換句話說，被認為是有用的表單提示文本其實弊大於利，尤其是對習慣大致瀏覽的用戶。）因此，Nielsen Norman Group不建議這種做法，還是應該保持標籤在上面，除非頁面長度是最重要的設計關注點。
二、輸入注意
移動端表單輸入，是一個我們非常容易忽略的一個地方。輸入方式的不同也是移動端和pc端非常大的一個區別，pc端我們是採用大鍵盤輸入，而移動端是虛擬小鍵盤。實體鍵盤輸入速度要比虛擬小鍵盤快很多。由於使用場景不同，很多公司都是電腦網頁和移動app同時開發的，然後把pc端的所有功能都移植到移動app上，表單也全部挪到移動端，造成app體量非常龐大，功能也臃腫，用戶使用起來非常不便。
我們在做設計的時候，要多問自己“為什麼”，採用5W2H法（what、who、when、where、why、how、how much）來審視一個表單的設計，這樣我們就能充分考慮設計的各種需求和場景了。
1.減少輸入
移動端表單的設計，我們首先要考慮是否有必要輸入這個數據，這個數據對我們的影響大麼；如果沒有什麼作用，我們是否應該刪除它；如果pc端也有該功能，我們是否可以讓用戶在pc端進行這些操作。所以常見的方式有下面這幾種：
- 減少文字
- 變輸入為選擇
- 新開頁面輸入
減少文字－考慮這個字段是否有必要，如果對我們沒有任何作用，那我們刪除它吧。移動不是pc，動不動就輸入幾百上千字那是不可能的，所以在輸入文字的時候可以做個限制，讓用戶輸入重要的信息即可。對於輸入框，我們應該直接告訴最多輸入多少個文字，讓用戶有心理預期。
變輸入為選擇－選擇很多情況下比輸入是更快的，而且這樣也能規範我們錄取的數據，這樣也能快速篩選我們的數據，前端和後端也更容易識別讀取。
新開頁面輸入－有時候我們一個表單的內容很多，輸入和選擇混雜在一起，輸入的文字也非常多，那我們可以可以考慮在當前頁面展示，輸入則進到新開頁面進行。
2.默認文字
我們在錄入表單的時候，通常會有默認提示文字，幫助我們更好的理解需要錄入的內容。一旦表單獲取點擊焦點，提示文字就消失了，用戶不再能看見它。所以這樣其實是有個缺陷的，這會讓用戶產生短期記憶的壓力而增加錯誤的機率。在移動端這種缺陷是被大多數忽略的，因為多數情況下默認文字是非常簡單易理解的，如果出現非常複雜的提示，則我們應該增加說明文字進行說明。
默認文字需要注意的幾個地方
- 文字不要太多，儘量控制在一定範圍內
- 不要把默認提示展示的像輸入的內容（默認文字是輔助內容，不要搶風頭）
- 需要掩碼的就採用掩碼輸入方式（常用於電話號碼，銀行卡號等數字的輸入。讓用戶方便記憶和錄入，減少錯誤）
3.區分標籤、默認文字、錄入內容、不可更改內容
我們在做表單的時候，一定要注意表單的層級，不要讓用戶在這裡迷失。常用的方式就是以字體大小和顏色來區分標籤、默認文字、錄入內容、不可更改內容。至少採用三個文字顏色來區分這個層級，常見的是深色（標籤）、中灰色（輸入內容）、淺色（默認提示）或者是中灰色（標籤）、深色（輸入內容）、淺色（默認提示）
4.鍵盤選取
鍵盤，是很容易忽視的一個地方，很多情況下不去定義鍵盤類型，最後導致我們用戶體驗較差。但是有的使用場景用戶體驗的等級是較低的，比如銀行，他的安全等級是最高的，所以很多銀行的鍵盤採用的是打亂的鍵盤。所以，即使是為了安全性，相對於用戶輸入體驗差，我們也更應該考慮鍵盤的選取類型。所以在交互稿或者是產品文檔中應該註明鍵盤的類型，以免開發工程師採用默認的類型，造成用戶體驗差。
iOS、Android提供多種鍵盤類型佈局，常用的鍵盤類型佈局有：（參考https://www.uisdc.com/soft-keyboard-design-element#）
- 默認鍵盤：常規的全鍵盤，不做任何限制。
- 文本鍵盤：相比默認鍵盤取消了表情符號，適合輸入密碼。
- 整數鍵盤：只能輸入數字0-9。
- 浮點數鍵盤：在整數鍵盤基礎上增加了小數點。
- 電話號碼鍵盤：在數字鍵盤基礎上增加了“*” 和 “#” 。
- 郵箱地址鍵盤：在常規全鍵盤基礎上增加了“@”和“.”。
- URL鍵盤：輸入網址用的，在常規全鍵盤上增加或突出“.com”、“.”和“/”等。
- 數字和符號鍵盤：相比數字鍵盤多了很多標點符號。
5.數據兼容鍵盤
鍵盤選擇好後，也應該考慮鍵盤彈出時，頁面的展示方式。有的app在這裡沒有考慮太多，彈出的鍵盤直接把輸入文本框擋住，造成用戶體驗非常差。所以，當你的輸入框在鍵盤的下面的時候，應該將輸入框推到鍵盤上面，保證用戶輸入的可見性。
6.文字高度自適應
在輸入文字的時候，我們應該明確表單輸入的文字的最小值與最大值，然後根據最大值和最小值來確定最後的展示方式。對於輸入文字較少的，我們可以一行展示，比如姓名，通常一行可以展示完整，給個最大限制就行。當你的文字大於一行所承受的範圍時，你就要考慮是否要自適應高度顯示文本內容了。
如果在設計的時候不考慮這些，開發很容易忽略這些問題，然後你就可以看到一大堆文字蓋在標籤上了。最好的方式就是把輸入的文字全部展示出來，如果你為了節約空間，也可以一行展示，多餘的用”…"表示。我們還可以採用新頁面來專門輸入，這樣就解決了這個問題，也不怕文字過多了。
對於備註或者反饋等大量文字輸入時，我們需要給文字輸入框更大的高度，保證在大多數情況下能正常展示。通常是有限制字數的（微博的140字），如微信個性簽名會在輸入框的右下角告訴你還可以輸入多少字。採用這種方式，告知用戶還可輸入多少，以免造成不好的體驗。
三、告知必選
為什麼會出現選填和必填呢，很多情況下是為了讓用戶快速完成操作，就把不是必須的選項採用可選的方式進行操作。尤其是在b端設計中，需要錄入用戶或者商家的信息非常多，很多時候為了讓商品信息更加全面，所以會把所有規格參數一股腦的展示出來，這個時候用戶就懵了。在移動端，使用場景也不固定，用戶很難會有大量時間來錄入更多信息，所以區分出選填和必填是非常有必要的，然後用戶可以在有空的時候完善信息。
那如何區分選填和必填呢，常見的有
- 文字標明必填和選填（二者選其一）
- 以＊代替
- 以●代替
這樣就能最高效率區分出來必填字段和選填字段，但現在大部分互聯網用戶對於「*」就代表必填這都已領會，所以筆者還是推薦在表單中儘可能用「*」去區分必填和選填，畢竟這屬於最通用的方案。但是，當一個表單都是必填時，就沒必要全部標記出來了，比如登錄表單，大家都知道登錄表單中的標籤項都為必填，同時也可以根據標籤項是否輸入的狀態來激活「登錄」按鈕。
四、合理組織信息
組織是簡化設計的一個重要策略，尤其是大批量錄入表單的時候，我們更應該合理組織信息。移動端表單過多的時候，用戶很難定位到需要更改或者注意的地方。通常採用下面的方式來合理組織表單信息：
- 標籤分類－通過添加標題，區分表單模塊
- 功能分類－根據同等層次、同類數據分類
- 合理的間距－用間隔來區分，避免擁擠
- 分頁錄入 －當一頁的表單過多的時候，給用戶造成密集恐懼的感覺。我們可以分頁錄入，一步步的完成要錄入的表單
五、及時反饋
及時反饋，這也是我們容易忽略的地方。很多時候，用戶在完成所有表單填寫後，提交的時候，我們才給錯誤提示，這樣會讓用戶去重新修改所填內容，如果所填內容過多，用戶修改起來就非常麻煩，造成很不好的用戶體驗。比如選擇時間的時候，如果過去的時間無效，那麼我們就可以讓過去的時間不可選，直接定位到當前時間，當前和後面的時間就可以選擇，這樣就避免選擇了過去時間造成的錯誤。或者有的情況下，部分狀態是不能選擇的，那我們也應該告知用戶哪些不可用。再或者，輸入的號碼格式，數字明顯錯誤，我們也應該及時告知用戶......
每個表單所承載的功能是不同的，我們要根據具體功能具體設計。總之，有一點我們要注意的是：在做設計的時候應該考慮更多的場景，多問為什麼。前期我們踩的坑多了，後面開發和測試踩的坑就少了，用戶體驗也會更好了。
閱讀更多 GSan設計 的文章
