編輯導語：當我們想使用某個站點的服務，站點也想了解使用者的資訊資料時，便產生了表單。然而冗長麻煩的表單，可能會勸退使用者，要怎麼做出簡潔乾淨，另使用者愉悅填寫的表單呢？一起來看一下吧。
自網際網路發展到現在，當我們想使用某個站點的服務時，站點也想了解使用者的資訊資料，這時候就產生了表單，在站點提供服務給使用者前，需要使用者進行填寫資料。但是冗長複雜麻煩的表單，會立馬勸退使用者。這時不禁丟擲以下疑問：
怎樣做出簡潔乾淨令使用者愉悅填寫的表單呢？
我們不能忽略一些互動細節，往往一些好的互動提升會帶給使用者不一樣的美妙感受，而我們這邊透過查閱了一些表單設計文章，輸出了以下表單的設計功能建議：
一、表單元件
1。 輸入框
一般輸入包含文字標籤，輸入框本身以及資訊提示組成。
建議規範：
1）清晰的文字標籤
讓使用者正確識別需要輸入什麼，文字標籤必須要有的，還可以增加普遍認知的圖示，使用者一瞬間即可反應輸入內容（例如搜尋的放大鏡圖示）。
2）合理的輸入框尺寸
輸入框尺寸根據輸入內容的長短來設計，會更加適宜使用者閱讀和輸入，如果一個欄位太長或太短，使用者就會開始懷疑他們是否誤解了這個標籤。
對於具有可變輸入（姓名或電子郵件）長度但在標準平均範圍內的表單欄位，應該根據可能輸入的平均長度找到合適的寬度。研究表明，這些輸入欄位的範圍通常在18到33個字元之間。
譬如我們經常輸入的驗證碼，一般為4個字元的長度，減低使用者瀏覽時感受的輸入負擔。
3）合適的字型大小
應該確保字型足夠大，儘量讓它們清晰可辨，參考了蘋果跟安卓的設計規範，安全文字一般14px-16px之間。
4）顏色與背景高對比度
標籤和輸入文案的顏色，確保在W3C的對比度範圍中，較小的文字應當確保至少和背景之間有4。5：1的對比度比率。
5）提供舒適的點選區域
確保使用者使用者點選輸入的時候，觸發區足夠寬鬆舒適，而不是很難點選。拇指的觸發區域應當控制在 45~57px之間，但是在移動端上，控制元件看起來太大會讓人覺得不舒服，所以你的文字框高度應該設計在32~40px之間，這樣看起來足夠友好，又不會太大。
6）選擇合適的鍵盤（平板&移動端）
輸入框選擇合適的鍵盤，可以讓使用者更快的填寫表單，例如輸入框內容如果只需輸入數字的，可以選擇數字鍵盤。
7）
鍵盤tab訪問（PC端）
根據W3C的使用者實踐設計模式中鍵盤互動模式提及，表單應該只能透過鍵盤上的tab按鈕來訪問和編輯。
8）輸入框顯示邊框，聚焦時高亮輸入框
具有定義邊界的輸入欄位對於有移動障礙和認知障礙的使用者非常重要。
點選聚焦輸入框時，建議在輸入框提供一個清晰的視覺提示——改變顏色，在框中淡出，高亮顯示，縮放等等。
9）避免使用佔位符文字作為標籤
雖然佔位符文字用作標籤非常節約表格的空間，但是對於使用者來說非常容易出現忘記輸入的是什麼，然後又要刪除掉輸入框所寫的，才能看到佔位符的標籤內容，所以目前更推薦使用懸浮標籤。
2。 單選元件
單選，在提供的選項中只能選擇其中一項。
建議規範：
1）合適的字型大小
同輸入框的規範一樣，建議安全文字一般14px-16px之間。
2）顏色與背景高對比度
同輸入框的規範一樣，確保文字和背景之間有4。5：1的對比度比率。
3）舒適的點選區域
建議將整個單選框和標籤選項作為點選區域。
4）合適的單選設計形式
根據選項的數量來選擇對應的設計形式（單選常見樣式如開關形式、分段控制元件式、垂直列表式、輸入篩選式還是下拉選單式）。
5）考慮預填寫
讓容易被選中的放在選項的最前處，例如生日年份，有些控制元件一拉下來就是1960-2018，但是目標使用者也不大可能是1，2歲的小孩吧，這種選項完全可以排除掉。
3。 多選元件
建議規範：建議規範基本跟單選元件一致。
樣式選擇：
多選形式目前大多采用以下四種方式：
開關形式：表示選中或非選中兩種狀態之間的切換，一般只有一條單獨使用
水平放置式：適合選擇項不非常多和移動端展示，節省空間
垂直列表式：適合選擇項少於6項的情況和PC端顯示，更直觀，也容易選中，但是較浪費空間
輸入篩選式：適合選項較多的情況，增加搜尋篩選功能
選擇建議：
開關式：只有兩個選項，並且是互斥狀態
水平列表式：小於6個選項，適合移動端
垂直列表式：小於6個選項，適合PC端
輸入篩選式：適合非常多選項，移動端&PC端皆可
4。 滑塊
滑塊，對於刻度範圍上的非謹慎選擇，例如捏臉的時候對臉部的調整。由軌道，拇指，選中值（可選）和刻度線（可選）組成。
建議規範：
觸碰範圍，讓使用者容易點中滑塊上的拇指，拇指直徑建議20px左右
即刻反應，當與滑塊互動時，周圍涉及的更改立即有反應執行
二、總結
以上的表單最佳化建議內容主要透過收集資料整理的，歡迎多多提意見交流~
本文由 @一起聊產品 原創釋出於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議