Apple Vision OS最全设计规范

前几期和我们同享了一些visionOS规划亮点以及规划准则解读,有人说想看官方的UI规划规范,官方其实给出了,但涣散在其他体系规范中。

彩云把这些琐细的规划规范做一个汇总收拾,摘取其间最精华的部分与我们同享。这篇文章将会是未来必看的规划规范,文章算是今年以来写过最长的一篇(差不多有1.7万字)。

当你着手为visionOS规划App或游戏时,首先要了解该渠道特有的根本设备特征和形式。运用这些特征和形式来辅导你的规划决议计划,帮忙你打造出赋有招引力的沉溺式体会。

活跃选用AppleVisionPro的共同功用。充分运用空间、空间音频和沉溺来让你的体会感同身受,一同以让用户在设备上感到轻松天然的办法集成穿透、聚集和手势。

规划出现App中最共一同刻的办法时,考虑全体的沉溺程度。你能够在以用户界面为中心的窗口式环境、全沉溺式环境或介于两者之间的某种环境中出现体会。为App中的每个关键时间找到最合适的最低沉溺程度,不要假定每个时间都须要彻底沉溺。

为以用户界面为中心的受限体会运用窗口。若要帮忙用户履行规范使命,首选在空间中运用显现为平面并包括了解控件的规范窗口。在visionOS中,用户可将窗口从头放置在想要的任何方位,且体系的动态缩放可帮忙坚持窗口内容不管远近都明晰易读。

优先考虑舒适性。若要帮忙用户在与App或游戏交互时坚持舒适和身体放松,请记住以下根本准则。

在用户的视场内显现内容,并相对其头部放置。防止将内容放在用户有必要局势或改动姿态才干进行交互的方位。

防止显现目不暇接、不和谐、过快或短少停止参阅系的动态作用。

支撑非直接手势,让用户的手放在大腿或身侧时也能与App交互。

假如支撑直接手势,请保证交互式内容不会间隔过远,而且用户无需长期与其交互。

用户处于全沉溺式体会中时,防止鼓舞其过多移动。

上面是一些大的规划特征,下面会介绍一些根底的规划规矩,便于做好详细的规划。

共18个分类,目录:

图标

色彩

图画

沉溺式体会

原料

动态作用

空间布局

字体

按钮

Apple Vision OS最全设计规范

菜单

装修

东西栏

导航栏

提示

窗口

手势

键盘

指针

一、图标1.App图标

visionOSApp图标呈圆形,并包括一个布景层及其上方的一至两层,以生成在用户检查时会奇妙翻开的三维方针。

体系经过添加暗影来表现各层之间的深度感并运用上层的Alpha通道打造浮凸感外观,以增强App图标的视觉维度。

为图标的布景层运用全幅不通明图画。相反,防止在非布景层中运用全幅图画。在非布景层中运用通明区域可让基层的视觉信息透过。

为每层供给正方形图画。体系会运用圆形遮罩裁剪App图标的全部层,因而供给已裁剪的层或许会对成果发生负面影响。

防止大面积运用半通明。尽管运用半通明像从来为形状消除锯齿作用不错,但大面积的半通明区域无法与Alpha很好交融,还或许跟体系供给的暗影结合发生黑色成果。除非要为形状消除锯齿,否则请坚持像素不通明或全通明。

在非布景层中,首选为彻底不通明或彻底通明像素的不同区域之间运用明晰边沿。非布景层包括的形状具有明晰边沿时,体系制作的高光和暗影看起来最漂亮。防止运用柔化或羽化边沿。

防止在布景层中添加看起来像孔洞或凹面区域的形状。体系添加的暗影和镜面高光可使此类形状看起来杰出而非内凹。

坚持非布景层中的不同形状或图画接近中心。圆形遮罩或许会切断过于接近边沿的形状或图画,导致形状看起来违背中心并损坏图标的三维外观。

防止运用从一个固定的有利方位看起来有深度的视觉元素。假如用户只能从一个视角感知层内元素的深度,当其聚集该图标时,这种深度感便会消失。防止运用杰出层元素的底部边沿这样的技能,由于这样做会与其他App图标的笔直透视发生冲突。

防止为visionOSApp图标添加自界说镜面高光或暗影。除了会搅扰体系供给的视觉作用外,自界说高光和暗影为静态,而visionOS供给的高光和暗影则为动态。

VisionOSApp图标尺度。创立巨细为1024×1024个像素的App图标以在主屏幕视图中显现。

2.体系图标

有用图标能以用户当即了解的办法表达单个概念。

1)打造可辨认且高度精简的规划。细节过多或许会导致界面图标紊乱或难以了解。尽量运用容易且通用的规划,让大多数用户可快速辨认。一般状况下,当图标运用了解的视觉隐喻来直接反映其所建议的操作或所代表的内容时,作用最佳。

2)坚持App中全部界面图标间的视觉共同性。不管仅运用自界说图标仍是将自界说图标和体系供给的图标混合运用,你App中的全部界面图标都须要在巨细、细节程度、线条粗细和透视上坚持共同。依据图标的视重,你或许须要调整其尺度以保证其在视觉上与其他图标显现共同。

为了帮忙完结视觉共同性,可依据须要调整单个图标的巨细

并使每个图标中的线条粗细相同

3)一般使界面图标与相邻文本在线条粗细上相共同。在这两者中运用粗细相同的线条可让内容在外观和着重程度上坚持共同,除非你想要着重图标或文本。

非对称图标或许会看似违背中心,即便实则否则

在此类状况下,你能够略微调整图标的方位,使其在视觉上到达居中。当创立的资源经过在界面图标周围添加内边距的办法调整(如下方右图所示)后,你能够按几何图形居中该资源,然后在视觉上居中该图标。

将图标移高几个像素可使其在视觉上居中;将额定像素包括在内边距中可让居中更容易。

视觉上居中之前(左)与视觉上居中之后(右)

在视觉上居中所需的调整一般十分小,但却对App的外观影响很大。

5)仅在必要时才供给界面图标的已选状况版别。控件和区域会主动指示所选内容,因而无需为用于此处的图标供给已选或未选状况资源。VisionOS中的边栏和标签页栏经过运用App的着重色或添加布景外观来传达挑选状况。

尽管你或许想要供给选中和未选中图标以用在visionOS中的东西栏或导航栏,但更常见的是运用依据其状况更改布景外观的按钮。

6)打造具有包容性的规划。在描绘人物图画时优先省略不用要的特定性别提及,并保证你的图标可被广阔用户接收和了解。

7)在规划中仅包括对表达意义必要的文本。例如,在代表文本格局化的界面图标中运用字符或许是最直接传达概念的办法。假如须要在图标中显现单个字符,请保证将其本地化。假如须要标明一段文本,请在规划中运用笼统表明,并包括图标的翻转版别以适用于从右到左的阅览环境。

8)假如创立自界说的界面图标,请运用PDF或SVG等矢量格局。体系为高分辨率显现器主动缩放依据矢量的界面图标,因而无需供给高分辨率版别。相反,用于App图标和包括暗影、纹路和高亮符号等作用的其他图画的PNG则不支撑缩放,因而有必要为每个依据PNG的界面图标供给多个版别。或许,你能够创立自界说的SF符号并指定份额,以保证符号的要点与相邻文本相匹配。

9)为自界说的界面图标供给备选文本标签。备选文本标签(或辅佐功用描绘)是不行见的,但可让“旁白”以语音办法描绘屏幕内容,然后使视障用户的导览更容易。

10)防止运用Apple硬件产品的模型。硬件规划往往会频频改变,或许会使界面图标和其他内容显得过期。

二、色彩

1)visionOS不供给深色形式,运用称为玻璃的原料,可主动习惯周围方针的亮度和色彩。

2)在visionOS中,色彩或许依据用户实践环境中墙面或物体的色彩及其反射光线的办法而看起来不同。

3)慎重运用色彩,特别是在玻璃上。规范visionOS窗口一般运用体系界说的玻璃原料,用户实践环境和空间中的光线和方针可透过这种原料显现。这些实践和虚拟方针中的色彩可透过玻璃被看到,因而或许影响窗口中五颜六色App内容的易读性。首选在有助于招引用户留意重要信息或显现界面各部分之间联络的方位运用色彩。

4)优先在粗体文本和较大区域中运用色彩。在较细文本或较小区域中运用色彩或许会使其更难看到和了解。

5)visionOS体系色彩。

三、图画

为了保证插图在全部受支撑设备上坚持漂亮,请了解体系怎么显现内容,以及怎么以适宜的缩放系数出现艺术感。

1.分辨率

点是一种笼统计量单位,可帮忙视觉内容在任何显现办法下都坚持共同。在visionOS中,一个点是一个视点值,可答应视觉内容依据其距观看者的间隔缩放。

2.缩放倍率

在visionOS中,当体系依据用户检查的间隔和视点对图画进行动态缩放时,图画所占面积一般会发生改变。这意味着图画无法像在其他渠道中那样与屏幕像素1:1对应。

创立@2x图画。运用高分辨率可帮忙保证图画在被体系缩放时明晰显现。

四、沉溺式体会

在visionOS中,你能够规划延伸出窗口和空间容器的App和游戏,并让用户沉溺在你的内容中。

在visionOS中,用户可在同享空间中一同运转多个App,或许在全空间中一次专心于单个App。你的App默许在同享空间中发动,在此空间中用户可像Mac上相同在多个运转中的App之间切换。想要更沉溺地体会时,用户可将你的App转换到全空间,在此空间中其他App会躲藏,你的App可在恣意方位显现内容。

沉溺和穿透

visionOS支撑必定规模的沉溺程度,可帮忙你向用户供给多种App或游戏体会办法。在此规模内,用户实践环境的可见度在体会的沉溺作用方面起着关键作用。

为更改可看到周围的多少,用户运用数码旋钮调整穿透量。例如,在想要与邻近的实践物体交互或阅览其他设备上的文本时,用户或许会添加穿透,在想要出现某种环境时,或许会削减穿透。

五、原料

半通明作用能够改进远景元素和布景元素之间的交融,以视觉办法传达图层之间的分隔并帮忙用户坚持方位感。原料可结合虚化作用来增强半通明作用。虚化作用经过从原料后边往条件拉色彩来增强文本、符号和填充等远景内容的深度感。

1)依据语义和引荐用处选取体系原料和作用。防止依据给界面添加的外观色彩来挑选原料或作用,由于体系设置能够更改其外观和行为。而应使原料或虚化款式匹配特定的用例。例如,运用色彩较浅的原料来突显visionOSApp中的交互式组件,

2)经过在原料顶层运用虚化色彩来帮忙保证易读性。运用体系界说的虚化色彩时,你无需忧虑色彩在不同环境中或许会太暗、太亮、太饱满或比照度太低的问题。visionOS体系运用与macOS所用相同的深色虚化色彩,并主动调整这些色彩以在不同视觉环境下坚持比照度。

3)在visionOS中,窗口一般运用体系界说、被称为玻璃的不行修正原料,经过让光线、当时环境、虚拟内容和用户周围的方针透过来帮忙坚持用户与实践国际的联络。玻璃是一种习惯性原料,可限制布景色彩信息规模以便窗口可持续为App内容供给比照度,一同依据用户的实践环境和其他虚拟内容在色彩上变得更浅或更深。

4)visionOS没有专门的深色形式设置。相反,玻璃会主动适配方针的亮度和这以后边的色彩。

5)如有必要,请选取可帮忙构成视觉别离或表明App中交互性的原料。假如须要创立自界说组件,你或许须要为其指定体系原料。运用以下示例作为辅导。

淡色原料可让用户留意到按钮和所选项目等交互式元素。

深色原料可帮忙你从视觉上别离App的各个部分,例如边栏或分组表格视图。

最深色的原料可让文本栏等组件看起来像嵌入相同,表明该区域可接受文本输入。

6)visionOSApp默许运用淡色内容,但也会运用白色文本。

六、动态作用

有目的地添加动态作用,让其在不阻碍体会的一同供给支撑。不要添加毫无意义的动态作用。不用要或过多的动画会涣散用户的留意力,且或许让其感到违和或身体不舒服。

将动态作用设为可选。用户或许出于多种原因无法在你的App中体会到移动,因而防止将动画用作传达重要信息的仅有办法至关重要。例如,用户能够翻开“削弱动态作用”辅佐功用设置来尽量削减或去除动画。

优先运用简略、准确的动画。简练且准确的动画往往会让用户感到更轻盈,搅扰性更低,而且一般会更有用地传达信息。在visionOS中,当用户轻点“相片”中的全景相片时,视图会滑润翻开以填充用户面前的空间,然后帮忙其以可视办法追寻过渡作用。

考虑在可行时运用具有动画作用的符号。运用SF符号5或更高版别时,你能够将动画作用运用到SF符号或自界说符号。

当用户佩带AppleVisionPro并与虚拟内容交互时,他们会运用穿透检查实践环境。由于周围和App内容或许一同可见,假如虚拟内容的移动让用户感觉他们自己或周围在移动,这会让其感到不舒服。一般来说,移动的虚拟方针越大,坚持安稳感就越难。

显现较大虚拟方针的移动时,帮忙用户坚持舒适感。假如方针大到足以填充大部分视场,请隐瞒大部分或全部穿透,用户会天然将其视为周围的一部分。为了帮忙用户感知方针的移动而不会让其觉得本身或周围在移动,你能够添加方针的半通明作用,帮忙用户透视方针,或许下降方针比照度来让其动态作用不那么显着。

假如须要在大型方针间显现过渡作用,请考虑运用突变作用或许让内容取得焦点和失掉焦点的作用以尽量下降或许的方向迷失感。

即便是用户自己在移动比如窗口这样的大型虚拟方针,他们也或许会感到不舒服。尽管在这种场景下调整半通明作用和比照度也会有所帮忙,但应考虑坚持窗口的尺度相对较小。

运用旋翻滚态作用时应柔软。经过旋转相机或许旋转用户周围的大型虚拟方针来旋转虚拟国际时,特别是当旋转速度过快或许持续时间过长时,旋转或许会打乱用户的安稳感。相反,在快速淡出时期,应考虑运用瞬时方向改变。

防止显现持续振动的方针。特别应防止显现频率为0.2赫兹左右的振动,由于用户关于此频率十分灵敏。假如须要显现方针振动,请尽量坚持振幅较低并考虑让内容半通明。

去除不用要的动态作用。由于用户会看向想要交互的方针,在或许导致其看向别处的方位显现动态作用或许会带来困扰。仅在你须要引导用户看向重要内容时,才首选运用动态作用。

尽量防止在用户视场的边沿显现动态作用。用户关于发生在边沿视觉处的动态作用特别灵敏。边沿动态作用除了会涣散用户留意力外,乃至还会引起不舒服,由于它会让用户感到本身或周围在移动。

考虑为用户供给静态参阅系。在不会移动的区域内包括视觉移动时,用户会更简略接受。比较之下,假如看起来周围的全部方针都在移动,用户会感到不舒畅。

当用户在体会视觉旋转时,防止鼓舞用户移动其头部。当虚拟方针看起来环绕用户旋转时,他们一般须要看向一个固定的方向以防止感到不舒畅。

须要从头放置方针时,考虑运用突变。当方针从一个方位移到另一个方位时,用户会天然看到移动。假如此类移动并未传达对用户有用的任何信息,你能够在移动方针前将其淡出,方针出现在新方位后从头将其淡入。

七、空间布局

空间布局技能帮忙你充分运用AppleVisionPro的无边沿画布,并以极具招引力且舒适的办法出现你的内容。

1.视场

用户的视场是无需移动头部就能看到的空间。个人佩带AppleVisionPro时视场的维度因各种因素而异,例如用户装备光密封性的办法以及边沿视敏度的规模等等。

将重要内容居中放在视场内。visionOS默许会直接在用户面前发动App,将其放在用户的视场中。当用户须要长期与内容交互时,你应该将内容舒适地放在其视场内。

笔直观看:

斜角观看:

防止将内容锚定到佩带者头部。尽管一般想要App保存在视场内,但假如锚定的内容在用户面前坚持停止,这会让用户感到卡顿、受限且不舒畅,特别是当内容遮挡了许多穿透且下降了用户周围的显着安稳性。相反,请将内容锚定在用户的空间中,让用户自在且天然地看向遍地并检查不同方位的不同方针。

2.深度

用户依靠间隔、遮挡和暗影等视觉提示来感知深度和了解周围。在AppleVisionPro中,体系主动运用色温、反射和暗影等视觉作用来帮忙用户感知虚拟内容的深度。当用户在空间中移动虚拟方针或许更改本身相关于该方针的方位时,视觉作用会更改方针的外观深度,让体会愈加传神。

你能够在恣意方位显现3D方针,也能够运用显现3D内容的空间容器组件。空间容器与窗口类似,但没有可见的结构。

供给准确传达内容深度的视觉提示。假如视觉提示缺失或许与用户的实在国际体会相冲突,用户或许会在视觉上感到不舒服。

运用深度传达层级结构。深度可帮忙方针看起来相较于周围内容更为杰出,让其愈加清楚明了。用户一般也会留意到深度改变:例如,当表单显现在窗口上方时,窗口会沿着z轴撤退,然后让表单显现出来并在视觉上更为杰出。

一般来说,防止为文本添加深度。看起来悬浮在布景上方的文本不只难以阅览,还会下降用户的速度,有时还会导致视觉不舒服。

保证深度可供给价值。一般来说,你能够运用深度带来明晰感和愉悦感,但无需在每个当地都运用。在规划中添加深度时,考虑方针的巨细和相对重要性。深度十分合适用于从视觉上别离App中大型且重要的元素,例如让标签页栏或东西栏从窗口中杰出显现,但或许不舒服合用于小型方针。

例如,运用深度让按钮的符号从其布景中杰出显现或许会下降按钮的辨识度和易用性。别的检查在整个App中运用不同深度的频率。用户须要调整眼睛的焦点来感知每个不同深度,调整过于频频或过快会让用户感到疲惫。

3.缩放

visionOS界说了两种类型的缩放,既保存了深度的外观又优化了可用性。

动态缩放帮忙内容坚持明晰可辨且充溢交互性,而不管内容间隔用户的远近。详细而言,visionOS会在窗口远离佩带者时主动扩大窗口,在接近时缩小窗口,然后让窗口在全部间隔上看起来都巨细相同。

固定缩放意味着方针不管间隔用户的远近怎么,都会坚持相同份额。固定缩放方针会在沿着z轴逐步远离观看者时看起来越来越小,这与用户实践环境中的方针类似:远处的方针比近处的方针看起来要更小。

为了支撑动态缩放和深度外观,visionOS将一个点界说为一个视点,这一点与其他渠道不同:其他渠道将一个点界说为必定数量的像素,该数量因2D显现器的分辨率不同而有所差异。

假如想要虚拟方针看起来和实践方针彻底相同,考虑运用固定缩放。例如,你无妨为供给的产品坚持什物巨细的份额,这样产品会在用户的空间中看起来愈加传神。交互式内容须要缩放以在其逐步接近或远离时坚持易用性,因而应慎重运用固定缩放,请将固定缩放保存给须要它的非交互式方针。

防止显现过多窗口。窗口过多会遮挡用户的周围,让其感到压抑、受限,乃至不舒畅。一同也让用户难以将焦点移至想要的内容,除非调整多个窗口的巨细或方位。

凭借数码旋钮来帮忙用户将窗口从头放在视场中心。当用户移动或翻滚头部时,内容或许不再出现在用户期望的方位。假如出现这种状况,用户能够按下数码旋钮将面前的内容从头放在中心。你的App无需履行任何操作来支撑这种行为。

在交互式组件周围保存满足的空间以便用户轻松聚集。当用户运用眼睛聚集交互式元素时,visionOS会显现视觉悬停作用帮忙用户承认该元素便是用户想要的元从来做出呼应。在交互式组件周围保存满足的空间至关重要,这样用户可轻松、舒适地聚集组件,一同可防止悬停作用揉捏其他内容。例如,放置按钮以使其间心至少相距60点。

让用户经过极少量或无需身体活动来运用你的App。除非某些身体活动关于体会不行或缺,否则请帮忙用户在坚持不动的状况下享用体会。

运用地上来帮忙你放置大型沉溺式体会。假如沉溺式体会包括从地上向上延伸的内容,请运用平整的水平面来放置内容。将此平面与地上对齐有助于内容与用户的周围无缝交融并供给更直观的体会。

4.界面布局

坚持窗口内容坐落其鸿沟内。在visionOS中,体系会在XY平面中窗口鸿沟之外显现窗口控件。例如,“同享”菜单显现在窗口上方,用于调整窗口巨细、移动和封闭窗口的控件显现在其下方。让2D或3D内容侵吞这些区域或许导致用户难以运用体系供给的控件(特别是窗口下方的控件)。

一般应防止将重要内容和控件放在窗口旮旯。内容离窗口中心越远,用户就或许越难以看到并与之交互,特别是当窗口较大的时期。

让窗口的交互式组件易于用户聚集。你须要在交互式组件周围留出满足空间,以便用户轻松、舒适地聚集到它,以及防止体系供给的悬停作用遮挡其他内容。例如,放置按钮以使其间心至少相距60点。

假如须要显现不属于窗口内部的额定控件,则运用装修。装修可让你供给与窗口在视觉上坚持相关但与体系供给的控件互不搅扰的App控件。例如,窗口的东西栏和标签页栏会显现为装修。

八、字体

除了保证文本明晰易读外,你挑选的字体排印办法还可帮忙你说明信息层级结构、传达重要内容并宣扬你的品牌。

SFPro是visionOS中的体系字体。假如运用NY字体,则须要指定想要运用的字体款式。

visionOS运用动态字体正文和标题款式的更粗版别,而且引入了特大标题1和特大标题2以完结较宽的修正风格布局。

一般来说,首选2D文本。字符的视觉深度越深,就越难以阅览。尽管少量的3D文本可供给风趣的视觉元从来招引用户留意,但假如要显现用户须要阅览并了解的内容,请首选包括少量或不含视觉深度的文本。

保证文本在用户缩放时看起来漂亮并一向明晰易读。运用让文本在原始尺度下看起来漂亮的文本款式,然后测验其在不同缩放状况下的易读性。

最大化文本和文本容器布景之间的比照度。体系默许以白色显现文本,由于这种色彩往往能够与默许体系布景原料之间构成激烈比照,然后让文本更简略阅览。假如想要运用不同的文本色彩,请有必要在各种环境下测验。

假如须要显现无布景文本,应考虑用粗体显现以进步易读性。在这种状况下,一般应该防止添加暗影来添加文本比照度。当时空间或许并未包括能在上面准确投影的视觉外表,而且你无法猜测暗影的巨细和密度是否能与用户的当时环境完美适配。

尽量让文本面向用户。假如在空间中显现与某一点相关的文本,例如符号3D方针的文本,则不管佩带者或方针怎么移动,一般会期望文本面向佩带者。例如,假如显现与可见线段平行的标签,你或许想要文本环绕该线段旋转。假如显现3D方针的标签,你无妨让标签看起来像打印在方针上或与方针外表平行。

九、按钮

visionOS界说了三种规范按钮形状,每一种都支撑以下标签类型。

visionOS按钮运用不同的视觉款式来表现以下每一种交互状况:

除了以上列出的五种状况,圆形按钮还可在用户看向该按钮顷刻后显现东西提示。相反,包括文本的按钮不会显现东西提示,由于按钮的描绘性标签表达了其功用。

visionOS供给了多种巨细的按钮,详细取决于形状和内容。

首选具有可辨布景形状和填充的按钮。当按钮被形状围住且形状运用有比照度的布景填充时,用户一般更易于看到这种按钮。东西栏、上下文菜单、提示或装修中的按钮破例,此类较大组件的形状和原料可保证按钮轻松可见。以下攻略可帮忙你保证按钮在不同环境中杰出出现:

按钮看起来悬浮在空间中时,为其布景运用玻璃原料。

防止创立运用白色布景填充和黑色文本或图标的自界说按钮。体系保存了这种视觉款式以用于表现选定切换状况。

一般首选圆形或胶囊形按钮。用户的视野常常会被形状中的角招引,因而难以坚持看向形状的中心。按钮形状的角越圆,用户越简略聚集该项目。须要独自显现按钮时,首选胶囊形按钮。

在按钮周围留出满足空间,以便用户聚集其上。为使聚集操作舒适,请以各中心一向至少相距60点的办法放置按钮。假如按钮巨细为60点或更大,请在其周围添加4点内边距以防止悬停作用堆叠。别的,一般最好防止在笔直仓库或水平行中显现小号或迷你按钮。

假如须要在仓库或行中显现文本标签按钮,应选取正确形状。详细而言,首选将圆角矩形用于笔直叠放的按钮,将胶囊形用于按水平行摆放的按钮。

关于输入来说,还有一个和按钮类似,那便是滑块。首选水滑润块。比较于上下方向的手势,用户一般更简略履行从一侧到另一侧的手势。

十、菜单1.上下文菜单

考虑运用上下文菜单而非面板或检查器窗口来出现频频运用的功用。尽量削减App翻开的独自视图或窗口数量可帮忙用户坚持空间整齐。

例如,用户在运用App完结有深度的专业使命时,一般期望花时间了解很多凌乱的指令,并或许期望经过上下文菜单拜访这些指令。另一方面,用户在运用App履行少量容易操作时,或许喜爱可快速阅读和运用的简略上下文菜单。

2.菜单

在visionOS中,菜单能够运用iOS和iPadOS界说的小或大布局款式来显现项目。如同在macOS中相同,visionOS窗口中的翻开菜单可显现在窗口的鸿沟之外。

尽或许优先在菜单操控的内容邻近显现菜单。由于用户须要先聚集菜单项才干轻点,假如该项目操控的内容太远,则用户或许会错失项目所完结的作用。

十一、装修

在visionOS中,装修出现了与窗口相关的控件和信息,而不会抢占或遮挡窗口内容。这儿叫装修,说实话,我个人觉得不便是东西栏吗?你觉得呢?留言区能够说一下。

装修悬浮在与其相关窗口平行的平面中,而且沿着z轴略微坐落窗口前面。假如相关窗口移动,装修也会随之移动,以坚持其相对方位不变;假如窗口内容翻滚,装修中的控件或信息坚持不变。

考虑运用装修在不会导致窗口塞满的共同方位来出现常常须要运用的控件或信息。由于装修紧靠其窗口,所以用户一向知道其方位。例如,“音乐”运用装修来供给“播映中”控件,保证这些控件一向处在简略找到的可猜测方位。

首选运用装修而非独自的窗口来供给弥补控件和信息。运用装修供给相关功用可防止让用户翻开不得不独自办理的额定窗口。

尽量坚持装修的宽度小于等于相关窗口的宽度。假如装修比其窗口更宽,则或许会搅扰窗口一边的标签页栏或其他笔直内容。

考虑在装修中运用无边框按钮。装修的布景默许为玻璃,因而假如你将按钮直接放在布景上,它或许不须要可见的边框。当用户看向装修中的无边框按钮时,体系会主动为其运用悬停作用。

运用体系供给的东西栏和标签页栏,除非你须要创立自界说组件。在visionOS中,东西栏和标签页栏主动显现为装修,因而你无需运用装修来创立这些组件。

十二、东西栏

在visionOS中,体系供给的东西栏沿窗口的底部边沿显现,坐落窗口办理控件的上方,处于沿z轴方向略微坐落窗口前方的平行平面中。

与macOS以外的其他渠道相同,你须要为东西栏中的每个项目供给符号或许文本标签。当用户看向包括符号的东西栏项目时,visionOS会显现文本标签来供给额定信息。

优先运用体系供给的东西栏。规范东西栏具有共同且用户了解的外观,且经过优化可杰出调配眼睛和手部输入运用。此外,体系还会主动将规范东西栏放在相对其窗口的正确方位。

防止创立笔直东西栏。在visionOS中,标签页栏是笔直的,因而出现笔直东西栏会让用户混杂。

当用户调整窗口巨细时,尽量坚持东西栏控件共同。和macOS不同,visionOS不包括每个App在其间列出全部操作的菜单栏,因而不管窗口的巨细怎么,让用户经过东西栏牢靠拜访根本控件十分重要。

假如App能够进入模态状况,考虑供给上下文相关的东西栏控件。例如,相片修正App或许进入模态状况以帮忙用户履行多步修正使命。在这种景象下,模态修正视图中的控件与主窗口中的控件不同。当App退出模态状况时,有必要康复窗口的规范东西栏控件。

如有必要,考虑在东西栏中包括下拉式菜单。下拉式菜单可让你供给与东西栏项目相关的额定操作,但难以被用户发现且或许会导致界面凌乱。由于visionOS中的东西栏坐落窗口的底部边沿,下拉式菜单或许会遮挡出现在底部边沿下方的规范窗口控件。

十三、导航栏

当内容在导航栏后边翻滚时,为了坚持导航栏项目的易读性,visionOS在导航栏布景中运用可变含糊。可变含糊将导航栏锚定在翻滚内容上方,一同让视图的玻璃原料坚持统一和完好。

优先在导航栏中运用规范组件。在visionOS中,导航栏圆角运用60点接连曲线。规范按钮、文本栏、标题和脚注默许的圆角半径与导航栏圆角坚持同心。假如须要创立自界说组件,你能够运用以下公式来帮忙保证其圆角半径也与导航栏的圆角坚持同心:

1.边栏

假如App的层级结构较深,考虑在标签页栏的标签页内运用边栏。在这种状况下,边栏可支撑在标签页内进行二级导航。假如运用边栏,请有必要防止在边栏中进行的挑选操作更改当时翻开的标签页。

2.标签分栏

在visionOS中,标签页栏一向笔直,悬浮在相关于窗口前沿而言固定的方位。当用户看向标签页栏时,它会主动翻开;若要翻开特定标签页,用户可聚集标签页并轻点。标签页栏翻开后,它或许会暂时遮挡后边的内容。

为每个标签页供给符号和文本标题。标签页的符号在标签页栏中一向可见。当用户看向标签页栏时,体系也会显现标签页标题。尽管标签页栏会翻开,但你须要坚持标签页标题简略,以便用户能够一望而知。

十四、提示

App在同享空间中运转时,visionOS会在窗口前方显现提示,沿z轴略微偏前。假如用户在未封闭提示的状况下移动窗口,提示会坚持锚定到窗口。假如App在全空间中运转,体系会在佩带者视场的正中显现提示。

假如须要在visionOS提示中显现弥补视图,请创立最大高度为154点、圆角半径为16点的视图。

在visionOSApp中可见的表单会悬浮在其父窗口前方,让父窗口变暗并成为用户与App交互时的方针。

防止显现从窗口底部边沿出现的表单。为了帮忙用户检查表单,首选将表单放在用户视场的中心。

出现默许巨细的表单以帮忙用户保存其环境。防止显现掩盖大部分或整个窗口的表单,但考虑让用户按需调整表单的巨细。

十五、窗口

visionOSApp可运用窗口或空间容器在容器中显现内容。一般来说,你能够运用窗口来出现2D或3D内容,例如“邮件”中的收件箱或Safari阅读器中包括USDZ方针的网页。若要出现游戏棋盘或地球仪这样的3D内容和方针,你一般能够运用空间容器。

用户会当即了解visionOS中的窗口,由于这些窗口与其他渠道中已明晰的窗口在外观和行为上都比较类似。例如,visionOS窗口与笔直平面对齐,能够与其他App窗口一同显现在同享空间中,并供给可让用户移动、调整巨细和封闭的体系界说控件。

1.窗口

VisionOS窗口运用称为玻璃的不行修正布景原料,可让光线以及实践和虚拟方针透过显现。玻璃窗口会让用户觉得你的内容与周围融为一体,一同运用镜面反射和暗影来传达窗口的缩放和方位。运用默许款式创立窗口时,你会主动取得玻璃布景。

窗口的默许巨细为1306x734点。窗口初次翻开时,体系会将其放在佩带者前方约两米的方位,并看起来约有三米宽。

体系还会为规范窗口中的视图和控件添加高光和暗影,然后让视图和控件看起来有深度且更有实质感,特别是当用户从必定视点检查窗口时。尽管你能够在规范窗口中显现3D内容,但假如内容延伸出窗口外表过远,体系会将其切断。若要显现更大深度的3D内容,请运用空间容器。

包括3D内容的窗口

优先运用规范窗口来出现用户了解的界面和支撑了解的使命。为让你的App简略上手,应显现用户惯用的界面并将更多沉溺式体会预留给所供给的有意义内容和活动。假如想要展现游戏棋盘这样的有界3D内容,应考虑运用空间容器。

选取空白区域尽或许少的初始窗口尺度。太多空白区域会让窗口看起来过大,一同也会遮挡用户空间内的其他内容。

尽量运用合适窗口内容的默许形状。例如,默许Keynote演说窗口很宽,由于幻灯片比较宽;默许的Safari阅读器窗口很长,由于大多数网页长度要比宽度更大。

尽量让用户调整App窗口巨细。用户期望能够在自界说空间时调整窗口巨细。你能够依据状况设置最小和最大尺度值,以帮忙保证在用户调整窗口巨细时,窗口仍能正常运用且看起来漂亮。

一向保证窗口的可视鸿沟与其内含场景尺度相符。假如场景超越窗口的可视尺度,窗口控件会看起来方位不对且窗口外观或许与用户期望不相同,然后让其难以交互。

空间容器包括一个水平底面,帮忙你显现用户可从恣意视点检查的3D内容,例如地球仪。

2.空间容器

空间容器和窗口有一些类似之处:

在同享空间中,体系都会确认空间容器和窗口的初始方位。

空间容器供给的办理控件与用户用于调整窗口方位或封闭窗口的控件相同。

空间容器能够运用玻璃布景。

空间容器和窗口在体系运用的缩放类型上有所区别:visionOS会为窗口主动运用动态缩放,而为空间容器运用固定缩放。

优先运用空间容器显现丰厚的3D内容。假如想要出现用户了解的、以用户界面为中心的界面,一般最好运用窗口。

十六、手势

visionOS界说了两类手势:非直接和直接。

非直接手势会影响当时取得焦点的方针。例如,用户聚集某个控件后,能够用其间一根手指快速轻点拇指做出非直接轻点手势来激活或挑选控件。visionOS默许支撑非直接手势,用户可经过这些手势履行熟知的规范手势。

非直接手势一般较为快速(由于用户可快速看向不同方向)和舒适(由于设备相机可在用户的手放在大腿或身侧时捕捉手部移动)。别的,非直接手势可让用户与可聚集的任何方针交互,不管其在空间中处于什么方位,由于用户不用用手触及方针。

直接手势会影响用户轻触的方针(在visionOS中,用户用手指接近虚拟方针来轻触它)。例如,用户运用体系供给的键盘的其间一种办法是轻触按键。直接手势须要方针满足接近才干让用户触及。别的,用户有必要将手(而非眼睛)移向方针,直接手势一般更适用于并非必需进行快速准确交互的状况。

以下是用户在visionOS中常用的直接手势。

在或许的全部方位支撑轻点。用户聚集App或游戏中的方针后,假如想要挑选或激活方针,轻点很或许是其履行的第一个手势。即便你还支撑自界说手势,但在整个体会中支撑轻点可帮忙用户快速习惯你的App或游戏。

首选非直接手势。用户一般可轻松履行非直接手势,由于无需将手移到特定方位。将直接手势保存给想约请用户操控邻近虚拟方针的状况。

假如直接手势是你App的一项功用,保证用户运用非直接手势也能履行相同功用。你要尽量让用户可灵敏地挑选最合适自己的交互办法。

防止须要特定身体移动或姿态来输入。为须要用户移动的输入办法供给备选计划。

规划visionOS中的自界说手势

若要创立自界说手势,你须要ARKit来获取手部姿态和关节方向等信息。你的App有必要在全空间中运转,且有必要恳求用户答应来拜访其手部相关信息后,才干在App中供给自界说手势。

在自界说手势中优先考虑舒适性。持续测验须要自界说手势的全部交互中的人体工程学。须要用户坚持手臂举起(即便只要一小会)的自界说交互或许会让身体感到疲倦,接连屡次重复类似的动作也或许会对用户的肌肉和关节形成压力。

界说触及多指或双手的自界说手势前应细心考虑。履行自界说手势对用户来说或许有挑战性,要求其一同用多指做出姿态或运用双手或许会更难。

防止创立须要用户运用特定一只手履行的自界说手势。期望用户记住自界说手势要用哪只手会添加其认知负荷,还会使你的体会对有强势惯用手或四肢缺点的用户不行友爱。

假如你决议创立自界说手势,请保证其:

具有包容性。手势对不同的人或许有不同意义,因而请保证自界说手势不会传达意料之外的信息。

舒适。优异的自界说手势应对用户的身体来说易于履行,特别是长期履行。

共同。与你的App或游戏协调共同的自界说手势或许更易于用户发现和记住,一同也增添了体会的趣味。

易于描绘。假如你无法用容易的语言和图形描绘自界说手势,或许意味着该手势对用户来说也难以学习和履行。

十七、键盘

为想要合作App运用实体键盘的用户做好预备。须要履行输入很多文本的使命(如创立演示文稿)时,用户一般更期望运用衔接的键盘;用户一般还期望运用键盘快捷键在整个体系和App中导航和建议操作。别的,许多用户依靠实体键盘来运用全键盘操控形式或进行“旁白”交互。

十八、指针

在visionOS中,用户能够外接指针设备或键盘,并在持续运用其眼睛和手部的一同运用这两种设备。假如用户经过看向元从来聚集其上,然后移动指针,体系会将焦点从用户看向的元素移至指针下方的元素。你的App无需履行任何操作来支撑这种行为。

衔接指针设备后,用户看向的区域决议了指针的上下文。例如,当用户的视野从一个窗口移至另一个窗口时,指针的上下文会无缝转换到新窗口。

当用户运用所衔接支撑手势的指针设备(如触控板或鼠标)时,指针会在用户运用手势时躲藏,然后尽量削减视觉搅扰。在这种景象下,指针一向处于躲藏状况,直至用户移动后从头出现在用户看向的方位。

官方文档参阅:

专栏作家

彩云Sky;微信大众号:彩云译规划(ID:caiyunyisheji),人人都是产品司理专栏作家,腾讯高档视觉规划师。

本文原创发布于人人都是产品司理。未经答应,制止转载

题图来自Unsplash,依据CC0协议

该文观念仅代表作者自己,人人都是产品司理渠道仅供给信息存储空间服务。

上一篇:雀舌是什么茶?有何功效?
下一篇:最好听的男孩名字及1000个好听的女孩名字,收藏你会用得着
◆ ◆

欢迎扫描关注我们的微信公众平台!

欢迎扫描关注我们的微信公众平台!