3D滑雪追踪应用

滚兽

这是极限运动数字体验中的史无前例之举, 不论是iOS或安卓用户,滑雪爱好者只需要在手机上轻触两次,即可精准记录详细的滑行轨迹。借助可互动、元宇宙式的3D轨迹回放功能,用户可全方位重温滑行过程,并与好友分享、追溯精彩运动瞬间。

3D interactive ski tracking replay
滑动
3D interactive ski tracking replay

3D滑雪追踪应用

滚兽

这是极限运动数字体验中的史无前例之举, 不论是iOS或安卓用户,滑雪爱好者只需要在手机上轻触两次,即可精准记录详细的滑行轨迹。借助可互动、元宇宙式的3D轨迹回放功能,用户可全方位重温滑行过程,并与好友分享、追溯精彩运动瞬间。

为3D滑雪追踪应用,构建数字化生态链

这个项目的初衷,是为中国滑雪者打造令人耳目一新,别具一格的数字体验。我们打造了多个侧重点各不相同的原型概念,并邀请数十名处于各水平等级的滑雪爱好者,在UX Spot实验室中进行测试,探索中国滑雪爱好者的潜在需求,钻研能够打动他们的数字体验,为新一代的滑雪追踪应用奠定了设计思路。

我们继而将中国著名的经典雪场制成精细的3D模型,搭配使用机器学习的技术,训练出 GPS 定位记录的算法,同时兼容于 iOS、安卓以及网页端,打造前所未有的交互式3D轨迹回放的数字体验,实现技术和设计的完美融合。

用户体验 / 设计栈

用户体验调研

原型设计

用户体验设计

产品设计

3D环境设计

用户界面设计

技术栈

Flutter

Swift

Kotlin

WebGL

Laravel

Laravel Nova

数据解析

机器学习

微信小程序

Rolling Beast - Interactive 3D tracking replay

交互式3D滑雪轨迹回放和3D雪场地图

「滚兽」应用中的3D滑雪轨迹记录可谓史无前例的创新之举。用户可根据自己的视角,缩放、平移并旋转在3D雪场模型中他们的滑行轨迹回放,与此同时,应用还会显示用户实时的滑行速度、滑行落差以及滑行距离等。

我们为各雪场建了内容充盈的3D模型,雪道及缆车点等细节一览无余。利用最大坡度、雪道长度和缆车起终点等数据,用户可提前规划行程,滑雪路径一目了然。

应用特点

滑雪轨迹记录

3D滑行轨迹回放

3D雪场建模

雪场天气概况

寻找朋友

雪场排行榜

创建组队

解锁成就

将3D轨迹回放分享于微信

Rolling Beast 3D ski tracking - App UI screens

Rolling Beast app UI design screens

透过炫丽的WebGL技术将3D轨迹回放的体验分享于微信

我们运用WebGL的技术,打破了传统微信小程序的3D交互边界,让中国滑雪者可以将自己的滑雪轨迹单独或群发分享于微信。

Rolling Beast 3D Interactive - App replay of ski tracking

一个不仅可以用于内容管理,还集成了滑行轨迹数据分析功能的定制化后台

为了支持 3D 滑雪记录应用复杂的管理需求,我们基于 Laravel 框架与 Laravel Nova 后台管理界面打造了一套高效且强大的定制化CMS和CRM后台系统。由于每个雪场数据的独特性,我们需要针对每个雪场进行一对一的高还原度 3D 建模与雪场地理信息数据的采集与录入。为了便于内容管理者后续的运营维护,我们自研了一套 3D 线路绘制工具以确保管理者可自行进行线路可视化数据的更改与调试。

此后台系统会自动接收滑雪者每一次的轨迹记录,并对回传的数据进行详尽的分析。后台收集的数据包括GPS坐标、设备信息、操作系统、滑雪者的滑行趟数、距离、速度和垂直高度等。借助这种严密的自动回传设置,专业的数据科学工程师可在交互式的3D WebView页面中直观地查看每次滑行轨迹的回放,进行数据分析,不断优化轨迹记录的算法。

使用Flutter打造的跨平台移动端开发

这款 app 是基于 Flutter 跨端框架开发的,得益于 Flutter 强大的的跨端能力、繁荣的开发生态与顺滑的动画支持,我们可以基于同一份源代码库向 iOS 与 Android 两个系统平台编译出表现一致的跨平台 app 并完美还原了设计与动效。除此之外,为了增强 app 对于不同系统平台的兼容能力,我们还使用了系统原生语言编写组件并集成进 Flutter app 内来实现更底层、更复杂的功能。

下载滚兽移动端应用

滚兽应用现已在中国全面上线,并可在以下iOS及安卓应用商店获取下载。

应用下载

iOS 应用商店 →

腾讯应用宝 →

小米应用商店 →

360应用商店 →

想要创建属于你的元宇宙?

相关案例

View
Hublot China - Ecommerce WeChat mini program case study card

别具一格的微信电商

宇舶

UX / UI / WeChat mini program

View
Hublot Wechat owners mini program case study background card

微信会员系统

宇舶

UX / UI / WeChat mini program / Laravel

有合作意向吗?