13 种面向复杂程序的表单设计样式

从复杂的ERP系统到Facebook，应用程序中无不包含表单输入的需求。 表单——在其诸多表现形式之下—— 却统一作为一个用户提交信息的窗口。本文介绍了13种不同的表单呈现方式，并尝试探索数据输入的未来。

1、模态窗口式表单

简单的模态窗口适合于复杂性低、输入项有限的表单。这种形式实现起来容易，对用户体验而言也是简单直接。然而，需要额外模态或弹出框的复杂交互都可能会导致用户错误。此外，模态形式的表单阻止了用户与应用程序的其他部分进行交互，直到它被关闭。因此，对于长表单，不妨考虑对使用单独的表单页面，对于上下文关系紧密的数据，不妨考虑使用内联编辑样式。

2、多模态窗口式表单

多模态窗口式表单 (或许你能想到更好的名字) 呈现出多个可以拖动的面板，允许用户一次性跟多个表单产生交互。用户可以拖动这些面板来查看其下层的那个面板/主视图内容而不用打开多个视图。但是这种形式对于新手用户来说可能会有问题，他们可能会迷失在多个面板和主视图中并提交错误的操作。

3、滑出式表单

滑出式表单会覆盖主视图的一部分或将主视图的内容进行推挤以容纳表单的大小。像模态表单一样，这种展现形式可以将上下文关联起来，允许用户参照主视图中的信息。另外，滑出式表单允许包含更多的表单项，因为它能够占用整个窗口的高度。

4、弹出式表单

弹出式表单非常适用于快速编辑和记录信息的需要。这种形式将触发表单的数据和表单面板紧密结合起来，使用户对他们浏览的原始数据位置能做到心中有数。

5、内联表单

内联表单允许用户在数据呈现的地方直接进行编辑和记录，而不需要被带入另一个视图。这种表单可以有编辑和阅读模式，或者还可以自动保存输入的内容。

6、可编辑的表格式表单

像内联表单一样，可编辑的表格式表单允许用户在数据呈现的位置直接操作表单项。它尤其适用于列表数据项，比如常会用在电子制表程序中。

7、接管式表单

接管模式允许用户跟一个复杂的表单进行交互，同时允许用户快速返回到之前的视图。 这种形式非常适合输入不需要后续视图的系统级数据。

8、向导式表单

向导式表单允许用户逐步填写连续性的信息。这种形式非常适用于用户完成后再无交集的相对复杂的表单，它应该用在一个用户需要通过一个不熟悉的流程时。

9、分段式表单

分段式表单非常适合输入复杂的信息时。 用户受益于能够在一个页面内看到表单完整的上下文，而不是像向导式表单那样的需要多页呈现。用户可以按照自由顺序在整个表单中填充信息，而不需要线性地依次填充信息，这就为用户提供了更大的灵活性。

10、拖拽式表单

虽然不是一个典型的表单形式，拖拽式编辑器允许用户从系统预先定义好的输入项中进行挑选并拖曳到一个所见即所得的展示区域。通过模拟真实的物理世界，这种交互方式在一定程度上为输入操作增加了些许乐趣。

11、所见即所得（富文本编辑）式表单

所见即所得式的编辑器已经广泛使用于诸如Microsoft Word这样的文本编辑器、像MailChimp的这样的电子邮件发送工具，以及SquareSpace这样的自助建站平台等等程序中。这种编辑器允许用户在不了解HTML、CSS和JS的情况下能够轻而易举的创建富文本内容。

12、填空式表单

有时候，可用性最佳实践可以忽略美学和有趣的互动，而不会造成糟糕的用户体验，因为我在一篇关于美学可用性效果的文章中写道。填空式表单接受句子或段落输入，允许用户完全提交他们自己的数据。

13、会话式的用户界面和未来

会话式的用户界面（CUI）通常由一个能够响应用户语音/文本输入的“机器人”构成。用户产生输入后，机器人可以直接做出回答或提供进一步的表单控件来处理请求。现在，机器学习技术已经被广泛用在提升语义理解和自定义响应的效果上。

关于会话式的用户界面，外界的炒作已经风生水起。许多设计师也已经认为CUI就是Web表单的未来。而微信的成功似乎更是提供了充足的证据。然而，正如Yunnoo Cheng和Jakob Nielsen所指出的，微信在用户体验上的核心优势在于其简洁的图形用户界面上，而非会话式的用户界面。

实际上，CUI面临许多可用性问题，包括：缺乏可发现性和完成路径任意性。其同质性不会成为表单设计的未来，但它确实可以成为许多聊天应用程序的未来——它们已经围绕这种方式收集用户的输入了。

我期待在未来能有融合了CUI与丰富的图形界面的下一代设计方案尽快出现。 不妨来思考，微型的嵌入式应用程序可能基于用户的输入信息出现，进而唤醒更大的应用程序，也许其本身就独立于聊天框存在。又或者，当用户在应用程序中迷失时，可以使用CUI来提供帮助。

随着数据输入的标准化、OCR功能的增加，以及软件自动化手工操作的过程，许多表单形式将变得过时。 但是无论如何，一个用户界面仍然是不可缺少的。 我谨希望本文总结的这些不同的表单形式能够帮助您构建更好的应用程序。

译自：https://medium.com/@CoyleAndrew/form-design-for-complex-applications-d8a1d025eba6# .etxltztbx

关键字：设计, 表单

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！