表单，主要是负责数据采集的功能，需要访问者自己去填写，如访问者的姓名、邮箱、性别、地址、留言建议、设置密码、管理个人账户等等。时下表单无处不在，成功的表单设计不仅能提高用户的满意度，更能收集更加精确的数据，相反失败的表单设计只会收集到错误杂乱的信息，可能会最终导致潜在用户的流失。
一、组织表单的内容，给用户一个友好的引导
首先要明确的告之用户填的是一个什么性质的表单以及填完后能做些什么？哪些问题是一定要问的？有没有别的途径可以获取用户的资料？大致表单的布局分为三种类型：纵向排列、逐步填写（多页显示）和左右布局。这三种表单的组织形式功能特点，通过不同的使用环境决定它们具体的样式。下面通过一些对应的实例我们来做些具体的分析：
根据Web惯例调查，卸载软件的界面常见组织结构，为纵向排列样式。一般顶部为明确填写表单的目的，再呈现表单的具体问题。在卸载类型的表单中，内容一定要精简，减少用户输入，尽量提供选择题，少问答题，没有必填项。要知道用户是不喜欢填写表单的，尤其是当用户卸载软件后也是没有太多的耐心来填写表单的。如图1的卸载表单纵向内容组织形式，顶部是致辞，明确的说出问这些问题的目的，下面是分组表单内容。这种纵向排版简洁填写的表单组织形式，更利于获取用户的反馈。
在一定情况下，很多问题需要按顺序回答，理解并组织好每个表单的情境能得到最佳答案，如果把表单用对话的形式展现，主题之间自然会出现间断，所以就会需要多个网页把对话变成若干有意义并容易理解的主题。如图2 ——图5 的填写表单多页的展现形式。把表单当成是与特定的人在对话，而不是与一堆数据输入框在对话，每个表单都用不同的情境问题与用户进行交流，这样的实际回答率会更高。
当表单想要搜集更多答案时，可以考虑在表单填完之后提出一些可选的问题，辅助获得更多的答案。表单的标签使用术语需要统一，简洁、单个词，这样的标签要更容易解释清楚。如图6的表单设计，使用左右布局的排版方式，左侧放上必填和重要的表单项，右侧辅助放上可供选择的表单，减少页面表单内容视觉的庞大性，整体界面内容居中排列这种方式也比较美观易读。
二、填写表单的反馈，给用户贴心的引导
为了提高表单的完成率和准确率，设计师会试图避免各种各样的分散因素，并且提供一个清晰明确、简单的web表单。这就是为什么任何视觉效果都需要非常适当地使用的原因。运用视觉手段去解决会出现这样的错误，减少用户的误解。当遇到用户提交数据有错误信息时肿么办？首先要让用户知道发生了错误，错在哪,以及如何纠正。
图7邮箱注册表单页，当用户提交错误信息或发生错误操作时，在其错误旁都会有醒目的红色视觉元素作为指导，很好的解决用户找不到错误在哪的窘态（关于提示错误的元素符号，在处理这块时可能还要考虑到色盲色弱用户群的一个需求，他们是看不出这种强烈的颜色提示的，但是有感叹号这样的提醒元素存在我想也能解决这种双向需求） 。当出现注册用户名相同时，这里用下拉框的样式提示，该地址都是以什么样的结构形式被人注册过，给用户提供想命名同样前置的用户名时后缀如何添加的一些建议性帮助，以及图8填写正确后给予的文字图标反馈。
图9和10的注册表单的两个错误提示样式，当输入成功提示会消失，输入错误或者输入不符合标准都会有相应的不同文字反馈，告知用户发生错误的原因，及时回车修改，避免用户在填完所有的信息后再反馈给用户。
三、创意表单的样式，给用户轻松愉悦的感受
输入框和标签的样式是需要根据整体界面风格去定义的，通过不同创意类型的展示，可以为你获得更多的浏览者。所以设计出一个好的创意来优化表单是一件多么重要的事。
表单的创意表现形式来源于整体网站的风格特色，和整体网站主视角相呼应，浏览起来也不会觉得突兀，整体联系性强。如图16 ArtFlavours首页的主视觉风格和图17ArtFlavours的表单样式，采用相同的处理手法，都运用布块纹理拼凑的方式，让用户对表单感觉更加的舒适，也能给访问者留下深刻的印象，与网站整体风格也很统一。
以上对表单做了些简短的归纳，从表单的布局、填写的交互反馈和创意表单的独特性三个方面做了些概述，希望本文能对大家做表单设计有所帮助.
---------------------------------------------------------------
设计师不再只是为互联网创造漂亮美观的图形那么简单了，作为一个WEB设计师，我们还需要考虑一些其他的问题，比如用户体验，算法，代码等等。如今用户体验设计越来越重要，对于WEB表单的设计尤其如此。WEB表单设计的目标是设计出一套让用户能够从填表到点击提交按钮的最简单的流程。这个过程中不需要太多的炫目效果，虽然jQuery的表单插件一直都很受欢迎。在这片文章中我们只关注于表单的用户体验和交互过程。这里的概念也能够有效的帮助你减少用户在填表过程中的挫折感。
1.保持醒目和简洁
我听过不计其数的用户抱怨注册表单需要太多的信息。如果你正在想办法增加注册用户数量，那么你必须保证你的表单尽可能的易于填写。这点同样适用于其他地方的数据输入。
根据项目的不同，用户需要填写的信息数量也有所不同。注册表格可能会要求用户输入用户名，电子邮件地址，然后两次输入密码，这样当然很合理并且是用户所期待的注册方式。但是也有特殊情况，看看WordPress的默认注册页面。
这里用户只需要填写用户名和电子邮件地址，之后系统会自动生成一个密码并发到你所填写的电子邮件地址当中，这样做减少了原始表格的数量，并且将恶意注册者挡在了门外。你不需要去邮箱点击激活链接，但是你必须在你的邮箱中取得新的登陆密码。
2.始终与用户的期待保持同步
用户们最讨厌的事情就是页面有出乎他们意料的跳转。你绝对希望你的表单行为保持自然，并且将额外的JavaScript代码减到最少，弹出气泡和Ajax都是很有用的东西。好用的表单不应该被划分成许多小的项目，用隔断将他们彼此分离，那不是好办法。
另一个我们经常犯的错误是错过了HTML的tabindex属性。这个属性从可用性角度来说真是棒极了，因为通过它用户不使用鼠标就能填写完整个表格。但是如果你没有保持tabindex属性的有序性，或者只在某些输入框中使用了这个属性，而另外一些没有使用，那么整个系统一定会出乱子。这一点适用于所有的注册表单，而且同样适用于其他的输入页面，特别是网上购物的信息输入页面。
3.保密性是最重要的
不论用户输入的是他们的信用卡号码还是电子邮件地址，你都应该将保证这些数据的安全放在第一位。用户信任你的网站和后端代码正确的收集了他们的信息并将之保存在一个安全的地方。
如果可能的话我建议在你的整个网站中都使用SSL认证，这不仅仅保护了用户的注册信息，用户浏览网站的整个过程都被HTTPS保护了。这可能会有点麻烦，但是有些WEB主机会辅助你安装这些功能。当然并不是每个网站都必须这么做，但是你只需要多费一点儿时间和精力就能保护用户数据的安全，你的用户会因此而觉得安全，你和用户之间也能建立起一种相互信任的纽带，何乐而不为呢？
另外，不要使用那些很容易被探测的信息。除非信息是完全非“个人”的，都需要使用POST数据类型。只有在URL结构能够从数据中获益的时候（比如说搜索页面中的search.php?q=my+search+terms）才使用Ajax的GET requests。
4.更大的输入框
我听过很多关于WEB表单输入框大小的争论。vBulletin，Joomla！和Drupal使用的都是相当小的输入框，大都是10px-12px的文字和很小的内边距。
Diigo的注册表单结构就很大气！你需要缓和不同输入元素之间的冲突。加粗的文字提示你哪些区域已经填写了，哪些区域还空着，当激活某一输入框时，它会变成淡蓝色，提示你光标现在所处的位置。
传统的Digg注册表单就是用很相似的方法来设计的。Twitter的注册表单同样都很大，你不会错过任何东西。他们不会吝啬于用大量白色的空间来突出输入区域。他们的标签系统也很独特，空的输入框中会有预先设置的占位文字，通过颜色的变换，你也可以清楚的将用户输入的文字和系统预设文字区分开来。
5.结论
现在的WEB设计出现了许多新的设计趋势。最新的CSS3正在越来越多的被设计师们所采用，表单设计也不例外的需要设计师们投入更多的关注和思考。
我希望这些用户体验背后的指导原则能够指引你创造更好的WEB表单。对于后端数据来说，即使是PHP这样简单的语言也能够很好的处理。但是通过一到两个星期的时间，你应该能创造出一套你自己的系统。网络开发者们，不论是前端还是后端，都应该尽力去理解这些设计原则和范例。
一、组织表单的内容，给用户一个友好的引导
首先要明确的告之用户填的是一个什么性质的表单以及填完后能做些什么？哪些问题是一定要问的？有没有别的途径可以获取用户的资料？大致表单的布局分为三种类型：纵向排列、逐步填写（多页显示）和左右布局。这三种表单的组织形式功能特点，通过不同的使用环境决定它们具体的样式。下面通过一些对应的实例我们来做些具体的分析：
根据Web惯例调查，卸载软件的界面常见组织结构，为纵向排列样式。一般顶部为明确填写表单的目的，再呈现表单的具体问题。在卸载类型的表单中，内容一定要精简，减少用户输入，尽量提供选择题，少问答题，没有必填项。要知道用户是不喜欢填写表单的，尤其是当用户卸载软件后也是没有太多的耐心来填写表单的。如图1的卸载表单纵向内容组织形式，顶部是致辞，明确的说出问这些问题的目的，下面是分组表单内容。这种纵向排版简洁填写的表单组织形式，更利于获取用户的反馈。
在一定情况下，很多问题需要按顺序回答，理解并组织好每个表单的情境能得到最佳答案，如果把表单用对话的形式展现，主题之间自然会出现间断，所以就会需要多个网页把对话变成若干有意义并容易理解的主题。如图2 ——图5 的填写表单多页的展现形式。把表单当成是与特定的人在对话，而不是与一堆数据输入框在对话，每个表单都用不同的情境问题与用户进行交流，这样的实际回答率会更高。
当表单想要搜集更多答案时，可以考虑在表单填完之后提出一些可选的问题，辅助获得更多的答案。表单的标签使用术语需要统一，简洁、单个词，这样的标签要更容易解释清楚。如图6的表单设计，使用左右布局的排版方式，左侧放上必填和重要的表单项，右侧辅助放上可供选择的表单，减少页面表单内容视觉的庞大性，整体界面内容居中排列这种方式也比较美观易读。
二、填写表单的反馈，给用户贴心的引导
为了提高表单的完成率和准确率，设计师会试图避免各种各样的分散因素，并且提供一个清晰明确、简单的web表单。这就是为什么任何视觉效果都需要非常适当地使用的原因。运用视觉手段去解决会出现这样的错误，减少用户的误解。当遇到用户提交数据有错误信息时肿么办？首先要让用户知道发生了错误，错在哪,以及如何纠正。
图7邮箱注册表单页，当用户提交错误信息或发生错误操作时，在其错误旁都会有醒目的红色视觉元素作为指导，很好的解决用户找不到错误在哪的窘态（关于提示错误的元素符号，在处理这块时可能还要考虑到色盲色弱用户群的一个需求，他们是看不出这种强烈的颜色提示的，但是有感叹号这样的提醒元素存在我想也能解决这种双向需求） 。当出现注册用户名相同时，这里用下拉框的样式提示，该地址都是以什么样的结构形式被人注册过，给用户提供想命名同样前置的用户名时后缀如何添加的一些建议性帮助，以及图8填写正确后给予的文字图标反馈。
图9和10的注册表单的两个错误提示样式，当输入成功提示会消失，输入错误或者输入不符合标准都会有相应的不同文字反馈，告知用户发生错误的原因，及时回车修改，避免用户在填完所有的信息后再反馈给用户。
三、创意表单的样式，给用户轻松愉悦的感受
输入框和标签的样式是需要根据整体界面风格去定义的，通过不同创意类型的展示，可以为你获得更多的浏览者。所以设计出一个好的创意来优化表单是一件多么重要的事。
表单的创意表现形式来源于整体网站的风格特色，和整体网站主视角相呼应，浏览起来也不会觉得突兀，整体联系性强。如图16 ArtFlavours首页的主视觉风格和图17ArtFlavours的表单样式，采用相同的处理手法，都运用布块纹理拼凑的方式，让用户对表单感觉更加的舒适，也能给访问者留下深刻的印象，与网站整体风格也很统一。
以上对表单做了些简短的归纳，从表单的布局、填写的交互反馈和创意表单的独特性三个方面做了些概述，希望本文能对大家做表单设计有所帮助.
---------------------------------------------------------------
设计师不再只是为互联网创造漂亮美观的图形那么简单了，作为一个WEB设计师，我们还需要考虑一些其他的问题，比如用户体验，算法，代码等等。如今用户体验设计越来越重要，对于WEB表单的设计尤其如此。WEB表单设计的目标是设计出一套让用户能够从填表到点击提交按钮的最简单的流程。这个过程中不需要太多的炫目效果，虽然jQuery的表单插件一直都很受欢迎。在这片文章中我们只关注于表单的用户体验和交互过程。这里的概念也能够有效的帮助你减少用户在填表过程中的挫折感。
1.保持醒目和简洁
我听过不计其数的用户抱怨注册表单需要太多的信息。如果你正在想办法增加注册用户数量，那么你必须保证你的表单尽可能的易于填写。这点同样适用于其他地方的数据输入。
根据项目的不同，用户需要填写的信息数量也有所不同。注册表格可能会要求用户输入用户名，电子邮件地址，然后两次输入密码，这样当然很合理并且是用户所期待的注册方式。但是也有特殊情况，看看WordPress的默认注册页面。
这里用户只需要填写用户名和电子邮件地址，之后系统会自动生成一个密码并发到你所填写的电子邮件地址当中，这样做减少了原始表格的数量，并且将恶意注册者挡在了门外。你不需要去邮箱点击激活链接，但是你必须在你的邮箱中取得新的登陆密码。
2.始终与用户的期待保持同步
用户们最讨厌的事情就是页面有出乎他们意料的跳转。你绝对希望你的表单行为保持自然，并且将额外的JavaScript代码减到最少，弹出气泡和Ajax都是很有用的东西。好用的表单不应该被划分成许多小的项目，用隔断将他们彼此分离，那不是好办法。
另一个我们经常犯的错误是错过了HTML的tabindex属性。这个属性从可用性角度来说真是棒极了，因为通过它用户不使用鼠标就能填写完整个表格。但是如果你没有保持tabindex属性的有序性，或者只在某些输入框中使用了这个属性，而另外一些没有使用，那么整个系统一定会出乱子。这一点适用于所有的注册表单，而且同样适用于其他的输入页面，特别是网上购物的信息输入页面。
3.保密性是最重要的
不论用户输入的是他们的信用卡号码还是电子邮件地址，你都应该将保证这些数据的安全放在第一位。用户信任你的网站和后端代码正确的收集了他们的信息并将之保存在一个安全的地方。
如果可能的话我建议在你的整个网站中都使用SSL认证，这不仅仅保护了用户的注册信息，用户浏览网站的整个过程都被HTTPS保护了。这可能会有点麻烦，但是有些WEB主机会辅助你安装这些功能。当然并不是每个网站都必须这么做，但是你只需要多费一点儿时间和精力就能保护用户数据的安全，你的用户会因此而觉得安全，你和用户之间也能建立起一种相互信任的纽带，何乐而不为呢？
另外，不要使用那些很容易被探测的信息。除非信息是完全非“个人”的，都需要使用POST数据类型。只有在URL结构能够从数据中获益的时候（比如说搜索页面中的search.php?q=my+search+terms）才使用Ajax的GET requests。
4.更大的输入框
我听过很多关于WEB表单输入框大小的争论。vBulletin，Joomla！和Drupal使用的都是相当小的输入框，大都是10px-12px的文字和很小的内边距。
Diigo的注册表单结构就很大气！你需要缓和不同输入元素之间的冲突。加粗的文字提示你哪些区域已经填写了，哪些区域还空着，当激活某一输入框时，它会变成淡蓝色，提示你光标现在所处的位置。
传统的Digg注册表单就是用很相似的方法来设计的。Twitter的注册表单同样都很大，你不会错过任何东西。他们不会吝啬于用大量白色的空间来突出输入区域。他们的标签系统也很独特，空的输入框中会有预先设置的占位文字，通过颜色的变换，你也可以清楚的将用户输入的文字和系统预设文字区分开来。
5.结论
现在的WEB设计出现了许多新的设计趋势。最新的CSS3正在越来越多的被设计师们所采用，表单设计也不例外的需要设计师们投入更多的关注和思考。
我希望这些用户体验背后的指导原则能够指引你创造更好的WEB表单。对于后端数据来说，即使是PHP这样简单的语言也能够很好的处理。但是通过一到两个星期的时间，你应该能创造出一套你自己的系统。网络开发者们，不论是前端还是后端，都应该尽力去理解这些设计原则和范例。
