手機(jī)APP表單設(shè)計(jì)一直都是大部分APP當(dāng)中一項(xiàng)必不可少的設(shè)計(jì)UI組件。如果涉及到SAAS項(xiàng)目、管理類的APP或者是問卷類的APP產(chǎn)品，主打的就是APP表單設(shè)計(jì)。

最常見的無非就是APP登錄注冊(cè)界面啦。

之前25學(xué)堂分享了

1、APP設(shè)計(jì)必修課：如何設(shè)計(jì)出規(guī)范的移動(dòng)表單組件

2、APP表單設(shè)計(jì)技巧分享以及移動(dòng)表單設(shè)計(jì)界面賞析

3、一種新穎的APP表單交互設(shè)計(jì)模式優(yōu)缺點(diǎn)分析

今天學(xué)堂君繼續(xù)跟大家分享手機(jī)APP表單設(shè)計(jì)的8大技巧與16項(xiàng)注意點(diǎn)。可以說是非常干的手機(jī)表單設(shè)計(jì)經(jīng)驗(yàn)之談。值得大家采納。

1、進(jìn)入表單填寫頁(yè)面時(shí)，可以把輸入焦點(diǎn)自動(dòng)放入第一個(gè)輸入項(xiàng)，同時(shí)彈出輸入鍵盤，讓用戶少點(diǎn)擊一步。隨著表單項(xiàng)往下一個(gè)個(gè)填的時(shí)候，已填寫的表單項(xiàng)要自動(dòng)往上移，確保焦點(diǎn)所在的輸入項(xiàng)的輸入框一定不會(huì)被輸入鍵盤擋住。

手機(jī)APP表單設(shè)計(jì)的實(shí)際案例：

注意幾點(diǎn)細(xì)節(jié)：

1）手機(jī)號(hào)碼3 4 4分開，方便用戶閱讀；

2）輸入郵箱時(shí)，提供后綴選擇，減少用戶輸入；

3）輸入地點(diǎn)，提供當(dāng)前位置和熱點(diǎn)城市供用戶選擇；

4）焦點(diǎn)在輸入框內(nèi)且框內(nèi)有內(nèi)容的時(shí)候，輸入框右側(cè)提供刪除按鈕，可一鍵刪除框內(nèi)所有內(nèi)容；

2、移動(dòng)做好匹配和識(shí)別提示

輸入鍵盤自動(dòng)根據(jù)輸入類型匹配，比如輸入電話號(hào)碼，那么焦點(diǎn)移入該輸入框時(shí)自動(dòng)把鍵盤切換為數(shù)字鍵盤，以減少用戶手動(dòng)操作次數(shù)；在填寫表單的非最后一項(xiàng)時(shí)，點(diǎn)擊輸入鍵盤右下角的return、換行時(shí)，可以自行切換到下一個(gè)輸入項(xiàng)。

手機(jī)APP表單設(shè)計(jì)的實(shí)際案例：

比如IOS原生通訊錄添加新聯(lián)系人時(shí)，點(diǎn)擊鍵盤右下角的return和換行都會(huì)自動(dòng)切換到下一輸入項(xiàng)。

3、盡量減少頁(yè)面的跳轉(zhuǎn)

能在一個(gè)頁(yè)面完成的盡量不要再跳轉(zhuǎn)新頁(yè)面；如果編輯的時(shí)候跳轉(zhuǎn)新頁(yè)面編輯，那一定要在編輯前的頁(yè)面可以看到設(shè)置值。下圖的兩種性別設(shè)置方法，個(gè)人更喜好第一種，因?yàn)榈谝环N減少了頁(yè)面的跳轉(zhuǎn)，降低了用戶的認(rèn)知。

手機(jī)APP表單設(shè)計(jì)的實(shí)際案例;

4、二次確認(rèn)的必不可少

表單填到一半，點(diǎn)擊返回或退出最好能有二次對(duì)話框確認(rèn)。鍵盤輸入始終是移動(dòng)端的痛點(diǎn)之一，好不容易才完成幾項(xiàng)內(nèi)容的填寫，不小心點(diǎn)了后退或退出就白忙活了，加上使用環(huán)境的影響(比如在公交車上、地鐵上)，誤操作概率更大，所以如果表單填到一半退出，一定要二次對(duì)話框確認(rèn)，如果什么都沒填退出，則不需要二次確認(rèn)了。

最后，附上手機(jī)APP表單設(shè)計(jì)的8大技巧，懇請(qǐng)大家好好記住。當(dāng)我們進(jìn)行手機(jī)APP表單UI界面設(shè)計(jì)的時(shí)候，可以參照這些去弄。

八個(gè)手機(jī)APP表單設(shè)計(jì)技巧：

1、表單分組

2、設(shè)置默認(rèn)選項(xiàng)

?3、給用戶的格式要求

?4、給出錯(cuò)誤提示

?5、輸入焦點(diǎn)和鍵盤

?6、做好匹配和識(shí)別

?7、盡量減少頁(yè)面的跳轉(zhuǎn)

?8、二次確認(rèn)