Back Button
返回按钮
MobileWeb上手难度: 容易
一个向左的箭头，把你带回刚才来的地方。
Live Demo
真的可以点当前层级： 相册 / 2026 / IMG_0231
你刚才看到的这个：微信聊天列表点进某个人的对话，左上角那个「‹ 名字」就是 Back Button——点它回到列表，并且保留你原来的滚动位置。
它到底是什么
返回按钮是移动端最基础也最重要的导航。它回答「我怎么回到刚才那个页面」，因此必须有——尤其在 iOS 上，页面左上角没有返回箭头是严重的使用问题。
返回箭头back arrow返回导航chevron left
Anatomy · 它由什么组成
Icon箭头图标
ChevronLeft，24px
Label上一页名
可选，通常是上一页标题
Hit Area点击热区
至少 44×44px
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 移动端进入下一级页面 | 用 |
| 用户可能迷失、需要退回上一层 | 用 |
| 浏览器历史可以依赖 | 用 |
| 这是流程的第 1 步（无上一层可退） | 不用 |
首页的顶层 Tab 上不该有返回按钮——退无可退。
Web 端如果浏览器自带返回，重复做一个往往显得笨重；但在 PWA / 独立 App 里是必须的。
Similar Patterns
别搞混一句话区分：一个向左的箭头，把你带回刚才来的地方。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
在详情页左上角加 Back Button，向左箭头 + 上一页名称，点击后回到列表并恢复滚动位置。
不要只对 AI 说
Bad → Better不要这样对 AI 说
左上角加个能回去的按钮。
改成这样说
在详情页左上角加 Back Button：ChevronLeft 图标 + 上一页名称，aria-label="返回列表"，点击后退并恢复上一页滚动位置，热区 ≥44×44px。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。