对话框和抽屉的使用场景浅析

对话框和抽屉的使用场景浅析编辑导读：对话框和抽屉都是在父级页面之上打开一个浮层，在不用离开父级任务的基础上，完成另一个任务。在企业级中后台产品中，两者都很常见。在有些场景下，对话框和抽屉有时总给人一种两者皆可的感觉。基于体验统一性原则，应该将二者进行区分，制定出明确的使用法律规范。本文将从对话框和抽屉的特性入手，尝试总结出一套明确的使用法律规范。 从对话框和抽屉各自的特性入手进行分析，找出二者的差异点，以此作为使用场景判别的基础。1. 聚焦性对话框通常位于父级页面的中心，与用户常规的视觉焦点是重合的，对用户的注意力的垄断性较强烈，内容的聚焦性也更强抽屉通常位于父级页面的边缘，不在用户常规的视觉焦点中心，具有一定的偏移，内容的聚焦性较弱2. 延续性对话框通常是从父级页面的中心弹出，具有较强的阻断性，适合相对于原界面较为独立的内容抽屉通常是从父级页面的边缘滑出，具有较强的连贯性，适合与原界面具有延续关系的内容3. 父级内容可见性由于对话框通常位于父级页面的中心，因此通常会遮挡住父级页面的核心内容，父级内容可见性较差抽屉通常位于父级页面的边缘，因此通常不会遮挡住父级页面的核心内容，父级内容可见性较好 抽屉的父级内容可见性较好，仅限于抽屉宽/高度较小的情况下，否则，抽屉在父级可见性方面并不占优势。4. 多层可用性对话框悬浮在父级界面的中心，多层对话框要么会互相完全遮挡，导致用户不清楚自己所在的层级，要么错层展示，这又会使界面比较混乱。因此，对话框的多层可用性较差抽屉仅有一边不贴着父级的边缘，多层抽屉仅在宽/高上有所不同，错层后能明确的区分出层级，且齐整有序，多层可用性相对较好 但还是应该从流程/信息层级优化入手，尽量避开多层模态界面的出现。5. 内容承载量 从内容承载量的角度来区别对话框与抽屉，并不具有说服力，两者都可扩展，甚至是扩展至全屏。二、使用场景 以上总结了对话框与抽屉的特性，根据这些特性，我们能够隐隐感觉到对话框与抽屉一定有各自适合的使用场景，而不是两者皆可。1. 根据内容分类判别 根据内容分类，可将使用场景分为信息确认、操作反馈、表单编辑、内容展示这四类。但仅根据内容分类场景，是无法在表单编辑与内容展示场景中准确判别应使用对话框还是抽屉。 2. 根据父子界面的关系判别 在表单编辑与内容展示场景中，还需分析父子界面之间的关系，并结合对话框与抽屉的特性，来判别当前场景适合对话框还...