这篇文章详细地介绍了设计优化的整个过程，由八个步骤进行分析和找出问题并优化，表明了交互思维对工作的重要性，希望能对大家的工作有所帮助。

我发现工作中掌握的交互思维，真的非常管用。它让我对星球进行优化的时候，可以做到系统、高效、有章法。下面我把整个优化的过程，用「给面试官讲述作品集」的方式展现出来，并讲解为什么要这样做的原因，希望能给大家呈现一个完整的案例。

大家可以通过阅读这篇文章，了解如何把一个设计优化类的项目，整理并放到自己的作品集里。

一、优化思路

下面这张图展现了我进行星球优化的思路

总结一下就是：先确定目标 ➡️ 然后针对目标，通过各种专业方法，发现阻碍目标实现的各种问题，还有竞品里好的做法 ➡️得到设计策略 ➡️ 之后针对每个策略，进行方案设计 ➡️ 最后进行优化效果的评估。

二、需求和目标分析

随着星球的内容越来越多，星球的学员打开星球会不知道该从哪看起。从而导致星球学员的获得感低。最直接的体现，就是后台看到星球的续费率比较低。

从上面的描述可以看出，星球现在的问题，主要是“星球内容多，用户不知道该看什么，导致学员获得感低，续费率也比较低”；

因此，提升学员的获得感，提升续费率是我做这个项目需要解决的最大问题，也就是我的设计目标。

为了达成这个目标，我从用户以下 3 个方面，研究如何提升续费率：

1. 用户有哪些用得不爽的地方？
2. 星球本身存在哪些问题？
3. 竞品有哪些值得学习的地方？

三、用户调研

主要通过用户问卷调研和场景分析，了解用户使用星球的需求和痛点。

问题主要集中在学员加入星球的原因和期望、星球对学员有什么帮助、星球在哪些方面可以改进，以及学员是否愿意分享经验等。

比如：

你认为【XXXX的知识星球】对你的学习和职业发展有何帮助？

100%的学员都选择了“学到专业的交互设计知识”，90%的学员选择了“通过设计案例学会了分析”。

还有这道题：

你认为【XXXX的知识星球】在哪些方面可以改进，以更好地满足你的学习需求？80%的学员选择了“实用指导（更多的实战指导+案例分析）”；70%的学员选择了“星球及时更新”。

从这些用研结论，可以总结出以下要点：

1. 大家认为在星球里学到了一定的交互知识
2. 案例分析对大家有帮助
3. 学员希望看到更多实战指导和更频繁更新的内容
4. 学员愿意分享，只是不知道分享什么

从用户场景来说，通过访谈星球学员，得到用户使用星球有以下3个场景：

1. 主场景 – 没有明确目标

小 A 是一枚交互小白，在早上上班的路上，觉得无聊，想起最近领导让他们学习交互，于是想利用碎片时间进行学习，他打开知识星球 app，开始查看「XXXX的知识星球」内容

2. 次要场景 – 有明确目标

小 B 是一枚 UX 设计师，他在公司里，接到领导的需求，需要对用户进行访谈。他对用户访谈的方法不熟悉，想找一篇专业文章来学习，于是打开「XXXX的知识星球」

3. 次要场景 – 第一次使用

小 C 是一枚交互小白，他最近刚加入星球，需要了解如何通过星球更好地学习交互，打开星球进行查看

整理用户场景和问卷调查的结论，我们可以总结出用户的主要需求：

1. 明确的交互学习路径，可以一步步逐渐学习
2. 在星球里可以很快找到特定的内容
3. 需要指引，可以迅速了解如何使用星球进行学习
4. 更多实战指导和更频繁更新的内容

总结用户典型画像如下

四、设计走查

了解了用户，我进行了一轮专家走查，寻找星球里现在存在的问题。

走查时，我主要根据用户使用星球的 3 个场景，为自己设定了 3 个任务：

1. 首次打开星球，了解星球有什么内容、如何进行学习；
2. 通过星球来学习来一步步学习交互；
3. 找到如何进行设计分析的方法。

通过走查，发现星球主要有以下问题：

• 对新手的指引，信息太多，导致看完感觉压力山大；
• 对于交互小白，缺乏步骤引导，不知道该先看什么，后看什么；
• 内容缺乏分类，导致无法找到设计分析模块的内容，只能靠自己的理解去筛选；
• 导航不清晰，难以快速找到想要的信息。

五、竞品分析

最后，我继续通过竞品分析，寻找竞品有哪些经营星球的妙招，可以提升续费率。

在阅读大家的运营经验时，我把所有觉得有价值的点就记录了下来，形成下图所示的脑图：

六、设计策略总结

经过了用户调研、专家走查和竞品分析，我从正反两方面明确了星球的问题：

从正面，通用对竞品经验的研究，找到了和竞品的差距；

从反面，通过对用户和星球的研究，找到了星球的不足之处。

至此，我明确了此次改版的4 条设计策略

1. 优化内容分类和导航
2. 优化新手说明和交互学习路径
3. 新增内容和发布频率
4. 激励用户发言

七、优化方案

在这一部分，我将根据设计策略，逐一展示每条设计策略下，具体的设计方案是什么。

1. 优化内容分类和导航

星球里的内容，主要是通过专栏（UX 设计方法锦囊）和顶部标签栏这两个系统进行组织的

它们的定位如下：

可以看到，内容之间有很多彼此重复的部分：

• 锦囊里是根据主题组织的一系列主文，而顶部标签导航里有“主文”这个标签。两者是重复的。
• 顶部标签导航里的内容，也有彼此重叠的部分：
• 作品集分析和文件有重叠；
• 打卡和设计案例打卡、案例都有重叠。

通过整理，可以梳理出它们的不同定位：

• 锦囊承载着「让目标明确的用户，能够快速找到某个主题」的作用，比如用户调研、设计汇报等等；
• 顶部标签导航，则可以让「对想看的知识点没有那么明确，但希望浏览某个类型的内容」的用户，开启浏览模式，比如优秀设计案例、作品集点评。

现在问题比较大的是顶部标签导航。为了确定好顶部标签导航到底要展现什么内容，我把星球的内容进行了梳理：

通过梳理，主文是放在锦囊的，打卡计划放在新手引导，会员日对用户来说只有即时价值，没有沉淀价值，因此不展示。

同时，我把「文件」中的各种文件类型，归类到「作品集点评」、「设计资源」等更精确的类型；

把「设计案例打卡」和「打卡」的内容进行了筛选，挑出优质内容，放入「优秀设计案例」。

通过梳理和整合，用户不用面对那么多内容有重叠的标签，而且每个标签更加精确，区分度更好。

最终，顶部标签导航优化效果如下：

2. 优化新手说明和交互学习路径

一枚新学员加入了星球，ta 最关心的是这两个内容：

1. 星球里都有什么内容？
2. 我该如何利用星球的内容进行系统学习？

针对这两个问题，我对星球内容进行了梳理，并且在用户调研和竞品分析的基础上，对星球的内容进行了扩充和升级：

交互学习路径指南（内容优化，提供学习路径） + 星球积分计划（提升活跃） + 语音分享（用户需求）

2.1 交互学习路径指南

我用脑图，将星球里讲解的交互技能进行了梳理。然后根据自己10 年+的工作经验，将这些技能按照工作中的重要性和难易程度，从上到下排列，由此得到如下的脑图：

根据这个脑图，将主文和打卡内容，优化整合到「交互学习路径指南」里，让学员可以一步步学习，系统提升

2.2 星球积分计划

从竞品分析中，我了解到，用户在星球越活跃，对星球就越有归属感，续费率就会越高。因此我设置了积分规则

为了让积分更有吸引力，设置了积分的奖励机制：

• 每周积分最高的 2 位学员，获得 1 颗星；攒够 5 颗星，可获得跟XX语音咨询半小时的权利（价值 299 元），或XX签名版《查找图书步步为赢》
• 每月积分最高的学员 1 名学员可免次年星球年费（价值 255 元）
• 每年 12 月 31 日和 6 月 30 日，进行积分统计。积分最高的 3 个学员，将获得「星球合伙人资格」。XX将进行语音审核，通过后，成为星球合伙人，享受星球分红福利。合伙人每半年审核一次。

2.3 语音分享

通过竞品分析和问卷调查，发现大家对语音分享有较强烈的需求，因此星球全新推出语音分享模块。

我会从星球里精选出优质内容，以语音形式分享给大家，方便大家在通勤、吃早饭、洗漱等场景收听。

3. 新增内容和发布频率

通过用户调研，发现用户希望星球更频繁地更新的内容。

为此，我在星球新增了两个每周发布的内容：

• 每周一分享职场经验，趋势观察，设计技巧；
• 每周三分享案例分析。

用每周发布的内容，培养学员经常打开星球的习惯。

4. 激励用户发言

这部分主要是通过「星球积分计划」，将发帖、提问、点赞、评论等行为，都给予积分奖励，并通过奖励星星给每周积分最高的 2 位学员，促进大家的活跃。

八、效果评估

星球于 6 月 27 正式改版。

改版后，我对比了星球的成员活跃度，发现星球的成员活跃度，由99.33，上升到101.81

星球的内容活跃度，也在改版后有了较大提升：

改版后，星球一不小心，还进入了整个知识星球 app 活跃榜第 17 名，哈哈

这些喜人的数据变化，验证了这套优化方案的有效性。也再次说明了“有效的方法+努力=正向结果”这个不变的道理。

另外，还有一个很关键的数据：续费率。由于星球是年费制，很多学员还没到续费阶段，所以这个数据需要长期观察和跟进。

当你需要着手为 visionOS 设计相应的APP或其他应用时，你要怎么做，才能为用户带来视觉感受和操作体验上的完善？或许你需要先了解 visionOS 的有哪些设计规范。本篇文章里，作者就汇总分析了 visionOS 的设计规范，一起来看看吧。

前几期和大家分享了一些visionOS设计亮点以及设计原则解读，有人说想看官方的UI设计规范，官方其实给出了，但分散在其他系统规范中。

彩云把这些零碎的设计规范做一个汇总整理，摘取其中最精华的部分与大家分享。这篇文章将会是未来必看的设计规范，文章算是今年以来写过最长的一篇（差不多有1.7万字）。

当你着手为 visionOS 设计 App 或游戏时，首先要了解该平台特有的基本设备特征和模式。利用这些特征和模式来指导你的设计决策，帮助你打造出富有吸引力的沉浸式体验。

积极采用 Apple Vision Pro 的独特功能。充分利用空间、空间音频和沉浸来让你的体验身临其境，同时以让用户在设备上感到轻松自然的方式集成穿透、聚焦和手势。

设计呈现 App 中最独特时刻的方式时，考虑整体的沉浸程度。你可以在以用户界面为中心的窗口式环境、全沉浸式环境或介于两者之间的某种环境中呈现体验。为 App 中的每个关键时刻找到最适合的最低沉浸程度，不要假设每个时刻都需要完全沉浸。

为以用户界面为中心的受限体验使用窗口。若要帮助用户执行标准任务，首选在空间中使用显示为平面并包含熟悉控件的标准窗口。在 visionOS 中，用户可将窗口重新放置在想要的任何位置，且系统的动态缩放可帮助保持窗口内容无论远近都清晰易读。

优先考虑舒适性。若要帮助用户在与 App 或游戏交互时保持舒适和身体放松，请记住以下基本原则。

• 在用户的视场内显示内容，并相对其头部放置。避免将内容放在用户必须转头或改变姿势才能进行交互的位置。
• 避免显示眼花缭乱、不和谐、过快或缺少静止参考系的动态效果。
• 支持非直接手势，让用户的手放在大腿或身侧时也能与 App 交互。
• 如果支持直接手势，请确保交互式内容不会距离过远，并且用户无需长时间与其交互。
• 用户处于全沉浸式体验中时，避免鼓励其过多移动。

上面是一些大的设计特征，下面会介绍一些基础的设计规则，便于做好具体的设计。

共18个分类，目录：

1. 图标
2. 颜色
3. 图像
4. 沉浸式体验
5. 材质
6. 动态效果
7. 空间布局
8. 字体
9. 按钮
10. 菜单
11. 装饰
12. 工具栏
13. 导航栏
14. 提醒
15. 窗口
16. 手势
17. 键盘
18. 指针

一、图标

1. App图标

visionOS App 图标呈圆形，并包括一个背景层及其上方的一至两层，以生成在用户查看时会巧妙展开的三维对象。

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

为图标的背景层使用全幅不透明图像。相反，避免在非背景层中使用全幅图像。在非背景层中使用透明区域可让下层的视觉信息透过。

为每层提供正方形图像。系统会使用圆形遮罩裁剪 App 图标的所有层，因此提供已裁剪的层可能会对结果产生负面影响。

避免大面积使用半透明。虽然使用半透明像素来为形状消除锯齿效果不错，但大面积的半透明区域无法与 Alpha 很好融合，还可能跟系统提供的阴影结合产生黑色结果。除非要为形状消除锯齿，否则请保持像素不透明或全透明。

在非背景层中，首选为完全不透明或完全透明像素的不同区域之间使用明确边缘。非背景层包含的形状具有清晰边缘时，系统绘制的高光和阴影看起来最美观。避免使用柔化或羽化边缘。

避免在背景层中添加看起来像孔洞或凹面区域的形状。系统添加的阴影和镜面高光可使此类形状看起来突出而非内凹。

保持非背景层中的不同形状或图像靠近中心。圆形遮罩可能会截断过于靠近边缘的形状或图像，导致形状看起来偏离中心并破坏图标的三维外观。

避免使用从一个固定的有利位置看起来有深度的视觉元素。如果用户只能从一个视角感知层内元素的深度，当其聚焦该图标时，这种深度感便会消失。避免使用突出层元素的底部边缘这样的技术，因为这样做会与其他 App 图标的垂直透视发生冲突。

避免为 visionOS App 图标添加自定义镜面高光或阴影。除了会干扰系统提供的视觉效果外，自定义高光和阴影为静态，而 visionOS 提供的高光和阴影则为动态。

VisionOS App 图标尺寸。创建大小为 1024×1024 个像素的 App 图标以在主屏幕视图中显示。

2. 系统图标

有效图标能以用户立即理解的方式表达单个概念。

1）打造可识别且高度精简的设计。细节过多可能会导致界面图标混乱或难以理解。尽量使用简单且通用的设计，让大多数用户可快速识别。一般情况下，当图标使用熟悉的视觉隐喻来直接反映其所发起的操作或所代表的内容时，效果最佳。

2）保持 App 中所有界面图标间的视觉一致性。无论仅使用自定义图标还是将自定义图标和系统提供的图标混合使用，你 App 中的所有界面图标都需要在大小、细节程度、线条粗细和透视上保持一致。根据图标的视重，你可能需要调整其尺寸以确保其在视觉上与其他图标显示一致。

为了帮助实现视觉一致性，可根据需要调整单个图标的大小

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

3）通常使界面图标与相邻文本在线条粗细上相一致。在这两者中使用粗细相同的线条可让内容在外观和强调程度上保持一致，除非你想要强调图标或文本。

4）如有必要，可为自定义界面图标添加内边距以实现视觉对齐。某些图标（尤其是非对称图标）按几何图形（而非按视觉效果）居中时可能会看起来不平衡。例如，下方所示下载图标的底部视重比顶部视重更大，因此如果该图标按几何图形居中，看上去会很低。

非对称图标可能会看似偏离中心，即使实则不然

在此类情况下，你可以稍微调整图标的位置，使其在视觉上达到居中。当创建的资源通过在界面图标周围添加内边距的方式调整（如下方右图所示）后，你可以按几何图形居中该资源，从而在视觉上居中该图标。

将图标移高几个像素可使其在视觉上居中；将额外像素包括在内边距中可让居中更简单。

视觉上居中之前（左）与视觉上居中之后（右）

在视觉上居中所需的调整通常非常小，但却对 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 或游戏体验方式。在此范围内，用户现实环境的可见度在体验的沉浸效果方面起着关键作用。

佩戴 Apple Vision Pro 时，用户可使用穿透看到现实环境，此功能提供了来自设备外部相机的实时视频。

为更改可看到周围的多少，用户使用数码旋钮调整穿透量。例如，在想要与附近的实际物体交互或阅读其他设备上的文本时，用户可能会增加穿透，在想要呈现某种环境时，可能会减少穿透。

五、材质

在 Apple 平台上，材质可通过模糊和修改底层视觉内容的颜色值来加入半透明效果。

半透明效果可以改善前景元素和背景元素之间的融合，以视觉方式传达图层之间的分隔并帮助用户保持位置感。材质可结合虚化效果来增强半透明效果。虚化效果通过从材质后面往前提拉颜色来增强文本、符号和填充等前景内容的深度感。

1）基于语义和推荐用途选取系统材质和效果。避免基于给界面添加的外观颜色来选择材质或效果，因为系统设置可以更改其外观和行为。而应使材质或虚化样式匹配特定的用例。例如，使用颜色较浅的材质来突显 visionOS App 中的交互式组件，

2）通过在材质顶层使用虚化颜色来帮助确保易读性。使用系统定义的虚化颜色时，你无需担心颜色在不同环境中可能会太暗、太亮、太饱和或对比度太低的问题。visionOS 系统使用与 macOS 所用相同的深色虚化颜色，并自动调整这些颜色以在不同视觉环境下保持对比度。

3）在 visionOS 中，窗口通常使用系统定义、被称为玻璃的不可修改材质，通过让光线、当前环境、虚拟内容和用户周围的对象透过来帮助保持用户与现实世界的联系。玻璃是一种适应性材质，可限制背景颜色信息范围以便窗口可持续为 App 内容提供对比度，同时根据用户的现实环境和其他虚拟内容在颜色上变得更浅或更深。

4）visionOS 没有专门的深色模式设置。相反，玻璃会自动适配对象的亮度和其后面的颜色。

5）如有必要，请选取可协助形成视觉分离或表示 App 中交互性的材质。如果需要创建自定义组件，你可能需要为其指定系统材质。使用以下示例作为指导。

• 浅色材质可让用户注意到按钮和所选项目等交互式元素。
• 深色材质可帮助你从视觉上分离 App 的各个部分，例如边栏或分组表格视图。
• 最深色的材质可让文本栏等组件看起来像嵌入一样，表示该区域可接受文本输入。

6）visionOS App 默认使用浅色内容，但也会使用白色文本。

六、动态效果

美观流畅的动态效果赋予界面活力，从而传达状态、提供反馈和指示以及丰富视觉体验。

很多系统组件自动包括动态效果，让你在整个 App 或游戏中提供熟悉且一致的体验。如果设计自定义动态效果，请首选有意图的动画，以帮助用户确定自身位置和看起来舒适，提供清晰的反馈来响应其操作，以及帮助其了解界面以免其不知所措。

使用巧妙的动态效果进行传达。动态效果是通过展示事物如何变化、用户执行操作时会发生什么情况以及其下一步可执行什么操作来增强反馈和理解的绝佳方式。在 visionOS 中，当用户聚焦窗口控件时，控件会轻轻展开。

有目的地添加动态效果，让其在不妨碍体验的同时提供支持。不要添加毫无意义的动态效果。不必要或过多的动画会分散用户的注意力，且可能让其感到违和或身体不适。

将动态效果设为可选。用户可能出于多种原因无法在你的 App 中体验到移动，因此避免将动画用作传达重要信息的唯一方式至关重要。例如，用户可以打开“减弱动态效果”辅助功能设置来尽量减少或去除动画。

尽量保持真实感和可信度。在非游戏类 App 中，准确真实的动态效果可帮助用户理解运作原理，但无意义或似乎违背物理定律的动态效果会让其感到混乱。例如，如果用户通过从顶部向下滑动显示视图，他们不会期望通过将视图滑到一侧来进行关闭。

优先使用简短、精确的动画。简洁且精确的动画往往会让用户感到更轻盈，干扰性更低，并且通常会更有效地传达信息。在 visionOS 中，当用户轻点“照片”中的全景照片时，视图会平滑展开以填充用户面前的空间，从而帮助其以可视方式追踪过渡效果。

通常避免在频繁出现的交互中添加动态效果。系统已使用标准的界面元素为交互提供了精细的动画。避免让用户每次与内容进行交互时都要花额外的时间关注不必要的动态效果。

考虑在可行时使用具有动画效果的符号。使用 SF 符号 5 或更高版本时，你可以将动画效果应用到 SF 符号或自定义符号。

在 visionOS 中，动态效果可巧妙地传达上下文，让用户关注信息，以及丰富沉浸式体验。与深度结合使用时，动态效果还可在用户聚焦元素时提供至关重要的反馈。按用户预期的方式使用动态效果，而不要导致用户注意力分散、困惑或者不适，这一点非常重要。

当用户佩戴 Apple Vision Pro 并与虚拟内容交互时，他们会使用穿透查看现实环境。因为周围和 App 内容可能同时可见，如果虚拟内容的移动让用户感觉他们自己或周围在移动，这会让其感到不适。一般而言，移动的虚拟对象越大，维持稳定感就越难。

显示较大虚拟对象的移动时，帮助用户保持舒适感。如果对象大到足以填充大部分视场，请遮盖大部分或所有穿透，用户会自然将其视为周围的一部分。为了帮助用户感知对象的移动而不会让其觉得自身或周围在移动，你可以增加对象的半透明效果，帮助用户透视对象，或者降低对象对比度来让其动态效果不那么明显。

如果需要在大型对象间显示过渡效果，请考虑使用渐变效果或者让内容获得焦点和失去焦点的效果以尽量降低可能的方向迷失感。

即使是用户本人在移动诸如窗口这样的大型虚拟对象，他们也可能会感到不适。虽然在这种场景下调整半透明效果和对比度也会有所帮助，但应考虑保持窗口的尺寸相对较小。

使用旋转动态效果时应柔和。通过旋转相机或者旋转用户周围的大型虚拟对象来旋转虚拟世界时，尤其是当旋转速度过快或者持续时间过长时，旋转可能会扰乱用户的稳定感。相反，在快速淡出期间，应考虑使用瞬时方向变化。

避免显示持续振荡的对象。尤其应避免显示频率为 0.2 赫兹左右的振荡，因为用户对于此频率非常敏感。如果需要显示对象振荡，请尽量保持振幅较低并考虑让内容半透明。

去除不必要的动态效果。因为用户会看向想要交互的对象，在可能导致其看向别处的位置显示动态效果可能会带来困扰。仅在你需要引导用户看向重要内容时，才首选使用动态效果。

尽量避免在用户视场的边缘显示动态效果。用户对于发生在边缘视觉处的动态效果尤其敏感。边缘动态效果除了会分散用户注意力外，甚至还会引起不适，因为它会让用户感到自身或周围在移动。

考虑为用户提供静态参考系。在不会移动的区域内包含视觉移动时，用户会更容易接受。相比之下，如果看起来周围的一切对象都在移动，用户会感到不舒服。

当用户在体验视觉旋转时，避免鼓励用户移动其头部。当虚拟对象看起来围绕用户旋转时，他们通常需要看向一个固定的方向以避免感到不舒服。

需要重新放置对象时，考虑使用渐变。当对象从一个位置移到另一个位置时，用户会自然看到移动。如果此类移动并未传达对用户有用的任何信息，你可以在移动对象前将其淡出，对象出现在新位置后重新将其淡入。

七、空间布局

空间布局技术帮助你充分利用 Apple Vision Pro 的无边际画布，并以极具吸引力且舒适的方式呈现你的内容。

1. 视场

用户的视场是无需移动头部就能看到的空间。个人佩戴 Apple Vision Pro 时视场的维度因各种因素而异，例如用户配置光密封性的方式以及边缘视敏度的范围等等。

将重要内容居中放在视场内。visionOS 默认会直接在用户面前启动 App，将其放在用户的视场中。当用户需要长时间与内容交互时，你应该将内容舒适地放在其视场内。

垂直观看：

斜角观看：

避免将内容锚定到佩戴者头部。虽然通常想要 App 保留在视场内，但如果锚定的内容在用户面前保持静止，这会让用户感到卡顿、受限且不舒服，尤其是当内容遮挡了很多穿透且降低了用户周围的明显稳定性。相反，请将内容锚定在用户的空间中，让用户自由且自然地看向各处并查看不同位置的不同对象。

2. 深度

用户依赖距离、遮挡和阴影等视觉提示来感知深度和理解周围。在 Apple Vision Pro 中，系统自动使用色温、反射和阴影等视觉效果来帮助用户感知虚拟内容的深度。当用户在空间中移动虚拟对象或者更改自身相对于该对象的位置时，视觉效果会更改对象的外观深度，让体验更加逼真。

你可以在任意位置显示 3D 对象，也可以使用显示 3D 内容的空间容器组件。空间容器与窗口类似，但没有可见的框架。

提供精确传达内容深度的视觉提示。如果视觉提示缺失或者与用户的真实世界体验相冲突，用户可能会在视觉上感到不适。

使用深度传达层级结构。深度可帮助对象看起来相较于周围内容更为突出，让其更加显而易见。用户通常也会注意到深度变化：例如，当表单显示在窗口上方时，窗口会沿着 z 轴后退，从而让表单浮现出来并在视觉上更为突出。

一般而言，避免为文本添加深度。看起来悬浮在背景上方的文本不仅难以阅读，还会降低用户的速度，有时还会导致视觉不适。

确保深度可提供价值。一般而言，你可以使用深度带来清晰感和愉悦感，但无需在每个地方都使用。在设计中添加深度时，考虑对象的大小和相对重要性。深度非常适合用于从视觉上分离 App 中大型且重要的元素，例如让标签页栏或工具栏从窗口中突出显示，但可能不适合用于小型对象。

例如，使用深度让按钮的符号从其背景中突出显示可能会降低按钮的辨识度和易用性。另外检查在整个 App 中使用不同深度的频率。用户需要调整眼睛的焦点来感知每个不同深度，调整过于频繁或过快会让用户感到疲劳。

3. 缩放

visionOS 定义了两种类型的缩放，既保留了深度的外观又优化了可用性。

动态缩放帮助内容保持清晰可辨且充满交互性，而不管内容距离用户的远近。具体而言，visionOS 会在窗口远离佩戴者时自动放大窗口，在靠近时缩小窗口，从而让窗口在所有距离上看起来都大小相同。

固定缩放意味着对象无论距离用户的远近如何，都会保持相同比例。固定缩放对象会在沿着 z 轴逐渐远离观看者时看起来越来越小，这与用户现实环境中的对象类似：远处的对象比近处的对象看起来要更小。

为了支持动态缩放和深度外观，visionOS 将一个点定义为一个角度，这一点与其他平台不同：其他平台将一个点定义为一定数量的像素，该数量因 2D 显示器的分辨率不同而有所差异。

如果想要虚拟对象看起来和现实对象完全一样，考虑使用固定缩放。例如，你不妨为提供的产品维持实物大小的比例，这样产品会在用户的空间中看起来更加逼真。交互式内容需要缩放以在其逐渐靠近或远离时保持易用性，因此应谨慎应用固定缩放，请将固定缩放保留给需要它的非交互式对象。

避免显示过多窗口。窗口过多会遮挡用户的周围，让其感到压抑、受限，甚至不舒服。同时也让用户难以将焦点移至想要的内容，除非调整多个窗口的大小或位置。

借助数码旋钮来帮助用户将窗口重新放在视场中间。当用户移动或转动头部时，内容可能不再出现在用户期望的位置。如果出现这种情况，用户可以按下数码旋钮将面前的内容重新放在中间。你的 App 无需执行任何操作来支持这种行为。

在交互式组件周围保留足够的空间以便用户轻松聚焦。当用户使用眼睛聚焦交互式元素时，visionOS 会显示视觉悬停效果帮助用户确认该元素就是用户想要的元素来做出响应。在交互式组件周围保留足够的空间至关重要，这样用户可轻松、舒适地聚焦组件，同时可防止悬停效果挤压其他内容。例如，放置按钮以使其中心至少相距 60 点。

让用户通过极少量或无需身体活动来使用你的 App。除非某些身体活动对于体验不可或缺，否则请帮助用户在保持不动的情况下享受体验。

使用地面来帮助你放置大型沉浸式体验。如果沉浸式体验包括从地面向上延伸的内容，请使用平坦的水平面来放置内容。将此平面与地面对齐有助于内容与用户的周围无缝融合并提供更直观的体验。

4. 界面布局

保持窗口内容位于其边界内。在 visionOS 中，系统会在 XY 平面中窗口边界之外显示窗口控件。例如，“共享”菜单显示在窗口上方，用于调整窗口大小、移动和关闭窗口的控件显示在其下方。让 2D 或 3D 内容侵占这些区域可能导致用户难以使用系统提供的控件（尤其是窗口下方的控件）。

一般应避免将重要内容和控件放在窗口角落。内容离窗口中心越远，用户就可能越难以看到并与之交互，尤其是当窗口较大的时候。

让窗口的交互式组件易于用户聚焦。你需要在交互式组件周围留出足够空间，以便用户轻松、舒适地聚焦到它，以及防止系统提供的悬停效果遮挡其他内容。例如，放置按钮以使其中心至少相距 60 点。

如果需要显示不属于窗口内部的额外控件，则使用装饰。装饰可让你提供与窗口在视觉上保持关联但与系统提供的控件互不干扰的 App 控件。例如，窗口的工具栏和标签页栏会显示为装饰。

八、字体

除了确保文本清晰易读外，你选择的字体排印方式还可协助你阐明信息层级结构、传达重要内容并宣传你的品牌。

SF Pro 是 visionOS 中的系统字体。如果使用 NY 字体，则需要指定想要使用的字体样式。

visionOS 使用动态字体正文和标题样式的更粗版本，并且引入了特大标题 1 和特大标题 2 以实现较宽的编辑风格布局。

一般而言，首选 2D 文本。字符的视觉深度越深，就越难以阅读。虽然少量的 3D 文本可提供有趣的视觉元素来吸引用户注意，但如果要显示用户需要阅读并理解的内容，请首选包含少量或不含视觉深度的文本。

确保文本在用户缩放时看起来美观并一直清晰易读。使用让文本在原始尺寸下看起来美观的文本样式，然后测试其在不同缩放情况下的易读性。

最大化文本和文本容器背景之间的对比度。系统默认以白色显示文本，因为这种颜色往往能够与默认系统背景材质之间形成强烈对比，从而让文本更容易阅读。如果想要使用不同的文本颜色，请务必在各种环境下测试。

如果需要显示无背景文本，应考虑用粗体显示以提高易读性。在这种情况下，通常应该避免添加阴影来增加文本对比度。当前空间可能并未包括能在上面准确投影的视觉表面，并且你无法预测阴影的大小和密度是否能与用户的当前环境完美适配。

尽量让文本面向用户。如果在空间中显示与某一点关联的文本，例如标记 3D 对象的文本，则不论佩戴者或对象如何移动，通常会希望文本面向佩戴者。例如，如果显示与可见线段平行的标签，你可能想要文本围绕该线段旋转。如果显示 3D 对象的标签，你不妨让标签看起来像打印在对象上或与对象表面平行。

九、按钮

visionOS 按钮通常包括可帮助用户看到它的视觉背景，还会播放声音以在用户与之交互时提供反馈。

visionOS 定义了三种标准按钮形状，每一种都支持以下标签类型。

visionOS 按钮使用不同的视觉样式来体现以下每一种交互状态：

• 空闲
• 悬停
• 选定
• 选定切换
• 不可用

除了以上列出的五种状态，圆形按钮还可在用户看向该按钮片刻后显示工具提示。相反，包含文本的按钮不会显示工具提示，因为按钮的描述性标签表达了其功能。

visionOS 提供了多种大小的按钮，具体取决于形状和内容。

首选具有可辨背景形状和填充的按钮。当按钮被形状包围且形状使用有对比度的背景填充时，用户通常更易于看到这种按钮。工具栏、上下文菜单、提醒或装饰中的按钮例外，此类较大组件的形状和材质可保证按钮轻松可见。以下指南可帮助你确保按钮在不同环境中良好呈现：

• 按钮显示在玻璃窗口顶部时，在按钮背景中使用浅色材质。
• 按钮看起来悬浮在空间中时，为其背景使用玻璃材质。

避免创建使用白色背景填充和黑色文本或图标的自定义按钮。系统保留了这种视觉样式以用于体现选定切换状态。

一般首选圆形或胶囊形按钮。用户的视线常常会被形状中的角吸引，因此难以保持看向形状的中心。按钮形状的角越圆，用户越容易聚焦该项目。需要单独显示按钮时，首选胶囊形按钮。

在按钮周围留出足够空间，以便用户聚焦其上。为使聚焦操作舒适，请以各中心始终至少相距 60 点的方式放置按钮。如果按钮大小为 60 点或更大，请在其周围添加 4 点内边距以防止悬停效果重叠。另外，通常最好避免在垂直堆栈或水平行中显示小号或迷你按钮。

如果需要在堆栈或行中显示文本标签按钮，应选取正确形状。具体而言，首选将圆角矩形用于垂直叠放的按钮，将胶囊形用于按水平行排列的按钮。

为自定义按钮设计反馈声音。visionOS 不提供触感反馈，因此为自定义按钮的交互提供听觉反馈非常重要。

对于输入来说，还有一个和按钮类似，那就是滑块。首选水平滑块。相比于上下方向的手势，用户通常更容易执行从一侧到另一侧的手势。

十、菜单

1. 上下文菜单

考虑使用上下文菜单而非面板或检查器窗口来呈现频繁使用的功能。尽量减少 App 打开的单独视图或窗口数量可帮助用户保持空间整洁。

一般应避免上下文菜单的高度超过窗口高度。在 visionOS 中，窗口顶部和底部边缘的上方和下方包括系统提供的组件，如窗口管理控件和“共享”菜单，因此上下文菜单过高可能会遮挡这些组件。考虑要包括的项目数时，请以用户可能使用你 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 点连续曲线。标准按钮、文本栏、标题和脚注默认的圆角半径与导航栏圆角保持同心。如果需要创建自定义组件，你可以使用以下公式来帮助确保其圆角半径也与导航栏的圆角保持同心：

“半径 = 60 点 – 内边距”，其中“半径”是自定义组件的圆角半径，“内边距”是顶部内边距或底部内边距的值（如果这些值相同）。

使用大标题帮助用户在导航和滚动时始终清楚其所在位置。在位于导航堆栈顶部的视图中显示大标题，同时将标准标题居中显示在堆栈中所有其他视图的导航栏中，这种做法通常效果很好。当用户开始滚动内容时，大标题会默认转换为标准标题，并在用户滚动到顶部时变回大标题，从而提醒当前的所在位置。

1. 边栏

如果 App 的层级结构较深，考虑在标签页栏的标签页内使用边栏。在这种情况下，边栏可支持在标签页内进行二级导航。如果使用边栏，请务必防止在边栏中进行的选择操作更改当前打开的标签页。

2. 标签分栏

在 visionOS 中，标签页栏始终垂直，悬浮在相对于窗口前沿而言固定的位置。当用户看向标签页栏时，它会自动展开；若要打开特定标签页，用户可聚焦标签页并轻点。标签页栏展开后，它可能会暂时遮挡后面的内容。

为每个标签页提供符号和文本标题。标签页的符号在标签页栏中始终可见。当用户看向标签页栏时，系统也会显示标签页标题。虽然标签页栏会展开，但你需要保持标签页标题简短，以便用户可以一目了然。

十四、提醒

App 在共享空间中运行时，visionOS 会在窗口前方显示提醒，沿 z 轴稍微偏前。如果用户在未关闭提醒的情况下移动窗口，提醒会保持锚定到窗口。如果 App 在全空间中运行，系统会在佩戴者视场的正中显示提醒。

如果需要在 visionOS 提醒中显示补充视图，请创建最大高度为 154 点、圆角半径为 16 点的视图。

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

避免显示从窗口底部边缘出现的表单。为了帮助用户查看表单，首选将表单放在用户视场的中心。

呈现默认大小的表单以帮助用户保留其环境。避免显示覆盖大部分或整个窗口的表单，但考虑让用户按需调整表单的大小。

十五、窗口

visionOS App 可使用窗口或空间容器在容器中显示内容。一般而言，你可以使用窗口来呈现 2D 或 3D 内容，例如“邮件”中的收件箱或 Safari 浏览器中包含 USDZ 对象的网页。若要呈现游戏棋盘或地球仪这样的 3D 内容和对象，你通常可以使用空间容器。

用户会立即熟悉 visionOS 中的窗口，因为这些窗口与其他平台中已明确的窗口在外观和行为上都比较类似。例如，visionOS 窗口与垂直平面对齐，可以与其他 App 窗口一起显示在共享空间中，并提供可让用户移动、调整大小和关闭的系统定义控件。

1. 窗口

VisionOS 窗口使用称为玻璃的不可修改背景材质，可让光线以及现实和虚拟对象透过显示。玻璃窗口会让用户觉得你的内容与周围融为一体，同时使用镜面反射和阴影来传达窗口的缩放和位置。使用默认样式创建窗口时，你会自动获得玻璃背景。

窗口的默认大小为 1306 x 734 点。窗口首次打开时，系统会将其放在佩戴者前方约两米的位置，并看起来约有三米宽。

系统还会为标准窗口中的视图和控件添加高光和阴影，从而让视图和控件看起来有深度且更有实质感，尤其是当用户从一定角度查看窗口时。虽然你可以在标准窗口中显示 3D 内容，但如果内容延伸出窗口表面过远，系统会将其截断。若要显示更大深度的 3D 内容，请使用空间容器。

包含 3D 内容的窗口

优先使用标准窗口来呈现用户熟悉的界面和支持熟悉的任务。为让你的 App 容易上手，应显示用户惯用的界面并将更多沉浸式体验预留给所提供的有意义内容和活动。如果想要展示游戏棋盘这样的有界 3D 内容，应考虑使用空间容器。

选取空白区域尽可能少的初始窗口尺寸。太多空白区域会让窗口看起来过大，同时也会遮挡用户空间内的其他内容。

尽量使用适合窗口内容的默认形状。例如，默认 Keynote 讲演窗口很宽，因为幻灯片比较宽；默认的 Safari 浏览器窗口很长，因为大多数网页长度要比宽度更大。

尽量让用户调整 App 窗口大小。用户期望能够在自定义空间时调整窗口大小。你可以根据情况设置最小和最大尺寸值，以帮助确保在用户调整窗口大小时，窗口仍能正常使用且看起来美观。

在 App 中发现用户可能想要沉浸其中的时刻或内容。即使 App 主要使用窗口，也可能有在沉浸环境下能得到增强的功能。例如，在“照片” App 中，用户可以在展开的视图中打开全景照片，产生一种身临其境的感觉。

始终确保窗口的可视边界与其内含场景尺寸相符。如果场景超过窗口的可视尺寸，窗口控件会看起来位置不对且窗口外观可能与用户期望不一样，从而让其难以交互。

空间容器包含一个水平底面，帮助你显示用户可从任意角度查看的 3D 内容，例如地球仪。

2. 空间容器

空间容器和窗口有一些相似之处：

• 在共享空间中，系统都会确定空间容器和窗口的初始位置。
• 空间容器提供的管理控件与用户用于调整窗口位置或关闭窗口的控件相同。
• 空间容器可以使用玻璃背景。

空间容器和窗口在系统应用的缩放类型上有所区别：visionOS 会为窗口自动使用动态缩放，而为空间容器使用固定缩放。

优先使用空间容器显示丰富的 3D 内容。如果想要呈现用户熟悉的、以用户界面为中心的界面，通常最好使用窗口。

十六、手势

visionOS 定义了两类手势：非直接和直接。

非直接手势会影响当前获得焦点的对象。例如，用户聚焦某个控件后，可以用其中一根手指快速轻点拇指做出非直接轻点手势来激活或选择控件。visionOS 默认支持非直接手势，用户可通过这些手势执行熟知的标准手势。

非直接手势通常较为快速（因为用户可快速看向不同方向）和舒适（因为设备相机可在用户的手放在大腿或身侧时捕捉手部移动）。另外，非直接手势可让用户与可聚焦的任何对象交互，无论其在空间中处于什么位置，因为用户不必用手触及对象。

直接手势会影响用户轻触的对象（在 visionOS 中，用户用手指靠近虚拟对象来轻触它）。例如，用户使用系统提供的键盘的其中一种方式是轻触按键。直接手势需要对象足够靠近才能让用户触及。另外，用户必须将手（而非眼睛）移向对象，直接手势通常更适用于并非必需进行快速精确交互的情况。

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

在可能的所有位置支持轻点。用户聚焦 App 或游戏中的对象后，如果想要选择或激活对象，轻点很可能是其执行的第一个手势。即使你还支持自定义手势，但在整个体验中支持轻点可帮助用户快速适应你的 App 或游戏。

首选非直接手势。用户通常可轻松执行非直接手势，因为无需将手移到特定位置。将直接手势保留给想邀请用户操控附近虚拟对象的情况。

如果直接手势是你 App 的一项功能，确保用户使用非直接手势也能执行相同功能。你要尽量让用户可灵活地选择最适合自己的交互方法。

避免需要特定身体移动或姿势来输入。为需要用户移动的输入方式提供备选方案。

设计 visionOS 中的自定义手势

若要创建自定义手势，你需要 ARKit 来获取手部姿态和关节方向等信息。你的 App 必须在全空间中运行，且必须请求用户许可来访问其手部相关信息后，才能在 App 中提供自定义手势。

在自定义手势中优先考虑舒适性。持续测试需要自定义手势的所有交互中的人体工程学。需要用户保持手臂举起（即使只有一小会）的自定义交互可能会让身体感到劳累，连续多次重复相似的动作也可能会对用户的肌肉和关节造成压力。

定义涉及多指或双手的自定义手势前应仔细考虑。执行自定义手势对用户来说可能有挑战性，要求其同时用多指做出姿势或使用双手可能会更难。

避免创建需要用户使用特定一只手执行的自定义手势。期望用户记住自定义手势要用哪只手会增加其认知负荷，还会使你的体验对有强势惯用手或四肢缺陷的用户不够友好。

如果你决定创建自定义手势，请确保其：

• 具有包容性。手势对不同的人可能有不同含义，因此请确保自定义手势不会传达意料之外的信息。
• 舒适。优秀的自定义手势应对用户的身体来说易于执行，尤其是长时间执行。
• 独特。与你的 App 或游戏协调一致的自定义手势可能更易于用户发现和记住，同时也增添了体验的乐趣。
• 易于描述。如果你无法用简单的语言和图形描述自定义手势，可能意味着该手势对用户来说也难以学习和执行。

十七、键盘

为想要配合 App 使用实体键盘的用户做好准备。需要执行输入大量文本的任务（如创建演示文稿）时，用户通常更希望使用连接的键盘；用户通常还希望使用键盘快捷键在整个系统和 App 中导航和发起操作。另外，许多用户依赖实体键盘来使用全键盘控制模式或进行“旁白”交互。

十八、指针

在 visionOS 中，用户可以外接指针设备或键盘，并在继续使用其眼睛和手部的同时使用这两种设备。如果用户通过看向元素来聚焦其上，然后移动指针，系统会将焦点从用户看向的元素移至指针下方的元素。你的 App 无需执行任何操作来支持这种行为。

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

当用户使用所连接支持手势的指针设备（如触控板或鼠标）时，指针会在用户使用手势时隐藏，从而尽量减少视觉干扰。在这种情形下，指针一直处于隐藏状态，直至用户移动后重新出现在用户看向的位置。

官方文档参考：https://developer.apple.com/cn/design/human-interface-guidelines

苹果的Vision Pro发布之后，随之而来的讨论之一，就有如何才能在新的计算平台上做好相应设计。在本篇文章里，作者就从icon设计、UI设计、颜色和字体等四个维度，对VisionOS设计原则进行了深度解读，一起来看看吧。

今天想和大家聊聊UI方面的设计规范和原则。新的计算平台带来了新的设计原则，需要你提前做好准备。

或许短期内你不会涉及到新平台的具体设计，但设计底层逻辑都是相通的，从苹果的这些设计思想中，一样可以学以致用到你的现在项目中。

苹果这次发布会后，我也去网上搜了下，大部分人对这个产品在软件UI上的视觉印象，最直观的记忆点就是毛玻璃。

它的学名是叫类玻璃柔光材质，在设计中也叫玻璃拟态。可以预见的是，在接下来的XR中会是一个主导地位的设计趋势。

从设计理念来看，乔布斯一直追求一种极致简约的风格，这种简约除了体现在产品设计上，连店面设计上也体现出高水平的协同。其中，玻璃拟态风格贯穿了整个苹果系列，甚至统一到了线下实体店。

苹果的设计不止步与玻璃拟态，其System UI同样具备很多值得学习借鉴的优秀设计原则。

如何分析设计风格？我将从Icon设计、UI设计、颜色以及字体4个维度，由表及里的思考它的设计以及对我们后续设计的启发。

一、图标设计

在主场景和其他界面上的应用图标设计和系统图标设计，整体上能看到苹果设计体系下的高度一致性。

由于应用图标的效果看起来和其他平台有些不一样，所以Apple官方也有给出了它的设计流程。

从分解过程中能发现，基本上还是按2D的设计方法去做，只不过为了加强它的深度感，配合眼动的交互效果。通过图层分层来体现它的3D层次感，把图标分为至多3个层：一个背景层和2个前景层。

然后，把分层的图标切图放进苹果图标系统里，VisionOS就能自动对图层进行圆形裁切和增加玻璃材质。

从苹果分享出来的设计效果和设计流程拆解，我从中思考了关于VisionOS图标设计的8个最主要的设计原则，原则具备通用性和可借鉴，在其他项目中很多也是可以用上的。

这些设计原则可以帮助我们更好的在XR中进行设计，包括：

• 熟悉感
• 跟随眼动
• 一致性
• 清晰性
• 深度感
• 易读性
• 平衡性
• 模组化

下面我也逐一和你分享要如何思考和应用这些设计原则帮助我们自己的设计。

1. 熟悉感

熟悉感，这个设计原则旨在降低用户学习成本，尤其对于新设备来说，这一点尤其重要。

虽然是全新的空间计算设备，但仍然保留了很多我们熟知的设计手法和元素。

不论是对于用户来说，还是专业的设计师或开发者来说，都有一种熟悉感，便于普通用户和专业用户上手。

就像我们在做其他产品的设计改版一样，断层的变化会让用户不知所措，无端增加用户的学习成本。

很多用户习惯和认知，经过这么多年的互联网产品的推广与应用，已经被教育地相当成熟，所以在苹果这里的设计也应用了这一原则。

应用图标的延续

2. 跟随眼动

新的圆形应用图标更适合眼动 ，兼容了全新的眼动交互，交互动效上更符合人类直觉的设计。在熟知的2D设计方法上新增了3D效果，以图层的分离突出这种设计新形式。

图标在动画和角度上都会跟随用户的眼睛。虽然为了让用户对新的图标有熟悉感，但在延续性的基础上也做了一些新的变化。把图标的背板做了从矩形到圆形的变化。

圆形相较于之前的圆角矩形，更容易让用户眼神聚焦。

当用户的眼睛看向图标时，图标也会给与用户角度和分层的变化，再通过投影和高光进行空间感的强化。

这就像是你看向朋友，然后朋友也会对你回眸一笑，符合用户的功能诉求和情感诉求。

3. 一致性

在iOS13之前，当把系统图标放在一起看时，从设计专业上看会有不少问题。比如线面穿插也就算了，粗细也各不相同，在视觉上的一致性其实并不算严谨。这些问题在后续的更新中也得到了优化。

但其实就算看最新的系统，也依然会有线面组合的情况，哪怕在一个控制中心也会有这样的不一致。

是苹果不用心做视觉吗？它的策略到底是什么？我觉得其实是苹果一直在做取舍和平衡。

苹果对于一致性的理解是功能的一致性高于视觉的一致性，识别的效率性，系统级的图标永远是为了更好的服务于用户。

比如手机上计算器和相机的应用图标，映射到系统级图标时，保持了最大程度上的一致性，都应用了面型图标，虽然这与系统全局的一致性相比就弱一些。

4. 清晰性

熟悉的隐喻。当一个图标使用了一个不熟悉的隐喻，它很难被理解。图标在发展历史中，抽象的符号被反复使用，逐渐标准化，从而建立了共同的理解。

比如像下面这个例子，从左到右，图标的清晰度是越来越差的，因为图标所代表的含义越来越复杂，不容易被理解。

图标被设计最成功的情况是不仅对一群人来说很容易理解，且在不同文化，年龄和背景下都是通用的。Apple icon大多用到了非常熟悉的隐喻，它很容易被理解。在vision OS中，这种清晰性得到了继承。

5. 深度感

系统通过增加阴影和高光来体现各层之间的深度感并使用上层的 Alpha 通道打造3D感外观，增强 App 图标的视觉维度。

深度感是XR场景特有的设计，利用多图层设计出3D层次感。在vision os这里的深度感是为了强化图标带来的反馈，提升易用性。

6. 易读性

恰当地细节和对比度易于阅读。保持图标简洁，左边的图标比较复杂，反而表达的含义是不易读的，右侧提炼后的图标会有更高的易读性。

在XR中，因为有近场和远场的关系，图标中的缝隙也需要注意，缝隙太小会造成易读性降低。

图标的对比度也需要注意，使用透明度的图层后造成对比度较小，造成图标不易读。

7. 平衡性

图标视觉平衡，对齐视觉元素。以眼睛检查，用户的感受为准。苹果不允许图标中心物件太靠近底板边缘。

图标的平衡性非常重要，为了确保每个图标视觉平衡，需要在视觉上对齐元素。

在播放这个图标中，三角形虽然在数字上对齐了，但眼睛告诉我们并不平衡。三角形较宽的部分感觉比较“重”，使得它好像在向左倾斜。

就像字体设计师做精细的调整来设计字体视觉平衡一样。不能单纯的相信严谨的数字，最终要以人的感受为主。

8. 模组化

苹果把应用图标的设计做成了模组化，利用2D设计流程和底层3D模组效果，降低制作成本。一个优先的设计必须兼顾到商业，服务好整个生态是优秀设计的必要条件。

图标不仅要对用户友好，对生产端也需要友好，某种程度上生产端也是用户，他们也需要好的体验，这样整个生态系统才会是良性发展。

在制作上仍然保留了很多我们熟知的设计手法和元素，使得内容生产的成本降低，把尽可能多的效果进行组件化，比如投影，玻璃材质等这些复杂的效果用程序写到了系统层。

除了自身的内容生产成本较低，在第三方应用兼容上也非常方便易用，能尽可能地让更多生产用户入局设计。

二、UI设计

接下来我们一起来看看UI界面的设计，我截取了最有代表性的一些UI设计。

苹果官方也给出了它们的UI组件库，包括sketch和figma源文件。

分析发现它的制作流程，使用软件，甚至连尺寸大小都和2D手机上的设计保持了一致性，这进一步降低了内容制作和迁移成本，把一些复杂的效果进行剥离，在系统级上进行添加。

关于UI，也按前面的分析框架总结出了8个最主要的设计原则，包括：

• 熟悉感
• 突出内容
• 以人为中心
• 空间感
• 深度感
• 自适应
• 易读性
• 模组化

可以看到有不少是和图标设计相类似的。

1. 熟悉感

通过延续熟悉的设计方法，降低用户的学习成本。在UI元素排布上，能看到Mac和手机的布局在visionOS中得到了统一和延续。

2. 突出内容

把界面中的操作和内容分开，保证内容显示最大化。

这个设计在XR场景中是一个比较创新的设计方案，因为它的场景会比在PC或手机中的显示范围会大的多，如果把操作栏和内容都放在同一个界面中，可能会造成操作栏过大，干扰内容不说还会不方便操作。

在Safari中，导航栏与网页分开，让网页成为焦点。

3. 以人为中心

减少用户移动幅度，提升舒适性。

内容设计在布局上尽量居中，比如在Safari中，当人们想要一次看到他们所有的标签时，苹果将它们展开成一个网格。以配合人们的视野。标签按比例缩小，这样它们就不会离中心太远，而两侧的标签向内，这样更容易阅读。

玻璃材质的运用，降低了用户心理压力，提升掌控感与舒服度。为什么这么说？玻璃材质让人们对周围环境有更多的掌控力，能清楚的知道自己所处的位置，并让UI适应不同的照明条件。

考虑到用户心理，太多不透明的窗口会让人感觉狭窄，让界面感觉沉重。这个在MR场景中的设计非常关键。

4. 空间感

通过透明、光照环境和阴影效果，打造很强的空间感。比如在移动窗口时，窗口变得更加透明，很棒的小细节。

当看电影的时候，环境光照会发生变化，调光是一种简单而有力的最大化空间的方法，即使电影可能会重叠在物理房间里，调暗也能帮助人们专注于内容。

UI窗口会投射出阴影，让用户觉得界面似乎就真实的摆放在空间中，更直观自然。

3D相册设计，通过边缘模糊，制造空间感。

5. 深度感

通过对界面进行分层，利用深度创建层次结构和引导用户关注。

尽管控件很小，依然能一眼就看出它是能控制电影的。如果把控件放在电影屏幕上，它们会显得太大，会干扰内容。

操控元素可以保持小，但仍然比远处的大物件具有视觉优先权。

元素之间轻微的深度利于引导用户的注意力，当一个模态出现时，窗口会稍微向后推以引起用户的注意。

换句话说，用户需要聚焦的窗口距离并没有发生改变。这样在观感上更为舒适，无需在窗口变换是反复聚焦。

6. 自适应

UI能适配不同内容大小，自由伸缩。没有固定的界面尺寸，按内容大小进行最合适的默认尺寸设计。

这里的默认尺寸设计需要结合人因的研究，具体多大才是合适的，可能和手机和PC端是不同的。

一般来说，在MR场景中中心视野最好，重要的内容优先放中间。用户的视野在场景中也比较宽，横向的布局可能会更好一些。

7. 易读性

合适的对比度易于阅读，这里的一些对比度策略是按mac和手机OS上的类似的WCAG标准来做的。更多的建议可以去苹果的设计规范中查看。

8. 模组化

苹果也把UI这里的设计进行了模组化，按2D设计流程+系统级玻璃材质+动态光影变化+投影。

同图标一样，也是把简单的设计流程留给了生成者，把其他各种复杂的效果做到了系统层，然后可以自动添加这些效果。

这样做保持了系统的风格一致性和可控的设计品质。相对于安卓端的百花齐放，apple这边是其独有的优势。

三、字体设计

字体设计，由于在玻璃材质可能会导致字体的可读性变差，所以苹果也做了一些规范限定。在字体上也继续沿用了苹果字体，只不过在把普通应用迁移到vision OS上时，需要加粗一号。

比如在手机上是Regular字体，那么在vision OS中就用加粗一号用Medium。

在XR中，对字体加粗的目的就在于可以给到用户更高的易读性。

因为在XR的环境中，毛玻璃需要兼容各种不同亮度环境，为了保证其可读性，苹果还专门对文字的显示做了动态变化。

在不同环境下，文字的亮度会动态变化，通过实时调节文字的亮度，确保文字清晰易读。

开了动态效果：

没有使用：

在苹果vision os中，官方给到的文字色彩是白色，然后通过不同亮度来体现层次变化。如果你要对文字自定义颜色，尽量别用到文字上，而是通过改变文字的容器来实现颜色变化，不然易读性会有问题。

四、颜色设计

苹果也给出了系统级推荐的色彩体系，我也对这些色彩进行了分析，大部分的色彩饱和度都比较高，当然有一些颜色也进行了校准，饱和度略低一些。

颜色的丰富性是为了保证在各个场景下，都有合适的颜色可以选用，因为是系统级的颜色，需要保证足够的通用性。

五、设计启发

苹果对设计进行了重新思考，但其实好的设计原则是具备通用性的，在新平台中提到的这些原则，是不是都是我们熟知的一些设计原则？

在设计的时候需要多去思考设计背后的原因，比如想想苹果为什么在这里会选择毛玻璃效果？那是因为在MR场景下，毛玻璃解决了3D关键问题：

• 让用户时刻对自己的位置有掌控感
• 能适配各种真实复杂光照环境
• 半透明让用户避免封闭感

优秀的设计，其背后一定是它设计的理由的，优秀的设计也一定是有意义的。

想清楚其原因，从中就能发现规律，并指导自己后续的设计，避免犯错。

本篇文章作者分享电商开放后台的六大模块，并对其界面交互进行详细分析，能给产品岗的伙伴提供一些设计参考，希望能对你有所帮助。

商家运营后台，又叫开放平台，面向入驻平台的B端商家。B端商家的身份有很多，可以是没有技术团队的商家（有平台诉求），有系统的商家（找外包开发），有自己研发团队的商家。

开放平台的作用有很多，比如解决商家需后台的诉求，提高运营效率，数据获取等等。

一、目的

• 此文章目的是分享，若有建议欢迎评论区讨论。求同存异
• 因本人之前工作是分期电商领域，前后端都涉及。将自己的收获和新想法输出成PRD
• 后端电商系统涉及很多模块，此文章仅小部分功能点

二、框架/相关模块

• 登录。登录、登录风控、账户管理、角色管理
• 统计后台。查看数据
• 店铺信息创建。后端维护商家信息、开户信息等；前端页面配置
• 商品管理。创建、上架、下架
• 订单管理。导入发货信息、修改
• 用户管理

三、交互详细内容

1. 登录页面

简单版本：账户+密码（入驻平台，管理员会提供初始化密码）；点击忘记密码，进入到找回密码页面。

1）店铺未登录，进入店铺登录页面（设计出PC版图）

2）店铺X小时内未操作，自动退出登录，跳转到登录页面（X小时可配置）

3）登录风控

• 账户和密码当天同1个小时（可配置）失败X次，输入图形验证码，图形验证码Xmin内有效，点击验证码可刷新
• 账户、密码、验证码当天同1个小时（可配置）失败X次，此账户被临时冻结，次日凌晨自动解冻（研发可做个解冻账户功能）

备注：根据场景，还有其他风控逻辑（因IP变动而账户不安全）。

4）找回密码页：输入账户、手机号、验证码、新登录密码、确认新登录密码

账户：

• 手机号：必填字段，为空则红色异常提示请输入手机号，校验11位数
• 验证码：校验最新的验证码和手机号关联一致性
• 新登录密码：看设置规则（可否特殊符号、长度）
• 确认新登录密码：确认密码需和新密码一样

5）登录校验：验证账户、密码、验证码的准确性，保存登录信息：比如账户、密码、登录时间、登录IP

2. 统计后台

备注：

• 设计出图，每个数据模块颜色
• 通用数据+定制化数据（形式可以是表格形式，支持查询一段时间、实时刷新；可以研发开发、可以大数据同学支持）

电商通用数据：（以观察实时数据，根据场景来定义）。

订单维度：

• 待付款：订单状态为待付款的订单数量
• 待发货：订单状态为待发货的订单数量
• 已发货：订单状态为已发货的订单数量
• 已完成：订单状态为已完成的订单数量
• 退款审核中：退款单状态为待审核的订单数量

UV维度：

• 今日浏览量&累计浏览量：进入店铺页面且停留该页面5秒的UV数（根据定义来埋点）
• 今日新会员&累计会员数：开通会员成功的用户数
• 今日订单量&累计订单量：支付成功的订单数（可包含申请退货退款的）
• 今日销售额&累计销售额：支付成功的订单金额（可包含申请退货退款的）
• 今日退款金额&累计退款金额：退款成功的订单金额

备注：是否包含退货退款取决业务

3. 店铺信息维护

主要分为4部分，该页面必填、非必填字段取决于业务。字段可能用于前端展示、平台和主体结算等。

1）店铺信息

店铺名称、店铺介绍、店铺地址、店铺类型、主营行业、营业执照、店铺LOGO。

2）结算信息

开户行支行、银行账户。

3）联系人信息

联系人名称、联系人电话、联系人住址、联系人身份证。

4）公司信息

公司名称、公司地址、法人姓名、法人电话、法人身份证。

4. 商品管理

简单流程（工作中画流程图会清晰）：运营线下对接&线上对接供应商＞创建/编辑商品＞审核商品＞确认无误后，立即上架/定时上架商品。

我工作时，有运营角色-商品运营同学A和B，A负责对接供应商（线下对接，需我方上下架商品）创建商品，因人工总会出错，B同学的一部分职责就是审核商品（确认商品信息、策略无误后，上架）。

审核流程，可以有各种方法。最简单就是群里同步，我已审核或者商品什么信息写错，需修改。后续可以做成预警监控和流程化，比如A同学创建了商品a，预警通知B去审核；到下班前统计还有哪些商品没审核，可以统计报警出，B同学下班前或者第二天上班看着统计表可陆续审核。

1）商品列表

① 支持创建商品、查询、导出、批量上架、批量下降、批量删除

② 部分列表字段：

• spu码&sku码：创建商品，生成sku码；根据规则去生成spu码（商品只尺寸不同-SMLXL属于不同sku码，同spu码）
• 商品状态：创建成功/上架/下架（根据业务来定义状态枚举值）
• 审核状态：待审核/审核通过/审核失败
• 操作：编辑、审核、上架、下架、删除

2）添加商品

随着业务复杂，字段增/隐藏、功能优化；若想体验竞品的商品管理后台，自己可去淘宝、京东等体验开店。

该页面主要分为6个部分：

1）商品基本信息

商品名称、一级二级类目（复杂点可以三级类目）。

2）商品规格信息

• 规格：颜色、尺寸、鞋码、自定义，支持多选（以颜色、尺寸为例）
• 颜色：支持新增、删除，上传对应图片
• 尺寸：支持新增、删除

根据所写颜色、尺寸，排列组合生成对应规格。颜色：白、粉、红，尺寸：ML，生成6个SKU商品，维护其成本价、销售价等。

3）商品图文信息

上传主图、轮播图、视频、详情图等。

4）支付信息

• 付款方式：立即付款、货到付款、预售模式
• 库存计数：创单减库存、支付减库存

5）物流信息

物流信息维护：

• 运费承担方：卖家承担和买家承担
• 不可配送地区：省市区街道四级或者省市区三级联动。关联前端，若用户寄货地址符合不可配送地区，则无法下单。
• 包邮地区：省市区街道四级或者省市区三级联动。若用户寄货地址符合包邮地区，邮费为0
• 寄件方式：邮费支持配置

6）售后服务：运营后台支持勾选服务，关联相关功能

• 支持开票：提供开票入口，关联开票系统
• 支持维修：提供维修入口，进入第三方页面
• 7天无理由退货：提供退货入口，关联退货规则

7）上架方式

• 立即上架。审核通过后可立即上架对客
• 定时上架。配置上架时间，审核通过后满足时间上架
• 下架

5. 用户管理

此页面查询用户的购买记录、因异常情况支持发送短信通知、查看开通会员的详情、因某些场景用户恶意刷单/退货/薅羊毛将用户拉黑（设置拉黑规则）、用户申请注销会员等等。

6. 订单管理

订单管理列表分以下6个部分：（此图针对场景1个订单1个sku，现实中会出现1个订单多个SKU商品）

1）基本信息

• 订单号
• 店铺名称
• 用户id
• 用户姓名
• 订单状态

待支付、待发货（支付成功无物流信息）、已发货（导入物流信息）、订单完成（终态：用户前端确认收货/订单状态流转）、订单取消。

创单时间：

2）下单商品信息

商品名称：

• 一级类目
• 二级类目
• SPU
• SKU

参数规格：

• 成本价
• 销售价

3）下单金额信息

• 订单金额：商品总金额+运费-优惠金额
• 数量：下单数量
• 商品总：商品销售金额*下单数量
• 优惠金额：优惠叠加后金额
• 运费：配置展示（包邮或计数）

优惠后商品金额/个：

4）物流信息

• 收件人名字
• 收件人地址
• 收件人手机号
• 物流单号：运营单笔更新或批量导入
• 物流公司：运营单笔更新或批量导入
• 物流状态：可接口查询或者运营去快递100查询

5）支付信息

• 支付方式：支付宝、微信、银行卡、额度
• 分期支付单：若选择额度
• 分期期数
• 支付优惠金额：比如渠道优惠金额（使用信用卡，优惠0.0几元）
• 支付金额：订单金额-支付优惠金额=实付金额
• 支付状态：支付中、支付成功、支付失败
• 支付成功时间
• 支付失败原因

6）售后信息

• 流程：先退货＞退款
• 是否退货：枚举值是和否。（操作退货，审核用户申请退货信息；或上传退货凭证，运营操作退货）
• 退货进度：审核中、退货成功、退货失败
• 是否退款：枚举值是和否
• 退款进度：审核中、退款处理中、退款成功、退款失败

以上为电商开放平台6大模块，基本能满足业务使用。具体字段、字段功能还要在具体业务中定义。

​Apple Vision Pro的出现为建立新的视觉语言带来了可能性，那么在设计中，我们要如何才能适应新的视觉语言，并搭建适合空间体验设计的交互界面？本篇文章里，作者聚焦于空间用户界面，阐述了几点设计规范，一起来看一下。

引言

在上篇文章《Apple Vision Pro设计规范之空间设计原则篇》中，我们了解到了Vision Pro的核心设计原则。本篇我们将介绍Vision Pro中如何设计UI界面，并探索设计规范中的UI组件、材质、字体等UI元素设计指导。

Vision Pro建立了一种新的视觉语言，即可以保持与现有平台的一致性，同时也增加了一些元素来适应沉浸式的空间体验设计。

本篇文章将聚焦空间用户界面来介绍Vision Pro以下三点设计规范：

• 用户界面的基础设计原则（UI foundations)）：包含UI基础设计的设计原理、可读性和可用性等。
• 布局设计（Layout）：如何创建符合人体工学和易于用户定位的布局。
• 从屏幕到空间中去（From screen to spatial）：如何将2D屏上应用组件带入空间设计平台中。

一、UI foundations

Vision Pro中大部分UI系统组件都是我们已经熟知的，但有些也是全新的，现在让我们深入了解Vision Pro用户界面的基础控件。

1. App icons

在App图标的设计上，Vision Pro进一步将图标在空间中变得立体和逼真，当用户看向它们时，图标的层级会扩展，系统通过添加高光和阴影来增强这种空间效果，以加强图层间的微妙纵深。

1）使用多个图层

Vision Pro上真正三维的图标最多有三层，一个背景层和最多两个前景层。每个图层都是1024*1024像素的矩形图像，两个前景层包含透明通道。可以将你的背景层设计为正方形图像，然后所有层再裁剪为圆形蒙版，最后系统会为图标自动添加深度，高光和阴影。

2）保持图标图形居中

尝试保持图形居中，如果它们太靠近边缘，在展开时可能会偏离中心，同时避免使用大范围的半透明像素。

2. Materials

1）应用应该易于在任何空间中放置、使用和阅读

用户可能会在任何地方使用设备，比如白天亮光下的房间，或夜间的小空间中，所以应用需要适应不同的照明条件或新环境，它们应该易于放置在你周围任何的空间中（Apps should be easy to place），易于在任何距离使用（Apps should be easy to use），并且易于在任何照明条件下阅读（Apps should be easy to view），这就是为什么我们设计了一种新的视觉语言玻璃材质，这种效果就像物理世界的一部分。

另外，镜面高光和阴影增强了它在空间中的大小和位置，而玻璃材质也可以作为画布来承载UI内容，让界面感觉更轻盈，并增加一种物理质感。这种轻质感材料也让人们感觉到窗口后可能有什么。比如其它应用或人。

2）避免使用不透明窗口

假设你要设计一个这样的卡片，你想添加一个更亮的按钮。把它放在玻璃材质上是非常易读的。但如果你想增加对比度，可以在后面使用一个较暗的单元格背景，尽量不要把较亮的元素重叠在一起，这样会影响可读性并降低对比度。

3. Typography

1）增加字重以提升阅读性

字体在我们的PointBase Unix系统经过调整，确保在任何距离都可以清晰地可见，我们还修改了一些字体的字重来提高易读性。例如在iOS上正文使用的regular字体，需在Vision Pro上使用Medium。对于标题Vision Pro使用Bold而不是Semibold，以保持字体清晰。

即使窗口可以扩大到非常大的尺寸，较小或细字重的字体仍然难以阅读，因此考虑增加重量（Use Bolder font weights）或使用系统字体从而为优化可读性。

4. Vibrancy

这是保持整个系统可读性的最重要细节之一。Vibrancy使显示前景内容变亮，并通过将光线和颜色发挥作用。在Vision Pro上，由于背景可以不断变化，Vibrancy也会实时更新，以确保您的文本始终清晰地显示。Vibrancy在玻璃材料中发挥作用，增强易读性，使系统材料感觉更丰富和复杂。

可以利用Vibrancy表示文本、符号的层次。Vision Pro提出三种模式：一级（Primary）、二级（Secondary）、三级（Tertiary）。正文使用一级，二描述文本、备注和字幕使用二级。

5. Colors

颜色上，我们通常使用白色的文字或符号以保证它们清晰可见。如果你需要使用其他颜色，请在背景层或整个按钮中使用它，以便人们更容易注意看到它。尽可能使用系统颜色而不是自定义颜色，因为它们已经被校准为易读性，并能自适应玻璃材质上的色调和对比度。

二、LayOut

在布局设计上，我们要考虑基于人因的最舒适布局方法，在元素大小上保证给予用户最易于操作的点击尺寸，以及在响应时基于眼球追踪来提供视觉反馈。

1. Ergonomics

在Vision Pro上，用户主要用眼睛和双手互动，所以对于设计考虑符合人因的，舒适和安全的体验比以往任何时候都更加重要，你需要确保内容的排布是有意图的，不会导致眼睛或颈部疲劳。例如，对大多数人来说，相比抬头低头，左右转更容易而且更远，所以要把你的用户界面在人们的视野中，并注意不要放的太高或太低。

如果你的应用需要一个更大的画布承载界面，可以尝试一个更宽的长宽比。例如在“Freeform”中，画布可以尽量水平延伸。

优先将最重要的信息展示在你的应用中（Center important information），这样用户可以舒适地查看你的内容。

2. Sizing

1）保证所有交互元素至少60pt的点击热区

每个人的眼睛都有细微的差异，设计的元素应该容易被捕捉到。因此建议交互元素的点击热区必须至少是60pt,这样它们可以很容易地被用户选择。你的图标可以在视觉上更小，比如44pt，只要你在它周围添加足够的间距，这样它就满足了60pt目标区域的最小值。如果你需要在容器中放置几个按钮，请使用标准系统按钮，按钮之间至少有16个pt间距。

举一个展开控件的例子，您可以使用一个迷你按钮，它在部分标题这样的区域中有28pt，即使这个按钮看起来很小，但它周围仍有60pt的空间，所以很好选中。

同样，使用大的和超大按钮需要减少周围的间距，记住给所有交互元素至少60pt的点击热区（Give interactive elements 60 points of space）。

3. Focus feedback

1）提供焦点反馈效果

当用户看向组件时，它们会自动显示微妙的视觉高亮或悬停效果，这种悬停效果让用户理解界面的哪些部分是可交互的。当一个元素不可点击时，它不再提供焦点反馈，这让用户将注意力集中在他们专注于预期的元素，并可以通过敲击手指来选择它。

当你创建布局时，考虑到悬停效果是很重要的。例如，如果您正在创建一个列表或菜单，您需要考虑每个元素之间保留一点间距，以避免悬停效果的重叠，建议使用4pt。

2）保证卡片的独立交互区

在卡片的设计上，我们允许用户关注它时显示悬停效果，每个卡片是一个独立的交互元素，你需要定义一个自定义区域，所以它可以在用户看到它时变亮，这有助于用户理解整个区域是一个可以选择的元素。

3）确保嵌套元素彼此同心

确保嵌套元素有相对的圆角半径和间距，使它们彼此同心，你可以使用嵌套元素的简单公式，来调整圆角大小：Inner corner radius +Padding=Outer corner radius

为了保证平滑圆角，一定要把他们设置成连续的圆角。整个系统中每一个从窗口到角落的元素的关系都是彼此同心的，所以请记住保持嵌套元素彼此同心（keep nested elements concentric），因为这将帮助它们感觉是彼此属于一起的。

三、From screen to spatial

最后，我们将介绍如何将现有设备组件应用到空间计算平台中。下文将介绍核心组件结构Window、Tab bar、Side bar，以及一种新的组件形态Ornaments和模态窗口的使用方法。

我们之前提到过，用户用眼睛、手和声音与设备进行交互，他们主要通过从远处查看元素和敲击手指来实现这一点。除此之外，用户也可以通过触摸直接选择元素。当然，用户还可以连接键盘或触控板，从而与系统进行各种各样的输入。

我们所有的系统组件都已经提供适当的反馈机制，并支持各种输入方式，所以当你开发你的应用时，使用系统组件（Use system Components），它们可以帮助您快速创建界面。

1. Window、Tab bar、Side bar

让我们从iOS应用的核心结构Window开始，你的应用需要一个窗口，并为所有元素提供画布，下面有一个可以在空间中流畅易懂的小横条，允许用户在他们的空间中流畅地移动你的应用程序。

在iphone窗口底部，水平排列着一个标签栏，即主导航。只需轻轻一按，人们就可以快速访问应用程序的主要部分。而在Vision Pro中，这里的标签栏垂直浮动在窗口左侧的固定位置，设计成易于访问的，让用户可以快速找到应用导航标签位置，又不会影响应用的主要内容。

为了让标签栏看起来更为轻盈，在入口数量上避免超过六个。当看向标签时，用户可以快速选择一个项目。如果用户看的时间更久一点，它会自动扩展，显示每个部分的详细标签，当人们移开视线时，它会自动关闭，让人们专注于内容。

如果你需要提供子导航，比如在相册中，在这个例子中，侧边栏位于标签栏旁边的窗口中，这让用户清楚地知道他们现在在标签栏中的位置。

2. Ornaments

Ornaments是Vision Pro上一个全新的组件。在相册app，在底部中心有一个浮动的配件元素，可以切换年月和日，因为它不受屏幕的限制，ornaments可以放在在窗口前面的底部作为装饰品，用户可以更方便的进行与内容有关的快速操作。

因为ornaments通常是多个按钮集合的独立玻璃容器，当用户看着它们时，仍然会有悬停效果。

下面是音乐应用中ornaments的另一个案例，用户可以通过ornaments控制切换下一首歌曲，同时能够控制他们的音乐进度。

Ornaments一般被放置在窗口底部，所以它们与底部边缘重叠了20pt的位置，这使得ornaments感觉就像它们与主窗口集成在一起，但不会阻止太多的内容。当你滚动页面时，ornaments的窗口背景会从玻璃中提取内容的颜色，让其看起来更加和谐。

Ornaments可以选择显示或隐藏，所以只建议用于可聚焦的高频操作内容上，例如，看照片或看电影，只需轻轻一点，我们就可以让人们快速访问重要的控件，而不会分散他们对主要体验的注意力。

3. Menus Popovers Sheets

在Vision Pro上，菜单和弹窗可以在窗口外拓展展开，默认情况下它们居中显示，确保用户总是能看到内容。使用白色背景上的黑色图标来显示按钮被选中，这有助于向用户清晰的反馈哪个按钮被调起了弹框。在按钮的设计上，避免使用白色背景，除非是选中状态。

4. Sheets

当多个窗口以sheets进行展示时，新的模态窗口出现在父窗口的中心,与父窗口保持相同的z位置，父窗口向后推并变暗，这有助于用户集中注意力,并防止用户与父视图进行交互，直到sheets被关闭。

如果您需要呈现另一个sheets，次要模态窗口可以出现在最前面，并将所有内容向后推,如下图所示。

参考链接 空间设计界面：https://developer.apple.com/videos/play/wwdc2023/10076/

单选框和多选框是生活中较为常见的交互元素，那么在交互上，单选框和多选框都有哪些区别？在B端设计中，单选框和多选框又有哪些具体应用？本篇文章里，作者就针对单选框和多选框如何选择、单选框和多选框的交互区别等问题进行了总结，一起来看。

前言

在B端设计中，单选框和多选框是常见的交互元素，用于用户在界面上进行选择。它们的区别在于用户能够选择的选项数量。本文将详细介绍单选框和多选框在交互上的区别，并探讨它们在B端设计中的应用。

一、是什么

1. 单选框

是一种常见的交互元素，用于用户在一组互斥的选项中选择一个选项。用户只能选择其中的一个选项，点击一个选项后，其他选项会自动取消选择。

2. 多选框

允许用户在一组非互斥的选项中选择多个选项，用户可以同时选择多个选项，每个选项之间是独立的。 总结来说，单选框适用于用户只能作出一个选择的情况，用户只能选择其中一个选项。而多选框适用于用户可以作出多个选择的情况，用户可以同时选择多个选项。通过单选框和多选框，可以提供给用户不同的选择方式，以满足不同的需求。

二、有什么不同

1. 交互上的不同

1）选择方式

用户只能选择其中的一个选项。点击一个选项后，其他选项会自动取消选择。用户可以选择多个选项。点击一个选项后，该选项会保持选中状态，用户可以继续选择其他选项。

业务场景示例：

在一个订单管理系统中，有一个下拉菜单用于选择订单状态。订单状态是互斥的，一个订单只能处于一个状态，例如：待处理、已处理、已取消等。这种情况下，可以使用单选框来表示订单状态，用户只能选择其中一个状态。

2）互斥性

单选框的选项是互斥的，用户一次只能选择一个选项。选择一个选项会自动取消其他选项的选择。多选框的选项是非互斥的，用户可以同时选择多个选项。每个选项之间是独立的，选择一个选项不会影响其他选项。

业务场景示例：

在一个权限管理系统中，有一个用户角色的选择框。一个用户可以具备多个角色，例如：管理员、编辑员、审核员等。这种情况下，可以使用多选框来表示用户角色，用户可以同时选择多个角色。

3）默认选择

单选框通常需要有一个默认选项，以便用户快速选择。默认选项可以根据用户的偏好或常见选择来设置。多选框默认情况下，多选框不需要有选项被选中。用户需要自行选择感兴趣的选项。

业务场景示例：

在一个商品筛选界面中，有一个多选框用于选择商品的类别。默认情况下，所有的类别都是未选中状态，用户需要根据自己的需求选择感兴趣的类别。

4）布局方式

单选框只需要展示一个选项，通常可以采用更紧凑的布局方式，节省空间。可以垂直排列或水平排列，根据界面的整体布局来决定。多选框需要显示多个选项，通常需要更宽的空间来展示。可以采用垂直排列或水平排列，根据界面的需求和美观性来决定。

业务场景示例：

在一个调查问卷系统中，有一个多选题的选项。为了节省空间，可以采用水平排列的方式来显示选项，让用户一目了然地选择感兴趣的选项。

5）交互反馈

单选框和多选框在用户进行选择时，都需要提供明确的视觉反馈，以确保用户知道他们的选择已被接受。可多选框以使用选中状态的颜色、勾选符号或其他视觉效果来表示选项的选择状态。

业务场景示例：

在一个表单提交界面中，单选框和多选框选项被选择后，可以使用不同的颜色或勾选符号来标识选项的选择状态，让用户清楚地知道他们的选择已被接受。

6）数据处理

单选框和多选框的选项选择通常需要进行数据处理和存储。单选框只需要记录用户选择的选项，可以将选项的值或标识符存储在相应的数据字段中。多选框需要记录用户选择的多个选项。可以将选项的值或标识符存储在一个数组或以逗号分隔的字符串中，以便后续的数据处理和使用。

业务场景示例：

在一个购物车系统中，用户可以选择多个商品进行结算。多选框可以用来表示用户选择的商品，系统可以将选中的商品的标识符存储在一个数组中，以便后续生成订单。

2. 应用场景的不同

1）互斥选择

当用户在一组选项中只能选择一个选项时，可以使用单选框。例如，在一个报名表单中，要求用户选择自己的性别，只能选择男或女，这时可以使用单选框。

2）单一选择

当用户需要在一组选项中选择一个默认选项时，可以使用单选框。例如，在一个设置界面中，用户可以选择系统语言，只能选择一种语言作为默认语言，这时可以使用单选框。

3）状态切换

当用户需要在不同状态之间进行切换时，可以使用单选框。例如，在一个任务管理系统中，任务可以有不同的状态，如待处理、进行中、已完成，用户可以通过单选框来切换任务的状态。

多选框的使用场景：

① 多项选择

当用户可以在一组选项中选择多个选项时，可以使用多选框。例如，在一个筛选界面中，用户可以选择多个品牌来筛选商品，这时可以使用多选框。

② 集合选择

当用户需要从一个较大的选项集合中选择多个选项时，可以使用多选框。例如，在一个权限管理系统中，用户可以选择多个权限来赋予给某个角色，这时可以使用多选框。

③ 可选项

当用户可以选择是否使用某个功能或选项时，可以使用多选框。例如，在一个个人设置界面中，用户可以选择是否接收推送通知，这时可以使用多选框。

3. 功能的不同

1）互斥选择

当用户在一组选项中只能选择一个选项时，可以使用单选框。例如，在一个订单处理系统中，用户需要选择订单的处理状态，可以使用单选框来确保每个订单只能有一个状态。

2）单一选择

当用户需要在一组选项中选择一个默认选项时，可以使用单选框。例如，在一个设置界面中，用户可以选择默认语言或默认时区，单选框可以用来显示当前的默认选项。

3）状态切换

当用户需要在不同状态之间进行切换时，可以使用单选框。例如，在一个任务管理系统中，任务可以有不同的状态，如待处理、进行中、已完成，用户可以通过单选框来切换任务的状态。

多选框：多选框是一种用户可以选择多个选项的控件。

在B端设计中，多选框通常用于以下功能：

① 多项选择

当用户可以在一组选项中选择多个选项时，可以使用多选框。例如，在一个筛选界面中，用户可以选择多个标签来筛选数据，多选框可以用来实现多项选择。

② 集合选择

当用户需要从一个较大的选项集合中选择多个选项时，可以使用多选框。例如，在一个权限管理系统中，用户可以选择多个权限来赋予给某个角色，多选框可以用来选择多个权限。

③ 可选项

当用户可以选择是否使用某个功能或选项时，可以使用多选框。例如，在一个个人设置界面中，用户可以选择是否接收推送通知，多选框可以用来表示可选项的选择状态。

三、如何选择评判标准

1. 用户体验

评判标准之一是用户体验。设计应该使得单选框和多选框在使用过程中简洁、直观、易于操作。例如，单选框和多选框的样式应该与整体界面风格一致，大小合适，选项之间的间距适当，文字清晰易读等。

2. 功能需求

评判标准之二是满足功能需求。根据具体的业务需求，选择合适的控件。如果只能选择一个选项，应该使用单选框；如果可以选择多个选项，应该使用多选框。同时，还需要考虑是否需要默认选中项、是否需要全选或全不选的功能等。

3. 可访问性

评判标准之三是可访问性。设计应该考虑到不同用户的需求，如色盲用户或视力受损用户。合理选择颜色、对比度和字体大小，提供辅助文本或提示，以确保所有用户都能够正确理解和使用单选框和多选框。

4. 界面一致性

评判标准之四是界面一致性。在整个系统或产品中，单选框和多选框的样式和交互行为应该保持一致，这样可以减少用户的认知负担，提高使用效率。

5. 易于管理和维护

评判标准之五是易于管理和维护。设计应该考虑到后台管理的需求，如添加、修改或删除选项的方便性。对于多选框，还需要考虑如何处理大量选项的展示和选择。

总结

正确使用和巧妙设计单选框和多选框，可以提高用户体验和操作效率。在B端设计中，根据具体的应用场景选择合适的交互方式，确保用户能够方便地进行选择操作。

都是交互反馈和提示组件，大家可能会疑惑：文字气泡 Tooltips 和气泡卡片 Popover 的区别是什么，两者之间的应用场景如何？本文对两者的差异进行总结，希望对你有所帮助。

同样都是交互反馈及提示组件，你可能会疑惑：文字气泡 Tooltips 和气泡卡片 Popover 有什么区别？分别有哪些特定的使用场景？

本文就来详细分析下这两个组件的区别和联系，帮助你做好应用。

一、气泡卡片  Popover

气泡卡片（Popover）是当用户点击 / 鼠标移入元素时，就会弹出气泡式的卡片浮层。当对于某个元素有更多的解释性描述和相关操作时，这些内容可以收纳到元素的气泡卡片中，根据用户的操作行为进行展现。

其用法特征是：

1. 用户可以在浮层卡片上进行相关操作，也即气泡卡片可以并需要承载更复杂的内容和交互功能。

2. 卡片中可以包括的内容有：文字说明，图片内容，操作按钮，相关链接等等。

3. 组件功能侧重于：承载信息和操作。即收纳并在需要的时候展示与该元素内容相关的信息和操作。这些信息的特征通常是：

• 并不紧急但比较重要的解释内容；
• 有一部分的用户需要随时阅读的内容；
• 在点击关键操作后给用户确认“是否继续进行”的提示（Ant Design 也单独把这个功能拿出来做成做了一个组件：Popconfirm 气泡确认框，如下图）。

二、文字气泡  Tooltips

文字气泡（Tooltips）是相对简单的文字提示气泡框。用户使用鼠标移入元素后显示提示，移出后提示消失。

其用法特征是：

1. 文字气泡通常不承载复杂的信息和操作，仅提供一段文案解释，也即用户在文字气泡中不能做除阅读外的其它操作。

2. 该组件功能侧重于：解释说明。即对局部内容或元素进行文字性的解释说明。通常来说该气泡是对其载体本身的解释，比如：

• 一个特殊的功能按钮；
• 专有名词、难懂词汇；
• 看不出具体目的地的操作链接
• 特殊的 icon 等。

三、使用建议

1. 关于使用场景

• 气泡卡片 Popover：常用于承载信息和操作。承载的内容和形式更为多样。
• 文字气泡 Tooltips：常用于解释说明。仅承载简单的文案信息。

2. 关于组件样式

有同学看过 Ant Design 组件库提供的组件样例，会觉得气泡卡片 Popover 是白色背景，而文字气泡 Tooltips 是半透明黑色背景。

其实这两个组件的背景颜色上的差异并不是重点，因为这两个组件都可以使用其他颜色（比如带有透明度的品牌色）做背景底色。颜色并不具备唯一标准。AntD 就提供了多种颜色的文字气泡样式：

3. 关于理解规范

也许你已经发现，即使我们将一个组件的使用规范和应用场景解释得再全面，在使用时也总会出现一些特殊的业务需求和应用场景无法严格按照规范来执行。

面对复杂多样的业务需求，我们更应该学会：在理解业务需求的基础上，合理调整组件的使用方式和样式。

组件的规范对设计师来说并不应该是限制或约束，而是一种能够帮助我们快速实现产品设计一致性，保证基础体验的快速方式。

在交互设计中，快捷键和键盘热键是提高用户效率和用户体验的重要手段之一。本文结合实际案例，将介绍PC端键盘热键与页面交互，希望对你有所启发。

一、什么是热键

在交互设计中，快捷键和键盘热键是提高用户效率和提升用户体验的重要手段之一。在PC端应用和网页设计中，合理运用键盘热键可以帮助用户快速完成操作，提高工作效率和使用体验。本文将介绍PC端键盘热键与页面交互，并通过实际案例进行说明。

二、原理

PC端键盘热键是指通过键盘上的组合键完成特定功能的操作方式。在计算机应用和网页设计中，通常将一些常用的操作和功能与特定的键盘组合键相绑定，用户在使用时通过按下相应的键盘组合键即可快速完成操作。

键盘热键的优点是快速、简单、高效，可以大大提高用户的工作效率和使用体验。

三、注意点

1. 易记性

热键应该是容易记忆和识别的，避免使用过于复杂或混乱的组合键，以便用户快速掌握和使用。

2. 易用性

热键应该是易于使用的，避免使用过于繁琐或不符合用户习惯的组合键，以免增加用户的操作负担和学习成本。

3. 易扩展性

热键应该具有较好的扩展性和兼容性，以便后续新增功能或更改热键时能够顺利进行。 二、PC端键盘热键与页面交互的设计方法 PC端键盘热键的设计与页面交互密切相关，需要根据用户需求和使用场景进行设计。以下是几种常见的PC端键盘热键与页面交互的设计方法：

4. 全局热键

全局热键是指在整个操作系统中都可以使用的热键，通常用于实现一些系统级别的功能，例如截屏、切换窗口等。在页面设计中，可以通过全局热键来实现一些全局功能的操作，例如返回首页、打开搜索框等。这种设计方法可以提高用户的使用效率和体验，但也需要注意与系统默认热键的冲突和兼容性问题。

5. 局部热键

局部热键是指在特定的应用程序或网页中可以使用的热键，通常用于实现特定的操作和功能。在页面设计中，可以通过局部热键来实现一些常用的操作，例如刷新页面、打开弹窗等。这种设计方法可以提高用户的操作效率和便捷性，但也需要注意与页面元素的交互和兼容性问题。

6. 自定义热键

自定义热键是指用户可以根据自己的需求和习惯自定义的热键，通常用于实现个性化的操作和功能。在页面设计中，可以通过支持用户自定义热键的方式来提升用户的使用体验和满意度，例如允许用户自定义常用操作的热键或快捷方式。这种设计方法可以提高用户的个性化需求和使用体验，但也需要注意与页面布局和交互的兼容性问题。

不与浏览器冲突，如果与浏览器冲突的场景下，浏览器优先级较高。

四、常见热键

常见的热键有3个：回车，tab，ctrl。接下里进行逐一的分析。

1. tab

在表单中移动焦点。

按下tab键时，焦点会从当前输入框或选项快速切换到下一个输入框或选项，让用户可以使用键盘来方便地输入和选择数据。

进入弹窗中的输入框：

如果弹窗中有输入框，按下tab键可以快速进入输入框，让用户可以直接在弹窗中输入数据。

切换不同区域的焦点：

在复杂的页面结构中，tab键位可以用于切换不同区域的焦点，让用户可以快速导航到不同的功能区域。

触发自动完成：

如果某个输入框中有自动完成功能，按下tab键可以触发自动完成并列出相应的建议选项，让用户可以快速选择。

触发下拉菜单：

如果某个操作按钮上有下拉菜单，按下tab键可以快速打开下拉菜单并选择相应的选项。

2. 回车

提交表单：

当用户在表单中输入完数据后，按下回车键可以快速提交表单，让用户可以方便地完成操作。

确认输入：

在某些情况下，用户需要输入一些关键信息，例如密码、验证码等。在输入完成后，按下回车键可以快速确认输入，让用户可以直接进入下一步操作。

打开弹窗：

在某些场景下，用户需要打开弹窗来进行进一步的操作。在选择相应的操作后，按下回车键可以快速打开弹窗，让用户可以方便地进行操作。

触发搜索：

在搜索框中输入完关键字后，按下回车键可以快速触发搜索操作，让用户可以方便地查找所需内容。

触发自动完成：

在某些输入框中，用户可以通过输入关键字来触发自动完成功能。在选择相应的选项后，按下回车键可以快速确认选择，让用户可以方便地完成操作。

3. ctrl

复制和粘贴：

在输入框中选中文本后，按下Ctrl+C可以将文本复制到剪贴板中；按下Ctrl+V可以将剪贴板中的文本粘贴到输入框中。

撤销和重做：

在编辑内容时，按下Ctrl+Z可以撤销上一步操作；按下Ctrl+Y可以重做上一步操作。

选择多个选项：

在列表中，按下Ctrl键可以选择多个非相邻的选项，方便批量操作。

打开新标签页：

在浏览器中，按下Ctrl+T可以打开一个新的标签页，方便用户同时浏览多个网页。

切换标签页：

在浏览器中，按下Ctrl+Tab可以快速切换到下一个标签页；按下Ctrl+Shift+Tab可以快速切换到上一个标签页。

放大和缩小页面：

在浏览器中，按下Ctrl+加号可以放大页面；按下Ctrl+减号可以缩小页面。

总结

PC端键盘热键是提高用户工作效率和使用体验的重要手段之一，设计PC端键盘热键时需要考虑用户需求、易用性和扩展性等方面。在页面交互设计中，可以通过全局热键、局部热键和自定义热键等方式来设计PC端键盘热键，以提高用户的操作效率和使用体验。在设计PC端键盘热键时，需要遵循易用性、易记性和易扩展性的原则，同时也需要考虑兼容性和易用性等问题。

产品经理需要考虑业务功能的合理性，而交互设计师更多地是关注产品的易用性功能。本文盘点了一些常见的易用性功能，与大家共同探讨，希望对你有所帮助。

如果我们从结构上去分解一款产品如APP或者网站，可以发现它是由各种各样的功能组成的。产品经理在需求输出阶段，会根据解市场需求、竞争对手情况、公司战略等，来确定产品的定位、特点以及需要的功能。

以“人人都是产品经理”的“文章详情页”为例，我们就能发现各种大大小小的功能点：

不难发现，有些功能与业务强相关，有些功能则是为了更好的用户体验而设计的功能，比如“文章导航”，“回到页面顶部”。所以我们可以简单的把它们分为两大类：

当然，本文目的并不是去教大家对功能进行归类，有些功能的界限也不那么明确，只是希望大家有个简单的识别。因为我们知道通常产品经理会更侧重「业务功能」，而为了能给用户带来更好的产品，就需要交互设计师注意考虑增加一些「易用性功能」了。

因此，本文对一些常见的易用性功能进行了梳理。希望对大家有帮助。

一、回到顶部

不管是APP还是PC，通常在长的详情页，我们会增加“回到顶部”功能，使得用户能方便快捷的回到页面初始位置。

二、菜单导航

菜单导航可以使用户能快速了解页面或产品系统结构，并一键达到对应模块或功能位置。

三、锚点

与菜单导航相似，但通常用于快速到达同一个页面的某一个具体位置。

四、分页

产品需求通常会忽略分页功能，而大的数据量由于性能原因通常需要各式的分页功能。分页功能通常应用在PC网页上。

五、搜索/筛选

当数据达到一定量级时，就要考虑用户是否有查找的场景，从而看是否需要增加搜索或者筛选的功能。这样可以使得用户快速获取到自己想要的信息。

六、历史记录

通常与搜索功能结合在一起，如果用户有需要历史输入的场景，就要考虑增加该功能点。

七、排序

通常应用于数据列表，需要考虑用户是否有根据特定顺序排列的需求。

八、徽标/数量统计提示

常见的红点，以及数量提示能有效的引导用户操作。

九、反馈

像前面说到的，有的功能界限并不明确，反馈功能如是。我们有时候需要用户反馈问题来进一步改善产品，优化用户体验。

十、操作指南

通常用户硬件产品使用介绍，能够使用户更加了解产品特性从而更方便的操作使用产品。

十一、草稿箱

有些需要大量编辑操作，且作业时间较长，提交后不可撤回的业务，我们就需要考虑草稿功能，方便用户随时补充信息，无需从头开始。如文章发布。

十二、回收站

有些内容比较重要时，但是又支持删除的话，我们就需要考虑该功能，给用户“反悔”的机会。

最后

如前面所言，作为交互设计师需要在业务功能的基础上，多考虑是否增加这些易用性功能。这些功能点也并不是一定需要，比如“历史记录”，短信或者设置的搜索通常就没有“历史记录”的功能，我们都要根据使用场景出发。

还有哪些易用性功能？欢迎大家补充。