移動應用表單設計祕籍

一直想寫一篇文章，關於移動應用表單設計的，惋惜最近項目很忙，忙到沒有時間打理博客。最近體驗產品的時候，常常看到錯誤的的表單設計，要麼信息混亂，要麼步驟繁複、要麼語言程序化，要麼視覺焦點跳躍，要麼校驗順序混亂，要麼反饋不及時，如此種種的問題，讓我很想認真的總結一下，思考一下，爲移動應用的表單設計，提供一些我的力所能及的建議，但願更多地設計師能認真思考移動應用表單的特殊性，能最大限度的提高表單設計的體驗，提高效率，提升滿意度。

本文將從清晰的視覺縱線、信息的分組、極致的減法、利用選擇代替輸入、標籤及文字的排布方式、依靠明文確認密碼、合理的鍵盤利用、校驗的小祕密這八個維度來分享個人移動應用表單設計祕籍。

1、清晰的視覺縱線

用戶在瀏覽信息的時候，若是沒有足夠多的強調元素，會從上至下，從左至右的瀏覽，Web端是一個「F」型視線，移動端更常常是「L」型視線（導航和重要操做每每在下邊），那麼若是你的表單的視覺瀏覽順序，符合這個「L」型規律，基本上就符合用戶的心理預期，不須要任何的尋找，任何的思考，就能夠簡單高效的執行完表單項的填寫和提交。

這是一個登陸表單視覺縱線的例子，用戶先關注到用戶名輸入框，再關注到密碼輸入框，而後就天然而然的發現了登陸按鈕。

反面的例子不少，好比下面兩個：

第一個反例比較常見，用戶輸入完用戶名和密碼以後，直接看到的操做按鈕是註冊，而不是登陸，這種左右的佈局方式，即使你用顏色區隔，也阻擋不了用戶的視線落到註冊上，因而簡單的眼動測試就能夠發現，這時用戶盯着註冊停頓思考一下是在所不免的。

第二個反例則會更加突出一些，由於表單標籤與表單的相關性不是很好，用戶須要先閱讀表單標籤的內容，再閱讀輸入框引導文字的內容，視線一直都是左——>右——>左——>右，這樣已經不夠友好了，最後提交的時候，又須要整個視線平移到右上角去尋找登陸按鈕，固然，我並非在challenge iPhone的設計，若是全局都擁有這樣的操做欄，右上角提交表單項還好，但這也僅適用於鍵盤會遮擋提交按鈕的狀況。

2、信息的分組

表單項並非從上邊羅列到下邊就能夠了，而是要通過信息組織的，同一類的表單能夠放在一塊兒，當表單太長的時候，能夠拆分紅不一樣的組，這樣用戶在填寫的時候，相似於一種任務拆解，能夠一組一組的完成填寫。

登陸和註冊是兩個徹底不一樣的去向，因此在佈局上作一個顯著的分組，若是用戶想要登陸的話，專心填寫就能夠了，若是用戶想要註冊的話，須要點擊註冊按鈕，去到一個新界面去完成操做。

 

填寫信息的時候，若是全部想都列出來天然會有較大信息負擔，可是若是按組別來填，每一個組別只有2~3項，就會以爲沒有那麼大的壓力了。

3、極致的減法

那些不須要的信息，乾脆就砍掉。那些實在須要，可是頻次不高的信息，則能夠隱藏掉，經過某個入口能夠添加。

若是你只須要用戶填寫基本信息，那麼全部其餘信息均可以隱藏在一個添加入口裏，當用戶須要的時候，能夠找到。

4、利用選擇代替輸入

移動應用的輸入成本很是高，尤爲是觸屏，輸入效率和輸入準確率都有很大的提高空間，在這種狀況下，要儘可能減小須要輸入的內容，利用選擇代替輸入，簡單來講，好比性別、好比出生日期、好比城市，都是能夠經過選擇的形式來提交內容的。

固然還有一些輸入建議相關的場景，也是能夠利用選擇來代替輸入的。好比當用戶名已被註冊的時候，系統提供幾個用戶名建議以供選擇；好比給本身打標籤的時候，系統提供經常使用標籤以供選擇，等等

輸入郵箱的時候，能夠給出經常使用郵箱的建議，可是由於經常使用郵箱比較多，若是給的建議太多，須要滾動的話，干擾性大，還不如不給。因此能夠合理定義觸發建議的時機，好比輸入@後邊的第一個字符後，基本上能鎖定更少許的郵箱了，如「h」基本上就是hotmail了，「g」基本上就是gmail了。

5、標籤及提示文字的排布方式

移動應用界面空間有限寸土寸金，可是表單項每每須要經過標籤告知表單類型，經過提示文字告知表單格式，那麼標籤及提示文字怎樣排布纔可使信息呈現最友好呢？

優勢：視線一直是縱向向下的，當輸入的時候，不遮擋說明文字。

缺點：在寸土寸金的手機屏幕上，這種排布方式過於佔用寶貴的垂直空間，鍵盤升起一遮擋，基本上什麼都卡不見了。

優勢：能夠快速處理每個表單項的輸入，符合視覺縱線。

缺點：佔用寶貴的垂直空間。

優勢：基本上解決了前面說的佔用縱線空間的問題

缺點：缺點仍然是橫向視覺不穩。

優勢：即解決了視覺縱線的問題，又解決了節約屏幕縱向空間的問題，且元素較爲穩定。

這是一種最佳的排布方式。

6、依靠明文確認密碼

註冊的時候，不少應用還須要兩次輸入密碼，以預防誤操做，防止輸入錯誤的密碼以後沒法登陸。可是真的須要輸入兩次密碼來防止這個問題嗎？有沒有什麼別的方法來規避這個問題呢？

其實除了輸入兩次密碼以外，還有這樣幾種辦法：1.最後一位明文顯示  2.所有明文顯示  4.默認暗文，可選明文  5.默認明文，可選暗文  6.對話框確認密碼輸入正確。 經過小範圍的用戶調研發現，默認明文可選暗文的形式接受度最高

輸入框中有個隱藏按鈕，點擊一下，切換暗文顯示。

7、合理的鍵盤利用

1. 鍵盤的類型與調用

不一樣的文本框類型，能夠調用不一樣的鍵盤。好比網址輸入框，調用網址輸入鍵盤，能夠方便快捷的輸入.com；純數字的輸入框，能夠調用數字鍵盤；電話號碼輸入框，能夠調用電話號碼鍵盤，除了數字以外，還有*#+；姓名等中文輸入框，能夠調用中文鍵盤；郵箱輸入框能夠調用郵箱鍵盤，方便輸入@。

可是這裏有一個要注意的地方，若是把文本框定義成數字輸入框，雖然是能夠調用數字鍵盤，可是該輸入框只認浮點雙精度數字，就是說你輸入了「0123」，會被算做是「123」這樣一個天然數，若是是做爲驗證碼輸入框的，你還須要作一些前端或後端的處理，來補全這個0。因此這裏不得不提一下，iPhone手機，若是你設置了密碼保護，在輸入4位數字密碼的時候，是4個框而不是1個框，調用的是純數字鍵盤，這下你知道爲何了吧？

固然，不止是iPhone，Android也是能夠定義鍵盤類型的。

這裏僅是粗略的調研，實際的文本框類型很是多，鍵盤類型也會比較多，須要具體狀況具體分析。好比你的驗證碼若是不是純數字的，就不能調用數字鍵盤了。

2. 鍵盤上的功能鍵

鍵盤上右下角的功能鍵是能夠被定義的，這個功能鍵在填寫表單的時候，跟PC上的tab鍵有點像，應該起着向下切換表單項的做用，當處於最後一個表單項的時候，這個功能鍵就要變成對應的操做。

好比在登陸表單中，光標處於用戶名框，右下角是下一項；焦點處於表單最後一項，可是有必填項未填寫時，該按鈕是置灰不可點的；當全部必填項填寫完整，且焦點處於表單的最後一項，操做按鈕可點擊，注意此時操做按鈕必定是藍色的。

3. 鍵盤上的操做欄

當表單項多於3項的時候，基本上就能夠考慮增長鍵盤上的操做欄了，這個操做欄能夠幫助用戶切換上一項、下一項和收起鍵盤。當焦點處於第一個表單項的時候，上一項置灰不可點。

8、校驗的小祕密

1. 縱向的校驗順序

當校驗表單內容是否符合格式要求的時候，要按照表單項從上到下的順序校驗

好比這個表單，就該按照1用戶名——>2密碼——>3手機號——>4郵箱——>5性別的順序依次校驗，用戶名格式不對、用戶名重名、用戶名在黑名單裏之類的問題，都會優先提醒，若是用戶名沒有問題，纔會去校驗密碼，密碼沒有問題再去校驗手機號……這樣能保證錯誤提醒是可找到的，有規律可循的。

2. 即時的校驗反饋

一種理想化的狀況，就是當我輸入完一個表單項的時候，系統能夠馬上告訴我，這一項填寫是否正確，而不是填完全部表單，提交以後，才告我我哪裏須要修正。在Web端，即時校驗反饋已經很是常見，可是在移動端，即時檢驗尚需時日。主要緣由是即時校驗受限於網速，當網絡環境很差的時候，校驗也許須要好久，會影響正在進行的下一項表單的填寫。

美國日本的移動網速優於中國，Twitter和Evernote的手機客戶端已經採用了即時校驗的方式來反饋問題，在中國使用，體驗尚未特別流暢，也許國內的移動表單即時校驗還須要等些時候。

其實除了清晰的視覺縱線、信息的分組、極致的減法、利用選擇代替輸入、標籤及文字的排布方式、依靠明文確認密碼、合理的鍵盤利用、校驗的小祕密以外，還有不少不少祕籍沒有寫，好比清晰的步驟、用戶的語音、移動端特殊的情景、合理的說明、及時的反饋、錨點置頂、主動作與次動做的位置、給與建議、給予限制、適當的幫助、標籤頁設計、顏色的信息傳達、按部就班的表單，之後有機會再作分享。