第70页

《Web表单设计：点石成金的艺术》的读书小记（二）
原文地址：http://blog.sina.com.cn/s/blog_633a026d0100pq9h.html

这篇小记是关于表单元素方面的，这本书详细介绍了表单每个元素的不同类型，并分析了每种类型在哪种条件下使用会使表单拥有更好的体验，以及每种元素应有怎样的设计考虑。这部分的好多内容和我们以前学的交互理论有一定的关系，很多道理我们都应该已经明白，相对来说，还是第一部分的价值更大一点。

 
（一）标签（这部分很有价值）

标签有四种形式：顶对齐标签、左对齐标签、右对齐标签和输入框内标签。设计建议：如果要减少填写时间，可采用顶对齐标签；如果既要减少时间，又要缩小垂直空间，可采用右对齐标签；如果要求人们仔细浏览表单标签（支付账单），知道哪些问题是必填项哪些是选填项，可用左对齐标签；如果屏幕空间极度有限，表单短，可采用输入框内标签。

1. 顶对齐的优点：标签和相关输入框相邻；用户能快速填写；缺点：垂直空间增加



顶对齐眼部跟踪数据图如下：





2. 左对齐的优点：标签容易浏览；垂直空间减少；缺点：标签和相关输入框相邻间距增大



左对齐的眼部跟踪数据如下：



3. 右对齐的优点：标签和相关输入框相邻；垂直空间减少；缺点：标签的可读性降低



右对齐的眼动跟踪数据图如下：




4. 输入框内的标签：对于人们回答问题时需要参考标签（因为问题多或陌生或易忘记）的，不适合使用这种输入框内的标签方式。

 
（二）输入框

输入框类型：文本框、单选钮、复选框、下拉菜单框、列表框、按钮。

必填项和选填项的识别问题：

应标识哪些选项？

为了减少表单的信息量，既可以标识必填项，也可以标识选填项。

应标识在哪个位置？

标签旁的标识能指引人们迅速浏览表格，并判断出必填项或选填项；但标识器和输入框对齐会导致难以浏览和判断。

 
（三）动作（这部分的实践是我们在平时已经掌握的，只是主动作这个名词我是初次接触）

主动作：完成表单填写是每个人的主要目标，“提交、保存或继续”等动作是用来完成表单填写的，与主要目标相符合，因此被称为主动作

次动作：诸如“取消、重置或返回”等动作与主目标相悖，所以被称为次动作

设计建议:提交和关闭按钮左对齐排列，并与上方输入框和标签对齐,同时，主动作和此动作在视觉设计上应加以区别，能提高人们填写表单的效率。

 
（四）帮助文字（图例在以后的设计中应该会有很大的参考价值）

1. 自动即时帮助





1.1 人们填写输入框时，右侧自动出现（对齐矩形）


1.2 黄色背景和箭头



1.3 相同的背景颜色



1.4 输入框内置帮助文字

2. 用户激活的即时帮助



2.1 点击问号，标签下方出现帮助文字



2.2 点击标签，出现小窗口帮助文字

3. 用户激活的区域帮助，这个表单使用的不是很多，所以就不涉及了。

 
（五）错误与成功（和交互设计理论的错误反馈有点类似）

首先，要有显著消息表明发生错误，告诉用户表单已经出错，这个消息要与表单其他信息区别开来：采用对比色（红色），醒目的视觉元素（警示图标）、不同背景和突出位置（顶部）。其次，要为解决错误指明道路，告诉用户哪个地方填错了，为什么填错了，应该怎么填。例如：错误的输入框和标签应明显突出，帮助文字能指导怎么改正错误。

成功，完成表单之后，网页要提供什么样的信息，这应该和网站具体的目标和用户任务有关。所以也不再赘述了，本书的成功这部分有点泛泛，不适合设计实践。