表单 信息 抽屉 本篇文章总结了 B 端表单设计中的 3 大设计模式，4 大呈现方式及使用场景，希望对大家有所帮助。前言在 B 端设计中，表单设计是常见的需求设计，对于 B 端来说，表单的信息复杂程度会根据业务的实际情况而定，常见的简单表单设计只需要将表单的字段平铺在页面中，用户输入相关信息即可完成表单的任务。但是在 B 端的实际业务中，表单的需求有简单也有非常复杂的场景，如果都采用简单的平铺方式，必定会让表单填写任务变得难以操作。对于不同的表单模式使用的业务场景不同，表单的呈现方式也具有多种选择，并且适用的场景也不同。下面我总结了三种不同的表单展示方式，四种表单的呈现方式以及应用场景。表单设计的 3 大模式1. 平铺平铺：指的是将表单信息完整的排版在界面中。无论是在 B 端还是 C 端设计中，平铺的表单设计是最常见的，这样的表单用户可以一览看全所有表单的信息（但是对于表单字段多且复杂的场景，平铺也不能一览所有）。所以对于平铺的表单设计而言，一般是针对表单信息简单且字段信息较少的情况，如果字段信息小于两屏且字段信息强相关，那么我们可以选择采用平铺的表单设计方式。例如：飞书的审批表单页面设计就是采用平铺的设计方式2. 分组表单的第二种设计方式是分组，分组的排版方式又可以细分为三种方式。分别是：折叠分组、区域分组、标题分组。下面分别介绍了三种分组的详情。折叠分组折叠分组：指的是将表单信息分类显示，通过点击按钮展开和收起表单的具体信息。在 B 端设计中，会存在很多设置类表单设计，最常见的图表数据和样式外观设置，对于一个图表而言，会让用户自定义图表的各种信息设置，并且需要在一个表单中显示完整图表设计所涉及到的范围，所以大多数都会采用折叠分组的形式。折叠分组用户可以一眼看全表单所涉及到的大范围，用户锁定某个标题范围后，再展开去完善对应的具体表单信息，这样用户就可以不用在庞大的表单信息中去寻找自己需要完成的表单信息。折叠表单一般会包含一些默认的数值，用户可不做调整，不调整也不会影响功能的使用。如果说表单信息需要用户手动完整的填写或者确认，那么最好不要选择这种表单的设计方式。例如：Grafana 的自定义 BI 图表设置信息就采用了折叠的表单形式区域分组区域分组：指的是将表单信息分类显示，通过矩形背景划分区域，形成小组表单信息。在 B 端设计中，一些复杂的表单会通过区域分组的形式排版设计，可以将一个表单的信息通过信息的关联关系划分不同的区域形成小组信息，这样有利于信息的归类以及信息的填写。用户在看到复杂表单的时候不会被庞大的表单迷惑，可以更好的找到表单字段，也可以让用户填写表单更有秩序、更清晰。区域分组的使用场景，一般也是针对复杂表单且具有强相关的信息关系。例如：下面是我在工作中所运用的一个区域分组的表单设计方式。标签分组标签分组：指的是将表单信息分组标签化，形成独立的小表单信息，分为上下结构和左右结构。上下结构左右结构复杂的表单可以采用区域分组的形式，还可以采用标签分组的设计形式。标签分组可以一眼看全所有分组大类信息，对于一个表单涉及到多种信息字段的情况，并且每个组的字段信息都是独立的，不是强相关的，那么我们就可以采用标签分组的形式。标签分组可以直接点击标签快速定位到想要查看和填写的表单区域，这样使用户操作更加快速便捷。并且也让庞大的表单信息得到更好的整理，让用户使用更方便，可降低用户对于庞大表单信息的焦虑感。下面可以看一下在 B 端产品中我对于一些复杂表单标签分组的设计方式。3. 分页分页：指的是将整个表单信息通过多页的形式展示。分页表单设计一般会针对具有步骤前后顺序关系的表单。也就是指需要先完成上一步表单信息才能进入到下一步的表单页面，形成一个完整的闭环流程才能使表单信息提交成功。同样的，下面截图为 B 端实际业务工作中的一个分页表单设计页面，因为业务的保密性，所以就不做太多的业务信息，只需要看到分页表单的一个实际设计场景即可。表单的 4 大呈现方式及使用场景1. 弹窗（对于信息较少的表单）最常见的表单呈现方式即弹窗，无论是在 C 端还是 B 端，我们都随处可见弹窗形式的表单。弹窗表单一般呈现在屏幕中间，底部有暗色遮罩层，将底部信息与弹窗表单隔离，使用户专注于表单的填写。弹窗模式的表单一般是针对表单信息较少的情况，并且填写表单不需要关注底部页面的信息。用户可以在弹窗表单中顺利地完成表单的任务。案例：2. 抽屉（内容信息较多，且与底部信息强关联）抽屉形式的表单一般是针对表单信息较多且与底部信息具有强相关的关系。用户在填写表单时需要根据底部信息的辅助完成，或者需要同时操作底部面板中的相关信息，来协助完成表单信息及让交互使用更方便。抽屉形式的表单展示方式是从屏幕右侧弹出，有时候也会有从底部弹出的情况。这里主要分享从右侧弹出的抽屉表单模式，抽屉模式还分为三种模式：有遮罩层的抽屉模式、无遮罩层的抽屉模式、挤压模式。下面分别介绍这三种模式的区别以及使用场景。有遮罩层的抽屉模式有遮罩层的抽屉模式指的是抽屉底部有暗色遮罩层，将抽屉表单信息与底部页面信息隔离，这里的遮罩层与上面弹窗中的遮罩层是同样的作用。那么就有人有疑问了，既然都是有遮罩层具有同样的隔离作用，那为什么要从右侧弹出，而不直接和弹窗一样展示在屏幕中间呢？有遮罩层的右侧抽屉模式的表单具有以下特点：01：右侧抽屉出现位置在屏幕的右侧，虽然有遮罩层，但是仍然可以看到遮罩层底部页面的相关信息，如果在填写表单的同时需要关注底部信息，并为填写表单做辅助，那么右侧抽屉表单模式比常规的弹窗模式更适合。02：右侧抽屉模式的表单面积更大，更适用于复杂表单的呈现，可以展示更多的信息。案例：无遮罩层的抽屉模式无遮罩层的抽屉模式指的是抽屉底部没有暗色遮罩层，抽屉直接浮在底部内容之上，一般通过对抽屉背景做投影来区分底部内容与抽屉内容，让两者之间能更清晰地辨别使用。无遮罩层的右侧抽屉模式的表单具有以下特点：01：与有遮罩层的模式一样具有可根据底部信息辅助完成表单信息的填写的特点。02：适用于复杂表单且可以展示更多的字段信息。03：另外有一个更加重要的特点是：由于底部内容是没有遮挡层，所以用户还可以同时操作底部页面，使用户切换信息更便捷，使用效率得到提高。案例：3. 挤压模式挤压模式指的是表单信息从右侧出现，将原本画布的内容区域宽度减小，从而展示右侧表单。这样的展示方式界面需要做适配，做到画面中的元素自动适配画布大小，以满足正常的阅读和使用。挤压模式与上面的无遮罩层的抽屉模式具有相同的特点，另外挤压模式还具有可以完整看到原本界面中的内容，右侧表单可以自由展开和收起。但是对于表单信息庞大且复杂的业务情况就不太适用于右侧挤压的模式，因为表单宽度占据太多会影响原本界面内容的展示，原本内容会因为宽度区域太小而布局错乱的问题，如果因为右侧挤压的表单出现而改变原有界面内容的布局，对于用户而言使用也不太友好。案例：4. 页面（单独表单填写，且信息量较多）当表单信息庞大且与原界面无强相关的可以直接采用新页面呈现。使表单单独成页更好地展示表单信息减少其它信息的干扰。案例： 总结B 端的业务比较复杂，不同的表单信息的复杂程度有所不同，需要根据实际业务的情况合理地选择表单的展示方式，也需要考虑用户的使用场景以及业务表单的关联关系。简单且不具有强相关的表单可选择平铺，呈现方式可选择弹窗；复杂且具有强相关的表单可选择区域分组，呈现方式可选择无遮罩层抽屉/挤压；复杂且不具有强相关的可选择标签分组，呈现方式可选择有遮罩层抽屉；具有先后顺序的则选择分页，表单信息独立可选择分页的呈现方式（并非强制的表单设计选择方式，需要合理考虑业务哦！）6000字干货！6个方面帮你循序渐进掌握表单设计前言表单是 UI 设计中很常见的元素，不管是 PC 端还是移动端，表单几乎是无法规避的 UI 控件，用户可以通过表单完成线上购物、信息交换、文章订阅等任务，使用范畴极为广泛且牵扯到方方面面。阅读文章 > 欢迎关注作者的微信公众号：「设计小余」本篇来源：优设网原文地址：https://www.uisdc.com/form-design-model
抽屉 对话框 用户 文章结构1. 弹窗的定义2. 常见的弹窗3. 弹窗的分类：模态弹窗/非模态弹窗 （概念解析、常见案例、何时使用）4. 对话框/抽屉 （概念、常见类型、案例、尺寸、如何使用、抽屉还是弹窗）说说这篇文章的由来在 2021 年终总结时发现这些年读了很多的文章，虽说也会通过各种工具记录整理，但还是会觉得零散。最好的输入是输出，今年给自己定的目标是写 10 篇文章。一来是把零散的知识整理归纳，串联知识结构；二来是通过课题研究，提高专业深度。在 B 端的产品设计中，经常会使用到弹窗。选择合适的弹窗展示形式，避免过度打扰用户，有效地向用户传递/收集信息，帮助用户做出更合理的决策，完成复杂的任务，今天来聊聊如何设计 B 端产品的弹窗。弹窗定义：弹窗是展现在用户操作界面之上的容器，在 X 轴和 Y 轴的平行空间之外扩展了页面的高度。通过承载对应信息，对当前操作进行补充/传递，是一种更灵活的信息容器。常见弹窗类型常见的弹窗类型：对话框 Modal、抽屉 Drawer、警告提示 Alert、全局提示 Message、通知提醒框 Notification、气泡确认框 Popconfirm （在此重点阐述 B 端产品的弹窗）。弹窗的分类从交互形式上，弹窗分为模态和非模态。通常来说有遮罩为模态，无遮罩为非模态。App 设计系列之模态弹窗与非模态弹窗在手机app应用中各种格式的弹窗效果相信大家都看过，也可能反感过某些弹窗，本文就来谈谈关于app弹窗设计以及弹窗的适用情景。阅读文章 > 1. 模态（Modal）a 概念解析：模态是目前比较常见的类型，打开模态弹窗，会停止当前所有工作的进度，它所属的应用程序不能继续进行，直到对话框关闭为止。比如说我在开车的过程中，路过收费站，必须将车停下来拿卡缴费。打断我的当前的驾驶行为，专注完成交卡收费行为。模态弹窗最常见的类型：对话框（Modal）、抽屉（Drawer）b 常见案例淘宝卖家平台对于商品删除，考虑到商品的重要性，在删除前通过对话框的形式做二次确认。阿里云以抽屉的方式展示模块信息。这么做的主要考虑是抽屉可以展示较多的页面信息，同时支持搜索和筛选等功能，并且在点击抽屉后弹出二级页面，有较强的拓展性。C 使用场景模态对话框的目的和使用范围对用户而言非常清晰，比较容易引起注意；如：在执行一个重要信息的删除时，通过二次询问引起用户的注意，让用户再次做判断；承载较为紧急的信息，让用户快速处理；如：用户未保存，就点击离开当前页面，通过对话框让用户做出选择。平台限制用户需要执行完信息后才能进行后续的操作；如：有赞的功能模块需要付费后才能使用，弹窗内容可以是该模块的介绍；流程的引导；如：阿里云产品当用户首次进入，会出现分步骤的引导。缺点：01.本质上强制中断用户的工作流程，需要立即关注；对于一些高风险如下单流程、支付流程要慎重使用；02.造成认知负荷，可能会忘记原始任务相关的一些细节；2. 非模态化（Non-Modal）a 概念解析：可以不打断父应用程序，无需停止进度，用户仍可以对父级内容进行交互。大部分应用于信息的反馈和提示。继续用开车做例子，在开车的过程中，我可以听着音乐，可以拿起口香糖放到口中。不必完全中断我当前的操作，可以继续甚至同时处理。非模态化弹窗最常见的类型：警告提示 Alert、全局提示 Message、通知提醒框 Notification、气泡确认框 Popconfirmb 常见案例：阿里云的「帮助文档」在支持查看文档的同时，也支持对父页面进行编辑。帮助文档的作用是指导用户进行软件操作，基于这种使用场景选择非模态弹窗，用户可以在两者之间切换，极大的提高帮助文档的使用质量。微信公众号对新建分组的命名使用的非模态弹窗，属于气泡确认卡片 popover 的演化。这种方式是基于分组命名是一个非主流程、低频率、轻量级的操作，所以选择这种温和的方式。c 使用场景非主流程相关的任务提示；如：对于一个创建流程来说，加载提示一个非主流程的操作，选择全局提示 Message 进行反馈提示；用户可以在父应用程序和弹窗间快速切换，可以通过参考父级的信息对弹窗做操作；如:在飞鱼 CRM 平台用户无需关闭抽屉，只需要在父页面切换不同的联系人，即可查看/修改该联系人的详细信息；比较温和、低打扰，用户无需停掉当前的工作来完成；缺点：01.避免用来承载内容较多、过于重要的信息。02.避免让用户做较为复杂的操作；3. 模态还是非模态模态化弹窗最常见的类型：对话框（Modal）、抽屉（Drawer）；非模态化弹窗最常见的类型：警告提示 Alert、全局提示 Message、通知提醒框 Notification、气泡确认框 Popconfirm；但是，并不是所有的对话框和抽屉都是属于模态化弹窗。在决定使用两种类型时，需要参考上下文的工作流程和业务场景，避免不必要的打断用户和他们的工作流程。最终的目的是引导用户高效完成任务。对话框 / 抽屉在 Ant D 等众多平台级设计组件规范中对警告提示 Alert、全局提示 Message、通知提醒框 Notification、气泡确认框 Popconfirm 都有较为明确的定义；但是在实际的项目中，对话框 Modal、抽屉 Drawer 有较高的使用场景以及较强的业务属性；在此主要针对对话框 Modal、抽屉 Drawer 进行研究。1. 对话框 Modala 概念解析对话框以对话的方式让使用者参与进来，在对话中输入或输出信息。以应用场景划分包括确认类、展示类、任务类三种；b 确认类考虑到信息的重要性，巨量引擎在删除时给用户二次确认提示；c 展示类拼多多商户后台对于 Logo 上传规则的信息展示。将较为重要的信息通过对话框的形式推送给用户，引导用户阅读。对于 SaaS 产品中，具有营销性的信息，也可以选择海报+文字的形式，营造氛围提升阅读量。飞鱼 CRM 信息展示弹窗，作为新功能的宣传海报。d 任务类巨量引擎用户可以自定义表格列的内容，通过对话框进行编辑。这么做的考虑是，自定义列是一个相对独立的流程，选用对话框完全不影响父页面的布局，并且可以快速返回到父页面。微信公众号选择图片，分为选择封面和编辑封面两个步骤完成。e 如何使用对话框的尺寸一般根据内容来设定，考虑到可阅读性，通长要给予最大尺寸的限制。据统计我司配置的电脑最小屏幕分辨率是 1280X720，因此只要保证这个尺寸放得下，就不会出现显示不全出现双滚动条的问题。最大尺寸：宽度选择 960PX，高度以 Windows 为例，去掉系统底部功能条的高度（40PX）以及浏览器的高度（60-100PX）为 580PX，安全角度考虑，最终高度定为 540PX。为适配更多场景，同时让设计具有一致性。常规弹窗尺寸：宽度 560PX，高度 400PX。2. 抽屉 Drawera 概念解析通常从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到原任务。在项目中，通常抽屉从右侧向左划出。b 如何使用01 推荐默认宽度 378PX，大号抽屉宽度 736PX，分别可容纳单列和双列表单，而且保持了使用抽屉时父级页内容可见的优势；02 建议抽屉采用右侧划出的交互，不会遮挡父容器的内容，在抽屉中填写信息/核对信息都可以参考父容器的内容；03 建议抽屉上的操作按钮放在右上角，不会被遮挡；04 建议抽屉上的关闭按钮放在左侧，符合认知习惯；3. 对话框还是抽屉a 从内容区分内容类型：操作确认、信息提示、操作反馈通常选择对话框形式；表单编辑/内容展示，使用表单和对话框均可；表单数量：通常来说抽屉可以承载更多的内容，Ant D 建议在表单数大于 8 项时使用抽屉；可以进行更复杂的操作；内容长短：在展示信息给用户时候，如果内容少不超过 5 行建议采用弹窗；如果信息超出一屏，设计师可根据习惯使用；b 从行为角度区分由系统触发：选择弹窗，打断用户当前流程；用户一般无预期，需谨慎使用；由用户触发：选择抽屉，用户主动唤起，对动作有一定预期，支持多层打开支持任务流；写在最后本文从弹窗的定义、常见类型入手，重点讲解了模态弹窗和非模态弹窗，分析了使用场景和案例。同时将 B 端产品经常使用的对话框和抽屉做分析，设计师可以根据场景内容和用户行为出发，选择合理的交互方式。感谢阅读，如有问题欢迎随时沟通。5000字干货！从5个方面帮你完整掌握弹窗设计方法！前言产品经理：我觉得这里要加个弹窗，你去设计吧。阅读文章 > 参考：https://baike.baidu.com/itemhttps://www.yuque.com/wuxinghua/01/qmyrgthttps://zhuanlan.zhihu.com/p/405853880欢迎关注作者微信公众号：「求职帮er」本篇来源：优设网原文地址：https://www.uisdc.com/b-ens-popup-design-2
抽屉 方式 模态 本文会讲一些实用的 B 端弹窗设计方法：如何使用弹窗：根据应用场景、交互需求、内容量、一致性原则如何优化弹窗体验：弹窗按钮、弹窗高度、关闭方式、优化流程…对于想要快速上手 B 端设计的小伙伴，这篇实用性很强的 B 端弹窗设计值得仔细阅读～如何使用弹窗？1. 根据应用场景模态弹窗和非模态弹窗的具体使用场景可参考下图表格：2. 根据交互需求3. 根据内容量当内容量较少时，可以采取下拉菜单进行设计上的优化，下拉菜单几乎都是非模态，它的优势明显，没有复杂操作和各种表单，只需要鼠标划过点击即可，快速高效。如果不是影响业务流程的操作，而只是页面的设置类，可以将对话框改为气泡框或气泡确认框，如下图：当页面内容较多时，New page 新建页 > Drawer 抽屉 > Modal 对话框（内容的深度较深最好采取抽屉、内容宽度较宽则弹窗形式更为合理、而新建页合适宽度与深度同时较大的产品中）4. 遵从一致性原则除以上三个判断维度，还有「一致性」原则需要考虑，例如某产品弹出的表单大多较长，采用抽屉组件，为了保持体验的一致性，个别短表单也可以同样采用抽屉。例如钉钉的后台管理，大部分编辑都采用抽屉形式，而飞书的管理后台大部分编辑则采用弹窗的形式。但针对不同产品的具体情况，一致性的优先级有所区别。怎样优化弹窗使用体验1. 操作按钮固定在底部弹窗的操作按钮没有固定，随滚动条滚动，需要滚动到底部进行操作很不方便。2. 弹窗高度不高于浏览器内容展示弹窗高度过大，弹窗显示不全，就算滚动条固定到底部也有一部分显示不出来，影响操作。这里点击全屏显示会锁定页面的全局滚动条，但浏览器正常显示会出现两个滚动条的情况，体验会变差。对话框的大小主要根据内容而定。B 端应用中，一个尺寸无法满足所有类型的弹窗需求，所以我们要设定几种常规尺寸，一般可设定为 4 种：S （通知提示类）M （配置简单）L （配置复杂或者扩展详情）特殊 （根据实际情况而定）PC 的小屏幕分辨率为 1024*768，所以高度尽量控制在 600px 以内（除去导航栏、工具栏高度），宽度控制在 1000px 以内，避免在小屏幕下滚动一点点才能看全整个弹框的尴尬情况。但值得注意的是：现在越来越多的宽屏正在逐渐占据市场，相对应的越来越多的网页设计的宽度和高度都不是固定不变的。抽屉提供稳定的尺寸。提供 S (w=378px) 和 M (w=736px)基础宽度选项。这两个尺寸是根据 antd 表单尺寸规范测算，分别可容纳单列和双列表单，而且保持了使用抽屉时父级页内容可见的优势。仍然支持自定义宽度。3. 背景锁定避免滚动条引起的抖动问题浏览网页时经常会发现弹框出现后，滚动鼠标时，蒙版下面的页面还是可以滚动的，其实这些滚动都是没必要的，因为弹框的原意就是要聚焦用户注意力。因此我们要做的是背景锁定（从技术角度其实是暂时性干掉滚动条）。4. 关闭方式优化弹窗应至少包含一个以上的关闭方式，常见的弹窗关闭方式有 4 种：右上角的关闭按钮弹窗底部的“取消”按钮弹窗外的任意区域一段时间后自动消失弹窗外的任意区域，这种方式一般用于模态弹窗，除了弹窗中的关闭按钮外，点击弹窗外的任意区域关闭体验更佳。但操作配置类弹窗不建议采用这个方式，容易误操作导致正在配置中的弹窗被关闭。5. 避免弹框上再弹出弹框的问题要尽量避免在弹框上再弹一层弹框，两层蒙版会让用户觉得负担很重。方法一：改为抽屉如下图，钉钉的后台编辑员工信息，抽屉弹窗选择部门后打开选择部门与人员对话框。抽屉页面上可以更深一步操作弹出弹窗或再叠加一个抽屉。方式二：避免中间弹窗跳转抽屉弹窗的交互方式方式三：隐藏当前对话框第一步，选择添加成员后隐藏当前新增用户组弹窗；第二步，打开添加成员弹窗保存确定后显示之前到新增用户组弹窗，如下面来自飞书的后台管理，新增用户组弹窗的打开两个弹窗交互方式：6. 优化交互流程现在弹出框不仅承载了信息编辑的功能，还可以作为上下文的跳转，帮助用户衔接路径。如 iconfont 中的新建项目，用户新增后，页面会直接跳转到新的项目空间。如果内容过多，如下图 ，可以重新梳理交互，改成轻量弹窗+新建页的方式。原来的编辑内容过多，业务可以拆分成基本信息和配置信息，新增内容保存后可以自动跳转到配置页面进行配置。7. 模态层优化方式一：模态层颜色根据产品品牌色定模态层模态抽屉的遮罩背景如果根据产品色定不仅更贴合品牌，且显得更有设计感。下图帆软的模态层就不是大部分产品都采用的纯黑透明度而是加入了点品牌的蓝色系。方式二：有模态层但不显示模态层模态抽屉的遮罩背景层可以降低透明度，也可以是全透明不显示的，可以更好的展示关联的信息，点击抽屉其他处可关闭抽屉，钉钉后台管理的模态抽屉就是这样设计的。方式三：去掉模态层下图中的抽屉为非模态抽屉，可以根据左侧列的切换快速查看右侧抽屉内容。最后通过上下两篇「B 端弹窗设计」分享，希望能让你对 B 端弹窗有一个初步的认识和了解。除了弹窗，B 端产品还有很多设计知识点需要学习，在后续的文章中，设计夹将继续为大家分享有用的「B 端设计」文章。慢慢来比较快，如觉得有帮助，欢迎关注作者微信公众号：「Clip设计夹」大厂高手出品！深入了解B端的弹窗设计应用（上）在B端产品中弹窗已经被更多的设计师关注和使用。阅读文章 > 大厂高手出品！深入了解B端的弹窗设计应用（下）本篇文章将分享B端弹窗相关内容，我把文章拆成上下两篇。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/b-ens-popup-design
落霞与孤鹜
张大湿
飞翔的企鹅
