标题: 小红点在UI设计中的引导作用：消除恐惧与促进用户转化的探讨摘要:本文通过研究小红点在UI设计中的应用，探讨了小红点在引导用户行为方面的作用。首先讨论了小红点的起源和定义，然后分析了小红点在消除恐惧和促进用户转化方面的具体应用。最后，提出一些建议，帮助UI设计师更好地利用小红点的潜力，提高用户体验和产品价值。一、...

标题: 小红点在UI设计中的引导作用：消除恐惧与促进用户转化的探讨

摘要:

本文通过研究小红点在UI设计中的应用，探讨了小红点在引导用户行为方面的作用。首先讨论了小红点的起源和定义，然后分析了小红点在消除恐惧和促进用户转化方面的具体应用。最后，提出一些建议，帮助UI设计师更好地利用小红点的潜力，提高用户体验和产品价值。

一、小红点的起源和定义

1.1 小红点的历史起源

1.2 对小红点的定义和分类

二、小红点在消除恐惧方面的应用

2.1 恐惧与不确定性

2.2 小红点的心理效应

2.3 小红点在减轻用户恐惧方面的作用

2.4 用小红点建立信任和可靠性

三、小红点在促进用户转化方面的应用

3.1 引导用户行为

3.2 小红点与用户动机

3.3 针对不同类型用户的小红点策略

3.4 提高用户参与度和转化率的案例分析

四、优化小红点设计的建议

4.1 减少虚假警报和滥用小红点

4.2 小红点的颜色和形状选择

4.3 个性化和可定制化的小红点设置

结论:

通过对小红点在UI设计中的引导作用进行研究，本文得出以下结论。首先，小红点能够消除用户的不确定性和恐惧，提高产品的可信度和可靠性。其次，小红点是促进用户在产品上转化的有效工具，能够引导用户行为并强化用户动机。最后，优化小红点设计可以增加用户参与度和转化率，但需要避免虚假警报和滥用小红点的情况发生。

关键词: 小红点、UI设计、恐惧、用户转化、引导作用

虽然在使用组件库的工作流程中，UI设计师可能不需要每个页面都出图，但是UI设计师的工作任务和价值并没有因此减少。以下是B端UI设计师在这种工作流程中的重要工作任务和价值：1. 组件设计与定制化：UI设计师在使用组件库的过程中，可以对组件进行进一步的设计和定制化。根据具体产品的需求和风格，UI设计师可以对组件的样式、布局...

虽然在使用组件库的工作流程中，UI设计师可能不需要每个页面都出图，但是UI设计师的工作任务和价值并没有因此减少。以下是B端UI设计师在这种工作流程中的重要工作任务和价值：

1. 组件设计与定制化：UI设计师在使用组件库的过程中，可以对组件进行进一步的设计和定制化。根据具体产品的需求和风格，UI设计师可以对组件的样式、布局、交互等进行调整和优化，以确保最终呈现出符合产品定位和用户体验的效果。

2. 页面框架搭建：UI设计师在与产品和开发团队沟通的过程中，负责梳理产品的信息结构，制定页面的设计框架和布局。通过对功能模块和内容的合理排列和组合，UI设计师能够提供更好的用户导航和信息呈现方式，提高用户的使用效率和满意度。

3. 视觉元素设计：虽然UI设计师可能不需要每个页面都出图，但仍需要负责制定和设计视觉元素的规范和风格。例如，颜色、字体、图标等的选用和搭配，UI设计师需要确保这些元素的统一性和协调性，以及与产品品牌形象的一致性。

4. 设计系统的建立与维护：作为B端UI设计师，你可以扮演设计系统专家的角色，负责建立并维护设计系统。一个良好的设计系统可以帮助团队提高效率，保持设计的一致性，并且支持多人协作。

5. 用户体验设计：与产品经理和开发人员紧密合作，UI设计师需要关注用户需求，理解用户行为模式，并将这些因素融入到界面设计中。通过合理的交互设计和用户导航，UI设计师能够提升用户体验，提高产品的用户满意度和市场竞争力。

总的来说，虽然UI设计师在使用组件库的工作流程中的工作方式可能有所不同，但其核心价值和任务并没有改变。UI设计师仍然扮演着关键的角色，负责制定和优化产品的界面设计，确保界面的美观、功能的实用性和用户体验的流畅性。通过与产品和开发团队的紧密合作，UI设计师能够在B端产品中发挥重要的作用。

一、引言UI设计命名规范在B端产品中的重要性不容忽视。规范的命名方式可以提高UI设计与开发人员之间的沟通效率，减少因为命名混乱而带来的问题，提高项目的可维护性和可拓展性。本文旨在给大家提供一份UI设计命名规范，希望能够帮助大家在工作中更好地管理图标命名。二、命名规范概述1. 命名语义化命名应该具备明确的语义，能够准确表...

一、引言

UI设计命名规范在B端产品中的重要性不容忽视。规范的命名方式可以提高UI设计与开发人员之间的沟通效率，减少因为命名混乱而带来的问题，提高项目的可维护性和可拓展性。本文旨在给大家提供一份UI设计命名规范，希望能够帮助大家在工作中更好地管理图标命名。

二、命名规范概述

1. 命名语义化

命名应该具备明确的语义，能够准确表达图标的含义和用途。避免使用无意义的名称，如“icon1”、“image2”等，而应根据实际情况给出图标的具体描述，如“user_avatar”、“home_button”等。

2. 使用小写字母和下划线

命名应使用小写字母，并以下划线分隔单词。这种命名方式更加可读和易于理解，方便开发人员查找和使用。例如："user_avatar"。

3. 采用英文单词或常用缩写

命名应尽量使用英文单词或常用缩写，避免使用拼音或中文命名。这样可以使命名更加统一和规范。例如："home_button"。

4. 分类命名

根据图标的功能和用途进行分类命名，便于管理和查找。可以按照不同的模块或功能将图标分组，并在命名中加上对应的分类标识。例如："user_avatar"、"product_add"等。

5. 使用有意义的前缀

对于多个图标属于同一功能或类型的情况，可以使用有意义的前缀来表示其共同特征。例如：对于不同尺寸的用户头像图标，可以使用"avatar_small"、"avatar_medium"、"avatar_large"等。

6. 避免过长命名

命名应简洁明了，避免过长的命名。过长的命名不利于阅读和理解，并且容易出现错误。建议尽量控制在三到五个单词之间。

三、实施方法及注意事项

1. 全员培训

将UI设计命名规范纳入团队的工作流程中，并进行全员培训和沟通，确保每位成员都能够了解和遵守规范。

2. 设计文件统一管理

设计文件中的图层和组件应根据规范进行命名，方便开发人员的调用和使用。同时，设计文件的组织结构也应按照规范进行分类和命名。

3. 持续改进

根据实际工作中的需求和反馈，不断改进和优化UI设计命名规范，提高工作效率和沟通效果。

四、总结

良好的UI设计命名规范对于B端产品的开发和维护具有重要意义。准确、语义化的命名方式可以提高团队之间的协作效率，减少沟通误差，提高项目的可维护性和拓展性。因此，我们需要将命名规范化纳入到工作流程中，并进行全员培训和持续改进。希望本文提供的UI设计命名规范能够对大家的工作有所帮助。

标题：品牌色在 UI 设计中对用户体验的损害摘要：本文探讨了在 APP UI 设计和网页中使用品牌色在按钮和关键功能按钮上的影响。尽管这种设计看似一种无害的品牌推广，但实际上可能会对用户体验造成损害。本文通过查阅相关研究和专业文章，分析了品牌色对文本标签识别、按钮状态辨认和按钮点击率的影响。研究结果表明，由于不同品牌在...

标题：品牌色在 UI 设计中对用户体验的损害

摘要：

本文探讨了在 APP UI 设计和网页中使用品牌色在按钮和关键功能按钮上的影响。尽管这种设计看似一种无害的品牌推广，但实际上可能会对用户体验造成损害。本文通过查阅相关研究和专业文章，分析了品牌色对文本标签识别、按钮状态辨认和按钮点击率的影响。研究结果表明，由于不同品牌在 UI 设计用色上的差别，过度使用品牌色可能导致用户体验下降。

引言：

APP 和网页设计中的按钮和关键功能按钮是用户与产品进行交互的重要组成部分。为了提高用户的识别能力和操作便利性，很多设计师会选择使用品牌色来装饰这些按钮。然而，并非所有的品牌色都适合进行按钮设计，而且过度使用品牌色可能会给用户带来困惑和不便。因此，本文旨在通过研究和分析评估品牌色在 UI 设计中对用户体验的损害。

1. 文本标签识别的困难

品牌色在按钮上的使用可能导致文本标签无法清晰地被用户识别，从而降低了用户的操作准确性和效率。研究发现，与传统的黑色或白色背景相比，使用品牌色作为按钮背景会使文本标签的对比度降低，进而影响用户在界面上定位和识别按钮的能力。

2. 按钮状态辨认的挑战

品牌色在按钮状态变化时的辨认可能会受到消失效应的干扰。当按钮的激活状态和非激活状态过于接近时，用户可能无法准确地判断按钮的当前状态。这种情况在使用品牌色时尤为突出，因为不同品牌色之间可能存在明暗、明度和饱和度的差异，进而使按钮状态的辨认变得模糊。

3. 按钮点击率的下降

使用品牌色作为按钮背景还可能降低按钮的点击率。研究表明，颜色对用户行为产生的影响是复杂且有差异的。用户在面对品牌色对比度较低、难以辨识按钮状态时，可能会对按钮点击感到困惑或不信任，从而对其进行回避。

结论：

通过对品牌色在 UI 设计中对用户体验的影响进行研究，我们发现过度使用品牌色可能会对文本标签识别、按钮状态辨认和按钮点击率造成负面影响。因此，在进行 UI 设计时，设计师应慎重考虑品牌色的使用，并选择适合的颜色来提高用户体验。

参考文献：

[1] Norman D. A. The Design of Everyday Things. Basic Books, 2013.

[2] Vasilchenko E., Smirnova M., Verkhlyutova Y. Impact of colors on marketing. Procedia-Social and Behavioral Sciences, 2015, 213: 19-23.

[3] De Lange R., Schouten B., Voerman L. Foreground-background color combinations for small-area displays. Displays, 2008, 29(4): 369-376.

标题：社交网络对独生子女的陪伴需求与亲密互动的作用摘要：本文将探讨社交网络对独生子女的陪伴需求以及亲密互动的作用。通过调查和研究可靠的来源，我们发现独生子女一代作为手 Q 的主力用户，虽然享有物质条件的优越，但在成长中缺乏陪伴，并且渴望获得更长期的陪伴关系。社交网络提供了一个平台，使他们能够与远在天涯的人成为好友，但却...

标题：社交网络对独生子女的陪伴需求与亲密互动的作用

摘要：本文将探讨社交网络对独生子女的陪伴需求以及亲密互动的作用。通过调查和研究可靠的来源，我们发现独生子女一代作为手 Q 的主力用户，虽然享有物质条件的优越，但在成长中缺乏陪伴，并且渴望获得更长期的陪伴关系。社交网络提供了一个平台，使他们能够与远在天涯的人成为好友，但却常常忽视身边的好友。因此，在社交网络的背后，我们需要关注独生子女对亲密互动的需求。

导言：

随着社交网络的普及，我们与朋友、家人、同事之间的联系已不再受时空限制。然而，我们却很容易忽视身边的好友，将时间和注意力都分散在各种互联网热搜话题上。这尤其体现在以独生子女为主力用户的手 Q 上，他们在物质条件优越的同时，却在成长过程中缺失了陪伴。在这种背景下，社交网络对于独生子女所带来的陪伴需求和亲密互动的作用值得研究和讨论。

一、独生子女的陪伴需求

独生子女一代在成长过程中往往缺乏亲密的家庭环境和兄弟姐妹的陪伴。虽然他们可以通过社交网络与远在天涯的人成为好友，但这种虚拟的陪伴常常难以满足他们对于更长期、更实质性的陪伴的需求。因此，他们对于陪伴的需求更加强烈，希望能够建立稳定、亲密的关系。

二、社交网络对陪伴需求的满足程度

社交网络为独生子女提供了一个平台，使他们能够与不同地区、不同背景的人成为好友。通过社交网络，他们可以寻找到志同道合的朋友，分享彼此的经历和感受。社交网络的实时性和便利性使得他们可以随时随地与好友保持联系，从而弥补了现实生活中陪伴的不足。

然而，由于社交网络的广泛使用和互联网热搜话题的吸引力，独生子女往往容易忽视身边的好友。他们可能过度依赖社交网络，无法与现实生活中的人建立更深入、更亲密的关系。这种情况下，虚拟的陪伴并没有真正满足他们对于长期、实质性陪伴的需求。

三、亲密互动在社交网络中的作用

亲密互动是建立稳定、亲密关系的重要因素之一。在社交网络中，独生子女可以通过私信、视频通话等方式进行亲密互动，分享彼此的心情和日常生活。这种亲密互动有助于建立起持久的友谊关系，使独生子女感受到更真实、更持久的陪伴。

然而，在社交网络中进行亲密互动也存在一些问题。由于社交网络的特性，人们常常只呈现自己生活的美好面，隐藏不愉快和困扰。这可能导致独生子女对于亲密关系的期望过高，无法真正理解和应对现实生活中的挫折和困难。

结论：

社交网络在一定程度上满足了独生子女对于陪伴的需求，通过提供一个与全球各地人交流的平台。然而，我们应该意识到虚拟的陪伴并不能完全替代现实生活中的亲密关系。在社交网络的背后，我们需要更加关注独生子女对于长期、实质性陪伴的需求，并倡导建立真实、亲密的关系。同时，我们也需要教育独生子女理解和应对现实生活中的问题和困境，使他们能够更好地与身边的人建立亲密互动关系。

参考文献：

1. 张晓华（2018）。社交网络对独生子女心理成长的影响研究[J]。社会科学视野，(10)：138-141。

2. Zhou, Y. (2016). The effect of social networking sites to facilitate relationship maintenance and intimacy among young adults in China. Frontiers Media SA.

3. 叶琳（2019）。社交网络对独生子女陪伴需求满足程度的研究[D]。北京大学硕士学位论文。

4. 李青（2017）。现代网络技术对独生子女陪伴需求的影响分析[J]。中国宁夏教育学院学报，(5)：84-86。

作为设计师，在设计一款产品的过程中你是否会站在用户的角度关注到不同的细节？本文作者从五个部分分析了微交互的好处，希望能帮助到你的工作。

一、什么是微交互？

微交互就像是你和朋友打招呼时，微笑、眨眼、点头这些小动作。它们很简单，但可以让交流更自然更愉快，让你感到对方友好而且有反应。

在设计中，微交互就是一些小按钮、小提示或小动画，它们虽小，但可以让用户的操作更流畅更顺手，让用户感到产品或服务更加友好和人性化。所以，设计中不要小看微交互，小小的交互可以带来大大的好处！

1. 设计微交互时的考虑因素

微交互是用户在界面上与系统交互时发生的小动作，例如点击按钮、拖动滑块等。它们能够给予用户反馈，传达系统的状态或者帮助用户避免错误。因此在设计微交互时，需要考虑以下四个方面：

1. 触发器：微交互是由用户触发还是由系统状态变化触发的，例如点击按钮或者系统自动更新。
2. 规则：一旦微交互被触发，需要遵循什么规则进行响应，例如打开一个页面或者显示一个错误提示。
3. 响应：微交互通过视觉或听觉反馈来传达信息，例如页面的变化或声音提示。
4. 循环和模式：当条件发生变化时，微交互应该如何响应，例如再次触发或者进入另一个模式。

微交互涉及多种组件，但并非所有组件都被视为微交互的一部分。微交互是指那些在用户界面中针对单个操作或事件而设计的小型交互式元素。它们具有特定的触发器，一旦被触发，会有相应的规则和响应。

然而，屏幕上始终存在的静态元素通常不被视为微交互，因为它们缺乏特定的触发器。同样，多步骤操作也不符合微交互的条件，因为微交互强调简洁和即时的反馈。

因此，微交互着重于处理独立的小交互，而不是复杂的多步骤过程。

二、使用微交互的好处

微交互可以传达系统状态，促进复杂任务的理解和完成。在Instagram上，用户可以通过双击照片来查看其操作的结果：帖子上会出现一颗跳动的心，点赞数会发生变化，并且心形按钮会变满，表明操作已完成。

微交互不仅限于应用程序或网站，它还可以应用在其他设备和系统上。

举例来说，当HomePod和Siri等待用户的命令时，它们使用微交互来传达待机模式。一旦用户说出“嘿 Siri”，HomePod会展示平滑的模糊动画，并通过声音反馈提示用户它正在倾听。通过这种视觉和听觉反馈，用户能够知道设备处于待命状态，并且准备好接受指令。

微交互在这里的作用就是通过简单而愉悦的动画和声音告诉用户“我在这里，我在倾听你的话”，让用户感觉与设备之间的交互更加自然和无缝。

1. 注意：不要过度使用它

微交互不好会对用户体验造成负面影响，降低用户满意度，丧失用户忠诚度，甚至引发安全问题。因此，在设计产品或服务时，务必重视微交互的质量，确保它们简单、直观、有效，以提供优秀的用户体验。

微交互的问题也可能导致用户不愿意继续使用产品或服务，因为他们觉得交互过于复杂或不直观。一旦用户遇到这种情况，他们很可能会寻找替代品，转而选择竞争对手的产品，从而丧失了忠诚用户。

三、何时使用它们？

微交互只是小小的交互元素，但它们在用户体验中的作用却是不可小觑的。正确利用微交互的力量，可以为用户提供更好的体验，提高产品或服务的竞争力，并赢得用户的青睐。

当前系统状态对于用户来说是至关重要的，因为它让他们了解网站或应用程序上正在发生的情况。如果用户对当前状态一无所知，很可能会感到愤怒并选择关闭网站或应用程序。

有效的微交互应该能够及时响应用户的输入，并提供即时的反馈。通过直接操作屏幕内容，可以吸引观众并促进学习过程。举例来说，Pinterest的设计允许用户操纵媒体，通过简单的拖放元素，根据需要移动和排序它们。这种直观的交互方式让用户感到更加亲近和参与。

微交互的设计应该注重在内容的基础上进行，使得用户可以更加专注地与内容互动，而不会因为繁琐的操作或过度花哨的界面而分散注意力。因此，微交互的力量在于为用户提供一个无缝、轻松的交互过程，以增强内容的吸引力和传达效果，这一点爱彼迎就诠释了。

四、如何设计微交互？

制作微交互对于设计师来说是令人欣喜的，因为它提供了尝试新设计解决方案和给用户带来惊喜的机会。

然而，在实现这一目标时，设计师需要记住以下几点：

• 设身处地为用户着想：要深入了解用户如何使用您的应用程序，通过各种手段了解他们的需求和行为习惯。
• 创建功能动画：动画不仅美观，还能增强用户体验，帮助用户更好地理解界面和操作。
• 提供乐趣和娱乐：用户体验是吸引用户持续使用应用程序的关键。如果用户享受使用应用程序并感到愉悦，他们会更愿意回来使用。
• 避免过度烦扰：过多的动画或干扰会适得其反，可能让用户感到厌烦，并导致用户流失。
• 使用人性化的语言：使用有趣和亲切的文案，可以让用户忘记应用程序中的不足，并增强用户与应用程序的互动。

总之，微交互的设计要考虑用户体验和用户需求，借助动画和有趣的文案，创造愉悦的交互体验，从而提高应用程序的吸引力和用户留存率。

五、最后我想说

在设计中，始终将可用性置于美观之上，这意味着用户友好性和易用性比纯粹的视觉吸引力更为重要。

因此，需要谨慎使用微交互，并进行测试和迭代，以确保其在实际使用中的有效性。

通过理解用户需求和行为，结合精心设计的微交互，可以提供更流畅、愉悦且有意义的用户体验，从而增强产品或应用的吸引力和成功度。

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

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

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

一、优化思路

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

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

二、需求和目标分析

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

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

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

为了达成这个目标，我从用户以下 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关键问题：

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

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

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