模态框 vs 底部弹层:移动应用中该用哪个

模态框和底部弹层都会滑过屏幕,所以很多团队把它们当成同一个东西,只是形状不同。其实不是。一个会拦住用户直到他们作答,另一个让用户选完就继续。下面是决定用哪个的那个问题,两种模式的重新设计,以及每个应用都会遇到的场景决策表。

关键问题:现在必须回答吗?

如果用户不选择就无法继续,那就是模态框。如果可以忽略它,屏幕依然说得通,那就是弹层。

光这一个问题,就能在大家争论外观之前解决大多数情况。它也解释了两者其他所有的差异:模态框位于中央并让其他一切变暗,因为在它被回答之前别的都不重要;弹层从底部升起并保留屏幕可见,因为屏幕仍然是重点。

模态框:先决定,再继续

模态框在 Android 上叫对话框,在 iOS 上叫提示框,它是故意打断用户的。适合以下情况:

• 用户必须先决定才能继续。 应用无法替他们猜答案。
• 操作无法撤销。 删除一个会为所有人移除 24 个文件的项目,值得停一下。
• 最多两个选项。 取消,加上以动词命名的操作:删除,而不是“确定”。

它失效的地方:任何可选的内容。弹出来求评分、宣布新功能或提供菜单的模态框,会挡住用户本来要做的事,他们还会学会不看内容,直接点能关掉它的按钮。

底部弹层:先浏览,再选择

底部弹层承载的是属于屏幕上已有内容的选项。适合以下情况:

• 选项属于当前屏幕。 分享、复制、移动或归档这个项目。
• 用户可以滑走它来退出。 不要求作答。
• 选项多于两个。 弹层有空间放列表,而且列表就在拇指够得到的地方。

它失效的地方:任何不能被跳过的内容。弹层可能被一次误滑关掉,所以只放在弹层里的破坏性确认,很容易丢失,或被意外触发。

按钮太多,其实是伪装的弹层

错误:模态框

正确:弹层

左边的屏幕是最常见的混用。居中方框里堆了六个按钮,让用户在一次打断里去读菜单。这些选项没有一个紧急,所以没有任何东西需要拦住屏幕。同样的选项放进弹层,读起来就是一个列表,拇指够得到,滑一下就关闭。

Material Design 的规则很简短:对话框最多放两个操作。当你需要第三个时,你要的其实是菜单,而菜单属于弹层。

两者合用:在弹层里删除,用模态框确认

先是弹层

再是模态框

这两种模式并不是对手。破坏性选项可以和其他操作一起放在弹层里,设成红色并放在最后。点击它会打开模态框,因为直到这时才出现无法撤销的决定。在弹层里浏览,在关键时刻拦截。

模态框还是弹层:决策表

谁做得好

你今天就能在手机上验证这些:

• Apple Maps 和 Google Maps 把搜索结果和地点详情放在地图上方的弹层里,所以你不会迷失位置。
• iOS 分享面板 列出针对你正在看的内容的所有应用和操作,滑一下就关闭。
• Instagram 帖子上的“更多”菜单会以底部弹层的形式打开,里面是针对该帖子的选项。

Apple 的指南从另一面划出了同一条线:提示框用于用户需要立刻知道的关键信息,包括某个操作可能破坏数据的警告,而弹层和操作表则承载与用户当前行为相关的选择。

FAQ

什么时候该用底部弹层而不是模态框?

当选项属于当前屏幕、多于两个,而且用户不必选择也能继续的时候。分享、排序、筛选和从列表中挑选,都是弹层的活。

什么时候该用模态对话框?

当用户必须先决定才能继续,通常是因为操作无法撤销。只放两个操作:一个取消,和一个以动词命名的操作。

模态框该有几个按钮?

最多两个。Material Design 说对话框最多包含两个操作。如果需要更多,那些选择就是菜单,应该放进弹层。

底部弹层算模态框吗?

模态底部弹层会让屏幕变暗,必须先关闭才能再使用屏幕,但它可以滑走关闭,而且不提问。对话框则会提出问题并等待回答。

iOS 上的提示框和操作表有什么区别?

提示框用关键信息和少量按钮打断用户。操作表从底部升起,提供与用户刚开始的操作相关的选择,比如针对一张照片的选项。

来源

• 对话框和底部弹层,Material Design 3。
• 提示框、弹层和操作表,Apple 人机界面指南。
• 最初以轮播形式发布于 UX Brainy。