近两年做的都是ToB相关的项目，如ERP、CRM等，做的多了难免会遇到比较复杂的业务/产品需求，其中就有很多涉及录入表单的各种场景，期间收集总结了一些我认为使用频率较高的界面设计模式。之前谈及设计规范的文章提到的皆是基础的设计元件，所以本文也可以算是一个补充。

类似后台的设计工作，可能让人觉得无非就是列表呀表单啊，乍看起来很简单，但这类项目其中一个难点，就在于如何用手上现成的资源（现有设计库），去提出一个即满足业务方需求，产品需求和开发需求（时间成本）的综合设计解决方案，需要你不要用「创新设计」（天马行空、自造轮子）的方式去提出一个「创新设计」（优于现有方案又基于现有）的方案。

打比方就像拼乐高一样，一个个独立积木就像基本的设计组件，你可以简单拼个大号形状，也可以用它们拼出一个无线充电底座，甚至一个城堡。

为了方便使用，自己用乐高做的立式无线充电底座  (￣▽￣)✧

练功先练套路，本文中13种表单容器模式参考了@Andrew Coyle的《Form Design for Complex Applications》------他这篇文章给我的设计工作带来很多启发，我将用自己在工作中实践的案例和设计理解，在他文章基础之上进行扩展发散，谈谈它们的优缺点和使用限制。

1.弹窗/插入式对话框（Modal）

模式一 适合输入框数量较少的表单

这种简单的对话框大家应该很常见，并且经常使用，适合简单的表单---输入框数量较少时使用，对用户来说也是简单易操作。但是因为弹出式的对话框，通常是某个任务的中继，有上下文联系，对用户而言，是在当前界面的一次打断式交互，不允许用户进行对话框以外的操作，除非用户关闭这个对话框。所以，不能因为其简单常用，就不分场景和上下文来盲目使用。

🙅错误示例：这时建议使用独立页面，或者对表单内容重新设计

2.多任务弹窗/插入式对话框（Multi-modal）

模式二

它与第1种的区别在于，用户可以对话框进行任意拖动，且不阻挡和影响使用弹出前的界面，可以同时进行多个操作，完成复数任务。这个方式非常适合有经验的「熟练工」用户，他们熟悉当前操作界面，对多任务处理有较高的要求，效率优先。但对「新手」用户来说，学习成本高，容易产生混乱，导致一些错误操作。

3.滑出式侧边栏（Slideout）

模式三 介于独立页面和弹出框之间 滑出式设计提供了更多的空间，可以容纳更复杂的内容

滑出式指的是从当前界面的“上下左右”侧边滑出内容，可以以浮动的形式显示在主界面上，也可以以推动的形式推开主界面内容。与普通弹出框一样---是某个任务的中继，有上下文联系，同时让用户仍可以从主界面中浏览信息。

在我看来，滑出式介于独立页面和弹出框之间，由于宽度或高度与屏幕/浏览器一致，所以可以容纳更多的表单内容。

4.弹出式浮层/气泡卡片（Popover）

模式四 快捷编辑

弹出式浮层可以理解为一个超轻量的对话框，它可以令用户在当前界面快速对某部分进行编辑，同时不打断当前任务流，快捷方便同时不打乱用户原有的操作。要注意的是，弹出式浮层要有一个明显的功能入口和关闭逻辑，因为对主界面的影响较小，所以也容易让用户忽略。

5.嵌入式表单（Inline）

模式五

嵌入式表单和表格中「嵌套子表格」是一样的，可以让用户在列表页查看更多的资料或进行更多的编辑操作，而不需要单独打开/跳转到另一个页面，自身入口明显也方便用户快捷操作。

嵌套子表格

需要注意的是，虽然可以某种程度替代跳转独立页面，但还是不能完全替代，其内容仍旧不能太多太复杂，列表页通常有5-10行数据以上，每行数据如果都容纳大量内容---尤其是有数据交换，充满校验逻辑的表单内容，一定程度会让主界面冗余，对性能产生影响，设计应用时一定要找到平衡点。

6.可編輯的表格（Editable Table）

模式六 直接在表格上编辑表单

即带编辑功能的表格，与嵌入式子表格一样，可以让用户在主界面进行编辑，但形式要比其简单。用表格组织内容，同时允许对内容进行编辑，特别适合类似线下Excel电子表格形式的表单录入。

7. 步骤式（Takeover）

模式七 将复杂的合同表单内容拆解分步

我经常用步骤式设计拆解和切换大量且复杂的表单内容，原理如同拆分复杂的任务成一个个简单的子任务，让执行任务的人（用户）按步骤一个个完成，同时可以通过上一步快速返回，降低操作难度，减少用户负担。此模式适合独立任务导向的表单内容，结束即完成任务。

8.向导式（Wizard）

模式八 微信公众号注册向导

向导式顾名思义，是引导用户严格按照设定的步骤完成表单内容，它与步骤式的区别是，它是一步提交一次，直到完成任务；步骤式可以往返前后步骤填写表单，最后一次统一提交。

向导式适合对填写表单有限制性规则（如流程）的业务需求，推动用户按照系统规则强制一步步地完成任务，这适合「新手」用户，常见应用于注册流程、完善个人资料等。除此之外，它和步骤式有共同的优点。但是，向导式不适合需要反复修改内容的场景，它的单向性，限制了用户编辑之前提交过的内容。

无论是步骤式还是向导式，对于「熟练工」来说，将内容进行拆分其实是降低他们的效率---需要点击切换内容，不能通篇浏览，他们往往需要大量处理这种页面，这些操作累积起来会给在高强度工作中的用户，带来糟糕的体验。

9.章节式（Sectioned Form）

模式九

章节式同样适合复杂的表单内容------和步骤式，向导式一样对内容进行了分类，但章节式拥有表单的完整上下文，不像前者分类拆解成多页表单。用户可以通篇浏览表单内容，也不用像向导式一样线性单向填写表单，与其相比更灵活。

通过点击锚点章节中的标题定位内容

虽然不能像步骤式一样给「新手」用户切割出负担较少的内容，但通过导航结构至少不会让他们迷失在复杂的表单内容中。对于「熟练工」来说，一页通篇保证他们高强度工作中的高效率，章节锚点的应用方便他们快捷定位内容。

10.拖放式（Drag & Drop）

模式十 通过简单拖放组合来定制内容

虽然不是常见的表单容器形式，但拖放编辑器可以直观的让用户从预设的输入框中选择并拖动到所见即所得的界面中，简单可靠，模仿了真实物理世界，降低了用户的学习成本，其中的交互方式提升了用户操作体验。

在业界中SAAS的标杆---Salesforce就是用拖放方式让用户定制自己的表单内容，据我所接触到的业务方，不少人对拖放类的功能也非常偏好。

Salesforce定制表单中的拖放功能

11.所见即所得（WYSIWYG）

模式十一

（What you see is what you get）所见即所得编辑器，又称富文本编辑器，常用于像Microsoft Word、电子邮件类（Gmail）、博客类（Blog、简书）等等。WYSIWYG编辑器让用户不需拥有HTML/CSS/JS的知识，便可以在网页上可视化地编辑出形式丰富的文本内容。

12.填空式（Fill in the blanks）

模式十二

填空式指的是表单内容在一句话或一个段落中分布显示，表单内容填写完的同时，完成完整的一句话或段落。这种方式很受业务方的欢迎，或许和它在表单界面诞生起就开始被应用的悠久历史有关。它虽然简单直接但缺乏美感，不可置否的是，它的久经不衰证明了它的可用性。

如何用好它，这是对设计师的考验------什么时候用、用了之后如何对内容进行排版设计，可用性和美感之间的平衡点，考验是设计师的基本功。

表单内容不多、描述语句简短时，对美观影响较小 表单内容多，描述语句冗长，这就需要考验设计师排版和重新设计的能力

13.基于对话的交互方式（CUI）

模式十三：未来？

Conversational UI （CUI）基于对话的交互方式，它本质是通过人类更自然的对话来进行交互。在CUI的逻辑中，输入端是用户用语音（或键盘等方式）输入一句对话指令。随后，设备将通过语音（Voice TTS），图像（GUI），声音（提醒音），Taptic（振动），甚至硬件动作（风扇开始旋转，机器人开始移动）的方式来输出反馈给用户。

Telegram中的机器人

我最早接触的，严格意义上的CUI是Telegram中的机器人应用，机器人接收任意的语音或文字，然后回答或提供进一步的表单来解决请求，微信的公众号机器人、淘宝的客服机器人亦是如此。很多设计师认为CUI是未来的Web表单形式，但现在其可用性让我对此持保留态度。除了业界头部公司通过机器学习、人工智能的方式进一步挖掘它的应用场景，其他大部分企业对它的实际应用也只限于“帮助机器人、客服机器人”等，来解决重复性的问题答疑，减少此类人力资源占用。但对用户来说，这些不成熟的机器人并不太实用，远不如与真人互动来的简单有效。业界已经有很多关于CUI的文章，在这里我就不再详细表述了。

结语

@Andrew Coyle在《Form Design for Complex Applications》那篇文章提到：“随着数据输入变得标准化、OCR功能的不断增加和应用、软件设计流程自动化，许多表单将变得老旧过时。但是使用者永远需要一个好的界面。”

为了这个目标，我们站在前人的肩膀上，不断总结和创新良好的界面设计和交互设计，这是我们所有设计师的集体智慧。模式，便是其中一种可以快速帮到设计师构建更好的网页、桌面应用、App的方式。

正如《界面设计模式》一书说的那样，从前，界面设计师们只有一个可怜的小破工具箱。那个时候，我们只有几种简单的控件：文本输入框、按钮、小图标和模态对话框。三十年河东，三十年河西，现在进行设计，我们有比以前多得多的组件和想法，有了更多的用户界面工具包，用户的期望比以前也更高了。如果知道用户对你的应用有何种期望，而且能从界面工具箱中仔细选择习惯用法（大规模的）、控件（小规模的）和模式（在整个范围内），你就能设计出某个既让人觉得有熟悉感同时又不失新颖独特的界面。

这样，也许我们能做到两全其美。

---

参考资料：

《Form Design for Complex Applications》------@Andrew Coyle

《界面设计模式》（第2版）------泰德维尔 (Jenifer Tidwell)