19. 🔄 加载与占位 Loading ★★★☆☆

🌏 Web 网页规范

  • 渲染技术: CSS3 Keyframes 骨架屏占位扫光、SVG 进度环
  • 加载策略: 图片懒加载 (lazy load)、防抖预渲染
  • 提示层级: 网页内嵌滚动小菊花、透明模态遮罩层
  • 过渡体验: 页面加载 View Transitions 路由过渡效果

📱 App 移动端规范

  • 渲染技术: 原生渲染 Shimmer View、Lottie 矢量动画
  • 加载策略: 本地离线缓存优先渲染、骨架卡片瞬时呈现
  • 提示层级: 系统级 HUD 模态提示、下拉刷新物理回弹拉伸动画
  • 过渡体验: 精致的原生转场 (Push / Pop) 连贯交互动效

Web 骨架屏扫光加载与全局加载转圈

Web Shimmer Skeleton Screens & Spinners

网页端加载常用大面积骨架屏扫光动画代替白屏，或在页面正中央使用统一的全局 Loading 加载层，控制用户的焦躁感。

App 下拉刷新下拉动画与阻尼回弹交互

App Pull-to-Refresh Gestures & Elastic Pulling

移动端高频使用 下拉刷新 (Pull-to-Refresh) 操作。在头部拉出 Spinner 并在松开后物理阻尼回弹，并支持触感震动反馈。

LIVE PLAYGROUND: 下拉刷新阻尼拉伸与物理回弹仿真 用鼠标在手机页面内部“向下拉动”以拉出顶部菊花，松开回弹
https://web.meta-ui.edu/pull-to-refresh
09:41
📶 🔋

📩 邮箱信息中心

📋 大模型统一 Prompt (LLM Prompt)