常见的Web表单帮助和错误提示设计

一、表单输入帮助信息

1、将输入帮助信息放在输入框中

优点：简洁
缺点：出现错误时不方便提示，获取焦点后消失，内容过长无法显示

2、输入框后方

优点：方便查看

缺点：占用后方空间，长短不一破坏画面的平衡感，内容过长时显示会出现异常

3、输入框下方

优点：保证了表单的整体结构

缺点：增加了页面的长度，有左标签时不太美观

4、输入框后方气泡

优点：光标定位到输入框后悬浮显示，不占用页面空间，保证了表单的干净整洁诶

缺点：交互效果相对明显，部分用户可能不适应这种模式

5、输入框后方帮助气泡

优点：用户可以控制信息的显示，可以显示较多内容

缺点：帮助图标对页面造成破坏，增加了操作路径

二、表单验证错误提示类型

1、表单开始位置统一提示

优点：不破坏表单内部结构，适用于填写内容很少的表单，用户可以快速自己定位到响应的输入内容

缺点：长表单不适用，多个内容发生错误时不明确错误出现的位置

2、表单提交按钮位置统一提示

类似于1，作为提交操作的即时反应，提示信息放在提交按钮附近，并配合相应输入内容的错误显示

3、输入框下方跟随提示

优点：保证了页面的整体平衡

缺点：出现错误信息时会出现页面的抖动，当输入框有左标签时，这种显示方式不美观

4、悬浮气泡提示

当使用气泡输入提示信息时，错误信息也可显示在气泡中

5、输入框右侧

有左标签时，当输入框后方空间充足，错误信息较短时适用于此种方式

6、富文本框下方

富文本框宽高都会比输入框大，提示信息适合放在下方

三、总结

1、尽量简化输入或错误提示信息，不要过长，这种辅助或异常的信息过多容易使页面失衡并且带来一些异常

2、表单默认状态下可以不显示全部提示信息，当用户将输入光标定位到响应输入栏后动态显示提示，并保证这个交互的优美，不要显得过于突兀

3、每种方式都会有他的适用范围，在实际产品中结合不同的表单内容可以使用不同的提示方式设计，确保每个页面的美观和实用性

4、交互展示