
【編者按】本文轉載自@elya妞 的個人博客。為了更多設計師能認真思考移動應用表單的特殊性,最大限度的提升表單設計的體驗,提升效率,提高滿意度。本文將從清晰的視覺縱線、信息的分組、極致的減法、利用選擇代替輸入、標簽及文字的排布方式、依靠明文確認密碼、合理的鍵盤利用、校驗的小秘密這八個維度來分享我的移動應用表單設計秘籍。
一、清晰的視覺縱線
用戶在瀏覽信息的時候,如果沒有足夠多的強調元素,會從上至下,從左至右的瀏覽,Web端是一個“F”型視線,移動端更經常是“L”型視線(導航和重要操作往往在下邊),那么如果你的表單的視覺瀏覽順序,符合這個“L”型規律,基本上就符合用戶的心理預期,不需要任何的尋找,任何的思考,就可以簡單高效的執行完表單項的填寫和提交。

這是一個登錄表單視覺縱線的例子,用戶先關注到用戶名輸入框,再關注到密碼輸入框,然后就自然而然的發現了登錄按鈕。
反面的例子很多,比如下面兩個:

第一個反例比較常見,用戶輸入完用戶名和密碼之后,直接看到的操作按鈕是注冊,而不是登錄,這種左右的布局方式,即便你用顏色區隔,也阻擋不了用戶的視線落到注冊上,于是簡單的眼動測試就可以發現,這時用戶盯著注冊停頓思考一下是在所難免的。
第二個反例則會更加突出一些,因為表單標簽與表單的相關性不是很好,用戶需要先閱讀表單標簽的內容,再閱讀輸入框引導文字的內容,視線一直都是左—— >右——>左——>右,這樣已經不夠友好了,最后提交的時候,又需要整個視線平移到右上角去尋找登錄按鈕,當然,我并不是在 challenge iPhone的設計,如果全局都擁有這樣的操作欄,右上角提交表單項還好,但這也僅適用于鍵盤會遮擋提交按鈕的情況。
二、信息的分組
表單項并不是從上邊羅列到下邊就可以了,而是要經過信息組織的,同一類的表單可以放在一起,當表單太長的時候,可以拆分成不同的組,這樣用戶在填寫的時候,類似于一種任務拆解,可以一組一組的完成填寫。

登錄和注冊是兩個完全不同的去向,所以在布局上做一個顯著的分組,如果用戶想要登錄的話,專心填寫就可以了,如果用戶想要注冊的話,需要點擊注冊按鈕,去到一個新界面去完成操作。

填寫信息的時候,如果所有想都列出來自然會有較大信息負擔,但是如果按組別來填,每個組別只有2~3項,就會覺得沒有那么大的壓力了。