移动端离线页面需兼顾状态传达、情绪安抚与操作引导：采用品牌化视觉建立信任，将高频本地功能入口置于主视觉下方，区分加载与离线动效逻辑，文字信息前置且聚焦用户所得。
移动端离线页面不是“出错了就放个叹号图标+‘网络不可用’”这么简单。它既要快速传达状态，又要降低用户焦虑，还得悄悄把人引回可操作路径——美观和引导必须同步成立，不能牺牲一方去讨好另一方。
用品牌化视觉建立信任感
离线页是用户对产品信任度最脆弱的时刻。这时候突然换成通用灰色插图或系统默认弹窗，反而加深“这App不靠谱”的印象。建议沿用主App的IP形象、配色体系和字体层级，比如用品牌吉祥物蹲在断网信号图标旁，配上一句轻量文案：“信号去散步了，我在这儿等它回来”。插图风格、圆角弧度、阴影强度都保持一致，用户一眼认出“还是那个App”，情绪就稳了一半。
把核心功能入口做进空白区，而非藏在底部按钮里
用户断网时真正需要的，往往不是“重试”本身，而是能立刻做的替代动作：查看本地缓存的笔记、编辑草稿、浏览最近打开的页面、切换账号……这些高频低依赖操作，应该以图标+短标签形式直接陈列在主视觉下方，横向滑动或网格排列均可。避免只放一个巨大的“重试”按钮——它暗示“你只能干等”，而多个轻量入口传递的是“你仍掌控主动权”。
加载态与离线态要视觉区隔，但动效逻辑统一
很多团队把离线页当成 loading 的失败分支，结果两个状态用同一套骨架屏+渐变动画，用户分不清是“正在连”还是“连不上”。正确做法是：保留相同动效节奏（比如元素入场都是0.2s ease-in-out），但改变表达方式——loading 用呼吸式脉冲色块，离线页则用静态插画+微位移图标（如WiFi图标轻轻摇晃两下后停住）。这样既维持品牌动效语言，又让状态差异一目了然。
文字信息必须前置且无歧义
首屏可见区域只放一句话，12字以内，拒绝技术术语。“网络连接中断”不如“暂时收不到新消息”；“请求失败”不如“内容正在路上”。副标题可补充轻量说明，例如：“您最近编辑的文档已自动保存到本地”。所有文案避免被动语态和模糊动词，重点落在“用户能得到什么”而不是“系统出了什么问题”。
