网页表单设计更加完技巧

　　现在的网站大部分都涉及到注册、留言等信息的交互，这就意味着网站需要设计表单。网页表单设计的时候，一是要便捷，二是要严谨，让用户快速填写的同时也要剔除不必要的信息，起到更觉的作用。如何让网页表单设计更加完美?技巧有很多。

　　首先我们来说说表单都包含哪些元素：

　　标签：告诉用户表单问题是什么?

　　输入框：供给用户填写答案信息;

　　动作：用户提交表单，即用户点击一个按钮或链接，执行一个操作;

　　帮助文字：为如何填写表单提供帮助;

　　输入反馈：针对用户输入给出反馈，输入正确还是错误;

　　然后再就是提高网页表单实用性的一些技巧：

　　一、信息内容的合理组织

　　考虑用户填写表单的目的，哪些表单需要填写，去掉没必要的表单项，确定完表单内容。如何组织起来呢?表单项并不是一个个从上到下无序罗列，而是根据表单内容，按照一定的逻辑，经过组织，分成不同的内容组，不同的主题。同时各个逻辑组和同一个主题的表单项，也是按照逻辑顺序或者用户熟悉的模式顺序，使用户浏览和填写自如。如果表单过长时，也可拆解成不同网页，类似于任务拆解，让用户一步步填写。

　　二、简化表单 突出重点

　　根据用户使用数据，适当将使用频次不高、或者提供给专业用户的高级表单项隐藏起来，保持表单的简洁，让绝大多数用户快速完成，避免大量的表单给用户的焦虑，而又满足了小众用户的需求。

　　三、清晰的浏览线

　　思考如何设计表单结构和路径时，需要有个基本原则：由始至终提供清晰的浏览线。采用眼动仪实验即可检验用户的浏览线。如标签的对齐方式、输入框的布局等都影响着用户的浏览线。当提供了垂直单一路径，使用户减少注意力分散，可以迅速对问题作出回答，完成任务所花时间少。

　　四、考虑用户场景 保证主流程顺畅

　　在设计网页表单时，定义了清晰的线性步骤，但很少真正实现。考虑用户场景，保证主流程不要中断，将导致人们放弃填写的元素解决。

　　五、选择合适的标签对齐方式

　　“输入框标签应该是顶对齐、右对齐、左对齐还是输入框内标签?”是我们在设计表单时常见的问题。顶部标签方式，填表时间短。但如果尽量减少垂直面积，可以考虑右对齐方式。如果希望用户填表时认真浏览标签，了解仔细考虑表单的每个输入框时，可以采用左对齐方式。

　　六、帮助文字

　　为了用户快地填写表单，一般在难以理解的表单项增加帮助信息，引导用户成功填表。帮助信息，提示用户应该如何填写，常见的帮助，一般在标签或者输入框旁提供帮助文字，交互方式也有一直展现(即一直出现在输入框右侧、下方或输入框内)、即时帮助(即输入框时，帮助文字自动出现)、用户的即时帮助(即帮助信息默认不显示、用户鼠标悬浮触发帮助图标来显示帮助)、用户的区域帮助(将表单所有的帮助信息统一放在一个位置)等多种方式。其实可以考虑更多的方式来更好地帮助用户，例如经常见到的信用卡有效期填写，当用户输入框时，右侧出现可视化的帮助信息，更简洁直观，更好理解。

　　七、即时反馈验证

　　虽然设计表单时，保证表单的内容结构清晰，提供有意义的输入帮助，但总有些答案不止一个。此时，直接反馈有助于再次确保人们的回答有效，提供即时校验。即时验证分为多类反馈：确认输入合适、建议有效回答、核对输入信息，通过实时更新设计以帮助用户控制在必要的限制范围内。这类反馈通常发生在用户在输入框开始、继续输入或者停止输入的时候。

　　如在设置密码时，要求用户输入字符数有限制、字符类型有限制的密码，利用即时验证，不仅告诉用户输入的密码是否有效，是否合格，而不是填完所有表单，提交之后，才告诉密码需要修改，同时还能说明密码的安全程度，采用高度可视化方式让用户衡量密码质量。

　　直接反馈不仅限于确认所提供的答案，还能提供输入建议。用户在搜索时，搜索框能够在输入过程中自动补全、提供相关联的搜索建议，既可以避免用户输入出错，又可以节约用户的拼写时间(这一点在手机端更加需要)。

　　以上就是网页表单设计的一些技巧，记住，要站在用户的角度设计表单，便捷、易操作，将会帮助网站留下更多的用户。金色方向网页设计:http://www.h***