一篇文章搞懂如何做好对话框设计.docx

一篇文章搞懂如何做好对话框设计 篇关于对话框的深度解读，希望对大家有所帮助。 对话框是一种重要的交互方式，主要用于完成信息传递。对话框很常见，但并不见得每一个设计师都可以百分百地弄明白对话框这个概念。这篇文章是对「对话框」的一个简单梳理和总结，希望可以解决大家心中的一些疑惑。 一、了解对话框 1. 对话框定义 对话框是叠加在应用主窗口上的弹出式的窗口。对话框以对话的方式让用户参与进来，在对话中它给出消息或要求输入。 当用户完成消息的阅读或者作出选择后，可以取消或者接受该对话框，之后，这个对话框便消失了，把应用的主窗口交还给用户。 关于对话框的概念，以下是百度百科的解释： 对话框越来越广泛地被应用于软件、网页、以及移动设备中。它可以保留用户当前进程的情况下，指引用户完成一个特定的操作 。 2. 对话框分类 按照对话框的交互方式，可将其分为「模态[1]对话框」和「非模态对话框」。我们可以把他们看作是两个小家族，模态家族的人比较强硬，而非模态家族的人相对温柔一点。两个家族的主要区别：是否强制用户对其进行回应。 1）模态对话框 是位于浏览器的主页面核心区域，需要用户对它做出相应交互，模态才会消失。而对话框会因为自身的吸引程度、停留时间、信息量承载多少被划分为多种对话框类型进行区分，常见的对话框分别为：普通对话框、内嵌表单对话框、分步表单对话框、文件选择对话框、复杂信息展示对话框。 何时使用模态对话框？ ①在重要的警告时使用，避免出现严重问题、或修正已出现的问题。 例如：用户录入信息后未保存就要关闭时，弹出模态对话框提示用户保存。 ②在需要用户输入信息或进行某操作，才能继续当前流程的时候使用。 例如：在使用Canva资源网站时，点击“上传”会弹出模态化的登录/注册窗口，引导登录/注册后使用。 ③用来将复杂流程拆分成简单步骤。 例如：Teambition-分步骤的模态对话框式创建项目。 ④用来获取信息，该信息可大大减轻用户的后续操作/精力。 例如：在转账场景中，如果先复制一个账号，打开手机银行APP（以招商银行或平安口袋银行为例），系统会通过模式对话框询问用户是否向这个账号转账，这样的设计做到了预判用户行为，节省用户后面的操作成本。 2）非模态对话框 与模态完全相反，它更加温和，不会强制打断用户正在进行的现有流程，对用户的干扰比较小。通常这类对话框只会在屏幕上短暂停留，几秒就会消失，也因此用户容易忽略它们的存在。因此非模态对话框不适合展示重要信息、不能承载大量文案，常见的类型有：通知提醒、全局提示、警告提示、气泡卡片、文字提示。 何时使用非模态对话框？ ①在获取与当前流程不必要信息的时候使用。 例如：平安口袋银行和平安数字口袋采用气泡卡片展示更多功能或引导用户登录。 ②不打断重要流程中使用。 例如：在平安口袋银行APP中购买理财时，如果遇到疑问的话，不会弹出框提示让客户咨询投顾，而且采用气泡框形式提示，不打断用户购买。 简单来说，两者的优缺点见下表： 二、对话框常见应用场景 从前面讲到的定义来看，对话框最主要的目的是：传递信息。那么从目标导向的角度来看对话框，对话框要传递的信息的常见应用场景主要有以下五种： 1. 属性对话框 属性对话框是向用户呈现或让用户改变所选对象的属性或者设置。一般来说，在属性对话框中，用户可以修改当前的选择，也可以设置应用程序的全局属性。该对话框适用于非频繁操作和或仅需要设置一次的属性，属性对话框常见在一些设置、详情中。 例如：Windows 11系统的设置界面，可设置系统的全局属性。 2. 功能对话框 功能对话框通常从菜单中打开，是最常见的模态对话框，只控制单一功能，如打印、文件上传/导入、插入对象或拼写检查。该对话框不仅允许用户启动一个动作，而且也允许用户设置动作的细节，属于模态对话框。 例如：浏览器的打印功能，会弹出模态化的打印窗口，用户可设置打印的细节。 例如：飞书的文档导入功能，使用模态化对话框，引导用户选择文件类型或进行批量导入操作。 3. 进度对话框 进度对话框是由应用程序启动的，而不是由用户请求而启动的。它们向用户表明当前应用正在忙于某些内部功能，其他功能的处理能力可能会降低。 每个进度对话框都应该向用户清晰地展现如下信息： 一个耗时的进程正在进行 现在一切正常 该进行还有多长时间才能完成 还有多少事情或项目没有做完 用户如何才能取消该操作，或重获控制权 例如：使用Axure软件导出html文件时的进度提示，既提醒用户当前Axure正在运行，又告知用户当前文件导出进度。 例如：使用Sketch软件导出文件时的进度提示。 4. 通知对话框 通知对话框将一些重要信息报告给用户。来源可以是一些触发的事件，也可以是其他用户的通知。 常见的有通知中心对话框，处理完成某个操作的告知等等。 例如：花瓣的通知提醒。