水平表单的错误消息方式

垂直方向的表单,错误消息有很多种呈现方式,放在输入框后面,下面,或上面都挺好, 因为垂直表单本身可用空间较大,而且向下或向右挤也不是什么问题,布局也没什么影响。

但是对于水平方向向右一字排开的表单(自动适应可用宽度,不够则自动折行),搜索表单 比较常用,这种表单会有数个搜索输入框或选项,如图:

[http://farm6.static.flickr.com/5202/5209097632_a2bddacb9f_b.jpg]

这种表单,错误消息无论放在上、下、左、右,都会影响到表单的布局,而悬浮消息 也可能会遮挡住其他的输入框。那这样的表单,错误消息应该如何更好的呈现呢?

我想到一种,即“双重视觉强调”讲的:在表单上/下方给出整体的的错误信息,但输入框 本身,只给出警戒色的边框进行提醒。

[http://farm5.static.flickr.com/4091/5208505527_1a8dd70502_b.jpg]

当用户鼠标悬浮在出错输入框上,或者出错输入框获得焦点时,上/下面的错误信息框 自动高亮当前输入框对应的错误消息。

这种表单本身不会很多选项导致需要翻页,所以放在上面是没有问题的。如果真的需要 很多选项,那就要考虑换成垂直表单了。

高亮而不是更新消息内容,是为了防止消息框高度发生变化,导致表单本身上下跳跃移动; 当然也可以将消息框放在下面,不过直觉上,错误消息放在上面似乎更靠谱。

上面是个人观点,大家可以各抒己见。

Help
[count]gg 跳转到第 [count] 行,默认第 1 行。
[count]G 跳转到第 [count] 行,默认最后一行。
[count]j 向下跳转 [count] 行,默认跳转一行。
[count]k 向上跳转 [count] 行,默认跳转一行。
/ 开始搜索。按 <Esc> 退出。
gh 跳转到首页。
gb 跳转到博客首页。
gw 跳转到 Wiki 首页。
gt 跳转到我的 Twitter Profile 页。
gp 跳转到我的 Github Profile 页。
? 打开帮助。按 <Esc> 退出。