Guide de conception de lanceur d’applications 3D3D app launcher design guidance

Lorsque vous placez un casque Windows Mixed Reality (VR), vous accédez à la page d’hébergement Windows Mixed Reality.When you put on a Windows Mixed Reality immersive (VR) headset, you enter the Windows Mixed Reality home. La maison est visualisée sous la forme d’une maison sur une falaise placée par des montagnes et de l’eau, mais vous pouvez choisir d’autres environnements et même créer les vôtres.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). Au sein de l’espace de la famille, un utilisateur est libre de réorganiser et d’organiser les objets et applications 3D dont il se soucie.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. Un lanceur d’applications 3D est un objet « physique » dans la maison de réalité mixte de l’utilisateur qu’il peut sélectionner pour lancer une application.A 3D app launcher is a “physical” object in the user’s mixed reality house that they can select to launch an app.

Exemple : lanceur d’applications 3D avec un oiseau flottantExample: Floaty Bird 3D app launcher
Exemple de lanceur d’application 3D d’oiseau flottant (application fictive)Floaty Bird 3D app launcher example (fictional app)

processus de création du lanceur d’applications 3D3D app launcher creation process

La création d’un lanceur d’applications 3D comporte trois étapes :There are 3 steps to creating a 3D app launcher:

  1. Conception et concept (cet article)Designing and concepting (this article)
  2. Modélisation et exportationModeling and exporting
  3. Intégration dans votre application :Integrating it into your application:

Principes de conceptionDesign concepts

Fantastique, encore familierFantastic yet familiar

L’environnement Windows Mixed Reality dans lequel se trouve votre lanceur d’applications est une partie familière, une partie fantastique/science-fi.The Windows Mixed Reality environment your app launcher lives in is part familiar, part fantastical/sci-fi. Les meilleurs lanceurs suivent les règles de ce monde.The best launchers follow the rules of this world. Pensez à la façon dont vous pouvez prendre un objet représentatif familier de votre application, mais pliez certaines règles de réalité réelle.Think of how you can take a familiar, representative object from your app, but bend some of the rules of actual reality. La magie se produira.Magic will result.

PeuIntuitive

Lorsque vous examinez le lanceur d’applications, son objectif est de lancer votre application. il doit être évident et ne devrait pas provoquer de confusion.When you look at your app launcher, its purpose - to launch your app - should be obvious and shouldn’t cause any confusion. Par exemple, assurez-vous que votre lanceur est un représentant évident et évident de votre application qu’il ne sera pas confondu avec un morceau de décor dans la maison de la falaise.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. Votre lanceur d’applications doit inviter des personnes à les toucher/sélectionner.Your app launcher should invite people to touch/select it.

Exemple : nouveau lanceur d’applications de note 3DExample: Fresh Note 3D app launcher
Exemple de lanceur d’application 3D note (application fictive)Fresh Note 3D app launcher example (fictional app)

Échelle personnelleHome scale

les lanceurs d’applications 3D qui vivent dans la maison de la falaise et leur taille par défaut doivent avoir un sens avec les autres objets « physiques » de l’espace.3D app launchers live in the Cliff House and their default size should make sense with the other “physical” objects in the space. Si vous placez votre lanceur à côté, par exemple, d’une usine de maison ou de meubles, vous devez vous sentir à la maison, à la taille.If you place your launcher beside, say, a house plant or some furniture, it should feel at home, size-wise. Un bon point de départ consiste à voir comment il s’agit de 30 centimètres cubes, mais n’oubliez pas que les utilisateurs peuvent le mettre à l’échelle s’ils le souhaitent.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.

En toute possessionOwn-able

Le lanceur d’application doit ressembler à un objet qu’une personne peut avoir dans son espace.The app launcher should feel like an object a person would be excited to have in their space. Elles seront virtuellement entourées de ces éléments, de sorte que le lanceur doit avoir le même aspect que quelque chose que l’utilisateur a été jugé suffisamment souhaitable pour se rendre à la recherche et rester à proximité.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.

Exemple : lanceur d’applications Astro Warp 3DExample: Astro Warp 3D app launcher
Exemple de lanceur d’application Astro Warp 3D (application fictive)Astro Warp 3D app launcher example (fictional app)

ReconnaissableRecognizable

Votre lanceur d’applications 3D doit instantanément exprimer « la personnalisation de votre application » aux personnes qui l’affichent.Your 3D app launcher should instantly express “your app’s brand” to people who see it. Si votre application contient un caractère en étoile ou un objet particulièrement identifiable, nous vous recommandons de l’utiliser en tant que partie significative de votre conception.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. Dans un monde de réalité mixte, un objet attire davantage l’intérêt des utilisateurs qu’un seul logo.In a mixed reality world, an object will draw more interest from users than just a logo alone. Les objets reconnaissables communiquent la personnalisation rapidement et clairement.Recognizable objects communicate brand quickly and clearly.

DosageVolumetric

Votre application mérite plus que simplement placer votre logo sur un plan plat et l’appeler une journée.Your app deserves more than just putting your logo on a flat plane and calling it a day. Votre lanceur doit ressembler à un objet physique passionnant et 3D dans l’espace de l’utilisateur.Your launcher should feel like an exciting, 3D, physical object in the user’s space. Une bonne approche consiste à imaginer que votre application allait avoir une info-bulle dans la parade du jour de Thanksgiving de Macy.A good approach is to imagine your app was going to have a balloon in the Macy’s Thanksgiving Day Parade. Demandez-vous ce que les gens étaient vraiment en mesure de tomber dans la rue ?Ask yourself, what would really wow people as it came down the street? Que feriez-vous de tous les angles d’affichage ?What would look great from all viewing angles?

Logo logo uniquementLogo only Logo only

Plus reconnaissable avec un caractère plus reconnaissable avec un caractèreMore recognizable with a character More recognizable with a character

Une approche plate, pas étonnamment surprenant, est une approche plate plate , pas étonnamment surprenant, à platFlat approach, not surprisingly, feels flat Flat approach, not surprisingly, feels flat

L’approche volumétrique illustre mieux l’approche volumétrique de votre application et améliore votre applicationVolumetric approach better showcases your app Volumetric approach better showcases your app

Conseils pour les bons modèles 3DTips for good 3D models

  • Lors de la planification de dimensions pour votre lanceur d’applications, prenez un cube de 30 cm environ.When planning dimensions for your app launcher, shoot for roughly a 30-cm cube. Par conséquent, un ratio de taille de 1:1:1.So, a 1:1:1 size ratio.
  • Les modèles doivent être sous les polygones 10 000.Models must be under 10,000 polygons. En savoir plus sur le nombre de triangles et les niveaux de détail (LODs)Learn more about triangle counts and levels of details (LODs)
  • Testez sur un casque immersif.Test on an immersive headset.
  • Créez des détails dans la géométrie de votre modèle, dans la mesure du possible, ne vous fiez pas aux textures pour des détails.Build details into your model’s geometry where possible – don’t rely on textures for detail.
  • Créez une géométrie fermée « eau serrée ».Build “water tight” closed geometry. Aucun trou n’est modélisé dans.No holes that aren't modeled in.
  • Utilisez des matériaux naturels dans votre objet.Use natural materials in your object. Imaginez que vous le concevez dans le monde réel.Imagine crafting it in the real world.
  • Assurez-vous que votre modèle lit bien des distances et des tailles différentes.Make sure your model reads well at different distances and sizes.
  • Lorsque votre modèle est prêt à l’emploi, lisez les instructions relativesà l’exportation de ressources.When your model is ready to go, read the exporting assets guidelines.

Modèle avec des détails subtils dans la textureModel with subtle details in the texture
Modèle avec des détails subtils dans la textureModel with subtle details in the texture

À éviterWhat to avoid

  • N’utilisez pas de détails à contraste élevé ni de modèles et de textures de petite taille, occupés.Don't use high-contrast details or small, busy patterns and textures.
  • N’utilisez pas de géométrie fine : elle ne fonctionne pas bien à distance et fera mal l’alias.Don't use thin geometry – it doesn’t work well at a distance and will alias badly.
  • Ne laissez pas les parties de votre modèle s’étendre trop au-delà du ratio de taille de 1:1:1.Don't let parts of your model extend too much beyond the 1:1:1 size ratio. Il va créer des problèmes de mise à l’échelle.It will create scaling problems.

Évitez les grands contrastes, les petits modèles occupésAvoid high-contrast, small busy patterns
Évitez les modèles à contraste élevé, les petits et les plus occupésAvoid high-contrast, small, busy patterns

Comment gérer le typeHow to handle type

  • Nous vous recommandons d’utiliser votre type de lancement d’application 1/3 (ou plus).We recommend your type takes up about 1/3 of your app launcher (or more). Le type est l’élément principal qui donne aux gens une idée que votre lanceur est, en fait, un lanceur, ce qui est intéressant s’il est substantiel.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.
  • Évitez de rendre le type Super étendu : essayez de le conserver dans les limites des dimensions principales des lanceurs d’applications (plus ou moins).Avoid making type super wide – try to keep it within the confines of the app launchers core dimensions (more or less).
  • Le type plat peut fonctionner, mais il peut être difficile à afficher à partir de certains angles et dans certains environnements.Flat type can work, but it can be hard to view from certain angles and in certain environments. Vous pouvez envisager de placer un objet solide ou un fond en arrière-plan pour faciliter cette opération.You might consider putting it a solid object or backdrop behind it to help with this.
  • L’ajout d’une dimension à votre type semble agréable en 3D.Adding dimension to your type feels nice in 3D. L’ombrage des côtés du type d’une couleur plus sombre peut contribuer à la lisibilité.Shading the sides of the type a different, darker color can help with readability.

Le type plat sans fond peut être difficile à afficher à partir de certains angles et dans certains environnements, le type plat sans fond peut être difficile à afficher à partir de certains angles et dans certains environnementsFlat 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

Le type avec une zone de fond intégrée peut fonctionner correctement avec un fond intégré qui peut fonctionner correctementType with a built-in backdrop can work well Type with a built-in backdrop can work well

Le type extrudé peut fonctionner correctement si vous ombrer les côtés le type extrudé peut fonctionner correctement si vous Nuancez les côtésExtruded type can work well if you shade the sides Extruded type can work well if you shade the sides

Tapez les couleurs qui fonctionnentType colors that work

  • BlancsWhite
  • NoirBlack
  • Couleur semi-saturée viveBright semi-saturated color

Tapez les couleurs qui fonctionnent.Type colors that work.
Tapez les couleurs qui fonctionnentType colors that work

Couleurs à éviterColors to avoid

Les couleurs de type qui sont à l’origine des problèmes sont les suivantes :Type colors that cause trouble include:

  • Mi-tonsMid-tones
  • GrisGray
  • Couleurs sursaturées ou couleurs désaturéesOver-saturated colors or desaturated colors

Tapez les couleurs qui provoquent des problèmes.Type colors that cause trouble.
Couleurs de type qui provoquent des problèmesType colors that cause trouble

ÉclairageLighting

L’éclairage de votre lanceur d’applications provient de l’environnement de la maison de la falaise.The lighting for your app launcher comes from the Cliff House environment. Veillez à tester votre lanceur à plusieurs endroits de la maison, afin qu’il soit parfait dans le ciel et dans les ombres.Be sure to test your launcher in several places throughout the house so it looks good in both light and shadows. La bonne nouvelle, c’est que si vous avez suivi les autres conseils de conception de ce document, votre lanceur doit être en bonne forme pour la plupart des éclairages de la maison de la falaise.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.

Les bonnes places pour tester la manière dont votre lanceur regarde dans les différentes lumières de l’environnement sont le Studio, la salle de support, n’importe où et sur le patio Back (la zone concrète avec la pelouse).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). Un autre bon test consiste à le placer en demi-feu et demi-ombre et à voir à quoi il ressemble.Another good test is to put it in half light and half shadow and see what it looks like.

Assurez-vous que votre lanceur semble parfait en clair et dans les ombres.Make sure your launcher looks good in both light and shadows.
Assurez-vous que votre lanceur semble parfait dans le ciel et dans les ombresMake sure your launcher looks good in both light and shadows

TexturationTexturing

Création de vos TexturesAuthoring your textures

Le format de fin de votre lanceur d’application 3D est un fichier. GLB, qui est créé à l’aide du pipeline PBR (rendu physique).The end format of your 3D app launcher will be a .glb file, which is made using the PBR (Physically Based Rendering) pipeline. Il peut s’agir d’un processus délicat. à présent, nous vous conseillons d’employer un artiste technique si vous ne l’avez pas déjà fait.This can be a tricky process - now is a good time to employ a technical artist if you haven't already. Si vous êtes un peu vos propres méthodes-er, prenez le temps de Rechercher et d’apprendre la terminologie du PBR et ce qui se passe en coulisse avant de commencer vous aidera à éviter les erreurs courantes.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.

Exemple : nouvelle application de noteExample: Fresh Note app
Exemple de lanceur d’application 3D note (application fictive)Fresh Note 3D app launcher example (fictional app)

Nous vous recommandons d’utiliser l’outil de création de substance par Allegorithmic pour créer votre fichier final.We recommend using Substance Painter by Allegorithmic to author your final file. Si vous n’êtes pas familiarisé avec la création de nuanceurs PBR dans l’outil de création de substance, voici un didacticiel.If you’re not familiar with authoring PBR shaders in Substance Painter, here’s a tutorial.

(Vous pouvez également utiliser la couche 3D, Quixel suite 2ou marmoset Toolbag si vous êtes plus familiarisé avec l’un d’eux).(Alternately 3D-Coat, Quixel Suite 2, or Marmoset Toolbag would also work if you’re more familiar with one of these.)

Meilleures pratiquesBest practices

  • Si votre objet de lanceur d’application a été créé pour le PBR, il doit être facile de le convertir pour l’environnement de la maison de la falaise.If your app launcher object was authored for PBR, it should be straightforward to convert it for the Cliff House environment.
  • Notre nuanceur attend un flot de travail Metal/grossiste : le nuanceur PBR non réel est une fac-similé de fermeture.Our shader is expecting a Metal/Roughness work flow – The Unreal PBR shader is a close facsimile.
  • Lorsque vous exportez vos Textures, gardez à l’esprit les tailles de texture recommandées .When exporting your textures, keep the recommended texture sizes in mind.
  • Veillez à créer vos objets pour l’éclairage en temps réel, à savoir :Make sure to build your objects for real-time lighting—this means:
    • Évitez les ombres cuites, ou les ombres peintesAvoid baked shadows – or painted shadows
    • Éviter l’éclairage cuit dans les texturesAvoid baked lighting in the textures
    • Utilisez l’un des packages de création de matériel PBR pour obtenir les mappages appropriés générés pour notre nuanceurUse one of the PBR material authoring packages to get the right maps generated for our shader

Voir aussiSee also