在 Excel 中实现自定义顺序排序的全面指南
674
2025-03-31
在线咨询表单设计规范（在线咨询表单设计规范最新）
本篇文章给大家谈谈在线咨询表单设计规范，以及在线咨询表单设计规范最新对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
今天给各位分享在线咨询表单设计规范的知识，其中也会对在线咨询表单设计规范最新进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
一、什么是表单？
表单在网页中的主要功能是负责采集数据以及向服务器传送数据的。表单是采集用户信息数据重要的途径。好的表单设计能提升信息采集的效率与成功率。不好的表单设计会影响用户心情，体验差，导致信息采集不成功甚至带来利益的损失。
二、表单的构成
表单通常由标签、输入域、操作按钮、这三部分构成。
标签
标签我们可以把它理解为标题，告诉用户该表单需要填写什么信息、该表单需要采集什么内容。标签通常出现在输入域的左边、顶部、或者输入域内。
标签按所填信息的必要性分为必填项和非必填项，一般我们会在必填项的标签内容加上＊号。＊号的的摆放位置有下面两种情况在线咨询表单设计规范：
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设计趋势
在线表单的作用
在线表单的作用与Email类似，顾客无需利用自己的电子邮件发送信息，而是通过浏览器界面上的表单填写咨询内容，提交到网站，由相应的顾客服务人员处理，由于可以事先设定一些格式化的内容，如顾客姓名、单位、地址、问题类别等，通过在线表单提交的信息比一般的电子邮件更容易处理，因此有为数不少的网站采用这种方式。
从功能上说，在线表单和电子邮这两种常用的在线联系方式都可以实现用户信息传递的目的，但从效果上来说却有着很大的区别，但如果处理不当，在线表单可能会存在很大的潜在问题，因此应该对此给予必要的重视。
作为市场、运营人员，相信大家对表单工具都不陌生，但如果在线咨询表单设计规范你还认为表单工具只是做信息搜集、问卷调查时才会用到，那你就大错特错了。近两年，国内涌现出不少具有创新性的表单工具，比如为用户提供CRM解决方案的麦客，满足商家订单支付需求的金数据，人人秀将这些表单移植到h5页面中，推出了在线表单插件，方便用户在线使用，并且为企业提供更多创意、新颖的营销玩法。
制作在线表单的步骤
一、创建姓名框
首先打开人人秀制作页面，并选择好背景或者模板。
选择屏幕右侧的表单按钮，弹出选项栏，在弹出栏中我们可以看到输入框、单选、下拉菜单等一共14种表单类型和单页模板的链接按钮。我们现在需要姓名输入框，鼠标左键点选输入框。
选中我们添加的输入框，在右侧可以调节输入框类型，点击类型下拉菜单，并选择姓名。因为姓名是每个用户的基础信息，我们必须获得，所以勾选必填。然后把输入框调整到一个合适的位置。
二、创建手机框
再次创建一个输入框，将类型选择为手机，并调整至合适位置。
这样，人人秀系统就会知道您所需要的数据类型是手机号码，并自动帮您过滤部分虚假手机号。如果您需要邮箱账号，也可以选择邮箱，人人秀系统也会自动帮您识别用户填写内容是否为有效的邮箱格式。
因为每个手机号或邮箱号都只能对应一个有效用户。所以，您需要在右侧勾选唯一。这样，当有人重复填写手机号码时，就会得到人人秀的提醒，并禁止在线咨询表单设计规范他填写此号码。
如果您需要所有的人都填写自己的手机，那么需要勾选唯一上方的必填。
三、创建选择框
获得用户姓名以及联系方式后，我们需要获得一些其他信息，比如性别、职业等。所以我们需要再次点选表单按钮，根据您的需求选择单选、多选、下拉菜单、多级下拉等类型的表单。
这么大的文件，加上设计文件的工程师和审核员都有保密协议的限制，你的需求可能是太高了一点！估计没有人能够满足你的要求！ 关于在线咨询表单设计规范和在线咨询表单设计规范最新的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 在线咨询表单设计规范的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于在线咨询表单设计规范最新、在线咨询表单设计规范的信息别忘了在本站进行查找喔。
本文目录一览：
关于Web表单设计的经验分享
表单在UI设计中的出现场景还是比较多的，尤其是在一些To B的产品设计中。最近自己有做大量web 表单设计，就想把自己学到的一些关于表单设计的知识点分享给大家～一、什么是表单？
表单在网页中的主要功能是负责采集数据以及向服务器传送数据的。表单是采集用户信息数据重要的途径。好的表单设计能提升信息采集的效率与成功率。不好的表单设计会影响用户心情，体验差，导致信息采集不成功甚至带来利益的损失。
二、表单的构成
表单通常由标签、输入域、操作按钮、这三部分构成。
标签
标签我们可以把它理解为标题，告诉用户该表单需要填写什么信息、该表单需要采集什么内容。标签通常出现在输入域的左边、顶部、或者输入域内。
标签按所填信息的必要性分为必填项和非必填项，一般我们会在必填项的标签内容加上＊号。＊号的的摆放位置有下面两种情况在线咨询表单设计规范：
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设计趋势
表单如何制作
在线表单是用户可以通过浏览器向服务器端提交信息的功能在线咨询表单设计规范，如我们常用的用户注册、在线联系、在线调查表等都是在线表单的具体应用形式。在网页的HTML代码中在线咨询表单设计规范，表单的内容位于标签之间。在网络营销中，在线表单与电子邮件一样可以作为一种在线顾客服务手段。在线表单的作用
在线表单的作用与Email类似，顾客无需利用自己的电子邮件发送信息，而是通过浏览器界面上的表单填写咨询内容，提交到网站，由相应的顾客服务人员处理，由于可以事先设定一些格式化的内容，如顾客姓名、单位、地址、问题类别等，通过在线表单提交的信息比一般的电子邮件更容易处理，因此有为数不少的网站采用这种方式。
从功能上说，在线表单和电子邮这两种常用的在线联系方式都可以实现用户信息传递的目的，但从效果上来说却有着很大的区别，但如果处理不当，在线表单可能会存在很大的潜在问题，因此应该对此给予必要的重视。
作为市场、运营人员，相信大家对表单工具都不陌生，但如果在线咨询表单设计规范你还认为表单工具只是做信息搜集、问卷调查时才会用到，那你就大错特错了。近两年，国内涌现出不少具有创新性的表单工具，比如为用户提供CRM解决方案的麦客，满足商家订单支付需求的金数据，人人秀将这些表单移植到h5页面中，推出了在线表单插件，方便用户在线使用，并且为企业提供更多创意、新颖的营销玩法。
制作在线表单的步骤
一、创建姓名框
首先打开人人秀制作页面，并选择好背景或者模板。
选择屏幕右侧的表单按钮，弹出选项栏，在弹出栏中我们可以看到输入框、单选、下拉菜单等一共14种表单类型和单页模板的链接按钮。我们现在需要姓名输入框，鼠标左键点选输入框。
选中我们添加的输入框，在右侧可以调节输入框类型，点击类型下拉菜单，并选择姓名。因为姓名是每个用户的基础信息，我们必须获得，所以勾选必填。然后把输入框调整到一个合适的位置。
二、创建手机框
再次创建一个输入框，将类型选择为手机，并调整至合适位置。
这样，人人秀系统就会知道您所需要的数据类型是手机号码，并自动帮您过滤部分虚假手机号。如果您需要邮箱账号，也可以选择邮箱，人人秀系统也会自动帮您识别用户填写内容是否为有效的邮箱格式。
因为每个手机号或邮箱号都只能对应一个有效用户。所以，您需要在右侧勾选唯一。这样，当有人重复填写手机号码时，就会得到人人秀的提醒，并禁止在线咨询表单设计规范他填写此号码。
如果您需要所有的人都填写自己的手机，那么需要勾选唯一上方的必填。
三、创建选择框
获得用户姓名以及联系方式后，我们需要获得一些其他信息，比如性别、职业等。所以我们需要再次点选表单按钮，根据您的需求选择单选、多选、下拉菜单、多级下拉等类型的表单。
管理咨询项目流程及表单
1、预咨询阶段预咨询阶段是企业管理咨询任务在线咨询表单设计规范的启动阶段在线咨询表单设计规范，在这一阶段，咨询公司将与客户进行初步的接触，了解委托任务的大致内容。它既可以是一个独立的项目，也可以是完整的企业管理咨询项目的一个阶段。2、深入诊断阶段A、工作内容：a)对问题和目的的重新诊断，针对客户的委托任务，对客户企业进行更深入和全面的了解，通常需要到客户企业进行实地的考察。b)进行情况分析，研究所提出的问题与企业目标之间的关系，进而弄清客户企业进行革新和有效解决问题的潜力。B、工作目的：深入细致地诊察客户企业面临的问题和追求的目的，识别引起和影响这些问题的因素和要点，并且为找到解决问题的方法准备所有必要的信息。C、工作成果：在深入诊断阶段结束后，提交中期报告，介绍咨询公司调研的结果和根据这些结果分析得出的结论。但是诊断问题不包括解决问题，中期报告中也不涉及解决问题的方案。D、工作程序：项目目的和问题的诊断--项目调研--项目情况分析--反馈诊断信息 3、方案设计阶段A、工作内容：a)研究所诊断问题的解决方案。b)对所提供的解决进行筛选。c)给客户提出建议。d)对客户选择的方案做实施方面的准备。B、工作特点：在这一阶段需要更多的创新和创造，并且需要客户企业内部的人员更多地介入，因为--解决方案必须适应客户企业的独特环境；--客户的配合和参与，可以给客户企业的员工提供一次良好的培训机会；当企业管理咨询师撤出客户的企业以后，客户的员工可以更容易地实施设计方案。C、工作成果：提交一份或多份解决问题的方案，并且会安排一次口头的汇报。建议客户选择某一个方案，但最后选择哪一个方案需要客户自己决定。D、工作程序：研究并提出可行性方案--研究与评价替代性方案--提交设计方案书--客户确认4、辅助实施阶段A、工作内容：a)培训客户的员工，向客户的员工介绍实施阶段的工作内容和操作要点。b)与客户共同监督实施过程中组织的反应和环境的变化。c)协助客户克服实施过程中遇到的各种困难。B、工作特点：实施阶段是企业管理咨询过程中的一个重要阶段。因为实施中可能会出现技术和其它困难；客户对问题理解得可能不很清楚；实施过程中环境会出现某些变化，需要对实施方案进行调整。C、工作程序：制定方案实施计划书--项目导入实施--培训和开发客户职员--新方案监督和保持5、结束阶段A、最终报告：提交一份最终报告，通常还会在这一阶段安排一次口头汇报。最终报告的内容包括：(a)简要回顾前面几次报告的主要内容；(b)详细叙述上一次报告以来的情况；(c)对方案实施的效果进行评价；(d)对客户在未来应该做的或避免做的事情提出建议。B、后续服务：企业管理咨询任务的结束并不代表在线咨询表单设计规范我们与客户的关系的结束，我们会在任务结束后的较长一段时间之内，定期对客户的公司进行一次短暂的访问。在访问的过程中我们将评述实施的进程，协助客户采取需要的纠正措施，研究是否有新的问题出现。C、工作程序：项目撤出--提交项目最终报告--后续服务网页设计规范的要求有哪些？
1、网页设计规范的要求——学习网页设计规范要注意四点:
(1)布局。
(2)颜色匹配。对于初学者，建议在主色调上设置一些“亮度梯度”或“相似的颜色”。
(3)图像。丝网设计的两个基本要求是:不变形。这意味着当你寻找图像作为素材时，你会发现一个稍微大一点的“剪切”，而不是一个小的拉伸。不能是空的。这个要求和之前的要求一样，不要找小图片来放大。
(4)文本。定义要求;字体要求;间距;艺术字。
2、网页设计规范的要求——网页设计课程:
计算机艺术，图像处理，HTML(键)，CSS+ DIV, JavaScript
3、网页设计规范的要求——网页分类:
根据位置的不同，可以分为首页和内页;
根据表单可以分为动态网页和静态网页。两者的区别在于是否有数据库、网页后缀和地址栏。
4、网页设计规范的要求——平面构成和布局结构是网页设计规范所要求的
构成:点、线、面。
布局结构:3。梯形，开放式，对称，弹出式布局
5、网页设计规范的要求——颜色的基本分类
有冷色和暖色，彩色和无色。
色彩属性包括色调、亮度和纯度
以上就是《对于ui设计师们来说，为何都要熟练掌握网页设计规范的要求?》的主要内容，如果你想了解ui设计的基本知识，并且将他们运用到您的作品中，那么本文一定会给你有效的帮助。如果你想学习更多关于ui设计的知识或资讯等，可以点击本文其他文章进行学习。
求TS16949设计阶段全部表单及其规范化资料
如果审核一个带有设计的（汽车行业设计是不多见的）TS16949相关文件，就是看也要一个主任审核员（具有相当高的同行业设计经验）整整一天的工作量，文件会铺满一张会议桌；并且需要与后续的工艺、控制计划、PFMEA、MSA、SPC等文件环环相扣，不出漏洞的才行。一般的咨询公司或咨询师可能连一个带设计的公司（项目）也不一定会做过。这么大的文件，加上设计文件的工程师和审核员都有保密协议的限制，你的需求可能是太高了一点！估计没有人能够满足你的要求！ 关于在线咨询表单设计规范和在线咨询表单设计规范最新的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 在线咨询表单设计规范的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于在线咨询表单设计规范最新、在线咨询表单设计规范的信息别忘了在本站进行查找喔。
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
