产品功能

雷达界面与交互流程

📱 产品功能与交互设计

📡 核心界面：雷达 (The Radar)

首页采用了“雷达/声纳”风格的动态视觉设计，强调“探索”的感觉。

• 状态 A (扫描中): 屏幕中央 Logo 旋转，同心圆波纹（呼吸效果）向外扩散，直观告知用户设备正在消耗能量进行搜寻。

• 状态 B (发现): 扫描到的用户头像根据 RSSI 信号强度分布在雷达图上。

  • 视觉隐喻: 信号强（近）头像大且靠中；信号弱（远）头像小且靠边。

  • 状态标识: 🟢 绿点（实时在线），⚪ 灰点（离开范围）。

• 状态 C (互动): 点击雷达上的光点即可发起临时会话。

🖱 关键交互流程

跨节点联络

当用户试图联系一个超出直接连接范围的人时，系统触发“中继动画”。

1. UI 会绘制一条从 A 指向 C 的连线，中间依次亮起中继节点 B1、B2 的头像。

2. Node Fee: 每个中继节点下方显示其收取的“过路费”。系统弹窗询问是否支付。

这是向用户教育 Mesh 网络价值的最直观方式。

真人验证

沉浸式聊天

🔗 跨节点联络

当用户试图联系一个超出直接连接范围的人时，系统会触发 “中继动画”。

• 可视化路径：UI 绘制一条连线，中间依次亮起中继节点 B1、B2 的头像。

• 节点费用：直观显示每个中继节点收取的“过路费”（如 0.1 $BF），教育用户 Mesh 网络的价值。

🆔 身份验证流程

用户在设置头像或提取代币前必须完成真人验证。

• 交互：点击头像 -> 启动前置摄像头。

• 验证：屏幕出现扫描线，需通过活体检测且相似度 > 70%。

🐦 Yappers 模块与社交图谱导入

为了解决冷启动问题，Butterfly 引入了 Yappers 模块。如果两个在现实中相遇的用户都绑定了 Twitter，他们不仅能交换 $Butterfly，还能自动关注对方的 Twitter。