总结: 底部表单是一种用户界面模式。它通常被用在移动端应用程序中，在屏幕的下方提供情境化的细节或控制。
在移动端设备上，让情境化的控制组件可见且易于访问是一项挑战。由于屏幕尺寸小，我们往往不得不隐藏一些信息或控制，直到用户需要它们时再显示。
底部表单（bottom sheet）是一种非全屏的浮层（overlay），通常适用于移动设备。它可以让用户方便获取即时较重要的信息，也可以轻易的关闭。
定义：底部表单是一种浮层，通常锚定于移动端设备的屏幕底部边缘，用于显示额外的信息或操作选项。
底部表单是一种渐进式披露（progressive disclosure）——它通常由用户交互触发，并提供额外的信息。然而，由于它会有意地遮挡屏幕的部分内容，所以不适用于显示那些始终会被需要的信息或工具。
相反，它可以被用来展示额外的信息，提供情境控制（contextual controls），或者两者兼具。相对于独立页面（需要用户进行空间上的重定位，或迫使用户在工作记忆中存储信息），底部表单的优势在于它能提供更多用户当下所处的情境信息。
底部表单与对话框以及浮层有很多相似之处（这并不令人惊讶；毕竟，它也属于浮层的一种）。然而，和其他类型的浮层相比，底部表单的特别之处在于它保留了下方信息的部分可见性。因此，当用户既要与表单中的信息或选项交互，同时又要参考所处下层页面上的背景信息时，底部表单就会尤其有用。
一个常见（但往往错误的）理由是底部表单能提高用户在移动端设备上的可触及性（比如，有人可能认为屏幕底端更容易被点击）。不幸的是，这并不是普遍适用的。因为用户持握移动设备的方式是很多样的（单手、双手，并有各种各样的持握点），所以屏幕底部不一定是最容易被触及的区域（屏幕的中间其实是大多数用户持握移动设备时最容易点击到的区域）。
模态及非模态底部表单
底部表单分为模态（modal）及非模态（nonmodal）。
模态底部表单与经典的模态弹窗类似，它会强制用户在进行其他操作之前与其交互（或关闭它们）。模态底部表单会阻止用户与背景内容进行任何交互。通常，被锁定的背景内容上方往往会放置一个半透明的深色遮罩，以表示该内容当前不可用。
UniFi网络管理app：当用户的设备无法正确连接到被管理的网络时，会显示一个模态底部表单；网络名称、一些基本的帮助识别该网络的细节，以及一个框架屏（skeleton screen）会显示在背景上。由于此交互需要用户在进行其他操作之前解决此问题（但用户可能同时需要参考网络的名称），因此使用模态方法是合适的。
非模态底部表单不需要用户进行交互——它通常位于屏幕底部，并允许用户与背景内容进行交互。这种方式适用于需要在屏幕上呈现主要信息的同时，又展示详细信息或选项的情况。
谷歌地图：非模态底部表单显示有关目的地的详细信息和导航操作，同时允许用户在地图上平移和缩放，以查看目的地的情境信息。
有些底部表单是可以扩展的。用户可以轻击或者上滑底部表将其上展开成全屏（或接近全屏）的模态窗口。通常情况下，这种底部表单一开始在最小化状态时是非模态的，但会在展开后变为模态。
苹果播客：一个小的底部表单显示当前播放的剧集信息（左图）。这个底部表单可以被点击或拖拽为全屏（右图）。点击或向下滑动扩展状态下表单顶部的抓取手柄（细长、圆润的水平条），就可以将其折叠起来。
底部表单的可用性指南
在我们的研究中，我们观察到用户在处理底部表单时遇到了与其他浮层交互时类似的问题，通常由以下原因引起：
缺乏明确的关闭底部表单的方法
多个底部表单叠加起来
遮挡了相关的背景内容
我们以下的指南能够有效的解决以上问题。
允许使用返回按钮关闭底部表单
底部表单看起来像是常规页面，尤其是在它们展开到全屏的情况下。因此，一些用户可能没有意识到他们处于底部表单中，并期望通过平常的导航操作（如手机的返回按钮或返回手势）来离开该屏幕。然而，不是所有底部表单都支持此机制。
因此，在用户的使用过程中，如果某个页面生成了底部表单或浮层，这个页面就会打破正常的交互模式。当用户无法通过返回按钮离开它时，底部表单可能会使用户迷失方向。我们可以通过支持用返回按钮关闭底部表单来解决此问题，从而使用户无缝返回到上一个界面。
设置一个关闭按钮
尽管大多数底部表单可以通过向下滑动（或点击）顶部的抓取手柄上来关闭，但这个元素很容易被忽视。另外，一些用户可能不知道这个功能。同时，垂直滑动也容易产生滑动歧义：根据滑动开始的精确位置，手势可能会关闭底部表单、打开通知栏，或显示手机的控制面板。
视频中，Pocket打开的全屏底部表单需要向下滑动才能关闭。不幸的是，由于抓取手柄位于屏幕顶部，用户很容易意外地打开手机的通知或设置面板。此外，即使用户从正确的位置开始滑动，也需要进行连续的长时间下滑才能真正关闭底部表单。这种需要精确滑动的关闭方式不满足无障碍设计：它对于不能准确滑动的用户是一种挑战，甚至对于没有肢体障碍的用户来说也存在操作困难。
为了确保用户能够顺利地关闭底部表单，可以在屏幕上显示一个可见的关闭（或X）按钮。我们建议在底部表单的顶部提供一个明确的关闭按钮（通常样式为X或文字“关闭”），而不仅仅是依赖于抓取手柄。设置按钮的另一个优点是它为无法看到或滑动屏幕的用户提供了通过屏幕阅读器和键盘访问的便利。
苹果的便签本：在显示排版选项的非模态底部表单中有一个明显的X按钮
不要堆叠底部表单
当应用程序将多个底部表单堆叠在一起时，底部表单最大的问题之一就会出现。
我们之前已经讨论了堆叠底部表单的一些问题。用户不得不追踪自己在快速增加的浮层堆中的位置，并且需要能够区分关闭底部表单堆中的最后一个表单或者关闭所有表单，如下面的例子所示。
我们强烈建议不要使用底部表单来替代经典的页面之间的用户流程。底部表单是一种暂时性的用户界面元素，不应成为用户返回到的稳定界面，或花费大量时间所在的主要界面。它们适用于页面间的中断或分岔点，而不应是用户通常所采取的“愉快路径”。例如，不要使用底部表单来显示电商产品详情页面：用户可能会从该表单导航到相关产品、评论或详细规格。这样的底部表单会打破用户长久以来从页面到页面导航的习惯。
沃尔玛在一个底部表单中打开了产品详情页（左图）而不是在一个单独的页面中打开。此外，任何产品详情页上的链接，比如评价，会在第一个底部表单之上打开另一个底部表单（右图）。关闭“顾客评论”表单需要使用屏幕顶部的返回按钮，而关闭整个底部表单堆则需要使用右上角的X按钮。用户可能不理解返回按钮和X按钮之间的区别，从而错误地使用按钮。
只将底部表单用于短交互
最后，我们不建议在用户需要花费大量时间查看内容或选项信息时使用底部表单。底部表单本质上是一种暂时的用户界面元素——它用于快速的交互，并不适用于显示复杂的内容。
Soundbrenner: 在首页上点击“学习”（1）时，会在一个底部表单中打开音乐教学内容的列表（2）。选择特定的课程（2）会在另一个底部表单中打开该课程的详细信息，但在浏览内容时随意地向下滑动 （3）会将用户送回首页（4）。（这个应用程序与上面的沃尔玛一样，也违反了之前的指南，即将多个底部表单堆叠在一起。）
总结
底部表单是在移动应用程序中的一种用户界面模式，旨在呈现暂时的上下文信息，同时保持了用户对主要内容的访问权限。当被用于显示数个选项或提供额外信息时，底部表单可以作为快速访问的控件；然而，它们不应该叠加在其他底部表单之上，也不应该用于显示过长的内容。
原文地址：https://www.nngroup.com/articles/bottom-sheet/
版权声明
本文版权属尼尔森诺曼集团（Nielsen Norman Group）所有。欢迎转发至朋友圈，如需转载，请邮件Support@nngroup.com。未经授权的转载、翻译是侵权行为，版权方将保留追究法律责任的权利。
© 2023 Nielsen Norman Group. All Rights Reserved.
若有收获，就点个赞吧
0 人点赞
