一、表單輸入幫助信息

1、將輸入幫助信息放在輸入框中

優(yōu)點(diǎn)：簡潔
缺點(diǎn)：出現(xiàn)錯誤時不方便提示，獲取焦點(diǎn)后消失，內(nèi)容過長無法顯示

2、輸入框后方

優(yōu)點(diǎn)：方便查看

缺點(diǎn)：占用后方空間，長短不一破壞畫面的平衡感，內(nèi)容過長時顯示會出現(xiàn)異常

3、輸入框下方

優(yōu)點(diǎn)：保證了表單的整體結(jié)構(gòu)

缺點(diǎn)：增加了頁面的長度，有左標(biāo)簽時不太美觀

4、輸入框后方氣泡

優(yōu)點(diǎn)：光標(biāo)定位到輸入框后懸浮顯示，不占用頁面空間，保證了表單的干凈整潔誒

缺點(diǎn)：交互效果相對明顯，部分用戶可能不適應(yīng)這種模式

5、輸入框后方幫助氣泡

優(yōu)點(diǎn)：用戶可以控制信息的顯示，可以顯示較多內(nèi)容

缺點(diǎn)：幫助圖標(biāo)對頁面造成破壞，增加了操作路徑

二、表單驗(yàn)證錯誤提示類型

1、表單開始位置統(tǒng)一提示

優(yōu)點(diǎn)：不破壞表單內(nèi)部結(jié)構(gòu)，適用于填寫內(nèi)容很少的表單，用戶可以快速自己定位到響應(yīng)的輸入內(nèi)容

缺點(diǎn)：長表單不適用，多個內(nèi)容發(fā)生錯誤時不明確錯誤出現(xiàn)的位置

2、表單提交按鈕位置統(tǒng)一提示

類似于1，作為提交操作的即時反應(yīng)，提示信息放在提交按鈕附近，并配合相應(yīng)輸入內(nèi)容的錯誤顯示

3、輸入框下方跟隨提示

優(yōu)點(diǎn)：保證了頁面的整體平衡

缺點(diǎn)：出現(xiàn)錯誤信息時會出現(xiàn)頁面的抖動，當(dāng)輸入框有左標(biāo)簽時，這種顯示方式不美觀

4、懸浮氣泡提示

當(dāng)使用氣泡輸入提示信息時，錯誤信息也可顯示在氣泡中

5、輸入框右側(cè)

有左標(biāo)簽時，當(dāng)輸入框后方空間充足，錯誤信息較短時適用于此種方式

6、富文本框下方

富文本框?qū)捀叨紩容斎肟虼?，提示信息適合放在下方

三、總結(jié)

1、盡量簡化輸入或錯誤提示信息，不要過長，這種輔助或異常的信息過多容易使頁面失衡并且?guī)硪恍┊惓?/p>

2、表單默認(rèn)狀態(tài)下可以不顯示全部提示信息，當(dāng)用戶將輸入光標(biāo)定位到響應(yīng)輸入欄后動態(tài)顯示提示，并保證這個交互的優(yōu)美，不要顯得過于突兀

3、每種方式都會有他的適用范圍，在實(shí)際產(chǎn)品中結(jié)合不同的表單內(nèi)容可以使用不同的提示方式設(shè)計(jì)，確保每個頁面的美觀和實(shí)用性

4、交互展示