00 / 00

App Shell 与导航

移动端页面骨架、登录前后导航、加载状态和错误状态的设计方式

App Shell 就是移动端的”外壳”:用户进来后看到哪些页面,登录前后走哪条路,底部 Tab、页面栈、空状态和加载状态怎么安排。

移动端骨架

启动 App
检查配置和 session
登录前
欢迎页 / 登录 / 注册
登录后
首页 / 会员 / 设置

新手先别做复杂导航

阶段建议
第一版登录页、首页、个人中心、会员状态
第二版底部 Tab、设置页、核心业务页
第三版深层详情页、分享跳转、外部链接回跳

复杂导航的问题不在代码,在产品路径。你还没想清楚用户每天打开 App 做什么,就别急着做十几个页面。

每个页面都要有三种状态

加载中

首次进入、请求中、刷新中都要有稳定反馈。

空状态

没有数据时告诉用户下一步该做什么。

错误状态

网络失败、未登录、权限不足都要能恢复。

复制给 AI

请帮我检查 01MVP mobile 的 App Shell 和导航结构。
请先画出登录前、登录后、会员页、设置页之间的跳转关系。
不要新增复杂页面,只保留新手能维护的最小页面骨架。
请补齐 loading、empty、error 三类状态的检查清单。

这篇文档有问题?