S1 · V1.0灵优造物 · 小程序原型 demo

销售用 Web 端为客户生成项目 → 微信扫码进小程序预览 → 分享给客户在微信内浏览。下方按真实业务流序平铺 4 个核心页面。
① 销售 Web 端·扫码 → ② 小程序预览 → ③ 不符诉求 · Web 端修正 (版本+1) ↩ ② · ④ 分享给客户 · 微信内浏览
1微信对话 · 分享卡片
12:065G
‹ 金恩语 ···
12:02
灵
灵优造物
AI鹿鹿·概念设计
来源 · 灵优造物 Web 工作台
🦌
小 小程序
分享卡片：图 = H5 场景图首图；标题 = "AI鹿鹿·概念设计"；来源 = 灵优 Web 工作台项目名。
*分享链接带 来源 id，落地后映射回销售/项目。
P1 · 分享卡片
  1. 销售从 Web 工作台「转发到微信」生成此卡片。
  2. 卡片标题、来源固定结构；图为概念设计页首屏截图。
  3. 客户点击 → 进入 P2 登录页。
埋点：page_view · share_open · 来源 id 解析
2登录页
P2 · 登录
  1. 点「跳过」直接进 P3，但埋点匿名。
  2. 点「微信一键登录」走 wx.login，成功后埋点全部映射到用户 id。
  3. 勾选协议后按钮才可点；未勾选时弹出隐私协议浮层（PRD 隐私协议选择）。
埋点：page_view · skip_click · login_success · login_fail
3概念设计页（沉浸式）
11:275G
AI鹿鹿·概念设计 ···⊙
F I G . 0 1   H E R O
鹿鹿L U L U
面向中小品牌 · AI 陪伴玩具样片 · 中高端价位 · 3-8 岁亲子场景
把你的 IP，
做成一只「AI 玩具」。从 IP 形象到会聊会演会陪，一站到位。
会聊
CHAT
离线口令 + 在线大模型
13 词本地词唤，可热替换为 IP 专属唤醒词；联网接入大模型，秒答内容。
会演
PLAY
4 套场景剧本现成
国风 / 故事家 / 小老板 / 可扩展 — 给 IP 套上专属人设，免开发。
会陪
CARE
情绪感知 + 长期记忆
8 类情绪检测、端云双层记忆、家长后台可控。
🦌
F I G . 0 1 · L U L U · H E R O
P3 · 概念设计（核心页）
  1. 支持上下浏览、分屏浏览（折叠屏 / 横竖切换）。
  2. 右下浮起 AI 交互体验按钮 → 进 P4。
  3. 支持微信分享给好友；好友点开走 P2 登录。
埋点：page_view · scroll_depth · dwell_time · share · ai_btn_click
4AI 体验页（v3 · 3D 主体 · 对话融合）
11:275G
‹ AI 体验 · 鹿鹿 ···⊙
拖一拖看看我！
鹿鹿 嗨，我是鹿鹿！今天天气有点阴，记得带伞哦。顺便聊聊，你最近心情怎么样？
P4 · AI 体验（v3 · 3D 主体 + 对话融合）
  1. 进入即 3D 全屏：拖动旋转、双指缩放、双击复位；右侧浮按钮也可点。
  2. 对话气泡半透浮在 3D 上方，不挡 3D 手势（pointer-events: none 透传到 model-viewer）。
  3. 开场白结合天气/时段；底部输入栏（语音 / 文字 / 发送），毛玻璃吸底。
埋点：3d_rotate · 3d_zoom · 3d_reset · chat_send · voice_click · dwell_time
入口优化 「AI 体验」按钮 · 4 个方向 现状文案"AI 交互体验"已改为"AI 体验"。下方 4 个候选挂在概念设计页大图右下角的真实位置上，按你的偏好挑一个
A · 黑金圆沉浸高奢 · 呼应 IP 黑底
沉浸大图上不抢戏 高级、有"开盲盒"感 浅色背景上效果一般
B · IP 紫胶囊跟 Zaku 主色统一
信息层级最明确 主 CTA 感最强 需要每个 IP 配主色
C · 液态毛玻璃叠图最透气 · 轻奢
深浅大图通吃 精致、不强势 弱光环境下不够醒目
D · 气泡尾巴童趣 · 暗示对话
最暗示"能和它聊" 3-8 岁亲子场景友好 高奢 IP 不适用
最终选定 方案 E · 液态毛玻璃 + ✦ 金 icon C 的胶囊壳子 · 不透明度从 .85 降到 .55（更透）· icon 换成 A 的 ✦ 金色
浅底 hero 大图
深底 hero 大图
实拍 Zaku 紫黑底
关键参数（前端实现锚点）
属性值说明
底色 alphargba(255,255,255,.55)从 C 的 .85 降到 .55，更透，毛玻璃感更强
backdrop-filterblur(20px) saturate(160%)+saturate 让背景透过去时颜色更饱和、更"液态"
icon✦ · 颜色 #C8965A来自方案 A 的金色 sparkle，比 ▶ 更暗示"AI/概念"
圆角22px（高的一半）胶囊形
尺寸高 44rpx · padding 0 18px小程序 rpx 自动适配；和微信原生按钮高度一致
位置absolute · right 32rpx · bottom 36rpx避开 home indicator
代码 ①｜H5 / 通用 CSS（设计/UI 参考）
<button class="ai-cta">
  <span class="ai-cta__icon">✦</span>
  <span class="ai-cta__text">AI 体验</span>
</button>

<style>
.ai-cta {
  position: absolute;
  right: 16px;
  bottom: 18px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 22px;
  /* —— 关键：液态毛玻璃 —— */
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  /* —— 文本 & 阴影 —— */
  color: #1A1A1A;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow:
    0 6px 18px rgba(20,15,8,.18),
    inset 0 1px 0 rgba(255,255,255,.55);
  transition: transform .15s ease, background .15s ease;
}
.ai-cta:active { transform: scale(.97); background: rgba(255,255,255,.65); }
.ai-cta__icon {
  font-size: 14px;
  line-height: 1;
  color: #C8965A;   /* 金色 ✦ */
}
</style>
代码 ②｜微信小程序 WXML + WXSS（前端直接用）
<!-- pages/concept/concept.wxml -->
<button class="ai-cta" bindtap="onTapAiExp" hover-class="ai-cta--hover">
  <text class="ai-cta__icon">✦</text>
  <text class="ai-cta__text">AI 体验</text>
</button>

/* pages/concept/concept.wxss */
.ai-cta {
  position: absolute;
  right: 32rpx;
  bottom: 36rpx;
  height: 88rpx;
  padding: 0 36rpx;
  border: 2rpx solid rgba(255,255,255,.4);
  border-radius: 44rpx;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  color: #1A1A1A;
  font-size: 28rpx;
  font-weight: 700;
  letter-spacing: 1rpx;
  display: flex;
  align-items: center;
  line-height: 1;
  box-shadow:
    0 12rpx 36rpx rgba(20,15,8,.18),
    inset 0 2rpx 0 rgba(255,255,255,.55);
  z-index: 10;
}
.ai-cta--hover {
  transform: scale(.97);
  background: rgba(255,255,255,.65) !important;
}
.ai-cta__icon {
  font-size: 28rpx;
  margin-right: 12rpx;
  color: #C8965A;          /* 金色 ✦ */
}
.ai-cta__text {
  font-size: 28rpx;
}
/* 去掉小程序 button 默认边框 / 灰底 */
.ai-cta::after { border: none; }
.ai-cta[plain] { background: rgba(255,255,255,.55); }

// pages/concept/concept.js  片段
Page({
  onTapAiExp() {
    wx.reportEvent && wx.reportEvent('ai_btn_click', { source: 'concept' })
    wx.navigateTo({ url: '/pages/ai-exp/ai-exp' })
  }
})
兼容性 · 必看
backdrop-filter 在 iOS Safari ≥ 9、Android Chrome ≥ 76、微信小程序基础库 ≥ 2.13 起支持。低版本会降级为纯白底（看起来还是干净的胶囊，不会破）。 如果要兜底保毛玻璃效果，可加 @supports not (backdrop-filter: blur()) 把背景改成 rgba(255,255,255,.85)，或者放一张半透模糊图当背景。
建议 · 这套 ✦ 金 icon 是默认（呼应"AI/概念"语义）。如果该 IP 主色不是暖金系，icon 颜色可以从 #C8965A 换成 IP 自己的强调色（前端把 icon 颜色做成 props 即可）。
埋点S1 · 数据回路
核心维度 = 用户 id × 行为；登录前用 openid / 设备号匿名，登录后 merge 到用户 id。来源 id 用于把行为回填到销售 / 项目。
页面事件关键参数
P1 卡片share_open来源id · 时间戳
P2 登录page_view · skip_click · login_success同意协议 · 渠道
P3 概念设计page_view · scroll_depth · dwell_time · share滚动百分比 · 停留秒数
P4 AI 体验ai_btn_click · 3d_rotate · ai_chat_click来源页 · 互动次数
维度说明
user_id登录后稳定 id；未登录用临时 anon_id（登录后合并）
project_id来自来源 id，绑定销售 + 项目 + 造物版本
version造物版本号（不符诉求修正后 +1）
channelshare / scan / direct