行业关键字
UI设计UI理论和资料 → 正文
陀螺仪的应用 | 让你身临其境、无法自拔的设计
作者: 能操纵空间的 来源: 公众号:淘宝设计 时间: 2022年6月21日
iPhone率先将先进硬件(如陀螺仪、重力感应等传感器)引入手机,让智能手机的硬件参数和升级成为用户的重要选购参考,设计师们也会在设计时关注到硬件的应用和潜力挖掘。今天我们浅聊一下“陀螺仪”在增强交互体验、丰富交互反馈上的实际应用。


▲ 智能手机有丰富的硬件能力

一、陀螺仪是什么

在我们的自然交互场景中,视野的变化(如观察四周)和速度的感受(如拍打摇晃)是和五感非常紧密的体验。手机中的陀螺仪和加速度传感器就是这样的硬件,可以感知我们在使用设备时的角度、位置和速度变化。


▲ 陀螺仪可测量设备的方向和角速度

通过陀螺仪传感器,手机应用能感知用户设备的角度变化并触发相应的动作和交互,拓展平面屏幕空间,实现更加有空间操纵感的体验。比如,最常见的就是的手机横/竖屏自动切换、导航指路、手机摇一摇等功能。


▲ 手机横竖自动切换


▲ 地图方向感知

二、让体验增强的应用场景

1. 越出静态视图边界

通常背景氛围图片的展示区域最多只有屏幕宽度,但是结合陀螺仪的角度感知,通过视差变化可以将视图延展到原先被限制的空间之外,给用户更多的视觉信息,形成类3D的空间效果。淘宝人生的套装展示页中,当转动手机时背景图和人物模型也会跟随变化,让人物及服装的展示更加生动和有冲击力。


▲淘宝人生套装展示

当将多帧图片匹配视角变化时,甚至能带来裸眼3D的效果。


▲类裸眼3D效果

根据陀螺仪旋转视角,静态图片可以不仅仅固定在单一位置上,还可以升级为交互性内容,模拟现实空间里物品的抛、弹、跳,让信息交互更有惊喜感,让用户身临其境更有控制欲,不知不觉反复把玩。


▲ 好好住徽章动态交互

很多应用中,陀螺仪承载了其核心的能力,给用户带来突破屏幕的360度的全景体验。比如在星图类APP中,跟随陀螺仪的变化,可以将浪漫的星空变得可识别和触手可及。


▲ 星空APP–即时星图体验

2. 让游戏更具操纵感

陀螺仪在体感类手游游中可以说是标配,几乎所有需要感知三维空间变化的游戏都需要用到它。尤其是赛车、飞机或者体育类游戏,对角色控制和视角变化有高精准度要求。通过调整手机姿势、上下左右摆动,模拟真实空间的操控性反馈,增强了游戏空间的3D体感,用户跟随视角变化在游戏里上下翻飞,有强烈的代入感和沉浸感。


▲ 狂野飙车的镜头视角变化


▲ 和平精英体感操作

VR体感游戏中的陀螺仪跟随用户肢体的动作,实现虚拟空间物品距离和空间视角的变化。


▲ AR体感游戏

3. 现实空间的互动交互

除了可以操控平面元素,在我们使用3D AR交互功能时,陀螺仪也可以增强与现实空间交互的真实感。和现实世界的自然交互一样,当相机靠近被跟踪的3D模型时,3D形象需按比例放大,并跟随相机的视角调整3D模型的展示视角。


▲ 3D应用


▲ AR跟随并触发功能

而且,在有多维空间切换诉求的场景中,可以通过监测手机的角度变化,在2D/3D两种空间中快速轻便切换。比如高德地图的步行导航,当用户抬起手机能迅速进入AR导航模式,轻松获得3D实景指引,让用户想迷路都难。


▲抬起唤醒AR导航


▲放下恢复平面导航


▲高德地图唤醒AR实景导航

在智能玩具中也会用到陀螺仪,例如Smart Car教育机器人。在它的手势控制手表上就装有陀螺仪,可以根据手势控制机器人移动。


▲ 陀螺仪体感控制

陀螺仪还能植入其他生活用品中,比如在这款潮人喜爱的LED鞋中,它跟随你脚步的速度和角度,展示炫目的灯光颜色和模式,让你成为人群的焦点。


▲ 发光的鞋子通过陀螺仪

4. 让视听一体身临其境

陀螺仪除了可以带来视觉和体感上的空间感和操纵感,在音频上也能实现更真实极致的环绕声体验。比如,AirPods Pro内置的陀螺仪和加速度传感器会对佩戴者的头部进行追踪,即使你的位置变化也能使环绕音效保持在固定位置,让环境音会根据人的移动而移动,创造沉浸式的声音体验。


▲ Airpods环绕声定位

Airpods的空间音频能力,也可以应用到界面交互上。通过把头部角度变化映射到图片视角变化,形成视差效果,转动头部就能看到更多内容。


▲ Airpods跟随示例

三、更多可能

除了陀螺仪,移动设备还有很多丰富的传感器硬件能力,如压力传感器、光学传感器、震动传感器、NFC等,各种令人印象深刻的交互表达中都有它们的身影。例如,zenly的bump功能通过近场互动快速添加好友和查看信息,字体设计网站通过屏幕多指触控可以让设计更自由和可控。


▲zenly近场互动


▲多指触屏设计字体

在体验设计中,我们可以在合适的场景使用硬件能力集成更丰富的功能,创造更加匹配自然行为和有创意的交互和反馈,为用户带来更多直接有趣的体验~

作者:能操纵空间的;来源:公众号:淘宝设计
原文链接:https://mp.weixin.qq.com/s/qAz5WK9zQ7JPhgpBqmgorw

(责任编辑: Admin

作品欣赏

欢迎关注视觉同盟微信公众号:
微信公众平台:搜索“vudn2004”或扫描下面二维码:
English | 关于我们 | 站点地图 | 联系热线 | 合作伙伴 | 艺术顾问 | 订阅 | 手机版
版权所有 © 2004-2024 视觉同盟 visionUnion.com)
Copyright © 2004-2024 VisionUnion.com Incorporated. All rights reserved
京ICP备09005192号
视觉同盟旗下子站:品牌专区 | 创意设计人才网 | 视觉同盟社区 | 视觉同盟论坛 | 英文版