轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(  sillybuy.com )是一家專注而深入的設(shè)計(jì)機(jī)構(gòu) ，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、  cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)  、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、  網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來(lái)源：http://elya.cc/2012/04/16/mobile-form/

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，          請(qǐng)點(diǎn)這里

一直想寫一篇文章，關(guān)于移動(dòng)應(yīng)用表單設(shè)計(jì)的，可惜最近項(xiàng)目很忙，忙到?jīng)]有時(shí)間打理博客。最近體驗(yàn)產(chǎn)品的時(shí)候，經(jīng)?？吹藉e(cuò)誤的的表單設(shè)計(jì)，要么信息混亂，要么步驟繁復(fù)、要么語(yǔ)言程序化，要么視覺(jué)焦點(diǎn)跳躍，要么校驗(yàn)順序混亂，要么反饋不及時(shí)，如此種種的問(wèn)題，讓我很想認(rèn)真的總結(jié)一下，思考一下，為移動(dòng)應(yīng)用的表單設(shè)計(jì)，提供一些個(gè)人力所能及的建議，希望更多地設(shè)計(jì)師能認(rèn)真思考移動(dòng)應(yīng)用表單的特殊性，能最大限度的提升表單設(shè)計(jì)的體驗(yàn)，提升效率，提高滿意度。

本文將從清晰的視覺(jué)縱線、信息的分組、的減法、利用選擇代替輸入、標(biāo)簽及文字的排布方式、依靠明文確認(rèn)密碼、合理的鍵盤利用、校驗(yàn)的小秘密這八個(gè)維度來(lái)分享我的移動(dòng)應(yīng)用表單設(shè)計(jì)秘籍。

一、清晰的視覺(jué)縱線

用戶在瀏覽信息的時(shí)候，如果沒(méi)有足夠多的強(qiáng)調(diào)元素，會(huì)從上至下，從左至右的瀏覽，Web端是一個(gè)“F”型視線，移動(dòng)端更經(jīng)常是“L”型視線（導(dǎo)航和重要操作往往在下邊），那么如果你的表單的視覺(jué)瀏覽順序，符合這個(gè)“L”型規(guī)律，基本上就符合用戶的心理預(yù)期，不需要任何的尋找，任何的思考，就可以簡(jiǎn)單的執(zhí)行完表單項(xiàng)的填寫和提交。

這是一個(gè)登錄表單視覺(jué)縱線的例子，用戶先關(guān)注到用戶名輸入框，再關(guān)注到密碼輸入框，然后就自然而然的發(fā)現(xiàn)了登錄按鈕。

反面的例子很多，比如下面兩個(gè)：

第一個(gè)反例比較常見(jiàn)，用戶輸入完用戶名和密碼之后，直接看到的操作按鈕是注冊(cè)，而不是登錄，這種左右的布局方式，即便你用顏色區(qū)隔，也阻擋不了用戶的視線落到注冊(cè)上，于是簡(jiǎn)單的眼動(dòng)測(cè)試就可以發(fā)現(xiàn)，這時(shí)用戶盯著注冊(cè)停頓思考一下是在所難免的。

第二個(gè)反例則會(huì)更加突出一些，因?yàn)楸韱螛?biāo)簽與表單的相關(guān)性不是很好，用戶需要先閱讀表單標(biāo)簽的內(nèi)容，再閱讀輸入框引導(dǎo)文字的內(nèi)容，視線一直都是左——>右——>左——>右，這樣已經(jīng)不夠友好了，最后提交的時(shí)候，又需要整個(gè)視線平移到右上角去尋找登錄按鈕，當(dāng)然，我并不是在challenge iPhone的設(shè)計(jì)，如果全局都擁有這樣的操作欄，右上角提交表單項(xiàng)還好，但這也僅適用于鍵盤會(huì)遮擋提交按鈕的情況。

二、信息的分組

表單項(xiàng)并不是從上邊羅列到下邊就可以了，而是要經(jīng)過(guò)信息組織的，同一類的表單可以放在一起，當(dāng)表單太長(zhǎng)的時(shí)候，可以拆分成不同的組，這樣用戶在填寫的時(shí)候，類似于一種任務(wù)拆解，可以一組一組的完成填寫。

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

 

填寫信息的時(shí)候，如果所有想都列出來(lái)自然會(huì)有較大信息負(fù)擔(dān)，但是如果按組別來(lái)填，每個(gè)組別只有2~3項(xiàng)，就會(huì)覺(jué)得沒(méi)有那么大的壓力了。

三、的減法

那些不需要的信息，干脆就砍掉。那些實(shí)在需要，但是頻次不高的信息，則可以隱藏掉，通過(guò)某個(gè)入口可以添加。

如果你只需要用戶填寫基本信息，那么所有其他信息都可以隱藏在一個(gè)添加入口里，當(dāng)用戶需要的時(shí)候，可以找到。

四、利用選擇代替輸入

移動(dòng)應(yīng)用的輸入成本非常高，尤其是觸屏，輸入效率和輸入準(zhǔn)確率都有很大的提升空間，在這種情況下，要盡量減少需要輸入的內(nèi)容，利用選擇代替輸入，簡(jiǎn)單來(lái)說(shuō)，比如性別、比如出生日期、比如城市，都是可以通過(guò)選擇的形式來(lái)提交內(nèi)容的。

當(dāng)然還有一些輸入建議相關(guān)的場(chǎng)景，也是可以利用選擇來(lái)代替輸入的。比如當(dāng)用戶名已被注冊(cè)的時(shí)候，系統(tǒng)提供幾個(gè)用戶名建議以供選擇；比如給自己打標(biāo)簽的時(shí)候，系統(tǒng)提供常用標(biāo)簽以供選擇，等等

輸入郵箱的時(shí)候，可以給出常用郵箱的建議，但是因?yàn)槌Ｓ绵]箱比較多，如果給的建議太多，需要滾動(dòng)的話，干擾性大，還不如不給。所以可以合理定義觸發(fā)建議的時(shí)機(jī)，比如輸入@后邊的第一個(gè)字符后，基本上能鎖定更少量的郵箱了，如“h”基本上就是hotmail了，“g”基本上就是gmail了。

五、標(biāo)簽及提示文字的排布方式

移動(dòng)應(yīng)用界面空間有限寸土寸金，但是表單項(xiàng)往往需要通過(guò)標(biāo)簽告知表單類型，通過(guò)提示文字告知表單格式，那么標(biāo)簽及提示文字怎樣排布才可以使信息呈現(xiàn)最友好呢？

優(yōu)點(diǎn)：視線一直是縱向向下的，當(dāng)輸入的時(shí)候，不遮擋說(shuō)明文字。

缺點(diǎn)：在寸土寸金的手機(jī)屏幕上，這種排布方式過(guò)于占用寶貴的垂直空間，鍵盤升起一遮擋，基本上什么都卡不見(jiàn)了。

優(yōu)點(diǎn)：可以快速處理每一個(gè)表單項(xiàng)的輸入，符合視覺(jué)縱線。

缺點(diǎn)：占用寶貴的垂直空間。

優(yōu)點(diǎn)：基本上解決了前面說(shuō)的占用縱線空間的問(wèn)題

缺點(diǎn)：缺點(diǎn)仍然是橫向視覺(jué)不穩(wěn)。

優(yōu)點(diǎn)：即解決了視覺(jué)縱線的問(wèn)題，又解決了節(jié)約屏幕縱向空間的問(wèn)題，且元素較為穩(wěn)定。

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

六、依靠明文確認(rèn)密碼

注冊(cè)的時(shí)候，很多應(yīng)用還需要兩次輸入密碼，以預(yù)防誤操作，防止輸入錯(cuò)誤的密碼之后無(wú)法登錄。但是真的需要輸入兩次密碼來(lái)防止這個(gè)問(wèn)題嗎？有沒(méi)有什么別的方法來(lái)規(guī)避這個(gè)問(wèn)題呢？

其實(shí)除了輸入兩次密碼之外，還有這樣幾種辦法：1.最后一位明文顯示  2.全部明文顯示  4.默認(rèn)暗文，可選明文  5.默認(rèn)明文，可選暗文  6.對(duì)話框確認(rèn)密碼輸入正確。 通過(guò)小范圍的用戶調(diào)研發(fā)現(xiàn)，默認(rèn)明文可選暗文的形式接受度最高

輸入框中有個(gè)隱藏按鈕，點(diǎn)擊一下，切換暗文顯示。

七、合理的鍵盤利用

1. 鍵盤的類型與調(diào)用

不同的文本框類型，可以調(diào)用不同的鍵盤。比如網(wǎng)址輸入框，調(diào)用網(wǎng)址輸入鍵盤，可以方便快捷的輸入.com；純數(shù)字的輸入框，可以調(diào)用數(shù)字鍵盤；電話號(hào)碼輸入框，可以調(diào)用電話號(hào)碼鍵盤，除了數(shù)字之外，還有*#+；姓名等中文輸入框，可以調(diào)用中文鍵盤；郵箱輸入框可以調(diào)用郵箱鍵盤，方便輸入@。

但是這里有一個(gè)要注意的地方，如果把文本框定義成數(shù)字輸入框，雖然是可以調(diào)用數(shù)字鍵盤，但是該輸入框只認(rèn)浮點(diǎn)雙精度數(shù)字，就是說(shuō)你輸入了“0123”，會(huì)被算作是“123”這樣一個(gè)自然數(shù)，如果是作為驗(yàn)證碼輸入框的，你還需要做一些前端或后端的處理，來(lái)補(bǔ)全這個(gè)0。所以這里不得不提一下，iPhone手機(jī)，如果你設(shè)置了密碼保護(hù)，在輸入4位數(shù)字密碼的時(shí)候，是4個(gè)框而不是1個(gè)框，調(diào)用的是純數(shù)字鍵盤，這下你知道為什么了吧？

當(dāng)然，不止是iPhone，Android也是可以定義鍵盤類型的。

這里僅是粗略的調(diào)研，實(shí)際的文本框類型非常多，鍵盤類型也會(huì)比較多，需要具體情況具體分析。比如你的驗(yàn)證碼如果不是純數(shù)字的，就不能調(diào)用數(shù)字鍵盤了。

2. 鍵盤上的功能鍵

鍵盤上右下角的功能鍵是可以被定義的，這個(gè)功能鍵在填寫表單的時(shí)候，跟PC上的tab鍵有點(diǎn)像，應(yīng)該起著向下切換表單項(xiàng)的作用，當(dāng)處于最后一個(gè)表單項(xiàng)的時(shí)候，這個(gè)功能鍵就要變成對(duì)應(yīng)的操作。

比如在登錄表單中，光標(biāo)處于用戶名框，右下角是下一項(xiàng)；焦點(diǎn)處于表單最后一項(xiàng)，但是有必填項(xiàng)未填寫時(shí)，該按鈕是置灰不可點(diǎn)的；當(dāng)所有必填項(xiàng)填寫完整，且焦點(diǎn)處于表單的最后一項(xiàng)，操作按鈕可點(diǎn)擊，注意此時(shí)操作按鈕一定是藍(lán)色的。

3. 鍵盤上的操作欄

當(dāng)表單項(xiàng)多于3項(xiàng)的時(shí)候，基本上就可以考慮增加鍵盤上的操作欄了，這個(gè)操作欄可以幫助用戶切換上一項(xiàng)、下一項(xiàng)和收起鍵盤。當(dāng)焦點(diǎn)處于第一個(gè)表單項(xiàng)的時(shí)候，上一項(xiàng)置灰不可點(diǎn)。

八、校驗(yàn)的小秘密

1. 縱向的校驗(yàn)順序

當(dāng)校驗(yàn)表單內(nèi)容是否符合格式要求的時(shí)候，要按照表單項(xiàng)從上到下的順序校驗(yàn)

比如這個(gè)表單，就該按照1用戶名——>2密碼——>3手機(jī)號(hào)——>4郵箱——>5性別的順序依次校驗(yàn)，用戶名格式不對(duì)、用戶名重名、用戶名在黑名單里之類的問(wèn)題，都會(huì)優(yōu)先提醒，如果用戶名沒(méi)有問(wèn)題，才會(huì)去校驗(yàn)密碼，密碼沒(méi)有問(wèn)題再去校驗(yàn)手機(jī)號(hào)……這樣能保證錯(cuò)誤提醒是可找到的，有規(guī)律可循的。

2. 即時(shí)的校驗(yàn)反饋

一種理想化的情況，就是當(dāng)我輸入完一個(gè)表單項(xiàng)的時(shí)候，系統(tǒng)可以立刻告訴我，這一項(xiàng)填寫是否正確，而不是填完所有表單，提交之后，才告我我哪里需要修正。在Web端，即時(shí)校驗(yàn)反饋已經(jīng)非常常見(jiàn)，但是在移動(dòng)端，即時(shí)檢驗(yàn)尚需時(shí)日。主要原因是即時(shí)校驗(yàn)受限于網(wǎng)速，當(dāng)網(wǎng)絡(luò)環(huán)境不好的時(shí)候，校驗(yàn)也許需要很久，會(huì)影響正在進(jìn)行的下一項(xiàng)表單的填寫。

美國(guó)日本的移動(dòng)網(wǎng)速優(yōu)于中國(guó)，Twitter和Evernote的手機(jī)客戶端已經(jīng)采用了即時(shí)校驗(yàn)的方式來(lái)反饋問(wèn)題，在中國(guó)使用，體驗(yàn)還沒(méi)有特別流暢，也許國(guó)內(nèi)的移動(dòng)表單即時(shí)校驗(yàn)還需要等些時(shí)候。

其實(shí)除了清晰的視覺(jué)縱線、信息的分組、的減法、利用選擇代替輸入、標(biāo)簽及文字的排布方式、依靠明文確認(rèn)密碼、合理的鍵盤利用、校驗(yàn)的小秘密之外，還有很多很多秘籍沒(méi)有寫，比如清晰的步驟、用戶的語(yǔ)音、移動(dòng)端特殊的情景、合理的說(shuō)明、及時(shí)的反饋、錨點(diǎn)置頂、主動(dòng)做與次動(dòng)作的位置、給與建議、給予限制、適當(dāng)?shù)膸椭?、?biāo)簽頁(yè)設(shè)計(jì)、顏色的信息傳達(dá)、循序漸進(jìn)的表單，以后有機(jī)會(huì)再做分享。