Push还是ReplaceSheet还是Modalappllama-skills的6条原生导航法则【免费下载链接】appllama-skillsA builder, not just a researcher. Agent skills that turn top-grossing app patterns into native-quality mobile screens.项目地址: https://gitcode.com/gh_mirrors/ap/appllama-skillsappllama-skills 是一套让 AI Agent 构建原生级移动应用界面的开源 Agent Skills而它的导航法则正是最硬核的部分Push 还是 ReplaceSheet 还是 Modal这些看似技术的选择题直接决定用户 10 秒内会不会觉得你的 App不原生。这篇指南带你 5 分钟读懂全部 6 条法则并附一张原生导航决策速查表。为什么导航是截图看不出来的细节在 appllama-app-design-skill/SKILL.md 中作者给出了一个很扎心的判断导航是截图中看不到的部分但用户 10 秒内就能感受到。所以每一次页面跳转都必须回答三个问题 这个页面相对当前页面的位置是什么深入一层平级临时中断用户必须能回来吗用户点返回左上角箭头、iOS 边缘侧滑、Android 硬件返回键后应该发生什么这 6 条法则就是这三个问题的标准答案。法则一Push 深入Replace 向前这是新手最常踩的坑。选择依据只有一个用户会不会想回到这里选择适用场景一句话理解router.push用户大概率想回来深入一层栈里留下痕迹router.replace/Redirect回来会落在世界已变的旧状态原地前进不留退路router.dismissTo(href)结束整个流程落到 X 页面收工并精准落位配套金句返回键撤销的是导航永远不撤销事件。删掉的帖子点返回不该复活这就是事件与导航的边界。法则二展示方式即含义Sheet 还是 Modal一张表定生死Presentation is meaning——用什么方式弹出本身就在表达这个操作的性质。选错了用户会莫名觉得别扭。场景原生 App 的正确选择自包含的多步任务有步骤、有取消/完成presentation: modal独立导航栈短期中断选择器、筛选、条目选项formSheet底部 Sheet带档位detents、可拖拽关闭沉浸式内容图片/视频浏览fullScreenModal 显式 Close 按钮浮在仍可见的界面上确认卡、灯箱、新手引导transparentModal覆盖层破坏性操作确认删除等Action Sheet条目级操作重命名/分享/删除原生上下文菜单长按触发分享 / 打开网页 / 选图系统控制器永远不要自己造路由两句话值得抄在屏幕边上一个 Sheet 如果长出了第二步它从一开始就是 Modal。如果一个链接能打开它它就是一个路由而不是useState撑起来的 Sheet。原生控件侧的对应做法菜单、底部 Sheet、Tab 栏细节见 references/native-controls.md。法则三单向门必须离开栈 有些门一旦穿过就不该允许返回付费墙后的登录、完成或跳过的新手引导、支付完成、会话结束。做法用Stack.Protected守卫落地时用replace让返回永远无法回到旧状态。检验标准很直白在首页按 Android 返回键 → 退出 App而不是闪回 Login已经付费的 Paywall → 永远不会再次打开。但有一个保命细节要保住用户的位置。如果某个动作收藏、关注、购买触发了登录登录应该是覆盖在当前页之上的 Modal完成后原地继续那个动作从功能页打开的付费墙付完款要 dismiss 回该功能页并解锁——而不是粗暴replace回 Tab 首页。法则四只有两种情况允许拦截返回想卡住用户不让他返回默认全部禁止只开放两个口子不可逆请求正在飞行中几秒级别且必须有可见进度Modal 里有未保存的工作先问用户要放弃吗。两者都通过usePreventRemove挂在 Modal 的根页面上实现。而屏内的临时状态选择模式、展开的搜索、屏内 Sheet应消耗第一次返回收起自己第二次返回就正常离开。除此之外任何拦截返回的行为——漏斗挽留、评分弹窗——在 appllama-skills 的定义里都是defect缺陷不是功能。法则五Tab 之间是平等的Tab 的语义是平级目的地所以❌ Tab 之间禁止左右滑动切换动画✅ 每个 Tab 保持自己的独立栈重按当前 Tab 回到该 Tab 的根页✅ 需要全屏注意力的页面编辑器、播放器、结算页放在根栈上、Tab 之上而不是塞进某个 Tab✅ 冷启动按状态落地开屏页撑到会话状态解析完——永远不要出现首页前闪一下 Login。法则六研究语法而不只是像素 前 5 条是怎么写第 6 条是怎么学。在 Appllama 上走一遍别人的获胜流程时别只盯着像素要记下每一步是什么——是 pushmodalsheet然后复制这种一致性。这正是配套的 appllama-usage 技能的研究引擎职责先研究 20–30 个同类头部应用的真实界面抽取布局骨架与信息层级再动手写代码。两个技能搭配使用usage 决定研究什么design 决定怎么构建。快速上手把 6 条法则装进你的项目在项目根目录一条命令安装支持 Claude Code、Cursor、Codex 等 70 Agentnpx skillslatest add appllama/appllama-skills只想要设计技能导航法则就在其中可独立使用npx skillslatest add appllama/appllama-skills --skill appllama-app-design-skill也可以先git clone https://gitcode.com/gh_mirrors/ap/appllama-skills再把skills/下的目录复制进你的 Agent 技能目录如.claude/skills/详见 README.md 的手动安装说明。装好后直接给 Agent 一个带约束的任务效果最直观帮我接上结算流程判断哪些页面该 push、哪些该用 Sheet并确保付费后任何人都不可能退回 Paywall。这句话一次性踩中了法则一、法则二和法则三 六条法则速查表#法则一句话口诀1Push vs Replace想回来用 Push回不去用 Replace收工用 dismissTo2展示即含义长第二步的 Sheet 是 Modal能被链接打开的就是路由3单向门Protected replace返回键永远走不回去4拦截返回只许两种请求在飞 未保存先问5Tab 平级不滑动、各自有栈、重按回根6研究语法记录每一步是什么复制一致性而非像素更多细节原生控件选型、动效、模拟器验收循环可在 appllama-app-design-skill 目录 下按场景查阅。项目以 MIT 协议 开源拿来即用。【免费下载链接】appllama-skillsA builder, not just a researcher. Agent skills that turn top-grossing app patterns into native-quality mobile screens.项目地址: https://gitcode.com/gh_mirrors/ap/appllama-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考