高手笔记!Apple Vision Pro 视觉与动效设计原则拆解

Vision Pro 的视觉与动效篇一共分为 7 个部分:视觉深度提示、内容参数、眼睛费力度、虚拟对象的运动、头部锁定内容、窗口内运动、震荡动画。

前三个部分说的是视觉,后四个部分说的是动效。

往期回顾:

无论是视觉还是动效,每个部分,都是人体工学基础+设计经验的组合介绍。

为什么要了解人体工学的基础呢?

因为如果没有基础的知识打底,只看官方总结的经验,就容易知其然不知其所以然,在应用中产生很多问题,更无法把官方总结的设计经验适用到更广泛的领域中。

一、视觉

用户感知到的深度,可以通过平面的方式进行设计,也可以通过实际在 Z 轴上的位置来进行设计。平面的方式,提供的是视觉深度,是假三维;牵扯到 Z 轴的位置,提供的是确实深度,是真三维。

无论是真三维还是假三维,为了更好的进行空间视觉设计,需要首先了解一些人体工学的知识。

1. 人体工学

这部分,了解 2 个人体工学的知识。

第一:视觉系统辨别深度的方式。

视觉系统辨别深度的方式依靠 2 种线索:单眼线索和双眼线索。

顾名思义,单眼线索只需要一只眼睛即可提供给我们视觉系统依据,双眼线索需要依靠两只眼睛才能提供深度依据。

高手笔记!Apple Vision Pro 视觉与动效设计原则拆解

源自《AR 界面设计》

第二:人眼的舒适阅读区域和注意力时长。

在头部不主动转动的情况下,正负 30 度的弧度,以及比视线水平位置稍稍靠下的位置更适合阅读。

超过这个区域,即使用户不转头,也会因为耗费精力而感到不那么舒适。

高手笔记!Apple Vision Pro 视觉与动效设计原则拆解

从视觉暂留(残像)和瞬目反射(眨眼睛)的角度来说,我们的眼睛是不能一直工作的,在设计中可以余留出可以让眼睛休息的时间。

视觉的余留有点类似于留白,让眼睛不需要通过这部分视觉去识别出什么。比如两个按钮中间的空隙,两个虚像之间的不重要的辅助内容等等。

高手笔记!Apple Vision Pro 视觉与动效设计原则拆解

2. 视觉设计

空间里的视觉设计,除了我们熟知颜色、大小等,还有尺寸、距离等。可以理解为,一类是二维参数,即 Sketch 等二维设计软件里可以调整的参数,一类是三维参数,即 3Dmax 等三维设计软件里,多出来的那些可以调整的参数。

无论是二维参数还是三维参数,就可视化来说,都可以针对颜色、模糊、大小、动效、背景、光影、遮挡、密度这八种对象进行定义,这就是官方说明中所提到的:图像线索用法。

①图像线索用法

我们可以通过这八种视觉设计用法,营造出视觉深度的感知。

颜色:颜色一方面可以唤起我们对这个虚像对应的真实物体的感知,一方面色彩本身也会影响我们对大小的感知。比如颜色的明度。

高手笔记!Apple Vision Pro 视觉与动效设计原则拆解

模糊:太远的内容会有点模糊看不清楚,所以,模糊本身会带来更远的感知。

高手笔记!Apple Vision Pro 视觉与动效设计原则拆解

大小:常识是,近大远小。

高手笔记!Apple Vision Pro 视觉与动效设计原则拆解

微动效:例如放大的动效和缩小的动效会感觉像是离近和离远。

背景:光影、遮挡和密度也会给予我们深度的提示。

高手笔记!Apple Vision Pro 视觉与动效设计原则拆解

最后,谨慎使用密集的重复图案,双目 AR 眼镜有一块细分技术是双目的合像,合不好会产生双影的视觉感知。

高手笔记!Apple Vision Pro 视觉与动效设计原则拆解

②内容参数

了解了八种视觉设计的用法,官方给出了三个更具体的参数建议:距离、尺寸和明暗的过渡。

距离:

  1. 常规的阅读距离要大于用户的一臂之长
  2. 要允许用户可以调整这个距离
  3. 放置在一臂以内距离的内容,需要符合两个条件:要么是需要直接进行操作的内容,要么是短暂出现的内容

大小和尺寸

无论是通过大小还是通过尺寸来设置,同一个内容要用户在不转头的情况下就能看全。

明暗过渡

突然切换到明亮和黑暗的环境中眼睛会有一段适应的时间,所以两个明度相差太大的内容如果要切换,需要设置一个过渡过程。

高手笔记!Apple Vision Pro 视觉与动效设计原则拆解

二、动效

前部分的视觉,针对的是 AR 设计中内容本身的设计,而动效,就是 AR 设计中内容的运动。

首先还是从人体工学的知识开始。

1. 运动感知系统

人体对运动的感知,一方面来源于视觉系统,一方面来源于内耳的前庭觉。

前庭觉是位于内耳中的液体和器官,它们会告诉我们身体如何根据重力作用确认方向。当前庭系统的信息和视觉系统接受的信息相互冲突时,就容易造成生理上的头晕、呕吐等不适感。

高手笔记!Apple Vision Pro 视觉与动效设计原则拆解

大多数时候,用户都是处于静止状态下在使用 AR 设备,因此,在深度距离上的动画(前进后退等)要谨慎使用,充分弱化。

例如,大量虚拟内容前进这个动画,会让用户与自己往前动产生混淆,可以在动画上叠加透明度以弱化视觉感知。

高手笔记!Apple Vision Pro 视觉与动效设计原则拆解

再例如,大面积虚像内容的运动,会让用户与自己的运动产生混淆。窗口内的运动,介绍了这种动效的处理方式。

高手笔记!Apple Vision Pro 视觉与动效设计原则拆解

2. 内容与用户的相对位置关系

Vision Pro 介绍了三种内容模式:头部锁定内容(Head-locked)、世界锁定内容(World-locked)和懒跟随内容(Lazy follow)。

头部锁定内容:与用户的头部保持相对静止状态。通常适用于小型的界面,比如随取随用的操作栏。

高手笔记!Apple Vision Pro 视觉与动效设计原则拆解

世界锁定内容:与地面保持相对静止状态,和我们物理世界的物品类似,是我们对内容熟悉的认知,所以如有可能优先使用这种模式。

高手笔记!Apple Vision Pro 视觉与动效设计原则拆解

懒跟随内容:介于头部锁定和世界锁定之间的一种模式。头部微微移动的时候不会跟随,只有用户头部大幅度移动时才会跟随。等同于我在《AR 界面设计》里介绍的 C 类。

高手笔记!Apple Vision Pro 视觉与动效设计原则拆解

3. 窗口内的动效

因为大窗口的内容动效可能让用户产生混淆,官方给了 8 点设计建议。

①保证窗口内内容和物理世界保持水平

②保证动效扩展中心点的稳定。这里有一个一个概念:扩散焦点,可以理解为动效的感知起点。

高手笔记!Apple Vision Pro 视觉与动效设计原则拆解

③扩散焦点永远保持在窗口内

④避免单纯无意义的角度移动(因为会让焦点移动)

⑤避免过快的动画

⑥如果动画变化过大,使用渐近渐出过场衔接

⑦前后移动的动效,内容间距放大,物体放小

⑧使用低反光的材质

最后,无论窗口内还是外,AR 界面设计不推荐震荡动效,尤其是 5s 左右的重复。

总结

  1. 掌握基本的人体工学知识,可以用活别人的经验。
  2. 8 个视觉设计用法,定义了两类参数来提供三维效果(二维参数,提供视觉深度,即假三维效果;三维参数,提供确实深度,即真三维效果)。
  3. 动效设计的处理关键点:放慢节奏+可预测的。

欢迎关注作者微信公众号:「林间有影落」

高手笔记!Apple Vision Pro 视觉与动效设计原则拆解

收藏 14
点赞 17

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