在PC端后臺(tái)設(shè)計(jì)中，我們會(huì)經(jīng)常見到各種表單設(shè)計(jì)，包括輸入框、單選、多選等各種不同類別的表單。而對(duì)于App而言，除特定的App外，注冊(cè)會(huì)員、身份認(rèn)證的功能是比較常見的表單設(shè)計(jì)。雖然不同于PC端表單設(shè)計(jì)的復(fù)雜性，在App中，仍需要考慮常見的交互問題，包括表單輸入操作、輸入內(nèi)容的限制、表單提交以及修改保存等。

目錄：

1、表單輸入通用規(guī)則

2、輸入框提示

3、表單樣式

4、輸入框限制

5、異常情況處理

1】輸入通用規(guī)則：

1、顯示標(biāo)題、輸入框、輸入框提示語(yǔ)、是否為必填項(xiàng)

2、用戶獲取焦點(diǎn)，輸入內(nèi)容后隱藏默認(rèn)文案，顯示清除圖標(biāo)

3、用戶已輸入內(nèi)容，重新獲取焦點(diǎn)，修改，顯示清除圖標(biāo)，不自動(dòng)清除已輸入內(nèi)容

4、用戶已輸入內(nèi)容，失去焦點(diǎn)，校驗(yàn)輸入框內(nèi)容，校驗(yàn)失敗，顯示對(duì)應(yīng)的提示語(yǔ)，提示語(yǔ)顯示在文本框下方，自動(dòng)調(diào)整文本框上下間距。

5、清空文本框，顯示默認(rèn)文案，隱藏清除圖標(biāo)

6、已校驗(yàn)失敗情況，文本框再次獲取焦點(diǎn)輸入任意內(nèi)容，隱藏提示語(yǔ)，失去焦點(diǎn)再次校驗(yàn)（同4）

7、獲取焦點(diǎn)，彈出輸入鍵盤遮擋了輸入框內(nèi)容，頁(yè)面自動(dòng)上移

輸入框輸入交互

2】輸入框提示方式：

1、提示語(yǔ)在輸入框下方顯示

2、toast提示

輸入框校驗(yàn)錯(cuò)誤提示

3】輸入框樣式選擇：使用輸入框或長(zhǎng)下劃線

①：輸入框+輸入提示語(yǔ)：默認(rèn)顯示輸入框提示語(yǔ)，輸入完成后直接顯示輸入的內(nèi)容

（圖左?）適應(yīng)于表單項(xiàng)內(nèi)容差別明顯，表單項(xiàng)內(nèi)容意義相近

（圖右?）用戶輸入內(nèi)容后查看時(shí)，會(huì)對(duì)輸入的內(nèi)容產(chǎn)生歧義

輸入框樣式1

②：標(biāo)題+輸入框+輸入提示語(yǔ)：

默認(rèn)輸入標(biāo)題、輸入框、輸入提示語(yǔ)；輸入框和輸入標(biāo)題一行顯示：

（圖左?）適應(yīng)輸入框標(biāo)題字?jǐn)?shù)相近（1-2字以內(nèi)）且輸入框內(nèi)容限制字?jǐn)?shù)能一行顯示完整

（圖右?）輸入框標(biāo)題文字差別會(huì)影響頁(yè)面布局的整齊性

輸入框樣式2

③：標(biāo)題+輸入框+輸入提示語(yǔ)：

默認(rèn)輸入標(biāo)題、輸入框、輸入提示語(yǔ)；

（圖左?）標(biāo)題和輸入框一行顯示：手機(jī)一屏高度可容納的表單項(xiàng)少，易讀性不強(qiáng)

（圖右?）標(biāo)題和輸入框分行顯示：手機(jī)一屏高度可容納的表單項(xiàng)少，易讀性較強(qiáng)

輸入框樣式3

4】輸入框輸入限制：

1、 字符限制：中英文、特殊字符、數(shù)字、emoji等

2、字?jǐn)?shù)限制：?jiǎn)涡休斎?5-20字

4、輸入異常提示語(yǔ)顯示文案

5、是否是必填項(xiàng)

6、多行文本注明是否支持用戶換行

5】異常狀態(tài)：

1、表單頁(yè)返回確認(rèn)彈窗

2、提交按鈕校驗(yàn)

3、考慮當(dāng)前頁(yè)面異常狀態(tài)

①殺掉進(jìn)程，不保存當(dāng)前編輯的信息，此前保存過的信息不更改。

②退出重新登錄，登錄同一個(gè)賬號(hào)，顯示已保存信息可繼續(xù)編輯。登錄其他賬號(hào)，不顯示

③在本機(jī)保存后切換其他設(shè)備，不顯示

④點(diǎn)擊保留不需要校驗(yàn)合法性，提交時(shí)才校驗(yàn)