本文目录一览：

一、什么是表单？

表单在网页中的主要功能是负责采集数据以及向服务器传送数据的。表单是采集用户信息数据重要的途径。好的表单设计能提升信息采集的效率与成功率。不好的表单设计会影响用户心情，体验差，导致信息采集不成功甚至带来利益的损失。

二、表单的构成

表单通常由标签、输入域、操作按钮、这三部分构成。

标签

标签我们可以把它理解为标题，告诉用户该表单需要填写什么信息、该表单需要采集什么内容。标签通常出现在输入域的左边、顶部、或者输入域内。标签按所填信息的必要性分为必填项和非必填项，一般我们会在必填项的标签内容加上＊号。＊号的的摆放位置有下面两种情况在线咨询表单设计规范：

1.当标签与输入域居中对齐时，建议把＊号放在标签左侧。

因为＊号比较显目，用户往往第一眼会先看到它，然后按照用户从左往右的阅读习惯，视觉落点分别为文字标签、输入域。考虑到表单的填写效率，＊号位于左侧的表单阅读起来会更加顺畅。所以当标签与输入域居中对齐时，把＊号放在标签左侧会更好。

2.当标签与输入域左对齐时，建议把＊号放在标签右侧。

由于人们纵向的阅读习惯，视线会成F型。＊号在左侧还是在右侧并不会对用户视觉落脚点造成太多困扰，另外考虑到对齐的形式，＊号放在标签右侧会更好。

输入域

输入域是录入用户各种类型信息的重要交互区域。输入域包含在线咨询表单设计规范了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等等。

不知道这些输入域的区别的小伙伴可以去ant design官网学习一下，传送门：

https://ant.design/components/overview-cn/因为输入域是录入信息很重要的交互区域，在设计时我们应该考虑用户输入的多种场景去设计。我们可以将用户的输入过程分为输入前、输入中、输入后。根据每一种场景中细化我们的设计。比如在输入中：我们要考虑光标的设计、输入文字信息的设计，信息提示等，在输入后：我们要考虑信息输入错误应该给予怎样的视觉反馈等。总之考虑得越细致，越能提高信息录入的成功率。操作按钮

操作按钮是在用户填写完表单各项内容后，所要进行的操作动作，来完成或者结束当前操作流程。操作按钮分为全局操作按钮与局部操作按钮。全局操作按钮控制整个表单，比如提交、发送等操作按钮。局部操作按钮是对某一范围的内容起作用，比如编辑、删除操作。

三、表单设计常见问题

1.标签采用哪种对齐方式更好？

在我们的实际项目中，通常会因为文案的长短不一，导致我们不知道该采用哪种对齐方式。标签的处理原则就是要要尽量对齐，采用哪种对齐方式应考虑具体的制约因素和目标来定。

左对齐

当标签采用左对齐的方式的时，因为文字标签的长度不统一，导致标签与输入框的间距是不可控的。这就会造成设计的通用性不强，以及横向空间的浪费。

如果采用左对齐的形式，就要尽量去保持文字标签的长度一致，比如通过字距的调整让文字标签的长度保持一致或者通过留足留白空间，这样设计上会更统一。以为例，采取左对齐形式，但是它留足了文字标签与输入域之间的距离，让表单看上去更统一和谐，不足的就是造成了部分空间的浪费。

顶对齐

采用顶对齐的形式，会让标签和输入域垂直显示，纵向布局的信息呈现效果会更好，从而提高用户填写的效率。顶对齐因为垂直排布，会造成纵向空间的浪费，但在横空间上比较节省，比较适用于横向宽度较窄的页面。

▵顶对齐

右对齐

右对齐跟左对齐一样会因为标签长度不可控。导致设计的通用性不强，以及横向空间的浪费，但节约了纵向空间。

▵右对齐

在这几种对齐方式中，用户浏览信息的速率顶对齐右对齐左对齐。顶对齐形式适合简易表单、右对齐与左对齐表单适合复杂表单。

2.操作按钮应该用哪种设计形式比较好？

对于全局的操作按钮会用常规的按钮样式，全局按钮分为主按钮与次按钮。

主按钮

主按钮是界面中比较重要的功能操作按钮，比如提交、保存等一些正向的操作。主按钮在视觉层级上最高，能够引导用户很快的找到核心的操作并点击。主按钮通常是纯文本或图文结合的面性形式。图文结合的形式能吸引用户注意，也帮助用户理解该按钮的操作含义。

次按钮

次按钮的层级相对于主按钮层级要弱一些，通常采用线性形式。在一个页面中可以出现多个次按钮。对于局部操作按钮的设计形式可以是文字按钮、图标按钮，也可以是图标＋文字的形式。至于应该应用哪种形式就要结合具体端场景去考虑。

图标按钮

图标按钮就是用图标来代表该操作的含义，能够直观的表达按钮的功能。在设计的时候我们需要注意图标是易于理解的、是用户熟悉的。图标按钮的设计通常都会配上悬浮框设计，也就是当用户鼠标停留在该图标按钮上会出现对该按钮的文字释义的悬浮框。以微信公众号为例，当鼠标停留在编辑图标那时会出现黑色的悬浮框对其进行解释，让用户理解此按钮的意义，让用户放心操作。

在web设计中，由于按钮的种类与使用场景比较多，建议局部的操作按钮使用线性图标，让它的层级相对其他按钮要弱化一些。

文字按钮

文字按钮通常出现在列表的操作项中。文字的颜色通常是品牌色或者蓝色，因为蓝色在用户的认知中通常是可点击的。

图标＋文字 按钮

图文结合的按钮相对于纯文字按钮会更加直观，也能更吸引用户注意。

3.输入框应该设计几种状态？

考虑的状态越多，设计就会越细，能够及时的反馈信息给用户，从而提高表单填写效率。在考虑输入框的设计状态时，遵循及时反馈的设计原则去考虑。

为了避免用户填写完所有信息后，才反馈有错误，会造成时间浪费，表单填写效率低。通常会把输入框线变成红色，同时出现红色的说明文案，来引起用户的注意。

▵及时反馈错误信息

在设计中我们还需要考虑自动校验的成功与警告状态。颜色通常为绿色与橙色。

输入框到底应该设计几种状态我们也需要根据我们表单的复杂情况去考虑，对于简单的表单设计过于细化的状态是没有必要的。

写在最后的话

表单设计看起来简单，但实际在设计过程中还是有大量的点值得我们去学习与研究的。在这次做表单的过程中，觉得作为设计师我们不应该去挑活，不要觉得表单设计是一个很小的设计就不动脑的照着别人的设计规范抄一遍。像这种看似枯燥但又很重要的模块设计，我们在前期开始设计之前可以从交互层去考虑，再从视觉层面去考虑怎样的表单设计能让用户填得舒心又高效。在看别人的设计规范比如ant design的组件规范时，我们可以去留意他们的设计细节，比如表单上下之间的间距留的是多少？有什么规律吗？按钮的上下边距与左右边距有什么关系吗？通过这些思考，然后去观察总结，并转化为自己的小技巧，到下一次设计表单的时候，我们就会做得很好了。

往期解析

UI设计－首页解析

详情页设计技法解析

轻松get文字标签设计技法    

Get点9切图方法（内附切图神器）

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

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

这样，你就有一系列的需求和愿望。开放式问题有助于找出真正的需求并过滤掉一时兴起。例如，“什么可以帮助你更快地工作？这如何提高你的工作效率？如果你不能做XX会有什么改变？“

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

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

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

绘制一张树形图，系统化所有需要的功能。原子化是首先设计小的UI组件然后组装更大的UI组件。 我们将逐渐从字体和颜色等基本粒子转移到像标题或列这样的大模态。 

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

当表格原子设计准备就绪时，我们可以继续设计不同类型的单元。 首先要事先考虑每个元素的“正常”，“悬停”和“激活”的状态。 后面再添加“点击”，“禁用”和其他状态。单元格可以有工具提示，输入提示，错误消息，占位符等附件。

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

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

现在是时候考虑表头了。 根据我的经验，通常无法控制列标题长度并坚持一行。  我在下图展示了表头的不同变体。

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

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

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

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

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

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

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

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

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

现在我们可以尝试组合不同的元素，看看它是否有效。 这里有些例子。当然，这不是功能和元素的最终列表。 它不同于一个项目，可能包含其他内容，例如：

按多列排序;

可自定义的列;

可扩展行;

用于过滤和搜索的逻辑运算符（“和”，“或”，“其他”等）。

如果你犹豫要设计哪些功能，哪些没有，可以参考奥卡姆的剃刀，或简约法则。 如果现有的实例满足需求，则设计者不应创建新实例。 你应该“削减”用户可能需要的令人讨厌的功能。 只读表格 。 要构建的最简单的表类型，因为它只显示数据。 没有过滤或编辑选项。

搜索表格 。 单元格不可编辑，标题有过滤框和排序控件，可以选择行。 从实践来看，这些表格有助于从大量类似的东西中查找，比较和选择一个项目或几个项目。 

可编辑的表格 。 所有或部分单元格都是可编辑的，通常没有筛选，因为行的顺序可能是自定义的。 这些表格通常会有工具栏并允许使用行执行操作。简而言之

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

事先考虑每个组件的所有可能状态。

使用Occam的剃刀原则将元素数量保持在最小但覆盖所有用例。

构建块不足以构建像表格这样复杂的。设计师应该考虑“游戏规则”，并设计视觉部分背后的逻辑原则和惯例。

容器与响应式

如何将表格放在界面中？ 例如，它会占用现有容器中的一些空间还是一个单独的模块？ 这些问题的答案完全取决于产品，最好预见可能的问题并彻底定义原则。

有些应用程序使用线条或白色灰色“斑马线”来使信息更易读。

定义合理的默认宽度，并允许在需要时手动调整大小。对于阅读表格，最好在右边有一些空格而不是列之间的间隙。但是如果一个表包含许多行和列，则水平和垂直滚动是不可避免的。对于手机端的阅读，还可以把表格做成卡片式利于用户浏览数据。即使是非常流畅和漂亮的表格也可能成为用户的噩梦。因此，遵循可访问性原则非常重要。 以下是可访问性方面的主要设计考虑因素。

给出标题并准备简明的摘要 。视力受损的用户应该能够在不对其所有单元进行语音处理的情况下处理表格。

注意字体大小 。尽管网络没有正式的最小尺寸，但16 px（12 pt）被认为是最佳的。此外，用户应该能够在不破坏整个布局的情况下将表格增加到200％。

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

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

简而言之

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

不仅要考虑界面元素，还要考虑用例，规则和常用模式。原文：https://medium.muz.li/complex-tables-356826d11861

译者：Ever相关文章推荐：

在构建设计规范之前，你需要看看这些设计资源

如何构建设计语言系统

给初级UIUE设计师的Sketch资源分享

交互设计原则和理论1——尼尔森十大可用性原则

交互设计原则和理论2——七大定律

国外设计团队的高频设计工具与协作工具

16个表单优化技巧

网页端表格设计指南

怎样提高注册登录流程的交互体验

不可错过的2019设计趋势

1、网页设计规范的要求——学习网页设计规范要注意四点:

(1)布局。

(2)颜色匹配。对于初学者，建议在主色调上设置一些“亮度梯度”或“相似的颜色”。

(3)图像。丝网设计的两个基本要求是:不变形。这意味着当你寻找图像作为素材时，你会发现一个稍微大一点的“剪切”，而不是一个小的拉伸。不能是空的。这个要求和之前的要求一样，不要找小图片来放大。

(4)文本。定义要求;字体要求;间距;艺术字。

2、网页设计规范的要求——网页设计课程:

计算机艺术，图像处理，HTML(键)，CSS+ DIV, JavaScript

3、网页设计规范的要求——网页分类:

根据位置的不同，可以分为首页和内页;

根据表单可以分为动态网页和静态网页。两者的区别在于是否有数据库、网页后缀和地址栏。

4、网页设计规范的要求——平面构成和布局结构是网页设计规范所要求的

构成:点、线、面。

布局结构:3。梯形，开放式，对称，弹出式布局

5、网页设计规范的要求——颜色的基本分类

有冷色和暖色，彩色和无色。

色彩属性包括色调、亮度和纯度

以上就是《对于ui设计师们来说，为何都要熟练掌握网页设计规范的要求?》的主要内容，如果你想了解ui设计的基本知识，并且将他们运用到您的作品中，那么本文一定会给你有效的帮助。如果你想学习更多关于ui设计的知识或资讯等，可以点击本文其他文章进行学习。