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

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

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

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

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

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

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

智能缺省選項

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

平鋪單選但互斥的選項

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

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

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

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

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

為什么你不應該使用內(nèi)嵌標簽（placeholder）做字段標簽

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

為一個經(jīng)驗法則，不要超過解釋100個字符。

原則7：使用格式寬恕

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

結(jié)論

用戶在填寫表格的時候可能會猶豫不決，所以你應該讓這個過程變得盡可能容易。在這篇文章中描述的所有變化可以顯著增加表格可用性。 謝謝！

譯者：楷懿

譯文地址：37點2度體驗

原文地址：https://uxplanet.org/mobile-form-usability-2279f672917d#.bl230vy3o