专栏名称: IXDC
IxDC由广州美术学院设计学院、香港理工大学设计学院、网易、腾讯、华为、中国电信、中国移动、金山等单位联合发起。是全国第一个受政府认可和领导的交互设计专业委员会,致力于引领中国交互设计行业发展。
目录
相关文章推荐
简单心理  ·  年轻人好像在谈一种很新的恋爱 ·  昨天  
生物学霸  ·  蒲慕明院士:物理学出身的神经科学家 ·  2 天前  
简单心理  ·  保持单身这件事,你是看不透还是看开了? ·  3 天前  
51好读  ›  专栏  ›  IXDC

多维度交互,革新你的购物感知!

IXDC  · 公众号  ·  · 2024-11-30 08:30

正文


本文授权转自:淘宝设计(ID:ali-taobaoued)


引言
自上篇《淘宝Vision Pro版完整体验指南》后若干月,设计团队进一步深入混合现实体验在品牌展示及特色互动中的探索实践。期间淘宝Vision Pro版本与诸多品牌合作,将品牌(1)多品空间及(2)超级单品搬入用户家中,帮助消费者更直观、沉浸了解品牌、试用商品。体验设计上设定了2种范式以提供商家选型: 1 橱窗模式、2 叙事模式

▲ 橱窗模式品牌案例
▲ 叙事模式品牌案例
▲ 合作品牌

#01
橱窗体验模式
该模式适用于多商品的展示和互动。通过多商品、多媒体组合展示空间的方式,让用户在非线性体验中了解品牌和商品。平台提供商品、视频、氛围、品牌标志等多种类型的模块,每个模块的互动都是预先产品化的,以这样一种模块化的方式使品牌可以自由构建自己的空间。
▲ 橱窗模式图解

解释橱窗体验模式通用原则:
模块: 可互动模块在点击后,会从橱窗中漂浮至用户前方进入下一步交互:
① 单品:旋转、移动、缩放、放置、查看尺寸、切换SKU等;
② 多品:环绕用户陈列、旋转、移动、放置、查看尺寸、切换SKU等;
③ 视频:双目3D、全景视频播控等;
④ 氛围:微动效自动循环播放、不可互动;
⑤ 标志:微动效自动循环播放、点击轻反馈;
⑥ 更多模块可根据案例不断扩充。
尺度: 商品模块根据品类适当作缩放处理(默认1:1),为呈现真实性与沉浸感,其余内容或氛围模块大小及其所组合的整体空间置于用户前方相对宽视域内(≈120°),距离作远近调整。
风格: 根据品牌调性设计氛围堆头造型、材质、摆置等,为兼容真实融合度与场景自身亮度,需要调试实(延)时与固定着色比例。
注:调试EPT(真实环境捕捉贴图)、IBL(自带光照贴图)、BT(烘焙光照贴图)配比,以还原对象在混合现实、虚拟现实环境以及两者环境切换下真实度表现。

CASE 1
COLMO家庭套系空间

高端厨房套系与空调洗烘套系空间呈现,用户可将同系列的多个商品自由放置在真实的家中,查看整体商品套系的搭配效果。

▲ 厨房套系
▲ 空调洗烘套系

贴合真实搭配的购物场景。 提供摆放的自由性让用户可以在家中玩转起来;模拟商品真实的摆放需求,支持商品叠放,提供吊顶/墙面/地面/桌面等多个面的真实放置体验。

▲ 多商品自由放置
▲ 多面吸附
▲ 叠放

丝滑细致的放置体验与交互细节。 提供摆放的自由性让用户可以在家中玩转起来;模拟商品真实的摆放需求,支持商品叠放,提供吊顶/墙面/地面/桌面等多个面的真实放置体验。

▲ 3D面板跟随
▲ 靠近旋转吸附
▲ 互斥逻辑

CASE 2
芝华仕沙发空间

利用VR、MR多种场景多种角度,全面展现商品卖点和商品使用氛围。
VR沉浸式体验。 利用VR场景展现未来客厅的品牌定位,多视角沉浸式体验沙发的动态效果和颜色搭配。

▲ 第三人称视角
▲ 第一人称视角
▲ 颜色切换

商品卖点展示。 结合视频/模型动画/音频等2D、3D多模态综合展示商品卖点。

▲ 视频讲解卖点环绕展示

#02
叙事体验模式
该模式适合展示单个商品展示与互动。通过逐一定制商品功能亮点,用户能够以线性体验的方式从头到尾了解商品。每个定制点选择适当的技术条件和交互方式,以最直观、最身临其境的方式表现商品的亮点。

▲ 叙事模式图解

解释叙事体验模式通用原则:
结构: 入场logo秀 → 商品体验点1 → 商品体验点2 → 商品体验点n → 购买。体验点作为导航Tab依次排开,数量不超过5个,用户依次或跳跃体验。
单点: 根据商品特性和亮点展示诉求,结合设备特性设计商品体验点,以下罗列常用能力:
① 手部(身体)追踪:用于商品悬停、持握查看、试穿戴等;
② 空间识别:用于放置吸附、避障、路线规划等;
③ 多模态搭配:视频窗口、全景窗口、信息面板与商品模型组合呈现,用于影像呈现、多商品对比等;
④ MR/VR切换:用于车、家装内部沉浸场景查看或场景氛围营造等;
⑤ 特效:用于可视化商品特性或场景需要,如气流声音、数据可视化等;
⑥ 更多能力可根据案例不断扩充。
串联: 当前体验点完成后自动进入下一个,或在切换时有明显退场与入场连接。商品模型对象一镜到底。伴随声音引导不让用户迷失,能顺利体验完整个流程。

▲ logo秀
▲ 悬停持握
▲ 智能避障
▲ 多品对比

CASE 1
小米SU7

整个体验依次分为 1 全景看车 - 运用全景窗口高清图片呈现多场景内外饰、2 实车体验 - 运用高精度3D模型叠加浮点与动画视效呈现外饰亮点、3 内饰体验 - 运用虚拟现实模型与环境图呈现内饰亮点。

▲ 汽车叙事体验架构

半沉浸感的全景看车。 全景窗口距离大小包裹用户FOV,画面正中的汽车大为1:1;场景与汽车作双目3D视差;樱花场景运用空间特效飘落樱花。

▲ logo秀
▲ 切换颜色
▲ 场景特效

交互舒适的实车体验。 大件商品给定1:3/1:1切换,不支持无极缩放以增加交互确定性;2.导航栏环绕汽车作椭圆轨迹移动,且始终面向用户方便操作;3.任务浮点可视化绑定于汽车对应位置,提供远距离间接交互提升任务可见性与完成率;4.后备箱行李单次点击触发连贯动画,减少细碎交互带来的易错率与资产穿模或掉帧问题。

▲ 比例切换、移动、旋转
▲ 切换颜色
▲ 切换轮毂
▲ 查看后备箱
▲ 查看风阻

全沉浸感的座舱体验。 设定伸手可及的直接交互点与视效提示,营造符合车内直觉的体验(如直接按启动键与方向盘上的狂暴模式键);启动前后夜晚与白天的虚拟环境变化,还原环境贴图对车内模型光照的影响营造真实沉浸感;HUD、狂暴穿梭视效、氛围灯视效动画结合空间音频烘托试听多感官体验。

▲ 启动
▲ 切换颜色
▲ 开启狂暴模式
▲ 打开氛围灯


#ONE MORE THING


天降红包雨
这次双十一为用户带来了全新的互动游戏:在家里手接天上掉落的红包雨。为了拿到888元与万元奖品,前TOP150个用户平均游玩了40次。

▲ 双十一超级红包雨

红包雨氛围表达。 利用红包、金币等多种3D元素的坠落来丰富的“雨”感,主打一个好运到家的感觉;不同元素搭配不同特效和音效,提升感官冲击力强化体验氛围。






请到「今天看啥」查看全文