手机端UI从底部弹出的浮层，一直没有统一的名称。腾讯的 TDesign 叫它动作面板或底部弹出层，苹果的iOS设计指南叫它 Action Sheets / Sheets，谷歌的 Material Design 叫它 Bottom Sheets。设计这东西，最纠结的就是关闭按钮的位置了。我统计了一下，目前为止发现了6种样式：没有关闭按钮、顶部滑动条、底部、左上角、右上角、右上角外侧。要是设计之前不考虑一下规范，一不小心把这6种样式全用上，那可就太混乱了😵💫为了解决这个问题，我收集了3个移动端设计系统和6家大厂app的处理方式，给大家作为参考。苹果的 iOS 26 设计指南里没有明确按钮布局，只能通过文档搭配的图示来观察。在图示中，Action Sheets 的关闭按钮在左上方：Sheets 的图示中，有的关闭按钮在右上角，有的在左上角：
然而实际用 iPhone 截图，发现还是有规律可循的。没有确定按钮时，关闭按钮通常在右上角的。有确定按钮时，关闭按钮会跑到左上方，右上方就留给确定按钮。之前的 iOS 版本，取消和确定按钮还有一个文字版本的。现在统一成大图标，看上去简洁多了。看谷歌 MD3 官网中 Bottom Sheets 组件的设计规则，一般只有顶部滑动条，没有关闭按钮：当有确定按钮时，关闭（取消）按钮和确定按钮都在底部，顶部没有滑动条：总的来说，MD3 走极简主义路线，能不要关闭按钮就不要，只是页面内容比较多时，顶部加一个滑动条暗示下滑可以关闭。不过这种规范国内比较难借鉴。因为太含蓄，怕年纪大一点的用户不会用。国内比较有代表性的设计系统，都是针对PC端的，例如 AntDesign 和 Arco Design。他们即便有提供移动端的设计系统，也没有在官网上认真展示。好在腾讯的 TDesign 对移动端好歹提供了一些动态案例，可以拿来参考一下。对于动作面板（Action Sheet），取消按钮都在底部：对于底部弹出层（Popup），完全没有给出确切规范：但是给的一个组件示例中，取消按钮是在左侧。这个布局方式跟早期的 iOS 差不多，但是从最近的 iOS 26 开始不再使用了：感觉 TDesign 从早期的 iOS 借鉴了不少，Action Sheet 这个名字、菜单的取消按钮放底部，以及取消和确定放在标题两侧的布局。不过现在 iOS 26 已改了不少，不知道 TDesign 有没有兴趣跟随。
前面说了 TDesign 喜欢把取消按钮放到底部，其实这是腾讯一贯的风格。我以前在那里上班时就发现了。
例如看自己公众号的文章时，菜单没有关闭按钮，只有顶部滑动条。再比如从小商店里选择商品时，关闭按钮在左上角。其实那两种特殊情况，感觉完全可以统一一下的。之所以没这么做，估计是设计部门人太多，很难统一规范吧。像是基本功能模块、自媒体模块和电商模块，可能完全是由不同的设计团队分开做的。百度网盘虽然功能复杂，但设计还是挺规范的。关闭按钮大多在右上角：再比如资源推荐的短视频播放页，两个类似布局的吸底弹窗，关闭按钮一下子在底部，一下子在右上角：飞书里功能太多，先主要文档模块吧——这里一下子出现了3种布局：分享文档时，关闭按钮大多在左上角，这还挺小众的。在文档列表里选择更多操作，关闭按钮又变成右上角了。云文档页面选择创建类型时，关闭按钮在底部。你以为3种已经够多了？在底导航点击「更多」时，没有关闭按钮只有顶部滑动条：飞书移动端同一个核心模块的一个核心页面里的吸底弹窗，都五花八门，看来是真的不太注重设计规范。Arco Design 迟迟不推出移动端，可能自己的产品设计还没捋清楚吧。
只有菜单的关闭按钮在左侧，这应该也是为了排版考虑，完全可以理解：不过知乎有一个规范我是看出来了，就是当底部弹窗是菜单时，取消按钮排在底部，这个显然是为了排版方便。有时候2种不同形态的吸底弹窗叠加到一起，效果还挺奇特的：飞书和抖音都是这样，难道这是字节的一贯作风？
总结一下
国内吸底弹窗的关闭按钮，最常见的位置是在右上角。这种排版对小白用户来说是最友好的，因为大部分弹窗都是这么设计的。
但是吸底菜单的处理方式又不太一样。由于选项是从上到下排列，又不太需要标题，所以把关闭（取消）按钮放到最底部，是最常见的处理方式。但是绝大多数大厂App，都没有特别严格遵守单一的规范。一方面可能是团队太大不好管理，另一方面也是因为需要综合考虑有没有标题、确定按钮，以及其他元素的存在。但总的来说，即便关闭按钮的位置千变万化，也基本不太影响用户使用。因为大部分吸底弹窗都可以这样关闭操作：点击弹窗外侧，或者向下滑动。不过为了方便用户和自己的研发团队，还是尽量不要太混乱吧。
不是所有的设计点，都能这样收集一堆竞品来对比的。因为用户场景有差异，适合你的不一定适合我。所以做竞品调研还挺难的，绝对不是看哪家好就借鉴哪家这么简单。而且网上很多竞品调研的教程，都是给PM看的，不适合设计师。
优网科技，优秀企业首选的互联网供应服务商
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
