苹果Vision Pro上有哪些设计亮点?我总结了这10个(视觉篇)

随着上周苹果发布会带来久违的 One more thing 环节,苹果的 MR 头显产品终于发布了。相信最近大家已经在网上看过非常多的产品分析,但作为设计师,我们可以更聚焦一些,一起来学习它的全新交互方式和视觉设计亮点吧。

这个产品的发布是不是 iPhone 时刻虽然不能确定,但苹果的号召力不容小觑,我们作为设计师必须做好准备。

为避免篇幅过长,我计划用 5 篇文章系统性地梳理 Vision pro 在视觉、UI、交互、动效、3D 创意设计等方面的视觉亮点,值得收藏学习。

今天先讲讲这次宣传视频中最吸引我的 10 大视觉设计亮点吧。

更多关于Vision pro的设计:

一、跟随眼动的图标设计

图标设计在风格上延续了其苹果系列的设计调性及造型特点,以 2D 微质感风格为主,这便于用户认知迁移和快速上手。

苹果Vision Pro上有哪些设计亮点?我总结了这10个(视觉篇)

在保持连续性的基础上,也做了一些针对场景的创新设计。把图标做了分层设计,目的是当用户通过眼动触发了该图标时,能以分层+投影的形式强化其立体感,给用户 3D 的场景感,以及具备方向性的交互反馈。

苹果Vision Pro上有哪些设计亮点?我总结了这10个(视觉篇)

苹果Vision Pro上有哪些设计亮点?我总结了这10个(视觉篇)

但这一点好像是锤子以前做过的?形式感很类似,锤子是通过手机陀螺仪实现 3D 分层效果,而苹果这里是为了其眼动反馈。

苹果Vision Pro上有哪些设计亮点?我总结了这10个(视觉篇)

锤子手机设计师 paco 作品: https://dribbble.com/shots/3646455-Space-Launcher

为了使得 3D 的效果更自然,苹果也会通过图层的边缘高光和投影来强化多图层之间的空间感,给用户带来更好地视觉效果和反馈。

苹果Vision Pro上有哪些设计亮点?我总结了这10个(视觉篇)

这里需要说明的是,这种图层效果是苹果系统底层自带的,也就是你在设计的时候是按左边这种方式去做,切图放到系统里之后,会自动添加一个类似一个玻璃材质以突出这种微质感和层次感。

二、界面缩放

苹果这里的缩放交互做的比较巧妙,玩过 VR 设备的朋友都知道,想要操作窗口的时候,窗口底部会也一个小横条,苹果这里也有,不过还多了一个小点。

苹果Vision Pro上有哪些设计亮点?我总结了这10个(视觉篇)

这个小点,给用户的隐喻是比较好的,意思是可变的横条效果,便于用户理解和操作。

苹果Vision Pro上有哪些设计亮点?我总结了这10个(视觉篇)

三、多窗口界面

多窗口和 FaceTime 很实用,试想下你在和同事分享 PPT,就像在现场一样,相互可见,云现场办公的感觉应该会非常不错。

苹果Vision Pro上有哪些设计亮点?我总结了这10个(视觉篇)

相比于 Meta 之前推的那种虚拟形象是完全不同的感受。

苹果Vision Pro上有哪些设计亮点?我总结了这10个(视觉篇)

Meta 出的 VR 多人视频会议场景图

把界面多窗口拓展,实现真正的生产力工具,这以后感觉就不需要屏幕了,随时随地办公。

苹果Vision Pro上有哪些设计亮点?我总结了这10个(视觉篇)

四、渐进式环境切换

苹果这次的产品,可以在 VR 与 AR 之间丝滑切换。不仅解决了一直以来 VR 和 AR 不相容的发展局面,在效果上也做了一个非常好的渐进式创新。

你可以通过它自定义沉浸程度,选择虚拟世界与现实世界相融合的程度。

苹果Vision Pro上有哪些设计亮点?我总结了这10个(视觉篇)

当有人靠近时,会有类似雾的散开效果,不会让你与真实世界隔离,随时与真实世界中的人沟通。这个真的很好的解决我之前用 VR 产品的痛点,不用摘下眼镜那么麻烦了。

苹果Vision Pro上有哪些设计亮点?我总结了这10个(视觉篇)

五、多设备互联

苹果生态做的非常完整,我一直都特别习惯于苹果产品的多终端互通,vision pro 同样继承了这一优势。

当你看着你的电脑屏幕,就能把电脑中的界面放大显示到真实世界中,然后还可以继续用你的电脑键盘和鼠标作为输入设备,相当于多了一个大屏,而且还能设置多个,这个应该也会非常实用。

尤其对于我们设计师来说,经常需要一个屏幕看图,一个屏幕画图,还需要看各种大图细节,有了这个设备应该就不用买那么显示器了。

苹果Vision Pro上有哪些设计亮点?我总结了这10个(视觉篇)

六、自适应电影主题

原来我在用 VR 的时候就想过这个问题,要是看电影的时候,周围的环境能随着电影效果改变,那看非 3D 电影的时候沉浸感也一定会非常强了,毕竟纯 3D 的 VR 电影资源还是相对少了一些。

苹果Vision Pro上有哪些设计亮点?我总结了这10个(视觉篇)

这次苹果果然做到了,在你看电影的时候,会自动结合电影主题,改变环境显示元素。甚至连 UI 都做了主题化定制,可谓是效果拉满。

苹果Vision Pro上有哪些设计亮点?我总结了这10个(视觉篇)

七、电影互动效果

苹果做到的不仅是环境自适应,在 XR 的环境中,虚拟和真实不再那么割裂的时候,互动电影就该是它独有的形态。

当电影中的角色把东西扔出来时,它是能真正戴到你的手上,让你分不清真假。

苹果Vision Pro上有哪些设计亮点?我总结了这10个(视觉篇)

八、视频 3D 化

当你看球赛的时候,如果觉得单纯看视频不过瘾,你还可以把画面直接转换为 3D 球场,让你看清球员的各个角度的动作,给你一个上帝视角,这个功能真的是非常厉害。

苹果Vision Pro上有哪些设计亮点?我总结了这10个(视觉篇)

看到的 2D 视频中的恐龙也能把头伸出屏幕,效果非常惊人。

苹果Vision Pro上有哪些设计亮点?我总结了这10个(视觉篇)

九、虚实结合

苹果真正做到了,与真实世界无缝衔接。虽然你处在虚拟世界,但与真实世界中的人可以随时互动,还能一起围观 3D 模型效果。

苹果Vision Pro上有哪些设计亮点?我总结了这10个(视觉篇)

也可以随手在真实世界中画出 3D 虚拟物件,效果看起来非常好。

苹果Vision Pro上有哪些设计亮点?我总结了这10个(视觉篇)

十、玻璃材质

界面整体采用了磨砂玻璃的材质效果,会随着环境的变化产生光影变化。

苹果Vision Pro上有哪些设计亮点?我总结了这10个(视觉篇)

这种玻璃材质语言,在 MR 场景中效果很不错,原因是它能让真实环境中的光透过,让界面能适应各种光照条件和物理环境,易于摆放和使用。

光线的变化,边缘高光的细节也会跟随变化,这个效果做的很细腻。

苹果Vision Pro上有哪些设计亮点?我总结了这10个(视觉篇)

对于菜单导航,也做流光的选择效果。

苹果Vision Pro上有哪些设计亮点?我总结了这10个(视觉篇)

在移动窗口的时候,甚至还会把界面的透明度降低,以方便用户找准摆放界面的位置,细节处理的非常棒了。

苹果Vision Pro上有哪些设计亮点?我总结了这10个(视觉篇)

用玻璃材质在 MR 空间中会有不少好处,比如玻璃材质能对环境产生动态变化,很自然的结合到不管是亮的环境还是暗的环境中。

苹果Vision Pro上有哪些设计亮点?我总结了这10个(视觉篇)

亮色环境

苹果Vision Pro上有哪些设计亮点?我总结了这10个(视觉篇)

暗色环境

苹果Vision Pro上有哪些设计亮点?我总结了这10个(视觉篇)

总结

以上所有设计都是为用户的需求考虑,不单纯是设计形式感上的创新,而是真正做到以用户为中心来设计。科技服务于人,深刻领会这一要点,才是苹果一直在引领设计趋势的秘诀。

有黑科技不算特别厉害,把所有这些黑科技全部整合在一起,给用户带来优秀的产品,才是真正的了不起。

Apple Vison pro,先不说它算不算新的 iPhone 时刻,但它确实做了非常多的创新,单专利就有 5000 多件。

重新定义了很多新的玩法,比如虚实结合居然还能给其他人展示用户状态,也能看到其他人穿透到你的虚拟世界,真正做到虚拟现实的融合;创新的 3D 相机,记录真正的现实回忆;把工作串到虚拟场景里,可能成为真正意义上的生成力工具等等。

苹果十年磨一剑,感觉把它很多先前发布的硬件产品能力都倾注在了这个新设备上,比如 airpods 空间音频,自研 M2 芯片,多设备互联,高清屏幕,面部识别,苹果手表等等。

像是继承了乔布斯的意志:或许你不知道你现在做的这些事有什么意义,但终将有一天能帮到你。

苹果从来都没有什么先来后来的概念,也不管世界是 AI 还是元宇宙,它只在乎它的用户有没有被产品打动。我觉得这才是真正意义上的理想主义者。

今年才过半,趋势上就已经有了 2 剂猛料,前有 AI,后有 XR。作为互联网从业者,必须保持对新趋势的敏锐度。

记得我去年写 AI 绘画教程,那时候它还没火,写了教程也没什么人看,后面火了之后又有不少人在群里问我写教程,其实你只是稍微对新趋势保持一点关注力就好了,多多看我写的文章。

最后想引用库克说的一段话:

“如同 Mac 将我们带入个人计算时代,iPhone 将我们带入移动计算时代,Apple Vision Pro 将带我们进入空间计算时代。基于 Apple 数十年的创新积累,Vision Pro 是遥遥领先的空前之创,带来革命性的全新输入系统和数以千计的创新技术。它为用户带来绝佳体验,并为开发者带来振奋人心的新机会。”

所以,别再错过机会了!

如果你有学到,记得分享到你的朋友圈哦~

欢迎关注作者的微信公众号:「彩云译设计」

苹果Vision Pro上有哪些设计亮点?我总结了这10个(视觉篇)

收藏 51
点赞 37

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。