Swipe Action
滑动操作
Mobile上手难度: 进阶
手指按住列表项往左一滑，底下露出「删除」「归档」这些按钮。
Live Demo
真的可以点- 来自 iCloud 的邮件9:41
- 周报 · 团队协作昨天
- 账单提醒昨天
你刚才看到的这个：iOS 邮件列表左滑出现「归档 / 标记 / 删除」、微信聊天列表左滑出现「删除 / 标记未读」、Todo App 左滑露出红色删除按钮。
它到底是什么
Swipe Action 把「不常用但必要」的操作藏进了手势里。它极大提升了列表的整洁度，代价是发现性差——用户可能永远不知道可以左滑。对应的对策是：长按也能唤出同样的菜单。
滑动操作swipe action左滑侧滑swipe to reveal滑动手势
Anatomy · 它由什么组成
Swipe Threshold触发阈值
滑过 50% 宽度或 30px
Row列表行
跟随手指移动
Action Buttons操作按钮
底层露出，右侧对齐
Snap吸附
松手后吸附到开/关
Fallback替代入口
长按或右键唤出同一菜单
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 高频列表中的次要操作 | 用 |
| 删除/归档这类可逆操作 | 用 |
| 需要保持界面极简 | 用 |
| 这是最常用的主操作 | 不用 |
| 桌面端鼠标环境 | 不用 |
发现性是硬伤：一定要给长按/右键的替代入口。
一次只能滑出一个菜单，同时出现两个菜单会让用户困惑。
Similar Patterns
别搞混一句话区分：手指按住列表项往左一滑，底下露出「删除」「归档」这些按钮。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
给列表项加左滑操作：滑过 50% 露出「置顶（蓝）/ 删除（红）」两个按钮，松手吸附展开，点空白收起。
不要只对 AI 说
Bad → Better不要这样对 AI 说
列表可以左滑操作。
改成这样说
给列表项加 Swipe Action：左滑过 50% 露出「置顶/删除」按钮并吸附展开，点空白收起，同一时刻只允许一项展开，并提供长按作为替代入口。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。