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

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

一、清晰的視覺縱線

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

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

反面的例子很多，比如下面兩個：

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

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

二、信息的分組

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

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

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

標(biāo)簽： 表單設(shè)計 移動應(yīng)用 產(chǎn)品設(shè)計 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。