高手总结！UI 界面底部弹出框设计指南

编者按：这篇文章出自用户体验设计领域行业的权威 nngroup，本文作者 Page Laubheimer 在正文中详细总结了底部弹出框控件的设计原则和常见的问题，并且结合实际案例梳理了设计过程中的注意事项。

底部弹出框控件，在移动端设备上呈现出来的时候，对于设计师而言，是一个不小的挑战。在小屏幕上设计这类控件，需要做合理的取舍。

底部弹出框是一种部分覆盖式的控件，特别适合移动端设备，它适合呈现临时但是重要的信息。

定义：底部弹出控件，或者说底部弹出框/表单，是固定在屏幕底部边缘的控件，它提供贴合上下文环境的详细信息，或者叠加于页面之上的交互。

底部弹出框是一种渐进式的信息呈现方式，它们通常由用户交互触发，提供额外的详细信息，它们通常会遮盖掉部分屏幕内容，因此不适合显示始终都很重要的信息。

另一方面，它适合用来呈现额外的信息，对上下文环境进行控制，或者兼顾两者。底部弹出框的优点在于，它无需跳转到新的单独页面，让用户停留在当前环境下进行交互，用户不会失去交互和获取信息的语境。

底部弹出框和其他的弹出框控件类似，然而和其他的弹出框相比，他保留了更强的信息可见性，因此用户在和底部弹出框呈现的信息进行交互的时候，可能需要参考背景里的基础信息，而两者的呼应也更加贴合用户当下的需求。

使用底部弹出框的一个常见的理由是，它们提高了移动端设备上用户的交互可触达性（也就是大家常说的，用户更容易点击到屏幕底部的内容和控件）。不幸的是，在实际的测试当中，由于用户握持移动端设备的方式不同（单手、双手以及握持位置上下差异），屏幕底部目前也不一定是最容易触达的区域（屏幕中间一般才是用户最容易点击到的位置）。

模态和非模态底部弹出框

位于底部的弹出框可以是模态的，也可以是非模态的。

和经典的模态控件设计类似，底部弹出框可以迫使用户在采取其他交互之前，强制和底部弹出框交互，点击其中的控件或者关闭它。即使背景的内容可见，弹出框依然会阻止用户与之进行交互。通常，在底部弹出框出现的时候，通常背景内容会被半透明的叠加层盖住，作为背景内容「不可交互」的视觉标识。

网络管理工具 UniFi 的弹出框设计，当用户的手机未能正确连接到网络上的时候，会弹出一个底部表单，背景内容通常显示的是一些可供识别的基本界面细节，以及页面骨架布局。用户需要解决网络问题，才能接入网络显示背景的内容，因此这一交互是合理的。

非模态的底部弹出框则不同，它们位于页面的底部，用户可以和背景内容进行交互，也能和弹出内容交互。这个时候的底部弹出框控件适合呈现此时背景内容相关的详细信息。

在 Google 地图的 APP 当中，非模态的底部弹出框会显示和当前选中地理区域相关的导航操作、图片信息，同时，用户可以和背景中的地图进行交互，详细了解大致的环境信息。

有一些底部弹出框是可以展开的。用户可以通过点击或者上滑弹出框，将其扩展为全屏模式（有时候是接近全屏）。通常，底部弹出框在最小化模式下，开始为非模态，展开后变为模态。

Apple 播客：底部弹出框可以显示当前播放内容的相关信息（左），可以点击或者拖动它至完整全屏尺寸，而点击或者向下滑动顶部的把手控件，则可以将其缩小折叠起来。

底部弹出框的可用性指南

在我们的研究当中，我们观察到用户在使用底部弹出框的时候，遭遇的困难和使用别的弹出框的时候是类似的，这些通常是由以下原因造成的：

• 缺少明确的关闭底部弹出框的指引
• 多个底部弹出框界面叠加在一起
• 底层相关的背景内容被模糊了

下面我们针对性地来解决一下这些问题。

允许使用「返回」按钮来关闭底部弹出框

底部弹出框所存在的一个常见问题，就是它看起来像是一个普通的界面控件，尤其当他们扩展为全屏的时候，一部分用户可能还没意识到他们所处的界面，其实是扩展后的底部弹出框控件，而它通常是不遵循通常的交互逻辑的。用户这个时候可能希望使用「后退」手势或者按钮来进行交互，但是用户这个时候点击可能是不会得到预期中的反馈。

因此，在用户历程当中，当页面当中出现底部弹出框控件的时候，整个流程的交互模式可能会因此被破坏。但是，如果让底部弹出框控件支持「后退」的按钮和手势，则可以规避这一问题，让用户无缝回到上一界面。

在控件中包含「关闭」按钮

尽管绝大多数的底部弹出框可以通过向下滑动，或者点击顶部手柄来关闭，但是这个组件本身就很容易被忽略。此外，还有一部分用户压根就不知道这个功能。而且，垂直滑动关闭本身就具备某种模糊性，在交互过程中，用户可能会关闭面板，也可能不小心打开通知栏，或者打开手机的控制中心等。

Pocket 的底部弹出框控件非常高，需要向下滑动才能关闭，而因为控件的手柄位置在操作的时候很容易打开手机的通知栏或控制中心。即使用户从正确的位置触发关闭控件的手柄，也可能需要多次尝试才能真正关闭这一面板。这种灵活性挑战对于操作精度要求过高，对于多数用户而言都是挑战。

为了确保用户可以快速关闭底部弹出框控件，最好在控件内添加常见的「关闭」按钮，或者「X」按钮。我们建议将这个按钮放置在在底部弹出框的右上方之类的位置，使用这一按钮的另外一个好处是方便有视力障碍的用户，使用屏幕阅读器来关闭它。

苹果的备忘录当中的底部弹出框控件，就使用了「X」按钮来方便用户关闭它。

不要将多个底部弹出框堆叠起来

当 APP 内将多个弹出框堆叠起来的时候，最大的麻烦就出现了。

当多个底部弹出框堆叠在一起的时候，用户不可避免会开始迷惑自己到底处于流程的哪个位置，并且可能还需要了解到底哪个是靠前个弹出框，而哪个是最后一个。就像下面的案例。

我们强烈建议不要使用底部弹出框控件来替代用户流程中应有的页面。底部弹出框是一个临时的 UI 控件，它并不是稳定的位置，它的存在旨在打断用户流程，告知用户重要的信息和重要的操作，它本身并不是带来愉悦感的「快乐路径」。

沃尔玛的 APP 当中，产品详情页是用底部弹出框控件来承载的，而非单独的页面，而其中任何一个链接都会触发另外一个底部弹出框，比如用户评价。而用户想要关闭退出则需要一层一层关闭。而顶上的返回和关闭按钮两者也同样可能会让人迷惑，有时候是后退，有时候是直接关闭弹出框，交互过程中可能会超出用户原有的预期。

使用底部弹出框承载简短交互

最后，当用户可能会花费大量的时间查看底部弹出框所承载的信息时，我们建议不要使用底部弹出框来承载这类信息。它本质上是一个瞬间状态下的 UI 控件，快速交互是它存在的意义，而非承载复杂的内容。

这个名为 Soundbrenner 的 APP 会在页面「1」 的 Learn 中打开「2」中的音乐教学列表，选择特定课程时，会以底部弹出框的方式打开详细课程信息，随后，向下滚动「3」的时候，会意外将用户带回主页「4」。这个 APP 的问题和之前沃尔玛的情况类似，存在多个底部弹出框交叠的问题。

总结

底部弹出框控件在 UI 设计当中其实比较常见，它需要在保持上下文环境的情况下，提供额外的关键交互和信息说明，但是它不应该承载复杂的交互和过多的内容。