新媒易动态
NEWS CENTER
NEWS CENTER
2020-03-11
笔者将分两期来总结一下弹框的规范和进阶使用方法。欢迎持续跟进。第一期我们先梳理一下平台规范下的弹框究竟有哪些。
在“弹框”的概念被泛化的当下，我相信连很多设计师本身都已经开始分不清弹框的具体分类了。好像任何情况下弹出的窗口都被统称为“弹框”，并且对于使用手法十分模糊。
实际上，纵观 iOS人机交互规范和Material Design，我们可以将弹框分为两大类：模态框和非模态框。
模态框：Modal Dialog。指代需要中断用户，用户必须完成对话框内任务（或主动关闭后）才能够继续主面板操作的弹框。“非模态”就是和“模态”对立的概念，指不需要中断用户操作的弹框。
良性的模态框其实可以辅助用户顺利完成任务。所以设计师务必要了解模态框究竟有哪些类型，以及它们的使用守则。
对话框的使用场合最为广泛，也是最容易打断用户心流的弹框，因为它直接出现在屏幕中心。所以双平台都明确提醒设计者要尽量克制对话框的使用频次。
正是因为对话框非常容易获取用户注意力，所以一般用于承载非常重要的附加操作或警示信息。
关于对话框值得一提的是：因为产品设计过程中可以直接调用系统原生的对话框控件，所以许多设计师常常会忘记提醒开发人员配置引导用户操作的高亮选项，导致我们经常看到一些与产品设计意愿相违背的对话框。
例如为了激活沉睡用户或采集一些用户个性化信息，产品往往是希望获取到用户提醒、访问等权限的，所以弹框中的操作引导通常应该是正向的。但我们总是能看到一些啼笑皆非的案例。
所以在设计者为了方便或者出于其他兼容性问题而不得不调用原生对话框控件时，也不要疏忽对细节的把控。有时一个疏忽很可能会导致用户和用户体验的流失。
Action Sheet 是iOS规范下的控件，近些年来也在慢慢被安卓化。
Action Sheet 是一个响应控件，一般需要用户执行了某个操作才会弹出（某些危险情况下，不需要用户操作就直接弹出的模态框应该使用 Alert / Dialog），并显示一组与当前操作有关的两个或多个选项。Action Sheet 的出现方式是从屏幕底部向上滑出。
iOS 人机交互规范提醒设计者在使用 Action Sheet 时应注意以下几点：
（1）突出破坏性选项：对于用户执行破坏性或危险性操作的按钮，应当使用红色高亮显示，并且放置于在 Action Sheet 的顶部。
（2）“取消”按钮应始终存在于动作面板的底部：虽然用户可以点击屏幕任意空白区域取消 Action Sheet，但“取消”按钮可以在用户不想执行任何操作时，给予用户明确的操作指向，所以不应移除“取消”按钮；
（3）避免出现纵向滚动：滚动意味着操作项已经多到溢出控件可视区域，用户需要额外的时间来进行选择操作。但因为 Action Sheet 中每一个操作的横向热区都非常大，在滑动的过程当中很容易发生误触。这个时候选择使用 Activity Views 会更加合理。
Activity Views 是 iOS 10 引进的新规范控件。它的诞生是为了解决 Action Sheet 的滚动问题，所以也常被称作是 Action Sheet 的宫格模式。
众所周知，国内最常见的 Activity Views 使用场景就是在分享或者使用第三方App打开文件时。
Activity Views 支持横向滑动。相较于 Action Sheet 选项的热区而言，Activity Views 的选项都被放置在一个只有70px*70px的色块中，点击热区相对较小，适宜承载更多选项且不容易被用户误触。
但我发现，目前调用iOS原生的 Activity Views 控件已经可以融合宫格+列表的形式了，并且有一些APP已经开始运用。
个人认为可能是因为承载的选项实在过多时，导致部分选项过于置后，用户横向滑动的时间过长，反而会让用户难以找到需要的操作。
iOS既然支持组件的组合出现，想必也是考虑到了此类极端情况。所以具体的使用方法还是要设计师根据具体的场景随机应变。
Popovers 通常是由一个指向其出现位置的三角箭头和弹出窗口组成。iOS规范中规定，Popovers只适用于iPad中，但我们不难发现，跨平台使用Popovers的场景早已屡见不鲜。