Action Sheet
操作表
iOS 经典的底部悬浮操作表，将一组行动选项与独立的取消按钮分离陈列。
Live Demo
真的可以点海边日落.heic
拍摄于 2026年10月 · 4.2 MB
你刚才看到的这个：微信或 iOS 相册中点击「更多」或「分享」时从底部滑出的列表，上面一排选项（保存、复制、举报），最底下单独浮着一个圆角「取消」药丸。
它到底是什么
Action Sheet 是 Apple Human Interface Guidelines (HIG) 的标志性组件。它从屏幕底部升起，拥有优雅的半透明毛玻璃背景（Materials）。最关键的规范在于：常规操作与破坏性操作成组聚合，而「取消」按钮必须在视觉上完全独立分离为一个单独的底部岛屿，让单手盲操退出具有确定性。
Anatomy · 它由什么组成
Action Group操作选项组
圆角毛玻璃卡片，支持常规与危险红字选项
Destructive Item破坏性项
红色警示文字，表示不可逆操作
Cancel Island独立取消岛
与上方选项物理分离，单手盲操可轻松点击
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 响应一个明确的按钮触发，在 2~6 个具体操作中做出选择 | 用 |
| 涉及可能丢失数据的危险操作，需要显式区分红色文字 | 用 |
| 移动端需要单手便捷触达屏幕下半部分 | 用 |
| 包含复杂输入或多步骤向导的表单页面 | 不用 |
不要在 Action Sheet 内部塞入文本输入框或复杂表格，那是 Bottom Sheet 或 Modal 的职责。
永远不要省略底部的独立「取消」按钮，否则用户在全面屏手势误触时极难安全退出。
Similar Patterns
别搞混一句话区分：iOS 经典的底部悬浮操作表，将一组行动选项与独立的取消按钮分离陈列。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
设计一个标准的 iOS 风格 Action Sheet：半透明毛玻璃底板，顶部包含「保存到相册」、「分享到社交网络」与红色的「删除该动态」，底部带有视觉独立分离的圆角「取消」按钮，点击遮罩或取消均可平滑退出。
不要只对 AI 说
Bad → Better不要这样对 AI 说
底部弹一个列表放几个按钮。
改成这样说
使用 iOS Action Sheet 规范：将功能选项和危险操作聚合在上方毛玻璃卡片中，底部物理分离出独立的「取消」按钮岛，确保单手操作容错。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。