Apple Vision Pro 设计原理及基本原则

冰岩作坊 October 23, 2024

苹果官方介绍了vision os用户界面设计原则,主要包括界面基础元素布局、app图标设计规范和材质选择,以加强空间视觉效果和用户体验。本文便适当拓展,从vision os的设计原则及其原理两个角度出发进行分享。

一、空间界面设计原则

这种图标需要使用多个图层,在其他平台实现这种视差效果需要在图片中处理,而在这里可以直接使用不带投影和高光的扁平图层,系统会自动实现这种真实的3D效果。

在app中最多有三个图层:一个背景层和最多两个前景层,每层都是一个1024像素的矩形图片,并且当它们组合在一起时系统会自动添加一个类似玻璃的层,加强整体的深度、高光和阴影效果。同时尽量要保持图形居中,因为如果他们离边缘太近的话被聚焦时的突出效果看起来会偏离出去;并且避免用大面积的低不透明度效果,因为这样会和后面的阴影混到一起。

app会在不同的背景环境中启动,因此他们应易于在用户周围的空间中显示,易于在任何距离、任何光线条件下使用,出于这个原因,苹果设计了一个新的视觉语言,即玻璃材质。它可以让用户周围的光线和虚拟内容的光线透过,
让人感觉像现实世界的一部分,并且过多的不透明窗口会让人有压抑感,也会让界面看起来很重,玻璃材质又使它作为UI的一个画布显得更加轻盈。

这种玻璃对光线的反应是动态的,通过调节对比度和色彩平衡能够与空间融为一体,就像这个从白天到夜晚的过渡。不同于IOS和Mac os,这个平台上没有明显的浅色或深色模式,利用这种特点可以让你的产品界面在各种场合和光线条件下都得到最好的呈现效果。

在这种材质情况下尽量避免把浅色材质叠放到一起,这会降低易读性和对比度。

首先为了保证一致性,所有的字体都使用了适用平台规范的point规范。为了提升易读性,苹果加粗了在前几层的字体,提高了对比度,例如在IOS正文样式使用的是regular,在这一平台上却使用了medium,标题使用了bold,让文本始终清晰可见。

在这一平台上,因为背景总是在变化的,所以虚化效果会动态变化以确保文本的易读性,苹果建议尽量使用系统组件,因为系统组件能完美提供这种虚化效果。如果关闭虚化效果,前景文字会明显变弱。虚化效果同时提高了易读性和材质外观。(左图为使用了虚化后的效果)

玻璃材质显示的是后面环境的颜色,所以大部分的时候建议用白色的字体或图标,因为彩色元素有可能会融入到背景中。如果元素需要使用颜色,可以将它设置为背景色或整个按钮的颜色,这样用户就能注意到它。并且尽量使用****系统颜色而非自定义颜色,因为系统色的易读性是经过测试且动态适配的。

每一个人都是独一无二的,所以每个人的眼睛也许会有些差异,因此元素的大小应该容易被交互设计师注意到。苹果建议交互元素必须有至少60Pt****的交互判定大小,不过UI图标在视觉上可以更小,就像44Pt的按钮只需要在周围留白,加上一些可交互的范围。如果将这样几个按钮放在一排的话用16Pt的间距就可以。
所以这种视觉能感知到的极端情况下,满足基本可交互的大小,原则是永远要给所有交互元素至少留60pt。

如果要设计一个内容组的时候,确保组块的圆角与内部元素的圆角是同心圆,有一个简单的公式:内部圆角加上组块的空白间距等于组块的圆角。并且为了使圆角看起来更圆滑,需要设计成苹果的平滑圆角,保持这种嵌套元素之间都是同心的,这样他们会有一体感。

二、空间动效原则

你想要呈现的深度和用户实际感知到的深度一致性,对于视觉上的舒适度是非常重要的。为了让视线正确聚焦,大脑需要一个正确的视觉深度提示, 当这种深度线索缺失相互冲突或有误导性时,用户可能会感到不适。

如果有两块柠檬,其中较大的一块会让用户感觉离得更近。但是在这里相对大小的视觉提示与遮挡的视觉提示有冲突,这样会导致大脑产生预期相反的感觉。冲突越多,对于视觉舒适度的挑战也越大,所以需要确保所有的深度提示都能够为用户的大脑提供正确的信息。

在各种特定的视觉体验时有不同的具体参数,建议选择让视觉减负的合适参数。有些场景需要眼睛长时间注释内容,例如阅读,当内容放置在比一臂距离更远时视觉上最舒适,并且要能够让用户自己调整属于自己的合适深度。同时可以使用视觉深度提示例如透明度或模糊效果让眼睛能够舒适地看远处的内容而不被干扰到。

因为人的眼睛上下或左右转动是相对最舒服的选择,有一些位置通过视线去看时会让人感到疲劳,苹果建议需要长时间注视或阅读的内容应该放置在中心略低于视线的位置,这样可以提供一个舒适的视觉体验,如果你涉及的内容在一些特殊的位置需要稍微费力地去看,苹果建议设计一个简洁的交互或者直接让它们移动到视野中心

当视觉运动信息缺失或与前庭信息冲突时,人们可能会感到头晕或者胃部不舒服。例如当一个或像这种多个蓝色的虚拟物体在大部分视野中移动时,用户的大脑可能会有错觉像是自己在移动一样,在这种情况下稳定感会被扰乱,并且可能会导致对运动感的错误判断。作为设计师可以通过让对象在移动时变成半透明来缓解,这样运动的信息就会清晰可见。

苹果建议尽量避免通过头部去固定内容。头部固定的内容会始终在用户的视野中间,容易影响方向和运动的判断。

如果很需要这种头部固定的内容,建议使用较小的窗口尺寸,可以放在视线中心的附近并稍远一些的位置。最好的办法是使用内容锁定在周围环境中的视图或使用延迟跟随的动画,例如内容在一小段时间后缓慢地向目标位置移动。

当窗口里面的视频内容有移动时用户的大脑也可能认为是自己在移动。为了提供最佳的空间运动舒适度,首先需要保证窗口中内容的地平线与真实地平线对齐,所有视觉上的内容看起来都来自消失点,因为人们已经习惯了这一点。以这样的方式移动相机可以让视觉上的消失点比较缓和并且能够预测。

并且需要将消失点保持在视野范围内,这意味着要避免快速转向或单纯的旋转。作为快速旋转的替代方案,可以在快速淡出的效果下让方向瞬间切换。

为了优化运动舒适度,还需要避免近距离显示大型物体,最好让物体保持较小并保持较大的距离。

#设计原理