对话框和抽屉的使用场景浅析人人都是产品

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

转载请注明：http://www.jinyawz.com/zflyw/11324.html