对话框 用户 模态 对话框是一种重要的交互方式，主要用于完成信息传递。对话框很常见，但并不见得每一个设计师都可以百分百地弄明白对话框这个概念。这篇文章是对「对话框」的一个简单梳理和总结，希望可以解决大家心中的一些疑惑。更多交互方式：6000字干货！3个优秀交互设计师应该具备的边界感引言售卖软件服务的公司，最理想的状态就是开发一套通用的解决方案或产品，而几乎不用接收任何定制化需求（定制化需求大多会被内化成通用产品的新功能）。阅读文章 > 一、了解对话框1. 对话框定义对话框是叠加在应用主窗口上的弹出式的窗口。对话框以对话的方式让用户参与进来，在对话中它给出消息或要求输入。当用户完成消息的阅读或者作出选择后，可以取消或者接受该对话框，之后，这个对话框便消失了，把应用的主窗口交还给用户。关于对话框的概念，以下是百度百科的解释：对话框越来越广泛地被应用于软件、网页、以及移动设备中。它可以保留用户当前进程的情况下，指引用户完成一个特定的操作 。2. 对话框分类按照对话框的交互方式，可将其分为「模态对话框」和「非模态对话框」。我们可以把他们看作是两个小家族，模态家族的人比较强硬，而非模态家族的人相对温柔一点。两个家族的主要区别：是否强制用户对其进行回应。模态对话框：是位于浏览器的主页面核心区域，需要用户对它做出相应交互，模态才会消失。而对话框会因为自身的吸引程度、停留时间、信息量承载多少被划分为多种对话框类型进行区分，常见的对话框分别为：普通对话框、内嵌表单对话框、分步表单对话框、文件选择对话框、复杂信息展示对话框。① 何时使用模态对话框在重要的警告时使用，避免出现严重问题、或修正已出现的问题。例如：用户录入信息后未保存就要关闭时，弹出模态对话框提示用户保存。在需要用户输入信息或进行某操作，才能继续当前流程的时候使用。例如：在使用 Canva 资源网站时，点击“上传”会弹出模态化的登录/注册窗口，引导登录/注册后使用。用来将复杂流程拆分成简单步骤。例如：Teambition-分步骤的模态对话框式创建项目。用来获取信息，该信息可大大减轻用户的后续操作/精力。例如：在转账场景中，如果先复制一个账号，打开手机银行 APP（以招商银行或平安口袋银行为例），系统会通过模式对话框询问用户是否向这个账号转账，这样的设计做到了预判用户行为，节省用户后面的操作成本。非模态对话框：与模态完全相反，它更加温和，不会强制打断用户正在进行的现有流程，对用户的干扰比较小。通常这类对话框只会在屏幕上短暂停留，几秒就会消失，也因此用户容易忽略它们的存在。因此非模态对话框不适合展示重要信息、不能承载大量文案，常见的类型有：通知提醒、全局提示、警告提示、气泡卡片、文字提示。② 何时使用非模态对话框在获取与当前流程不必要信息的时候使用。例如：平安口袋银行和平安数字口袋采用气泡卡片展示更多功能或引导用户登录。不打断重要流程中使用。例如：在平安口袋银行 APP 中购买理财时，如果遇到疑问的话，不会弹出框提示让客户咨询投顾，而且采用气泡框形式提示，不打断用户购买。简单来说，两者的优缺点见下表：二、对话框常见应用场景从前面讲到的定义来看，对话框最主要的目的是：传递信息。那么从目标导向的角度来看对话框，对话框要传递的信息的常见应用场景主要有以下五种：1. 属性对话框属性对话框是向用户呈现或让用户改变所选对象的属性或者设置。一般来说，在属性对话框中，用户可以修改当前的选择，也可以设置应用程序的全局属性。该对话框适用于非频繁操作和或仅需要设置一次的属性，属性对话框常见在一些设置、详情中。例如：Windows 11 系统的设置界面，可设置系统的全局属性。2. 功能对话框功能对话框通常从菜单中打开，是最常见的模态对话框，只控制单一功能，如打印、文件上传/导入、插入对象或拼写检查。该对话框不仅允许用户启动一个动作，而且也允许用户设置动作的细节，属于模态对话框。例如：浏览器的打印功能，会弹出模态化的打印窗口，用户可设置打印的细节。例如：飞书的文档导入功能，使用模态化对话框，引导用户选择文件类型或进行批量导入操作。3. 进度对话框进度对话框是由应用程序启动的，而不是由用户请求而启动的。它们向用户表明当前应用正在忙于某些内部功能，其他功能的处理能力可能会降低。每个进度对话框都应该向用户清晰地展现如下信息：一个耗时的进程正在进行现在一切正常该进行还有多长时间才能完成还有多少事情或项目没有做完用户如何才能取消该操作，或重获控制权例如：使用 Axure 软件导出 html 文件时的进度提示，既提醒用户当前 Axure 正在运行，又告知用户当前文件导出进度。例如：使用 Sketch 软件导出文件时的进度提示4. 通知对话框通知对话框将一些重要信息报告给用户。来源可以是一些触发的事件，也可以是其他用户的通知。常见的有通知中心对话框，处理完成某个操作的告知等等。例如：花瓣的通知提醒例如：脉脉的隐私政策阅读提示和汽车之家的开启通知提示，均采用模态对话框方式5. 公告对话框公告对话框，和进度对话框一样，由应用程序直接启动，不是由用户请求发起的。公告对话框有三种：错误、警告、确认。这种对话框通常不会要求用户填写什么，只会询问你“真的要进行吗？”或者告诉你一件事情。所以在这种对话框上，一般只会有只有[取消]和[确认]，或者[OK]。属性、功能、进度对话框，是用户主动请求的--它们为用户服务。但是，应用程序发起的公告对话框--它们为应用程序服务，常常会牺牲用户利益。由于公告对话框比较常见且常常牺牲用户利益，那么我们怎么把这些讨厌且无用的公告对话框直接铲除掉，换成更加友好、能给用户带来真正帮助的交互方式呢？接下来我们来一起看看怎么让公告对话框“名声鹊起”。三、怎么让公告对话框“名声鹊起”我们可以从应用本身和对话框本身着手提供友好的交互方式，减少公告对话框的出现频率。1. 应用方面解决用户错误的方法不是指责用户，让用户再认真一些，或者给他们更多的指导练习，而应该优化应用设计，让犯错变得困难。① 让应用变“聪明”，减少用户犯错使用有界控件。比如验证码输入框、数字键盘等示例：登录蓝湖时的短信验证码输入框示例：转账时输入金额的数字键盘，金额大小的位数提示；平安口袋银行的身份证号专属键盘提高可见性，用户可自主纠错示例：输错密码是一个很难避免的错误场景，语雀密码登录支持可见密码，一来是考虑安全问题，二来在用户输错的场景下可以打开眼睛，即可见密码，减少出现错误频率。具备预判思维，在容易出错的地方提供更方便的功能示例：在支付宝聊天窗输入一串数字，支付宝发现这个问题后，提供了识别后直接转账的功能，预判了用户的惯性，减少错误发生Zoom 拉会前预设值在加入会议室的界面，提前选择是否在进入会议房间后“不自动连接语音”和“保持摄像头关闭”，有效避免忘记闭麦或者忘记关摄像头就直接加入了线上会议的意外尴尬让操作可“复原”，提供撤销功能在很多破坏性的操作都会二次进行提醒，让用户确认操作，比如说删除操作。在删除之前都会询问用户“你真的要删除吗？”想一想……你在看到这些提示的时候，是不是眼疾手快地按下那个「确认」按钮？这种对话框在没有容错处理时，非常容易被我们这种无脑按「确认」的用户酿成大错。比如我“手贱”只是试试这个删除，然后就把某个表几千条辛苦写了一个月的数据删掉了，由此可见系统的容错处理有多么重要。示例：Windows 系统在早期的时候，删除文件时会让用户进行二次确认，但这是完全没必要的，因为删除文件不是真正的删除，还会在回收站里面。Mac 系统：在回收站删除文件将是永久性删除，此时的确认对话框才是对用户有用的。2. 对话框设计方面从对话框本身的设计优化出发，我们可以对话框的使用场景和文案方面着手进行优化设计。① 对话框使用场景其实什么时候使用对话框、是否使用取决于你要给用户展示的信息是否重要。例如你在手机上买了一张电影票，支付失败的结果如果用 toast 展示就会容易被用户忽视。那么等到用户到了电影院才发现自己购买失败，那么用户极有可能当场卸载你的产品。模态弹框会打断用户当前操作流程，所以「使用对话框要克制」。总原则是：能在界面展示就不用弹框，能用非模态弹框的就不要用模态弹框。总之，重要的信息优先考虑使用对话框。具体的使用原则有：弹框使用尽量克制。文字需要精简，使用行为召唤动词。注意区分复杂任务和轻量任务，选择对应的弹框类型。反馈要及时。可使用引导帮助选择。② 清晰且友好的文案如果非要使用对话框，那么请使用友好尊重用户的方式。当我们说到人与人之间的交流时，语言是重要的媒介，而用户与产品之间同样如此。在设计过程中应始终努力设计出有效的提示性文案，但是, 一定是有比没有要好吗？个人认为也是不必要的，糟糕的提示性文案甚至会破坏产品中最好的用户体验。例如以下几种情况：含糊不清过于啰嗦无意义，产生误导无同理心因此糟糕的提示文案设计会误导用户在产品中采取不必要的操作, 从而使他们感到生气和困惑，甚至可能会破坏品牌对用户的忠诚度，产生本末倒置的结果， 也给用户带来不佳体验。所以，语言是使产品更加人性化的主要因素。产品的文案则充当了语言的角色，它可以使用户参与其中，影响他们的情绪，并把这种人机的功能性关系转化成人类的个人情感体验。而这种用户的情感体验才能够真正的彰显品牌个性，从而与其他产品区分开来。错误提示设计三步法尽可能准确地描述问题和哪里出错了，简明易懂。提出建设性意见，解决问题，保持流程前进不中断。如果此时问题还不能解决，告诉用户可以做些什么来帮助他们，以及他们可以向谁求助。不要责怪他们，礼貌的对待用户，在报错中加入情感。总结对话框可以成为帮助用户完成目标的有用助手，而不是让他们在每一步操守挫败的可怕绊脚石。通过保持对话框的可管理性，并且只有在他们的功能真的属于另一个房间的情况下才调用他们，你将很好地维持用户的工作流状态，保证他们会成功完成任务，并且满怀感激。本篇来源：优设网原文地址：https://www.uisdc.com/dialog-box-design
抽屉 对话框 用户 文章结构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
表哥
张大湿
