3D 应用启动器设计指南3D app launcher design guidance

置于 Windows Mixed Reality 沉浸式 (VR) 耳机时,请输入 Windows Mixed Reality home。When you put on a Windows Mixed Reality immersive (VR) headset, you enter the Windows Mixed Reality home. 本主页在山上和水周围的 cliff 上进行可视化,但你可以 选择其他环境,甚至创建自己 的) 。The home is visualized as a house on a cliff surrounded by mountains and water, but you can choose other environments and even create your own). 在家里的空间内,用户可以自由地按所需的方式排列和组织3D 对象和应用。Within the home's space, a user is free to arrange and organize the 3D objects and apps that they care about any way they want. 3d 应用启动器 是用户混合现实房子中的 "物理" 对象,他们可以选择启动应用。A 3D app launcher is a “physical” object in the user’s mixed reality house that they can select to launch an app.

示例: Floaty 鸟3D 应用启动器Example: Floaty Bird 3D app launcher
Floaty 鸟3D 应用启动器示例 (虚构应用)Floaty Bird 3D app launcher example (fictional app)

3D 应用程序启动器创建过程3D app launcher creation process

创建三维应用启动器有三个步骤:There are 3 steps to creating a 3D app launcher:

  1. 本文 (设计和 concepting) Designing and concepting (this article)
  2. 建模和导出Modeling and exporting
  3. 将其集成到应用程序中:Integrating it into your application:

设计概念Design concepts

太棒了Fantastic yet familiar

应用启动器所在的 Windows Mixed Reality 环境是部分熟悉的部分精巧/科幻。The Windows Mixed Reality environment your app launcher lives in is part familiar, part fantastical/sci-fi. 最佳启动器遵循这一领域的规则。The best launchers follow the rules of this world. 考虑如何从应用程序中获取熟悉的代表对象,但要折上一些实际现实规则。Think of how you can take a familiar, representative object from your app, but bend some of the rules of actual reality. 将产生幻数。Magic will result.

直观Intuitive

当你查看应用程序启动器时,启动你的应用程序的目的是非常明显,不会造成任何混淆。When you look at your app launcher, its purpose - to launch your app - should be obvious and shouldn’t cause any confusion. 例如,请确保您的启动器是您的应用程序的一个显而易见的代表,这不会对 Cliff 房子中的一 décor。For example, be sure your launcher is an obvious-enough representative of your app that it won’t be confused for a piece of decor in the Cliff House. 应用启动器应邀请人员触摸/选择。Your app launcher should invite people to touch/select it.

示例:全新备注3D 应用启动器Example: Fresh Note 3D app launcher
全新说明3D 应用启动器示例 (虚构应用)Fresh Note 3D app launcher example (fictional app)

主比例Home scale

Cliff 房子中的三维应用启动器及其默认大小对于空间中的其他 "物理" 对象应该是有意义的。3D app launchers live in the Cliff House and their default size should make sense with the other “physical” objects in the space. 如果将您的启动器置于附近(比如,房屋植物或某个家具),则应在家中、按大小进行调整。If you place your launcher beside, say, a house plant or some furniture, it should feel at home, size-wise. 很好的起点是查看它如何以30立方米为单位显示,但请记住,如果用户喜欢,可以增加或减少。A good starting point is to see how it looks at 30 cubic centimeters, but remember that users can scale it up or down if they like.

自己可以Own-able

应用启动器应感觉到某个人很高兴能够在他们的空间中使用。The app launcher should feel like an object a person would be excited to have in their space. 它们几乎都是通过这些内容来处理的,因此启动器应喜欢用户认为是足以寻找并保留附近的内容。They’ll be virtually surrounding themselves with these things, so the launcher should feel like something the user thought was desirable enough to seek out and keep nearby.

示例: Astro 扭曲3D 应用启动器Example: Astro Warp 3D app launcher
Astro) (虚构应用程序启动器示例Astro Warp 3D app launcher example (fictional app)

识别Recognizable

你的3D 应用程序启动器应立即将 "你的应用程序" 的品牌表达为看到它的人。Your 3D app launcher should instantly express “your app’s brand” to people who see it. 如果应用中有星形或特别可识别的对象,我们建议将其用作设计的重要组成部分。If you have a star character or an especially identifiable object in your app, we recommend using that as a significant part of your design. 在混合现实世界中,对象对用户的兴趣比单独的徽标要多。In a mixed reality world, an object will draw more interest from users than just a logo alone. 可识别对象快速、清晰地传达品牌。Recognizable objects communicate brand quickly and clearly.

容量耗尽Volumetric

您的应用程序只需将徽标置于平整平面上,并一整天就会调用它。Your app deserves more than just putting your logo on a flat plane and calling it a day. 您的启动器应类似于用户空间中令人兴奋的、三维的物理对象。Your launcher should feel like an exciting, 3D, physical object in the user’s space. 一种很好的方法是假设您的应用程序将在 Macy 的感恩节日醒目中有一个气球。A good approach is to imagine your app was going to have a balloon in the Macy’s Thanksgiving Day Parade. 问问自己,究竟是什么人在街道下出现了什么呢?Ask yourself, what would really wow people as it came down the street? 所有查看角度看起来都很好?What would look great from all viewing angles?

仅徽标 徽标Logo only Logo only

更能识别字符更可识别的字符 More recognizable with a character More recognizable with a character

平面方法,而不是令人吃惊的方式,而不是令人吃惊的简单 方法Flat approach, not surprisingly, feels flat Flat approach, not surprisingly, feels flat

容量耗尽方法更好地展示您的应用程序 容量耗尽方法更好地展示您的应用程序Volumetric approach better showcases your app Volumetric approach better showcases your app

适用于三维模型的提示Tips for good 3D models

  • 规划应用程序启动器的维度时,会获得大约一个 30 cm 的多维数据集。When planning dimensions for your app launcher, shoot for roughly a 30-cm cube. 因此,1:1:1 大小的比率。So, a 1:1:1 size ratio.
  • 模型必须在10000多边形下。Models must be under 10,000 polygons. 详细了解 (LODs 的三角形计数和详细级别) Learn more about triangle counts and levels of details (LODs)
  • 在沉浸式耳机上测试。Test on an immersive headset.
  • 在可能的情况下,将详细信息生成到模型的几何图形–不要依赖于纹理获取详细信息。Build details into your model’s geometry where possible – don’t rely on textures for detail.
  • 生成 "水紧密型" 闭合几何。Build “water tight” closed geometry. 没有在中建模的孔。No holes that aren't modeled in.
  • 使用对象中的自然材料。Use natural materials in your object. 想象一下在现实世界中手工制作。Imagine crafting it in the real world.
  • 请确保您的模型在不同的距离和大小上都能正常阅读。Make sure your model reads well at different distances and sizes.
  • 模型准备就绪后,请阅读 导出资产的准则When your model is ready to go, read the exporting assets guidelines.

纹理中包含微妙细节的模型Model with subtle details in the texture
纹理中包含微妙细节的模型Model with subtle details in the texture

要避免的内容What to avoid

  • 不要使用高对比度详细信息或较小、繁忙的模式和纹理。Don't use high-contrast details or small, busy patterns and textures.
  • 不要使用精简几何-它在某种程度上并不能很好地工作,并且不会产生错误。Don't use thin geometry – it doesn’t work well at a distance and will alias badly.
  • 不要让模型的一部分扩展到超过1:1:1 大小的比率。Don't let parts of your model extend too much beyond the 1:1:1 size ratio. 它将创建缩放问题。It will create scaling problems.

避免高对比度、小型繁忙模式Avoid high-contrast, small busy patterns
避免高对比度、小型、繁忙的模式Avoid high-contrast, small, busy patterns

如何处理类型How to handle type

  • 建议你的类型需要大约1/3 个应用启动器 (或更多) 。We recommend your type takes up about 1/3 of your app launcher (or more). 类型主要是使用户了解你的启动程序,事实上,启动程序非常有用,因为这很重要。Type is the main thing that gives people an idea that your launcher is, in fact, a launcher so it’s nice if it’s substantial.
  • 避免使类型成为超级类型-尝试将其放在应用程序启动器核心维度的范围内 (更多或更少) 。Avoid making type super wide – try to keep it within the confines of the app launchers core dimensions (more or less).
  • 平面类型可以正常工作,但在某些环境中可能难以查看。Flat type can work, but it can be hard to view from certain angles and in certain environments. 您可以考虑将它放在一个实体对象或背景上,以帮助解决此情况。You might consider putting it a solid object or backdrop behind it to help with this.
  • 将维度添加到您的类型非常适合3D。Adding dimension to your type feels nice in 3D. 将类型的两侧的底纹着色为不同、更暗的颜色可帮助提高可读性。Shading the sides of the type a different, darker color can help with readability.

从特定角度看,无背景的平面类型很难查看,在某些环境中, 不能从特定角度和某些环境中查看无背景的平面类型Flat type without a backdrop can be hard to view from certain angles and in certain environments Flat type without a backdrop can be hard to view from certain angles and in certain environments

带有内置背景的类型可以正常工作 ,且内置背景可以正常工作Type with a built-in backdrop can work well Type with a built-in backdrop can work well

如果 对边进行着色,则拉伸类型可以很好地工作Extruded type can work well if you shade the sides Extruded type can work well if you shade the sides

键入工作的颜色Type colors that work

  • WhiteWhite
  • 黑色Black
  • 亮半饱和颜色Bright semi-saturated color

键入工作的颜色。Type colors that work.
键入工作的颜色Type colors that work

要避免的颜色Colors to avoid

导致问题的类型可能包括:Type colors that cause trouble include:

  • 中声Mid-tones
  • 灰色Gray
  • 过度饱和颜色或 desaturated 颜色Over-saturated colors or desaturated colors

键入导致问题的颜色。Type colors that cause trouble.
键入导致问题的颜色Type colors that cause trouble

照明Lighting

应用启动器的照明来自 Cliff 房子环境。The lighting for your app launcher comes from the Cliff House environment. 请确保在整个房子内的多个位置测试启动器,使其看起来很好。Be sure to test your launcher in several places throughout the house so it looks good in both light and shadows. 好消息是,如果您按照本文档中的其他设计指南进行了说明,则您的启动程序应该非常适合 Cliff 房子中的大多数照明。The good news is, if you’ve followed the other design guidance in this document, your launcher should be in good shape for most lighting in the Cliff House.

很好的地方就是测试启动器在环境中的各种灯光上的外观,就是工作室、Media 房间、后 Patio (具体区域以及草地) 。Good places to test how your launcher looks in the various lights in the environment are the Studio, the Media Room, anywhere outside and on the Back Patio (the concrete area with the lawn). 另一种好的测试是将它放在半轻和半阴影上,并查看其外观。Another good test is to put it in half light and half shadow and see what it looks like.

请确保启动器在灯光和阴影中都看起来很好。Make sure your launcher looks good in both light and shadows.
请确保启动程序在灯光和阴影中都看起来很好Make sure your launcher looks good in both light and shadows

绘制Texturing

创作纹理Authoring your textures

三维应用启动器的结束格式将为 glb 文件,该文件使用 .PBR (以物理方式呈现) 管道。The end format of your 3D app launcher will be a .glb file, which is made using the PBR (Physically Based Rendering) pipeline. 这可能是一项棘手的过程-现在最好是使用技术音乐家(如果尚未这样做)。This can be a tricky process - now is a good time to employ a technical artist if you haven't already. 如果你是无畏的 DIY,则在开始之前,请花时间 研究并了解 .pbr 术语 ,在幕后,这将有助于你避免常见错误。If you’re a brave DIY-er, taking the time to research and learn PBR terminology and what’s happening under the hood before you begin will help you avoid common mistakes.

示例:全新备注应用Example: Fresh Note app
全新说明3D 应用启动器示例 (虚构应用)Fresh Note 3D app launcher example (fictional app)

建议通过 Allegorithmic 使用 材料刷 来创作最终文件。We recommend using Substance Painter by Allegorithmic to author your final file. 如果你不熟悉在物质刷中创作 .PBR 着色器,请参阅以下 教程If you’re not familiar with authoring PBR shaders in Substance Painter, here’s a tutorial.

如果你更熟悉其中的一个,则 (交替使用 三维 CoatQuixel Suite 2Marmoset Toolbag 。 ) (Alternately 3D-Coat, Quixel Suite 2, or Marmoset Toolbag would also work if you’re more familiar with one of these.)

最佳做法Best practices

  • 如果你的应用启动器对象是为 .PBR 编写的,则为 Cliff 房子环境转换该对象应该非常简单。If your app launcher object was authored for PBR, it should be straightforward to convert it for the Cliff House environment.
  • 着色器应为金属/粗糙度工作流– Unreal .PBR 着色器是一个关闭的传真。Our shader is expecting a Metal/Roughness work flow – The Unreal PBR shader is a close facsimile.
  • 导出纹理时,请记住 建议的纹理大小When exporting your textures, keep the recommended texture sizes in mind.
  • 请确保为实时照明生成对象,这意味着:Make sure to build your objects for real-time lighting—this means:
    • 避免融入阴影-或绘制阴影Avoid baked shadows – or painted shadows
    • 避免纹理中的融入光照Avoid baked lighting in the textures
    • 使用其中一个 .PBR 材料创作包获取为着色器生成的正确地图Use one of the PBR material authoring packages to get the right maps generated for our shader

另请参阅See also