大家好，我是李康Max。
最近Apple面向开发者更新了visionOS中软件设计开发流程的教学内容Learn - visionOS - Apple Developer。我也在同步学习相关内容，在此分享一些学习笔记，和大家一起交流学习心得。
关于Apple Vision提供的设计内容，官方给出的信息相对错综复杂。有些分布在WWDC整体介绍中，有些分布在visionOS介绍中，有些分布在Apple汇总设计指导文档中。目前在主动学习状态，我将优先以官方提供原文内容整理汇总，共计12篇，这是第2篇。
阅读提醒：本文共计5000字，预计阅读时长25分钟，请大家合理安排时间。
笔记内容难免有些中文翻译和自己的理解，所以每篇文章都优先提供原文地址。Design for spatial user interfaces - WWDC23 - Videos - Apple Developer（https://developer.apple.com/videos/play/wwdc2023/10076/）Learn how to design great interfaces for spatial computing apps. We'll share how your existing screen-based knowledge easily translates into creating great experiences for visionOS. Explore guidelines for UI components, materials, and typography and find out how you can design experiences that are familiar, legible, and easy to use.本文用于了解如何为空间APP设计出优秀的界面。通过讲解现在已知的UI设计知识应用到visionOS端，然后补充空间设计相关知识。其中会探索UI组件、布局和针对空间APP设计的优化等。了解如何设计用户学习成本更低，更易于使用的产品。本文针对visionOS的特点提供了UI界面设计的理论指导。我根据视频内容生成文本，同时补充了Apple产品设计中针对Vision UI的部分内容。最后还找到了目前测试版系统组件库地址。整体来讲建议优先按照苹果系统组件库内容进行产品设计，关注好基于pt的设计思路，避免用户眼动追踪出现识别问题。
- 系统通过添加阴影来体现各层之间的深度感并使用上层的 Alpha 通道打造浮凸感外观，以增强 App 图标的视觉维度。- visionOS App 图标呈圆形，并包括一个背景层及其上方的一至两层，以生成在用户查看时会巧妙展开的三维对象。- visionOS会自动给图层打上高光阴影以凸显3D感虽然使用半透明像素来为形状消除锯齿效果不错，但大面积的半透明区域无法与 Alpha 很好融合，还可能跟系统提供的阴影结合产生黑色结果。除非要为形状消除锯齿，否则请保持像素不透明或全透明。- 在非背景层中，首选为完全不透明或完全透明像素的不同区域之间使用明确边缘。非背景层包含的形状具有清晰边缘时，系统绘制的高光和阴影看起来最美观。避免使用柔化或羽化边缘。- 避免在背景层中添加看起来像孔洞或凹面区域的形状。系统添加的阴影和镜面高光可使此类形状看起来突出而非内凹。圆形遮罩可能会截断过于靠近边缘的形状或图像，导致形状看起来偏离中心并破坏图标的三维外观。- 避免使用从一个固定的有利位置看起来有深度的视觉元素。如果用户只能从一个视角感知层内元素的深度，当其聚焦该图标时，这种深度感便会消失。避免使用突出层元素的底部边缘这样的技术，因为这样做会与其他 App 图标的垂直透视发生冲突。- 避免为 visionOS App 图标添加自定义镜面高光或阴影。除了会干扰系统提供的视觉效果外，自定义高光和阴影为静态，而 visionOS 提供的高光和阴影则为动态。小细节：这里对比的第二个图标连阴影都变浅了，说明visionOS是真的在打光，引擎层面的打光。
2.1.2 材质 Materials
- 为什么使用毛玻璃背景？
用户的使用场景复杂多样，毛玻璃材质可以对用户现实空间窗口后面内容进行透传。让窗口对现实空间的入侵更温和，让用户觉得对场景更熟悉，更安全，也就更舒适。 APP的元素是一个整体，必须要一张画布承接，保证内容整体性统一，否则会让用户分散注意。 毛玻璃背景既可以反射一部分光线，又可以阻挡部分光线。高光和阴影可以提升窗口存在的真实感。更好的实现融合现实（Blend Reality = BR）。visionOS没有手机和电脑的暗色模式，相对应的visionOS在现实光线比较强的时候，通过增加对UI照射光强度保持窗口易读。在比较黑暗的环境光下，通过减少对UI照射光强度，降低用户用眼压力。虽然背景是毛玻璃效果，但是毛玻璃依旧有深浅之分，可以通过深浅对比产生功能模块的划分。例如搜索的输入框，就是用深色代表凹下，以引导用户输入内容。例如在下面图中加一个价格按钮，在原有的浅色中加一个更白的颜色做对比就挺好了。想强化一下列表属性九个每个内容模块加一个深的颜色，价格按钮用反色较浅的。而不要浅色上加浅色，用户难以区分。
为了保持visionOS 中内容清晰可见，并且易于阅读。设计比IOS更大一号的字体，如下。 因为窗口背景使用的是毛玻璃效果，所以当窗口后方的内容比较抢眼的时候，就会影响前面窗口的文字阅读效率。所以可以给窗口增加动态强化 Vibrancy，以增加磨砂感/透光率，提升文字亮度。例如，在如下文字段落中，标题就可以用第一级强化Primary；描述内容就可以用第二级强化Secondary；标注和脚注就可以用第三级强化Tertiary。标准 visionOS 窗口通常使用系统定义的玻璃材质，用户现实环境和空间中的光线和对象可透过这种材质显示。这些现实和虚拟对象中的颜色可透过玻璃被看到，因此可能影响窗口中彩色 App 内容的易读性。首选在有助于吸引用户注意重要信息或显示界面各部分之间关系的位置使用颜色。在较细文本或较小区域中使用颜色可能会使其更难看到和理解。颜色可以用在较大的背景模块中。
- 一般来说人眼更习惯于向左右看，而不是向上下看。所以当需要一个更大屏幕的时候，优先考虑把屏幕拉宽而不是拉高，就像无边记的屏幕一样。每个人的眼睛都是不同的，Vision产品眼睛是核心交互方式，所以visionOS要尽量保证每个人都能准确的瞄准界面中的元素。那么visionOS 通过控制屏幕和用户的距离，屏幕的空间大小，再控制每个设计元素的在屏幕的距离和元素的大小，就能保证几乎所有人的体验，所以做菜一定要学会摆盘。根据我的测算和现有眼动追踪供应商提供的数据，Apple Vision Pro眼动追踪使用精度约0.3～0.6角度。而实际人在使用眼镜的时候，很多都是扫视，人眼1秒可以扫180度以上角度。人眼其实很难长时间聚焦在一个细小的元素上，所以需要聚焦观看的元素要够大。Apple Vision给的方案是60pt，约2.2角度。虽然眼动追踪精度的理论值远低于0.3角度（可能能达到0.03角度），但是为了适配不同用户的使用，每个需要视觉锁定的元素都要留8pt的边界，作为容错空间。当用户扫视到这8pt时，visionOS会进入预响应状态，用户不会感知，而进入元素超过8pt元素就会响应，进入hover态。我也是基于这个8pt推理到眼动追踪使用识别精度在0.3角度，所以其工业理论精度，应该在0.3角度以下，盲猜用假人可以到0.03角度左右。- 每个元素留8pt相邻的元素就要有16pt的间隔空间如果你的产品中设计 可交互的元素旁边是非交互元素，那么就不用保持16pt间隔，只要让可交互元素之间有相应间隔即可。例如你用的按钮看起来很小，只要保证识别空间是60pt，按钮可视图标是28pt也没有关系。如果你用了一个超大的button 例如80pt，那么只要保证间隔16pt就行。2.2.3 hover态反馈 Focus feedback- 按钮要提供hover态，可以通过变亮和膨胀的方式。下面这个GIF就是把目光当成一束光在按钮上扫过，可用的按钮会有高光反馈，就像深夜里被手电筒照到了一样。这样，用户一眼就知道，那些功能能用，那些功能不能用。- 用4pt间隔处理，选中元素 及其 临近的hover态元素当选中的内容和hover态，都采用了膨胀的展示方式。当两个元素相邻时，非常容易膨胀造成重叠。所以在这种状态下，要考虑hover态后的元素间隔，建议使用4pt。在如图的列表中，封面标题和描述，都是指向同一个内容，那么hover态就把所有内容打包放到一起。设计不同元素的hover态指向同一个结果，是一种不必要的设计。如果我们把人眼的目光变成可视化的，就发现目光其实像一个射灯，发射锥体的光线。所以目光在垂直平面的投射就是一个圆/椭圆。所以visionOS设计的元素也使用圆角，就更贴合人眼视觉。现在MacOS IOS等都在使用圆角设计，圆角设计让人觉得平滑和舒适。- hover态依旧使用圆角设计，四个角半径要相同。计算方法也很简单，元素的圆角半径+元素和hover态边框半径，用同一个圆心画圆就行了。特别的，四个角半径要相同，并且hover态是个整体。2.3 对比认知：平面设计vs空间设计 From screen to spatial- 使用官方提供的交互组件，以适配visionOS的混合交互模式，减少出错。visionOS提供了 眼动追踪+手势捕捉+语音的交互方式；同时用户可以接外设键盘鼠标触控板进行UI交互；特别还有场景物体的直接推拉拿捏的交互。设计师和开发者全部理解这东西太浪费时间了，并且测试成本也非常高。不如直接使用系统组件改吧改吧，减少出错。所有的2D内容都需要一个窗口承载，但是窗口没必要限制在另一个窗口里。- IOS App的底部导航栏，放在visionOS App的左侧导航- 导航栏采用无底图icon设计，用户目光驻留，再显示导航的文字。一般来讲手机App的导航在3-5个，而网页的导航往往有很多。visionOS App导航栏最好就5-7个。我们App设计往往是采用顶部tab栏导航，或者直接在App里放几个模块入口。在iPad应用里往往是树状菜单的下一级别。visionOS 就可以设计成类似向右的树状图，侧边栏就是二级菜单。就像iOS Photos 里面根据年月日筛选图片，音乐播放器的音乐控制栏，视频播放器的进度条控制。这些快捷控制栏承担着内容播放，或者内容筛选等作用。是个使用效率比较高但是使用频次不固定的功能。那就拿下来放到主要屏幕前面采用层级设计。
原本是为了提升用户操作效率，但是不确定用户使用频次，视觉上就不要太过惹眼。一排图标相似的图片都带个相似的底图徒增用户视觉压力。以前我的御用设计师和我提到过一个点，突兀的设计不要独立存在。关联的事物就应该关联起来，就像一个在地面半高的漂浮气球，你看的就浑身不舒服，时刻担心它是飞走还是落下。当给气球画一根线绑在栏杆上，瞬间舒服了。还有这种物理层面的关联，也让用户理解其中有管理和被管理的关联关系。 就像我们常用的视频软件一样，视频控制栏没必要一直驻留。- 快捷工具栏本身就是一个窗口，可以有更丰富的功能结构菜单要和按钮中心对称，不用担心超出底层屏幕的问题。按钮选中后采用白底黑字，一个反色强调选中状态。- 规则：白色底按钮只用于选中状态，其他情况禁止使用2.3.7 弹窗&Toast Popovers and Toast加入弹窗后会把原来的界面向后推，并且降低界面的亮度，以展示原界面是不可用状态。用户必须优先解决弹窗的内容才能继续使用。弹窗上面还可以增加toast提示，在出现提示后，原来的主界面和弹窗都会向后推，并且变暗。弹窗是一个左上角自带X关闭按钮的窗口，窗口中依旧可以加入功能结构，如果某个功能使用了弹出窗口的整个界面，关闭按钮就会变成回退按钮。
目前官网提供beta版本，且只有用英文才能看到，可以下载或者Figma在线查看。网站地址：https://developer.apple.com/design/resources/#visionos-apps我的个人微信：likangmax（添加请说明来意）