科技魔方

visionOS:理想的UI设计竟要考虑这么多细节

AR/VR

2023年06月21日

  拥有对macOS、iPadOS、watchOS、iOS等系统的开发经验,苹果在XR操作系统设计上也具有先天优势,相比于其他公司从头开始构建XR系统界面,苹果可直接借鉴已经过验证的设计美学。

  与此同时,WWDC 2023上公布的一系列开发者教程来看,该公司在VST透视模式UI的设计上也有着深刻思考。这种混合现实形式背景基于周围动态环境,而不是像VR那样设定在可控的虚拟场景,因此在界面设计上需要重新考虑。另外再配上Vision Pro的眼球、手势输入功能,visionOS的视觉交互体验相当独特,对其他XR系统设计也许能带来启发。

  以下是visionOS UI的一些特点:visionOS的界面设计元素保持了iOS部分设计风格,比如侧边栏、标签选项、搜索栏等大家熟悉的元素; 菜单界面的尺寸(半透明窗口)可根据实际用途、显示内容和所在空间调整大小,比其他VR平台的固定尺寸界面更人性化。另外,还可以同时开启不同尺寸的界面,提升多任务处理效率; 界面默认位于用户视线高度和视野中心(考虑到用户的实际身高和姿态); 在Quest平台,你可以点击手柄上的Oculus键来重置菜单位置,尽管Vision Pro没有官方手柄,但依然可以通过点击头显机身的数字旋钮来重定向; 为了帮助用户准确的将AR窗口固定在特定的物理空间,visionOS在窗口移动时采用了微妙的变化,比如移动时窗口为半透明,允许用户识别窗口背后的环境,固定后窗口又变回高饱和度图像; 在AR观影模式中,visionOS系统会自动调低VST透视的透明度,让观影体验更沉浸、专注; visionOS非常注重虚拟和现实的融合,比如会渲染窗口投射到周围环境上的光以及地面阴影,看起来有实体感,就像是摆在空间中的屏幕。或者在显示照片等内容时,将照片边缘模糊化; 充分结合微弱的深度变化信息,来突出特定的界面元素,比如将需要用户关注的界面放在更靠近用户的位置,而其他界面则靠后一些。 01. 交互设计

  在visionOS空间计算平台中,你只需要注视一个按钮,然后用手势轻敲即可输入,Vision Pro在头显底部配备摄像头,因此你无需抬手臂也能实现手势追踪。另外,相比于此前VR系统使用的光标投射操控方式,注视点可以更自然的瞄准选项,并与微手势快速配合。

  Vision Pro并未配备原生手柄,但在输入方式上依然有多种选择,注视点是主要瞄准方式,无论UI距离用户多远,都可以毫不费力的根据注视点信息来瞄准任意部分。接着,可以使用微手势确认选择,或是用手直接和UI元素交互,除此之外还可以通过语音输入,或是连接蓝牙键盘、妙控板、游戏手柄。

  为了确保注视点瞄准的准确性,苹果不仅优化了Vision Pro头显的传感器设计,在UI设计上也有诸多考虑,比如:

  1)应用的主要内容应位于视野中心:即使空间计算有无限大的发挥空间,但用户只能看到视野内的画面,而且视野内也只有最中心的部分观看体验最舒适(下图30度范围内);

  2)应用的次要内容或操作机制可放在视野边缘;

  3)应用布局也要考虑肩颈舒适性;

  4)人眼一次只能聚焦在一个深度,频繁改变焦距会造成视觉疲劳,因此应该将交互内容保持在相同深度,确保用户能不费力切换UI;

  5)可使用细微的深度变化来传达UI的层次结构;

图片_20230613141133

  6)适合注视点选定的最小区域至少60pt大小,开发者可以在这个范围内设计图标等元素(约44pt大小),并确保该元素与选定区边缘的间距够宽,从而让注视点选定更加准确、快速;

  7)UI可动态缩放(近小、远大),如果开发者选择固定UI比例,那么如果界面放在远处,视觉看起来会更小,难以用眼球控制;

  8)visionOS交互系统的设计初衷,是允许用户在远距离也能与UI舒适交互;也支持近距离直接输入,比如在虚拟键盘上用手指打字;

  9)使用悬停突出/高亮来代表注视点运动,为了对人眼快速移动做出及时反应,这种效果做的比较自然微妙;

  10)注视点长时间悬停在一个位置,代表了用户的兴趣和意图;

  11)长时间注视一个位置,visionOS的界面会显示额外的信息、功能,比如工具提示、展开标签栏、触发语音搜索等等,当注意力从UI上转移时,UI会恢复干净简洁的界面;

  12)在Vision Pro头显中,用眼神和语音即可操作;长时间注视甚至还可以取代手势来确认输入,意味着只用眼睛就能控制UI;

  13)眼球+手势定位是visionOS系统的主要交互方式,宣称可提供准确、体验感好的交互,并实现一些智能的组合动作,比如:在缩放图像时,会优先从用户注视点位置放大或缩小;或者,还可以用注视点来控制绘图光标,实现更高效创作体验;

  14)Vision Pro头显的手势交互设计与人们熟悉的手机触屏操作接近,比如手指捏合的动作相当于在手机屏幕上点击,而拖动捏合手势则可以浏览界面,还可以用双手来缩放;

图片_20230613141125

  15)手势交互的逻辑与多点触控手势的逻辑类似,因此容易上手,用户通过单手、双手的捏合动作,就能实现单击、双击、抓取、拖放、放大、旋转等操作;

  16)除了系统标准手势外,开发者还可以自定义手势;

  17)虚拟键盘使用动态高亮效果来提示距离,引导手指瞄准按键;

  18)由于长时间举手臂容易引起疲劳,因此应适当使用近距离触控手势,仅在体验的核心玩法中使用;避免多次重复手势让用户感到疲劳,或是采用容易做错的手势;

  19)在空间计算平台,软件应用不再局限于窗口中,而是可以占据用户所在的物理空间,并对用户的身体运动做出反应;

  20)为了确保注视点输入的准确性,visionOS界面主要采用一些边缘圆润的图形,因为如果采用方形等边缘锋利的形状,注视点可能会跑到外部,从而降低识别的精确度;此外图形应避免采用粗轮廓,以避免将注意力吸引到图形外部。 02. 空间UI设计

  为了帮助开发者更快适应空间计算平台,苹果构建了一种比较熟悉的视觉语言,特点是和iOS等现有的平台具有一致性,同时一些元素针对空间平台进行了优化。

  ◎ 基础和设计原则

  1,App图标

  visionOS的App图标采用了与iOS接近的风格,最大的区别是形状从圆角矩形变成了圆形,这种设计变化的一大原因,是为了让注视点瞄准的更准确。除此之外,visionOS的App标志是立体的,从侧面能看到表面凸起,而且可与注视点动态交互,当你盯着一个标志时,标志会展开,并显示高光和阴影来加深微妙的视觉层次。

  简单来讲,visionOS的App标志为了呈现深度,通常由3个平面的图层组成(1个背景层,2个表面层),目的是呈现双目视差效果。此外,系统还会叠加一个“玻璃层”效果,来渲染深度、高光和阴影。

图片_20230613141012

  2,背景材质

  值得注意的是,visionOS的应用标志并非直接叠加在物理透视背景上,而是固定在一个像毛玻璃质感的半透明界面上。苹果指出,这种设计的好处是具有轻盈感、物理空间感,并可适应各种不同的使用场景,比如狭小的空间、夜间或明亮的日光下等等。此外,半透光特性意味着不会完全遮挡物理空间,而是可模拟环境光动态透过的效果。

  为了让用户在空间体验中也能很好的感知环境,苹果不建议开发者使用纯色的菜单背景。

  3,文字排版

  为了提升文字易读性、和背景的对比度,visionOS的字体在iOS字体基础上加粗、加重。尽管如此,即使将窗口放大,一些较小的说明性文字依然难以辨别,因此建议尽量为字体增重、加粗。

  值得注意的是,苹果还为visionOS推出了两种全新的字体样式,特点是基于较宽的编辑样式布局。

  4,Vibrancy活力模式

  原理是突出文字的光和色彩(与背景的对比度),开启后文字看起来更亮,可读性更强。考虑到visionOS菜单的窗口背景随周围环境而改变外观,文字的活力模式也会实时调节亮度,确保文字清晰可见。

  不仅如此,活力模式有三种亮度,可展现不同字符之间的层次结构。

  5,色彩

  苹果建议开发者将文字色彩设为系统默认的白色,因为苹果已经针对白色文字的易读性进行校准,可动态适应背景窗口的色调和对比度。

  6,其他建议: 考虑用户颈部活动范围,大多数人更习惯于左右转头,而不是上下转头,因此UI界面不应在太高或太低的位置,大规模界面最好选择横向布局,而不是纵向布局; 悬停效果是一种视觉的对焦反馈,可很好的确认用户注视点的位置,并让用户了解哪些元素可以交互; 苹果对UI设计要求细致,交互元素的边角形状也有要求,上下图层的边角需要是同心圆的一部分,以确保UI外观看起来统一; visionOS所有系统组件都支持不同的输入方式,包括眼球、手势、蓝牙键盘/触控板等等。 03. 视觉体验设计

  相比于2D界面,空间计算平台有更多独特的玩法,比如深度和360°视野。另外,开发者需要考虑人身体的局限性,否则可能影响XR应用体验。换句话说,XR内容的设计决策对用户的视觉舒适度有重大影响。

  ◎ 视觉深度线索

  XR内容需要提供正确的视觉深度线索(与人眼实际对焦匹配)。怎么做?利用色彩、模糊、相对尺寸、轻柔的运动、背景、光影、遮挡、纹理密度等信号,在视觉上侧面暗示目标所在的位置和深度。比如,在稀疏的场景中,将柠檬切片以绿色显示,人脑会自动匹配现实生活中的柠檬,并根据柠檬的视觉尺寸,去分析它所在的深度。

图片_20230613140926

  值得注意的是,开发者应该避免重复图案等具有误导性的视觉线索,否则如果左右眼对焦在不同的物体上,感知焦距与物体的实际焦距可能不匹配,从而造成重影。

图片_20230613140922

  ◎ 应用场景优化

  针对不同的应用场景,XR内容的视觉参数需要通过优化来提升视觉舒适度,降低人眼压力。比如在XR阅读等需要长时间注视的应用中,电子书放置在一臂之外的距离为最佳。同时,还要赋予用户调整界面深度/距离的能力。相比之下,短暂视觉效果或直接交互的内容(支持直接手势输入),则可以在靠近人眼的位置显示。

图片_20230613141121

  另外,在显示文字时应采用高对比度,而对于转移注意力的虚拟信号,则可以设置为较低对比度、透明度,或加入模糊效果。XR界面从暗色切换到亮色时,也要确保放慢切换过程,允许人眼舒适的适应这种过渡。

图片_20230613140805

  图像在空间中的位置也有讲究,比如人眼向下、向左、向右看最舒适,而向上看、对角线扫视则需要更多眼部运动,开发者在设计XR应用时应该考虑这些特性,来提升视觉体验。如果XR内容需要极端的眼球运动,建议设计为简短的交互,或是尽量防止在视野中心,来减少眼球转动。

  为了让人眼有间歇的时间,开发者应该在XR交互体验中加入自然间歇。

  在阅读文本时,可通过放大文字、调整窗口大小和深度来强化文字视觉清晰度,避免让用户频繁转头阅读。 04. 运动感知设计

  容易眩晕是很多人对XR的印象,由于人感官系统的特性和局限,在XR内容中移动可能会影响体验的舒适性。苹果指出,人的视觉系统负责接收光线、感知周围的动态内容,包括人自身的运动。同时,内耳中的前庭系统也会感知人的动作。

  在通常情况下,视觉信息和前庭系统感知的运动总是一致,但在视觉运动信息缺失,或与前庭信息冲突时,人会感到不适,引起头晕或反胃。

  在XR场景中,人的身体通常固定在一个位置,而视觉上来看,身体却在虚拟控件中走动,而这显然造成了运动感知冲突。为此,苹果希望通过精心设计内容,来让大脑认为XR场景为相对静止,从而优化用户舒适性。比如,将XR中移动的对象设置为半透明,并确保VST场景清晰可见,以此来确保人脑识别到身体的静止状态。

  苹果建议,开发者尽量不让UI界面跟随用户头部移动,如果一定要这样设计,尽量缩小界面尺寸,放置在较远的距离,或是采用延迟跟随方式,缓慢的跟随用户头部移动。

  UI界面内的运动设计也需要注意,比如窗口内的地平线应与现实场景地平线对齐,内容移动的中心方向应该位于人眼视野内,并避免快速转弯或纯旋转运动(可以利用快速淡出来渲染瞬时转向)。

  同时,为了优化视觉舒适性,XR运动元素应避免采用大规模物体,并使用低亮度对比度的纯色纹理,降低人眼对运动的识别度。

  总之,开发者课程很好的阐释了visionOS的设计逻辑,从中我们能够看到苹果对AR、VR上设计思路。可以说,目前苹果已经将第一方应用和服务大部分集成至visionOS。

  相信更多开发者也在期待月底上线的visionOS SDK,无论是尝试迁移iOS应用,或者全新为visionOS开发,届时开发者们将会可以进行更完整的探索,毕竟亲自上手才更有说服力。

  参考:Apple

+1

来源:青亭网

延展资讯