專業干貨！提高無線端表單可用性的7個設計原則

用戶在填寫表格的時候可能會猶豫不決，所以你應該讓這個過程變得盡可能容易，這篇文章中的7個設計原則可以顯著提高表格的可用性。

這篇是無線端的，網頁端的可以看這篇：《騰訊精品好文！7個方法幫你全面提升WEB表單填寫體驗》

無線端用戶使用移動應用程序或網站都有一個特定的目標。通常情況下，站在用戶和他的目標之間都會有一個交互形式 - 表單。實際情況中，表單被認為是用戶使用鏈路中達到目標的最后一步，這就是為什么它是如此重要。所以用戶填寫表格盡可能快，沒有任何疑慮，是表單交互設計的重要考慮要素。

無線端表單設計需注意的原則有如下7個：

原則 1：表單的交互設計應與用戶輸入數據的行為強兼容

確保表單所有字段沒有被界面中的任意元素遮擋，例如鍵盤喚起時。當用戶完成輸入表單的某一字段，頁面位置自動往下前進至下一個字段更好利用有限空間。

原則 2：減少輸入字段和用戶打字的交互成本

表單越長越復雜用戶完成整體表單的意愿就越低 - 尤其是在小屏幕上。最大限度地減少輸入字段數，使你的表單載入更快速，尤其是當您向用戶索取大量信息的時候保持表單越簡短越好。

但只減少輸入字段的數量是不夠的 - 交互設計師還應該注意用戶輸入成本，無線端打字有較高的交互成本。相信大家都有體驗，手機打字很容易出錯即便使用PC鍵盤也很難避免（觸屏輸入更是如此）。因此，盡量減少打字和防止用戶輸入錯誤，下面是幾個小技巧：

智能缺省選項

智能缺省選項可讓用戶的表單輸入完成更快，更準確。例如，根據其地理位置數據提前幫助用戶選擇用戶的地理位置信息。

平鋪單選但互斥的選項

當用戶需要從選項列表中選擇，可以考慮使用一個水平標簽陳列的方式，因為它可以更好地利用可用的屏幕空間，也能減少用戶的輸入成本，例如時間的選擇。傳統的選擇交互是給一個時間選擇器，用戶需選擇小時以及分鐘。但如果我們能確認大致時間以及范圍就可以采用如下形式：

最低/最高區間的選擇可考慮使用滑塊交互

如果是在一個區間去選擇選項可考慮使用滑塊方式，用戶只需要在一個設定的最低和最高值之間移動滑塊就可以，和傳統下拉菜單相比大大地降低了輸入成本。對用戶而言，通過視覺的提示滑塊可以容易的橫向或縱向調節來適應各種交互場景。但請記住，當操作滑塊時調節軸上方的指示數字一定要給用戶清晰的提示數據變動，這里也請考慮到大手指操作時候會被遮擋住的場景，例如：

原則 3：表單中的字段標簽要么放置在字段上部要么使用浮動標簽?

字段標簽告知用戶這個字段的目的，清晰易懂的字段標簽是讓界面交互性提升的一個主要手段。

為什么你不應該使用內嵌標簽（placeholder）做字段標簽

內嵌標簽（或placeholder作為一個字段標簽），是位于表單域里面的文本，當用戶輸入的時候它會自動消失。

雖然內嵌標簽看起來不錯，節省了寶貴的屏幕房地產，這些好處是迄今為止由主要可用性的缺點，其中最顯著其中是上下文的損失抵消。一旦用戶點擊文本框，標簽將消失，因此用戶無法仔細檢查他/她寫的是什么確實是為了被寫入。占位符文本是視覺標簽一個貧窮的替代品。

另一件事是，當用戶看到一個文本框里面寫的，他們可能會認為它已經在預先填寫并可能因此忽略它。

為什么要左對齊字段標簽對無線端表單設計是不好的

左對齊字段標簽的主要問題涉及手機顯示屏尺寸和寬高比。如果一個左對齊標簽在字段前面所使用的，窄屏幕離開左為場本身的空間非常小。這是一個創建可用性的問題，因為表單字段通常不足夠寬，以顯示用戶的整個輸入。不能夠看到輸入數據造成了用戶的麻煩，因為它使得更難為他們提交表單，從而導致更多的提交形式的錯誤之前發現任何輸入錯誤。這很難，如果輸入數據不完全可見現貨的誤差。

標簽上方的字段或浮動標簽

表單標簽應高于表單域，使用戶可以很容易地看到他們在，為什么都盡顯。放置在標簽上移動領域以上的主要好處是，你可以有表單字段延長屏幕的整個寬度，使它們足夠大，以顯示整個用戶的輸入（在一個體面的字體大小16像素一樣）。額外的好處是字跡清晰的和有意義的字段標簽，因為我們沒有做限定于1-2詞語?。

以上標簽的主要缺點是，它需要更多的垂直空間，這意味著用戶必須滾動多。然而，這并不是一個嚴重的問題 - 現在這是絕對自然滾動。

另外，也可以使用浮動標簽，確保他們填寫了正確的外地用戶。占位符文本默認情況下顯示，但一旦一個輸入字段被竊聽和輸入文本占位符文本淡出和頂部對齊的標簽的動畫。

原則 4：表單輸入應實時進行驗證在一個理想的世界里

用戶將填補必要信息的形式，并順利完成他們的工作。在現實世界中，用戶經常犯錯誤。但是，用戶在通過填寫表單只在提交找出來，他們已經犯了一個錯誤的過程中不喜歡。以通知提供的數據的成功/失敗的正確時間是正確的用戶提交信息后。實時在線驗證立即通知有關用戶提供的數據的正確性。這種方法允許用戶以糾正他們做出更快的錯誤，無需等待，直到他們按下提交按鈕查看錯誤。

如果在一個特定的格式都需要答案，提前告知用戶，而無需額外的例子通信的征收規則（格式規范）。

內嵌的驗證也有助于減少硬反彈。在下面的例子中你可以看到在線驗證，提供用于固定一個潛在的問題的解決方案的一個很好的例子。

原則 5：匹配的鍵盤與所需的文本輸入框

用戶認識到，提供適當的鍵盤用于文本輸入的應用程序。例如，當用戶需要輸入信用卡號碼，只顯示撥號盤，其輸入限制到數字和不字符。這將減少他們的選擇和錯誤，并加速完成。

確保這是整個應用程序，而不是只針對某些任務而不是其他一致的實現。

原則 6：提供在上下文中的有用的信息

有時候，你需要有相關的，在上下文信息準備協助用戶通過表單很容易移動。但它真正需要的相應的文字只應該用于：

當調度日期，用戶也喜歡像月歷范圍內查明星期幾，無需離開應用程序，檢查智能手機的日歷。它也降低了用戶的風險變得另一任務分心。

人可能對他們的數據的安全或隱私的關注，你需要向他們保證數據不會與第三方資源共享。

為一個經驗法則，不要超過解釋100個字符。

原則 7：使用格式寬恕

有些任務實在是要求用戶鍵入非常精確的信息，但迫使人們提供特定格式的信息，可以在具有很好的實用性原則相抵觸。如果正在要求用戶輸入的數字信息（諸如電話號碼）轉換成一種形式，是柔性的，和設計的屏幕，可以解釋多個輸入格式和顯示的方式，很容易可掃描的信息（人類，而不是機器）中為了防止出錯。不要使用固定的輸入格式。

歡迎關注阿里37.2度體驗的微信公眾號：

「表單設計高效自學三部曲」

Step 1：不耽誤時間才是王道！提高效率是首選！
《牽線搭橋！讓用戶更高效地完成表單填寫》

Step 2：時間再急，也不能落下體驗不管，細節見真知！
《細節決定成敗！提高用戶登錄體驗的5個細節》

Step 3：技巧是設計師能提前下班的利器之一！
《入口的用戶體驗！注冊表單的設計技巧》

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量150萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com