移動(dòng)端APP上如何進(jìn)行表單上的UI步驟條設(shè)計(jì)

當(dāng)在移動(dòng)端表單有多個(gè)頁面切換時(shí)，步驟條是不不可少的，步驟條可以通過指示用戶正在進(jìn)行的步驟和剩余的步驟數(shù)來讓用戶了解他們的進(jìn)度，可以提升產(chǎn)品用戶體驗(yàn)感。但由于屏幕空間有限，在移動(dòng)表單上顯示步驟條是一項(xiàng)挑戰(zhàn)。在桌面表單上為移動(dòng)表單使用相同的步驟條會(huì)導(dǎo)致可讀性和可見性問題。

線性對(duì)比和徑向步的步驟條
線性步驟條主要適用于桌面的表單，但不適用于移動(dòng)表單。當(dāng)您在移動(dòng)表單上使用線性步驟條時(shí)，會(huì)降低步驟標(biāo)題的可讀性和進(jìn)度跟蹤的可見性。
強(qiáng)制步驟標(biāo)題適合狹窄的空間會(huì)導(dǎo)致較小的文本大小，您的用戶將難以閱讀。不僅如此，進(jìn)度的可見性也不太清晰，因?yàn)樗淮物@示了太多的文本和數(shù)字。這會(huì)產(chǎn)生視覺噪音，使用戶更難區(qū)分他們當(dāng)前的步驟。在您的移動(dòng)表單上使用徑向步驟條，因?yàn)樗鼤?huì)給您的用戶提供更清晰的進(jìn)度跟蹤和更好的可讀性。您的用戶一眼就能知道他們?cè)谀膫€(gè)步進(jìn)，因?yàn)閺较虿竭M(jìn)器為大步進(jìn)標(biāo)題提供了足夠的空間。它一次顯示一個(gè)步驟，使用戶可以專注于當(dāng)前步驟。它還提供了足夠的空間來指示下一步是什么。
用戶將能夠更快地跟蹤他們的進(jìn)度，因?yàn)樗麄冃枰俚难劬ψ⒁晛頀呙璨襟E條。掃描徑向步進(jìn)器只需要他們注視固定區(qū)域。視線掃描線性步驟條需要他們至少注視4次，這是依據(jù)人們的視線瀏覽路徑習(xí)慣得來的，更少的注視使他們能夠更快地處理他們的進(jìn)步，從而鼓勵(lì)表格的完成。
可見性+可讀性是體驗(yàn)關(guān)鍵
當(dāng)用戶在移動(dòng)設(shè)備上填寫多頁表單時(shí)，他們需要知道他們正處于的步驟和當(dāng)前進(jìn)度，所以步驟條的可見性和可讀性是體驗(yàn)設(shè)計(jì)關(guān)鍵，當(dāng)步驟標(biāo)題和進(jìn)度的跟蹤清晰可見時(shí)，表單的完成概率就會(huì)增強(qiáng)，反之失敗率會(huì)增大，被放棄的機(jī)會(huì)就會(huì)增加。