表单设计中的自动即时帮助

Fri, 15 May 2009 11:05:09 +0000

自动即时协助系统在最合适的时间、地点显示信息。例如，点击或用 Tab 键激活输入框，相关协助文字就出现在输入框旁边或下方。 Wufoo 网站采用了这种行为。

http://www.flickr.com/photos/rosenfeldmedia/2367268378
人们填写 Wufoo 网站输入框时，协助文字自动呈现。

为确保用户能预计协助文字的出现位置，这种方法需要有专门网页区域显示动态协助文字。以 Wufoo 网站为例，表单右侧满足了这种需要。其优点在于协助文字总是呈现在输入框右侧，而缺点是会与表单左侧输入框脱离。

Form Assembl 网站采用的自动即时协助系统不需要屏幕有专门区域显示协助文字，而是直接显示在相关输入框下方。其优点是协助文字与问题相邻，关联出错机会很小，缺点是协助文字会遮住其他输入框 .

http://www.flickr.com/photos/rosenfeldmedia/2366432243
Form Assembl 网站采用的另一种即时协助显示风格。

协助文字应尽可能具体，每个输入框通常都需要特定协助文字。不过有时候，最具体的协助文字就是一组相关输入框。

如果协助文字更适用于一组相关输入框、而不是一个输入框，自动即时协助同样有用。例如， SnapTax 网络应用工具自动高亮显示每组相关资料：身份证，配偶，地址等等。

http://www.flickr.com/photos/rosenfeldmedia/2367268468
SnapTax 网站自动显示相关输入框组的协助文字。

值得注意的上述所有例子都采用了强大视觉元素将输入框和对应协助文字联系在一起。 Wufoo 网站采用两个对齐矩形。 Form Assembl 网站采用粗体黄色和箭头。 SnapTax 网站背景颜色相同。

这种自动协助系统有一个潜在缺点，只有开始填表时，人们才知道是否有帮助文字。因此，需要协助的人会觉得失望，甚至不愿尝试。

有种方法弥补这个缺点，即输入框内显示协助文字。这种方法和自动即时协助文字完全相反，协助文字呈现在访问输入框之前，离开输入框之后就不再出现。因为能立刻看到协助文字，人们一看到表单就知道是否有帮助文字。

但只有一种协助文字适合输入框中显示，即总结推荐回答方式的协助文字。解释问题是什么、为什么问这些问题、否必须回答的协助文字不应以这种形式呈现。邮政编码填写方式，答案已包含在输入框中。而对于为什么要提供邮政编码的原因呈现在邻近输入框的地方。

http://www.flickr.com/photos/rosenfeldmedia/2367268488
LinkedIn 网站采用带帮助文字的输入框。

适用于输入框内标签的相同附加说明也适用于输入框内帮助文字：

* 填写表单时，确保协助文字消失，确保协助文字不会成为答案的一部分。
* 一旦开始填写表单，协助文字就会消失，人们失去任何协助。
* 复杂输入要谨慎使用这种方法，协助总是可见有助于复杂输入。
* 确保人们能区别要填入输入框的答案和输入框中帮助文字。 Linkedin 网站，协助文字是灰色，并包括前缀 “ eg:

自动即时协助系统不会预先显示协助文字，最适合用于人们可以回答、但不清楚如何回答的问题。如果每个输入框都需要特定协助文字，可以考虑采用协助显示与输入框毗邻区域的方法。如果说明文字用于输入框组，可以考虑采用在可预见位置始终显示协助文本的方法。

Tags - 表单设计 , 即时帮助

让你的网站整体全灰

Thu, 07 May 2009 05:21:17 +0000

代码一：

html头部

代码二：
CSS里插入
body{
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
Tags - 网页设计 , 灰度

网路藏经阁

表单设计中的自动即时帮助

让你的网站整体全灰