旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實(shí)習(xí)/?A計(jì)劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 熱門文章 > UI設(shè)計(jì) > APP表單UI設(shè)計(jì)秘訣

APP表單UI設(shè)計(jì)秘訣

時(shí)間:2020-12-15來源:m.lb577.com點(diǎn)擊量:作者:Arya
時(shí)間:2020-12-15點(diǎn)擊量:作者:Arya

  一直想寫一篇文章,關(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ù)、要么語言程序化,要么視覺焦點(diǎn)跳躍,要么校驗(yàn)順序混亂,要么反饋不及時(shí),如此種種的問題,讓我很想認(rèn)真的總結(jié)一下,思考一下,為移動(dòng)應(yīng)用的表單設(shè)計(jì),提供一些個(gè)人力所能及的建議,希望更多地設(shè)計(jì)師能認(rèn)真思考移動(dòng)應(yīng)用表單的特殊性,能最大限度的提升表單設(shè)計(jì)的體驗(yàn),提升效率,提高滿意度。
 

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

  一、清晰的視覺縱線
 

APP表單UI設(shè)計(jì)秘訣
 

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

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

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

APP表單UI設(shè)計(jì)秘訣
 

  第一個(gè)反例比較常見,用戶輸入完用戶名和密碼之后,直接看到的操作按鈕是注冊(cè),而不是登錄,這種左右的布局方式,即便你用顏色區(qū)隔,也阻擋不了用戶的視線落到注冊(cè)上,于是簡單的眼動(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)過信息組織的,同一類的表單可以放在一起,當(dāng)表單太長的時(shí)候,可以拆分成不同的組,這樣用戶在填寫的時(shí)候,類似于一種任務(wù)拆解,可以一組一組的完成填寫。
 

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

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

  三、極致的減法
 

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

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

  四、利用選擇代替輸入
 

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

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

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

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

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

APP表單UI設(shè)計(jì)秘訣
 

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

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

APP表單UI設(shè)計(jì)秘訣
 

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

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

APP表單UI設(shè)計(jì)秘訣
 

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

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

APP表單UI設(shè)計(jì)秘訣
 

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

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

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

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

  其實(shí)除了輸入兩次密碼之外,還有這樣幾種辦法:1.最后一位明文顯示 2.全部明文顯示 4.默認(rèn)暗文,可選明文 5.默認(rèn)明文,可選暗文 6.對(duì)話框確認(rèn)密碼輸入正確。 通過小范圍的用戶調(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ù)字,就是說你輸入了 “0123”,會(huì)被算作是“123”這樣一個(gè)自然數(shù),如果是作為驗(yàn)證碼輸入框的,你還需要做一些前端或后端的處理,來補(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)
 

APP表單UI設(shè)計(jì)秘訣
 

  比如這個(gè)表單,就該按照1用戶名——>2密碼——>3手機(jī)號(hào)——>4郵箱——>5性別的順序依次校驗(yàn),用戶名格式不對(duì)、用 戶名重名、用戶名在黑名單里之類的問題,都會(huì)優(yōu)先提醒,如果用戶名沒有問題,才會(huì)去校驗(yà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)非常常見,但是在移動(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)表單的填寫。
 

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

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

預(yù)約申請(qǐng)免費(fèi)試聽課

填寫下面表單即可預(yù)約申請(qǐng)免費(fèi)試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會(huì)?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動(dòng)者教育科技有限公司版權(quán)所有
備案號(hào):京ICP備12034770號(hào)

?2007-2022/ m.lb577.com 北京漫動(dòng)者數(shù)字科技有限公司 備案號(hào): 京ICP備12034770號(hào) 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號(hào)

網(wǎng)站地圖