表單的優(yōu)劣直接影響著用戶的體驗，那么怎樣能設計出更好更實用的表單呢？一起來看看作者分享的幾個表單設計方針。

無論是注冊流程、多視點布局、或者是單調的純數(shù)據(jù)錄入界面，表單都是其中最重要的組成部分，他們的好壞直接決定用戶對產(chǎn)品的體驗。在這里我只針對于常見的表單設計注意事項做一些說明，但是請記住，這些都是一般指導方針，在產(chǎn)品設計中可能會因為情景的不同而出現(xiàn)例外。

1、表單應盡量設計成一列

多列會擾亂用戶的垂直動量

2、頂部對齊標簽

優(yōu)先選擇處理速度快的頂部對齊標簽

數(shù)據(jù)表明：與左對齊方式的標簽相比，用戶處理頂部對齊形式的標簽時速度更快，頂部對齊標簽也可以應用于移動端重。

也會有特殊情況，比如在處理條目數(shù)量較多的大型資料庫時，可以考慮左對齊方式的標簽，因為他們降低了高度，瀏覽時更容易。

3、組標簽及其輸入

使標簽和輸入框有組的概念

使標簽和輸入框兩兩組合，用間隔的大小來形成組的概念，否則就會如右圖所示，分不清楚那個標簽和哪個輸入框是匹配的，容易產(chǎn)生混淆，是用戶感到困惑。

4、不要全部使用大寫字母

不要全部使用大寫字母

數(shù)據(jù)表明：與大寫字母相比，人對小寫字母具有更高的敏感度和識別度，比如我們可以輕松的認出“Market”，但是卻不能一眼識別出“MARKET”，因此不要全部使用大寫字母作為標簽或說明文本，識別度太低，增加用戶的認知成本。

5、如果少于6個，那么顯示出所有的選擇項

顯示所有選擇項

對于下拉菜單選擇器而言，將選項內置，需要點擊兩次查看或隱藏選項，且不直觀，如果少于6個選擇項，不妨考慮使用標簽選擇器。

另外如果有超過25個選項，則不能僅僅使用下拉菜單選擇器，還要在下拉列表中結合上下文進行搜索。

6、盡量不使用占位符作為標簽

盡量不要占位符做標簽

使用占位符文本作為標簽來優(yōu)化空間是誘人的。但是這會導致許多可用性問題，這里不做詳細說明，這些問題已經(jīng)被尼爾森諾曼集團的Katie Sherwin證實過。

7、將復選框置于下方，以方便進行瀏覽

復選框置于下方，將復選框置于標簽的下方，更易于用戶的瀏覽。

8、使用號召性用語(CTA)作為描述

使用號召性用語(CTA)

使用號召性用語(CTA)更能激發(fā)用戶的行動力和歸屬感。

比如：普通用語“注冊”，一般是表示動作;號召性用語(CTA)可能表述為“我要免費試用”，一般是表示意圖。

9、指定錯誤內聯(lián)

指定錯誤內聯(lián)

告知用戶錯誤發(fā)生的位置和原因。

這是兩個要素：位置和原因。

對于位置而言，要明確告訴用戶具體是那個地方出現(xiàn)了錯誤，而不能只是簡單告訴用戶有錯誤;對于錯誤原因而言，不但要告訴用戶錯誤的原因，還要告知解決的方法，引導用戶做出正確的操作。

10、在用戶填寫字段完成后在進行內聯(lián)驗證

(除非是在填寫的過程中需要幫助他們)

內聯(lián)驗證

首先，完成一個字段后在進行內聯(lián)驗證，比如當姓名輸入框失去焦點后，在進行內聯(lián)驗證。

其次，不要在輸入過程中邊輸入便進行內聯(lián)驗證，比如右側的Email輸入框，用戶還未輸入完成就進行了內聯(lián)驗證，才會一直出現(xiàn)錯誤，會讓用戶產(chǎn)生恐懼。

最后如果是需要在填寫的過程中幫助用戶，那么可以邊輸入邊做內聯(lián)提示，直到失去焦點后在進行內聯(lián)驗證。比如我們常見的在輸入密碼時，如果使用了不規(guī)范的字符，系統(tǒng)會立刻驗證告知你出現(xiàn)了錯誤，以及該如何避免這種錯誤。

11、盡量不要隱藏幫助文本

幫助文本，在條件允許的情況下，盡量不要隱藏幫助文本，可以將幫助文本置于被幫助項附近，當然如果幫助文本過于復雜，或者已經(jīng)不僅僅是幫助文本，而是幫助教程的時候，需要考慮將其隱藏。

12、要區(qū)分主要操作和次要操作

區(qū)分主次，關于是否需要一個次要操作，這是一個更大的問題，我們暫不討論，我們討論的是如果不是只有單個操作，那么一定要區(qū)分主次操作，可以簡單理解為：比較重要的、我們希望用戶去做的就是主要操作，剩下的就是次要操作。

比如左側的圖中“登錄”按鈕為主要操作，“取消”按鈕為次要操作，然而右圖中未進行祝此操作的區(qū)分。

13、使用字段長度作為提示

字段長度作為提示

預留字段的長度提供了答案的長度。對于具有預定義的字符數(shù)字，如電話號碼、身份證號碼、郵政編碼等，字段的長度是已知且固定的，那么預留字段的長度便能明確表示答案的長度。

常見的例子還有：支付寶、微信等的六位支付密碼、銀行卡號···

14、可以考慮不用*表示是否必選和可選字段

是否必填，隨著網(wǎng)絡的普及，可能大家都能明白*代表著必填的含義，但是不排除有一部分對網(wǎng)絡接觸較少的人群并不理解其中的含義，當然這不是重點，重點是沒有必要一定要用*來表示必填，因為很多時候我們發(fā)現(xiàn)，幾乎90%的都是必填項，只有個別是選填項，那么就沒有必要每個必填項都加*標注，我們完全可以按照左圖所示的思路，只對選填項做選填標注(Optional)，對必填項便不再需要任何特殊標記。

15、信息的組相關(模塊相關)

組相關(模塊相關)，當表單內哦讓較多或表單過長時，可能會讓用戶產(chǎn)生壓迫感，且識別度較低，我們可以通過對這些表單元素進行分組分類模塊化，讓用戶更加清晰易懂。

比如把用戶名、密碼等作為基礎數(shù)據(jù)組，把郵箱、性別、星座等作為補充數(shù)據(jù)組。

以上就是海淘科技編者，推出的app表單設計15個規(guī)范，看都有準守嗎？相關資訊，可點擊《如何規(guī)避網(wǎng)頁表單設計錯誤》