学习网页制作之浅议 Web 表单设计

“输入框（ Input ）应当符合逻辑地划分为小组，这样大脑就可以很好的处理大堆区域间的关系。”– 《HTML权威指南》

Web 应用程序总是利用表单来处理数据录入和配置，但并不是所有的表单都保持一致。输入区域的对齐方式，各自的标签（label），操作方式，以及周围的视觉元素都会或多或少影响用户的行为。

表单布局

考虑到用户完成表单填写的时间应当尽可能的短，并且收集的数据都是用户所熟悉的（比如姓名、地址、付费信息等），垂直对齐的标签和输入框可以说是最佳的。每对标签和输入框垂直对齐给人一种两者接近的感觉，并且一致的左对齐减少了眼睛移动和处理时间。用户只需要往一个方向移动：下。

在这种布局中，推荐使用加粗的标签，这可以增加它们视觉比重，提高其显著性。如果不加粗的话，从用户的角度讲，标签和输入框的文字几乎就一样了。

如果一个表单上的数据并不为人熟悉或者在逻辑上分组有困难（比如一个地址的多个组成部分），左对齐的标签可以很容易的通览表单的信息。用户只需要上下看看左侧一栏标签就可以了，而不会被输入框打断思路。但这样一来，标签与其对应的输入框之间的距离通常会被更长的标签拉长，可能会影响填写表单的时间。用户必须左右来回的跳转目光来找到两个对应的标签和输入框。

于是产生了一种替代的方案，标签右对齐布局，使得标签和输入框之间的联系更紧密。然而结果是左边参差不齐的空白和标签让用户很难快速检索表单要填写的内容。在西方国家，人们习惯于从左至右的书写，所以这种右对齐的布局就给用户造成了阅读障碍。

借助可视化元素

由于“标签左对齐布局”的优点（方便检索并且减少垂直高度），尝试纠正它的主要缺点（标签和输入框的分离）就很诱惑人。

一个方案 就是增加背景色和分割线，不同的背景色产生了一列垂直的标签和一列垂直的输入框，每一组标签和输入框利用清晰的水平线分开。虽然这听上去不错，但是还是会存在问题。

对比之前的形态（用户主观的 视觉区分），这增加了15个视觉元素：中间线、一个个有背景色的单元格以及一条条的水平线。这些元素会转移用户的视线，让用户难以聚焦到一些重要的元素上，比如标签和输入框。 正如 Edward Tufte 指出的：“信息本身存在差异，必然产生感官上的不同。”换句话说，任何对布局无用的视觉元素都会不断地扰乱布局。当你试着浏览左侧的标签就可以发现，你的视线总是被打断，停下来想那些水平线、单元格和背景颜色。

当然这并不意味着放弃背景色和线条。它们对于划分相关区域信息还是很有效的。比如一条细水平线或者一个浅浅的背景色，都可以从视觉上组合相关数据。背景色和线条对于区分表单的主要操作按钮尤其有效。

主次操作

一个表单的主要操作（通常是“提交”或“保存”）需要一个比较强的视觉比重（在上面的例子里用了亮色调、粗字体、背景色等等）。这相当于给用户一个提示：您已/即将完成填写表单。

当一个表单有多个操作，比如“继续”和“返回”，那有必要减轻次要操作的视觉重量。这可以最小化用户潜在的操作错误的风险。

虽然以上内容可以更好的让你设计表单，但是组合布局、可视化元素以及内容，仍然需要经过用户的测试以及数据分析（完成度评估、错误报告等）。

更多的细节和例子在 Web Application Form Design Expanded。
JunChen 翻译自 LukeW's Functioning Form

LukeW 在他的 Web Application Form Design Expanded 一文中用到了两个图，用来说明如何合理区分表单逻辑区域以及主次操作。文章就不翻译了。看图更清楚。

优秀的表单设计会让用户有一种填写的冲动，并且能够最大限度的降低用户的出错率。

浏览网站时肯定遇到过这样的 Web 表单：一个包含 100 多个国家的下拉框（select）；一个有 31 个选项的日期下拉框；等等，经常使人饱受挫折。Web 表单除去文本信息（比如 label 和其他提示等）和提交按钮，还包括五种元素：下拉框（select）、单选按钮（radio）、复选框（checkbox）、输入框（input）和超链接。

下面以旅馆订房为例，来描述表单设计过程中合理选择表单元素的过程。

例子

在本文的例子当中，想从用户那里得到以下数据：

• 姓名
• 人数
• 旅馆名
• 房间类型（单人、双人）
• 信用卡类型

第一步：确定页面的主要目的

首先想想为什么要让用户去选择（使用 select）？是页面导航？还是收集信息？

作为导航的下拉框

使用下拉框来做导航、页面间的跳转可以节省很大一部分页面空间。并且在不改变视觉大小的情况下，增加信息量（选项的数量）。但是下拉框仍然是有不少局限的：

• 下拉框隐藏了选项；除非是高级用户或者在非用不可的情况下，他才会展开下拉框阅读，然后作决定；
• 超链接只需要点一下，而下拉框需要更多的操作；
• 良好设计过的超链接列表，比下拉框更容易阅读；
• 如果选项的数量巨大，用户必须拉动滚动条；

收集信息的下拉框

大部分情况下表单是被用来收集信息的。比如你向用户问一个问题，并且这个问题具有有限的答案（比如信用卡类型）。如何设计才能良好的呈现这些答案？并且减少用户的犯错几率？

第二步：解答 6 个问题

在选择用输入框还是下拉框之前，先解答以下 6 个问题：

1. 输入答案是否比选择答案更加自然？

个人信息，比如姓名、地址、生日等我们熟知的信息，使用输入的方式收集比使用选择的方式收集更加自然并且简单。对于姓名来说，也无法选择。本例中，姓名和人数就推荐使用输入框。

2. 答案是否容易输错？

容易输错的信息，就不能使用输入框来收集。比如本例中的旅馆名、房间类型，取而代之的可以使用超链接、单选按钮、复选框。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有