App 增量件

App 壳原型(页面复用 H5,只出差异)

D14 已定:App 与 H5 页面级同构——26 页原型的移动端形态即 App 页面本身。这里只演示 App 特有的三样:底部 3 Tab 壳、「我的」聚合页、原生能力时机。

9:41●●●●● 〣 ▦

首页 = H5 首页 390 布局

逐元素一致(D14),此处不重复维护第二份。
差异仅:无 Web 导航条,入口在底部 tab。

打开 H5 首页原型对照 ▸
本 tab 的 App 级差异
  • 顶部仅保留 logo + 购物车角标(汉堡菜单取消,入口进「我的」)
  • Hero CTA 点击直接唤起相机/相册权限流(见「我的」tab 演示)

创作 = H5 创作页 390 布局

舞台式单列同构(D12/D14)。生成提交后跳配置页时
隐藏 tab bar(全屏模态栈,漏斗深处防跳走)。

打开 H5 创作页原型对照 ▸
本 tab 的 App 级差异
  • 上传=原生相机/相册;首次请求前有场景化说明(下方③可演示)
  • 生成提交后弹推送权限请求(时机=此刻同意率最高,07 §6)
  • 生成完成 haptic 反馈 + 系统推送(下方③可演示)
③ 原生能力时机(点击演示)

权限不在启动时要,在动机最强的时刻要(07 §6)。

允许「AnyMade」使用相机吗?

拍下 TA 的照片,马上开始变身。

推送缩略图 AnyMade豆豆的形象做好了,点开看看 ✨

App ↔ H5 差异速查(除此之外全部同构)

导航壳底部 3 Tab(创作凸起)替代 Web 顶部导航;结算/支付等漏斗深处隐藏 tab bar(全屏模态栈防跳走)
「我的」H5 账户区(桌面侧栏/移动 chips)在 App 收进一个聚合 tab——唯一的 App 新页面,即上方演示
生成等待同 H5 骨架屏 + 系统推送「做好了」(任务化等待完全体)+ 完成 haptic
上传原生相机/相册;首次请求前场景化说明页,拒绝后有去设置的兜底
登录系统级一键登录;iOS 必带 Sign in with Apple(审核硬要求)
支付实物商品不走 IAP:微信 SDK 拉起 + Stripe SDK,比 H5 少跳转
分享系统 share sheet + 保存形象图到相册;Universal Link 直落 Creation 分享页
3D 预览复用旧 App 已有的 Flutter 3D 查看方案(订单详情手办转台)