探索未来工作新方式！钉钉 Vision Pro 版设计实践

一、似曾相识却又耳目一新

Apple Vision Pro 是一台革命性的空间计算设备，它将数字内容无缝融入真实世界，我们希望在这款颠覆性设备上，探索未来的同时打造一个让用户感到似曾相识的界面，旨在降低用户对新设备的学习成本，使他们能够毫不费力地快速上手。

然而，当涉及到界面的细节处理和交互设计时，我们追求创新，力图让用户体验到前所未有的新鲜感，确保产品既具备亲和力又体现尖端科技，完美迎合果粉用户的高标准需求。

1. 框架布局的延续与重塑

用户的注意力在空间中容易分散，为此，我们根据空间感知与适应性原则，对框架布局进行了调整，将一切删繁就简。延续现有桌面端框架的同时，将产品和现实场景进行了完美的融合，同时思考如何将 Vision OS 全新的手势交互、视觉语言和空间扩展发挥出来，带给用户焕然一新的产品体验。

2. 视觉材质的统一与焕新

在颜色的使用上，我们尽可能避免使用纯色填充，不透明的纯色在空间里会产生一种沉重和压迫感。相反，我们采用了大量毛玻璃效果，使用 Glass material 作为 UI 画布，这种材料的独特之处在于它能够动态地反应环境光线，自动调节对比度和色彩平衡，使界面感觉更轻盈更通透。

二、不同场景塑造差异化体验

钉钉的涉及到办公场景的方方面面，用户也十分多元，本次我们核心打造了三个场景：聊天、会议、直播。针对不同场景，我们在体验上做了差异化设计。

1. 无限空间里的沟通体验

当我们第一次体验到 Vision Pro 后，被它极为精彩的设计所震撼，超高的完成度让我意识到——那个久违的“iPhone 时刻”似乎又来了！

全新的空间设计、独特的氛围沉浸程度，以及革新般眼和手的自然交互形式，让我们看到了在 Vision Pro 里钉钉的更多可能性，尤其是在沟通场景下，几乎现有的钉钉 IM 体验方式都将被完全推倒重塑。

①极具科幻感的空间输入体验与展示效果

Vision Pro 的空间设计确实带给我们耳目一新的感受，当身体成为鼠标与键盘后，所处空间变的可交互时，我们也在思考如何在这种沉浸感中，可以让沟通更好用更高效。我们保留最核心的消息类型，打磨最重要的收发文字、语音、表情和图片等功能，让你获得最纯粹的聊天体验。

②多窗口让多任务高效并行

不同于桌面端、移动端的受限于屏幕尺寸，Vision Pro 在无限空间里可以呈现全新多窗口的交互形式，新增了多窗口模式，可实现多任务高效同步进行。

2. 如临现场般沉浸式会议体验

①高效聚焦

基于 Vision Pro 的空间设计理念，我们彻底重构了会议体验。在界面布局上，我们采用用户所熟悉的宫格视图，使参会成员能够以一比一的实际比例出现在你的视野中。

在 Vision Pro 中，鉴于用户面对更广阔的视野可能导致注意力分散，我们在 Z 轴上对发言者的视图进行了细微的突出处理，通过利用三维空间的层次感，有效地集中了用户的视线，增强了会议的聚焦度。

②沉浸感

为了增强会议的沉浸感，我们的设计允许用户隐去会议界面的所有元素，专注于视频画面的展示，用户的注意力完全集中于交流本身，同时背后透出的实景环境，极大地增强了视频通话的面对面临场交流感，这也是传统终端应用很难做到的体验。

③真实感

会中最令人惊喜的是“虚拟人”的出现，用户可以通过 Vision Pro 的 Persona 功能扫描并采集面容的深度信息，并生成一个逼真的 3D 数字化身，在进行通话时可以显示对方的 3D 立体形象，并且实时反映对方的面部和手部运动，如近在眼前交流一般。

④实时互动性

通过实时互动标注功能，参会成员可以在共享屏幕上即时进行绘图、书写或添加标注。所有这些操作均伴随着即时的视觉反馈和无缝的同步，为团队成员提供了沉浸式的协作体验，从而显著提升了团队的共创能力和决策效率。

3. 极具氛围感的直播观看体验

极致简洁的直播观看界面，氛围互动功能增强，在提供深度沉浸的观看体验的同时，提升用户参与感。

三、空间特性在情感化上的充分运用

Apple Vision Pro 空间画布与视野，让应用在用户的世界中超越现实空间的界限，我们也因此推出了全新的 Spatial sticker 超级表情，来充分运用无限空间特性，在无限空间下传递情感化氛围，让用户体验极具沉浸感和趣味性的沟通。

无论在 IM 聊天、会议、直播中都可以轻松调用发送，活灵活现的表情让彼此感知最真实的情绪，激活沟通互动氛围。

Spatial sticker 功能现以同步登陆钉钉移动端，可限时体验（注：移动端名为超级表情）

重点方法：

如何进行 1. 框架布局的延续与重塑

1. 确定目标和需求：在进行框架布局的延续与重塑之前，首先要明确你的目标和需求是什么。你是想改进现有的框架布局，还是要完全重塑一个新的框架布局？

2. 进行现有框架布局的评估：如果你想改进现有的框架布局，那么你需要评估现有的布局，并确定其中的问题和不足之处。考虑与目标和需求不符的区域，以及需要添加或删除的内容。

3. 设计新的框架布局：根据目标和需求，设计一个新的框架布局。考虑内容的组织结构，页面的导航方式，以及整体的视觉效果。你可以使用草图或线框图来帮助你设计布局。

4. 确定重塑的方式：根据设计的新布局，确定如何进行框架布局的重塑。这可能涉及到改变页面的结构，重新排布内容，或者添加新的元素。考虑到现有的技术和资源，确定可以实现的重塑方式。

5. 实施重塑：根据确定的重塑方式，实施框架布局的重塑。这可能涉及到修改现有的代码，添加新的代码，或者使用布局工具来实现重塑。确保在实施过程中进行测试和调整，以确保布局的效果和功能。

6. 评估和优化：完成框架布局的重塑后，进行评估和优化。考虑用户反馈和数据分析结果，确定布局的效果和问题。做出必要的调整和优化，以提高布局的效果和用户体验。

总结：框架布局的延续与重塑需要明确目标和需求，评估现有布局，设计新的布局，确定重塑方式，实施重塑，评估和优化。通过这个过程，可以实现一个更好的框架布局。

如何进行 视觉材质的统一与焕新

要进行视觉材质的统一与焕新，可以参考以下步骤：

1. 定义统一的视觉风格：确定一个统一的视觉风格作为参考，包括颜色、图标、字体等方面的要求。这样可以确保整体的视觉效果一致。

2. 更新色彩方案：审查现有的色彩方案，是否符合统一的视觉风格要求。如果不符合，可以通过重新选择颜色或修改现有颜色的亮度、饱和度等进行调整。

3. 统一字体与排版：选择一种或几种适合的字体，确保在各种设备和平台上显示一致。同时，规范文本的排版方式，比如行距、字距等，以达到统一的视觉效果。

4. 重新设计图标与图像：审查现有的图标和图像，是否符合统一的视觉风格要求。如果不符合，可以重新设计或修改现有的图标和图像，使其与整体风格一致。

5. 更新样式表与模板：根据统一的视觉风格要求，更新网站或应用程序的样式表和模板，包括布局、按钮、表单等元素的设计。确保整体的视觉效果一致。

6. 进行用户测试：在进行视觉材质统一与焕新之后，进行用户测试，收集用户反馈和意见。根据用户的反馈，进行必要的调整和优化，以进一步提升用户体验。

总的来说，视觉材质的统一与焕新需要考虑整体的一致性与用户体验，通过定义统一的视觉风格、更新色彩方案、统一字体与排版、重新设计图标与图像、更新样式表与模板等方法，可以实现统一与焕新的目标。

参考资料：

1.https://www.uisdc.com/ui-design-5