一、表单概述

表单，在网页中的作用不可小视，主要负责数据采集的功能，比如你可以采集访问者的名字和e－mail地址、调查表、留言簿等等。

1、表单的组成

一个表单有三个基本组成部分：表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。为了顾及不同的网页设计工具，本文只讲述代码的设计，不具体讲述操作方法，下面就是表单的HTML代码设计要点：

1.1表单标签＜form＞＜/form＞

1、尽量让表单一目了然

用户浏览网站的时候，通常会快速扫视来获取信息，看看网站内容和设计是否对他们的胃口或者符合需求，再决定要如何应对、交互。表单也是一样的道理。一目了然的表单能让用户立刻知道他们需要填写多少信息，以及如何提交表单。

更多平面设计知识，请咨询华南平面设计学校。

2、考虑使用浮动的提示文本

对于是否要在表单的输入框中加入提示文本有很多争论，其中主要的争论围绕在一点上：当用户点击输入框，光标出现准备输入的时候，其中的提示文本并没有自动消失，而需要手动删除之后再才能输入。这就非常尴尬了。

3、使用表单格式掩码

格式掩码能够提醒用户输入的内容的格式，字段的长短大小，对于表单的可用性有明显提升。在用户激活输入框的时候，格式掩码会出现，它会帮助用户格式化输入信息，避免提交的时候出错。格式掩码常见于数字输入的时候。

4、把表单设计得易于输入

你无法确知用户使用的是手机还是电脑在浏览你的网页，输入你的表单，但是它应该对于各种输入设备都足够友好才行。考虑到你的表单可能会是不同类型的键盘输入的，所以你应该根据表单字段属性和检测到的键盘类型，进行适配。

5、选择垂直单列布局

对于用户而言，垂直单列的布局比起多列的布局更容易使用。当用户浏览的时候，只需要向下浏览即可，不用来回翻看，也可以很好的避免填写过程中的遗漏。

6、控制输入内容

尽量使用浏览器的记忆功能和Cookie，调用数据将表单中常见的字段预先填充进去。没有什么比打开表单其中的多数字段已经自动填写进去，更让人兴奋的了。

7、让表单短而美

当你设计表单的时候，总想从用户那儿尽可能多的获取信息，一定要克制住这个冲动!

只在表单中呈现重要信息，让用户尽可能少的填写。如果稍后需要提供更多的信息，可以在其他的地方诸如电子邮件中向用户获取信息。当用户已经完成注册之后，你们后续推送信息、相互沟通、获取信息的机会更多了。

尽量只保留必要的字段供用户填写，不要提供冗余的选项，让表单小而美。

网络侧表格设计指南

在这种情况下，设计师会面临很多挑战。例如:将设计与现有的前端框架相匹配，或者与破坏布局的“不舒服”的数据作斗争。我们将通过以下步骤解决这些问题:系统化需求、原子化和定义交互。

所以，你已经采访了你的目标受众。现在是时候将他们的需求和要求拼凑起来，并将其转化为对设计有用的东西。例如，一个用户说，“我需要看到我的数据如何影响应用程序的其他部分。”或者当你看到另一个人在使用软件时，你注意到他只使用快捷方式，根本不碰鼠标。这是什么意思？第一个用户的话是关于输入验证和提示的。您需要考虑将警报或帮助信息附加到表格上，或者开发一个有意义的颜色系统。这取决于领域和心智模型。观察第二个用户的工作可能是你需要设计键盘可设置的快捷键，你可能需要考虑比“CmdC”和“CmdV”更深层次的快捷键。

这样，你就有了一系列的需求和愿望。开放式问题有助于发现真正的需求，过滤掉突发奇想。比如“什么能帮助你更快地工作？这样如何提高你的工作效率？做不到XX会改变什么？”

这时候就需要一个功能框架了。如下图

任何表的最小构建块都是一个单元，由行和列组合而成，具有不同于其他单元的特定特征。最后我们用表格的重要补充作为顶栏，键盘命令，错误处理等。

简而言之，建立一个复杂的表格，收集并区分用户需求的优先级。考虑非表格解决方案，如图表。

画一个树形图，把所有需要的功能系统化。

原子化就是先设计小的UI组件，然后组装更大的。我们会逐渐从字体、颜色等基本粒子转移到标题或栏目等大模式。

这些部分可以由设计系统或UI框架来定义。如果为现有产品创建表格，请检查调色板、字体和图标是否符合表格的需要。

当表格原子设计就绪后，我们可以继续设计不同类型的单元格。首先，提前考虑每个元素的“正常”、“悬停”、“活动”状态。然后添加“点击”、“禁用”等状态。

单元格可以有工具提示、输入提示、错误消息、占位符和其他附件。

当设计单元格来创建行时，您需要检查各种组合是否能很好地协同工作。我在下面的一行中显示了只读和可编辑的单元格。一旦设计了具有复杂编辑逻辑的表格，表格的一些字段由用户提供，而其他字段则自动计算或填充默认值。

请注意，当您将鼠标悬停在只读和可编辑单元格上时，光标会有所不同。单击单元格将触发行的选择或进入可编辑单元格的编辑模式。当用户选择下图中的一行或多行时，您可以看到单元格的状态。

现在该考虑表头了。根据我的经验，通常不可能控制好列标题的长度，坚持一行。我在下面的图片中展示了标题的不同变化。

基于数据的工具，用户经常需要排序和过滤。它可以帮助用户在冗长的数据中找到有价值的信息。排序和过滤的挑战是将排序和过滤控件与其他标题元素(列标题、度量单位等)结合起来。).

与表格单元格不同，过滤框通常在右侧有一个“重置”图标，以便用户可以查看未过滤的内容。

在该示例中，有三种类型的过滤器盒。字母数字过滤器可以通过字母和数字进行搜索。它支持通配符——未知数量的未知字符。

日期选取器筛选器有一个日历，其工作方式与其单元格相同。允许用户手动输入日期并从日历中选择是一件好事。如果他们知道他们在搜索什么，那么打字比点击容易得多。在我的一个项目中，允许我们输入“2017年1月25日”、“2017年6月12日”、“2016年9月4日”等日期，只过滤一个月或一年。

复杂表的一个常见功能是修复列。通常，包含关键信息(例如，元素名称或状态)的列不能滚动。

虽然表格列应该巧妙地适应内容大小，但当文本被截断时会发生这种情况。在这种情况下，调整列大小很有帮助。用户可以拖动列边缘并查看长内容。

处理长文本字符串的另一种方法是拉伸包含最长内容的列，或者将内容折叠成多行。第一种方法对于或多或少相似的文本字符串更有效。如果对人们来说，看到整个内容比保持表格垂直和紧凑更重要，那么第二种更好。

我们需要定义默认的最小列宽，以防止表格不适合调整大小。

桌子是由什么组成的？单元格、列、行。此外，复杂的表通常有一个顶部操作区。像其他组件一样，顶栏由更小的元素组成——标题和命令。下面我收集了我们在一个产品中使用的各种状态的命令列表。

现在我们可以尝试将不同的元素结合起来，看看是否有效。这里有一些例子。

当然，这不是函数和元素的最终列表。它不同于项目，可能包含其他内容，例如:

按多列排序；

可自定义的列；

可扩展行；

逻辑运算符(and、or、other等。)用于过滤和搜索。

如果你在设计哪些功能不设计哪些功能上犹豫不决，可以参考奥卡姆剃刀，或者简单法则。如果现有的实例满足要求，设计人员就不应该创建新的实例。你应该“削减”用户可能需要的烦人功能。

只读表。构建最简单的表类型，因为它只显示数据。没有过滤或编辑选项。

搜索表单。单元格不可编辑，表头有过滤框和排序控件，可以选择行。在实践中，这些表格有助于从大量相似的事物中发现、比较和选择一个项目或几个项目。

可编辑表单。或者有些单元格是可编辑的，通常不需要过滤，因为行的顺序可以自定义。这些表通常有工具栏，并允许行执行操作。

总之

从最小的组件开始。然后逐渐走向更大的，最后，模拟整桌。

提前考虑每个组件的所有可能状态。

使用奥卡姆剃刀原理将元素的数量保持在最少，但要涵盖所有用例。

构建模块不足以构建像表格这样复杂的东西。设计师要考虑“游戏规则”，设计视觉部分背后的逻辑原则和约定。

容器和响应类型

如何在界面中放置表格？比如会不会占用现有容器或者单个模块中的一些空空间？这些问题的答案完全取决于产品。最好能预见到可能出现的问题，并彻底明确原则。

一些应用程序使用线条或白灰色的“斑马线”来增加信息的可读性。

定义一个合理的默认宽度，并允许在需要时手动调整大小。对于读取表格，最好在右边有一些空单元格，而不是列与列之间有间隙。但是如果一个表格包含许多行和列，水平和垂直滚动是不可避免的。在手机上阅读，还可以把表格做成卡片，帮助用户浏览数据。

即使是非常流畅漂亮的表单，也可能成为用户的噩梦。因此，遵循可及性原则非常重要。以下是对可访问性的主要设计考虑。

给一个标题，准备一个简洁的总结。视力受损的用户应该能够处理表单，而不需要对他们所有的单元进行语音处理。

注意字体大小。虽然没有官方的网络最小尺寸，但16px(12pt)被认为是最好的。此外，用户应该能够在不破坏整个布局的情况下将表格增加到200%。

为色盲的人测试颜色。文本控件应该与背景有足够的对比度。最低要求的颜色比例为3:1(越多越好)。颜色不应该是标记事物的唯一方式。例如，错误信息不应仅依赖红色文本，警告图标将为色盲用户提供参考。

避免使用小而模糊的控件。如果可点击的组件至少为40×40像素，则被认为是触摸友好的。图标表示的命令应该有标记，或者有工具提示和替代文本。设计师不应该过度使用图标，因为用户可能无法正确理解复杂的隐喻。

总之

内容统一和格式化也是设计师的工作。

不仅要考虑界面元素，还要考虑用例、规则和常见模式。

原文:

翻译者:永远

相关文章推荐:

在制定设计规范之前，您需要查看这些设计资源。

如何建立设计语言系统

初级UI用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

html中什么标签用于创建表单？

HTML中form标签用于创建表单

html是静态页面技术之一，包含了所有的页面控件，form表单标签是最常见的控件之一，用于将前端数据通过http协议发送给后端程序。可以是get，或者post形式发送。后端处理完数据后将结果返回前端。过程比较简单的。

转载请注明：片头模版 » 网页设计表单制作(网页制作中的表单应该如何设计)