00 / 00
App Shell 与导航
移动端页面骨架、登录前后导航、加载状态和错误状态的设计方式
App Shell 就是移动端的”外壳”:用户进来后看到哪些页面,登录前后走哪条路,底部 Tab、页面栈、空状态和加载状态怎么安排。
移动端骨架
启动 App
检查配置和 session
->
登录前
欢迎页 / 登录 / 注册
->
登录后
首页 / 会员 / 设置
新手先别做复杂导航
| 阶段 | 建议 |
|---|---|
| 第一版 | 登录页、首页、个人中心、会员状态 |
| 第二版 | 底部 Tab、设置页、核心业务页 |
| 第三版 | 深层详情页、分享跳转、外部链接回跳 |
复杂导航的问题不在代码,在产品路径。你还没想清楚用户每天打开 App 做什么,就别急着做十几个页面。
每个页面都要有三种状态
加载中
首次进入、请求中、刷新中都要有稳定反馈。
空状态
没有数据时告诉用户下一步该做什么。
错误状态
网络失败、未登录、权限不足都要能恢复。
复制给 AI
请帮我检查 01MVP mobile 的 App Shell 和导航结构。
请先画出登录前、登录后、会员页、设置页之间的跳转关系。
不要新增复杂页面,只保留新手能维护的最小页面骨架。
请补齐 loading、empty、error 三类状态的检查清单。这篇文档有问题?