Entwurfsanleitung für 3D-App-Startprogramm3D app launcher design guidance

Wenn Sie ein Windows Mixed Reality immersive-Headset (VR) einfügen, geben Sie das Windows Mixed Reality Home ein.When you put on a Windows Mixed Reality immersive (VR) headset, you enter the Windows Mixed Reality home. Die Startseite wird als Haus auf einer Klippe dargestellt, die von den Bergen und Wasser umgeben ist, aber Sie können auch andere Umgebungen auswählen und sogar eigene Umgebungen erstellen.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). Innerhalb des Speicherplatzes kann ein Benutzer die 3D-Objekte und-apps, für die Sie sich interessieren, anordnen und organisieren.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. Ein 3D-App- Startfeld ist ein "physisches" Objekt im gemischten Reality-Haus des Benutzers, das Sie auswählen können, um eine APP zu starten.A 3D app launcher is a “physical” object in the user’s mixed reality house that they can select to launch an app.

Beispiel: floaty Bird 3D-App-StartfeldExample: Floaty Bird 3D app launcher
Beispiel für floaty Bird 3D-App-Startfeld (fiktive APP)Floaty Bird 3D app launcher example (fictional app)

Erstellung eines 3D-App-Start Programms3D app launcher creation process

Zum Erstellen eines 3D-App-Start Programms sind drei Schritte erforderlich:There are 3 steps to creating a 3D app launcher:

  1. Entwerfen und entwerfen (dieser Artikel)Designing and concepting (this article)
  2. Modellieren und exportierenModeling and exporting
  3. Integration in Ihre Anwendung:Integrating it into your application:

EntwurfskonzepteDesign concepts

Fantastisch, aber schon vertrautFantastic yet familiar

Die Windows Mixed Reality-Umgebung, in der sich Ihr App-Startfeld befindet, ist Teil vertraut, Teil fantastisch/Sci-Fi.The Windows Mixed Reality environment your app launcher lives in is part familiar, part fantastical/sci-fi. Die besten Launcher befolgen die Regeln dieser Welt.The best launchers follow the rules of this world. Stellen Sie sich vor, wie Sie ein vertrautes, repräsentatives Objekt von Ihrer APP aus erstellen, aber einige der Regeln der tatsächlichen Realität übernehmen können.Think of how you can take a familiar, representative object from your app, but bend some of the rules of actual reality. Magic führt dazu.Magic will result.

IntuitivenIntuitive

Wenn Sie sich Ihr App-Startfeld ansehen, sollte der Zweck zum Starten Ihrer APP offensichtlich sein und keine Verwirrung verursachen.When you look at your app launcher, its purpose - to launch your app - should be obvious and shouldn’t cause any confusion. Stellen Sie sich z. b. vor, dass Ihr Start Programm ein offensichtlich-genug repräsentativ für Ihre APP ist, dass Sie nicht mit einem Teil der Einrichtung im Klippe-Haus verwechselt wird.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. Ihr App-Start Programm sollte Personen einladen, Sie zu berühren bzw. auszuwählen.Your app launcher should invite people to touch/select it.

Beispiel: neues Hinweis 3D-App-StartfeldExample: Fresh Note 3D app launcher
Neues Hinweis Beispiel für 3D-App-Start Programm (fiktive APP)Fresh Note 3D app launcher example (fictional app)

Start SkalaHome scale

3D-App-Launcher Leben im Klippe-Haus, und ihre Standardgröße sollte mit den anderen "physischen" Objekten im Raum Sinn machen.3D app launchers live in the Cliff House and their default size should make sense with the other “physical” objects in the space. Wenn Sie das Start Programm anordnen, beispielsweise eine Hausanlage oder einige Möbel, sollte es sich in der eigenen Größe fühlen.If you place your launcher beside, say, a house plant or some furniture, it should feel at home, size-wise. Ein guter Ausgangspunkt ist, zu sehen, wie es 30 Kubikzentimeter aussieht, aber denken Sie daran, dass Benutzer es bei Bedarf zentral hoch-oder Herunterskalieren können.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.

Eigen fähigOwn-able

Das App-Start Programm sollte sich wie ein Objekt erweisen, das eine Person im Raum haben würde.The app launcher should feel like an object a person would be excited to have in their space. Sie werden sich praktisch durch diese Dinge umgeben, sodass das Start Programm so aussehen sollte, wie etwas, was der Benutzer als wünschenswert erachtet hatThey’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.

Beispiel: Astro Warp 3D-App-StartfeldExample: Astro Warp 3D app launcher
Beispiel für ein Beispiel für die Astro Warp 3D-app (fiktive APP)Astro Warp 3D app launcher example (fictional app)

UnerkanntRecognizable

Ihr 3D-App-Startfeld sollte den Benutzern, die Sie sehen, umgehend die "Marke Ihrer APP" ausdrücken.Your 3D app launcher should instantly express “your app’s brand” to people who see it. Wenn Sie in Ihrer APP über ein Sternzeichen oder ein besonders identifizierbares Objekt verfügen, empfiehlt es sich, dieses als wesentlichen Bestandteil des Entwurfs zu verwenden.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 einer Mixed Reality-Welt zeichnet ein Objekt von Benutzern mehr Interesse als nur ein Logo allein.In a mixed reality world, an object will draw more interest from users than just a logo alone. Erkennbare Objekte kommunizieren schnell und eindeutig.Recognizable objects communicate brand quickly and clearly.

VolumetrischeVolumetric

Ihre APP verdient mehr als nur Ihr Logo auf eine flache Ebene zu bringen und Sie täglich Aufrufs.Your app deserves more than just putting your logo on a flat plane and calling it a day. Das Start Programm sollte sich wie ein spannendes, 3D-Objekt im Bereich des Benutzers fühlen.Your launcher should feel like an exciting, 3D, physical object in the user’s space. Eine gute Vorgehensweise besteht darin, sich zu vorstellen, dass Ihre APP in der Tages Parade der Macy-Tage eine Sprechblase enthalten würde.A good approach is to imagine your app was going to have a balloon in the Macy’s Thanksgiving Day Parade. Fragen Sie sich, was wirklich Menschen ist, die sich in der Straße befinden?Ask yourself, what would really wow people as it came down the street? Was ist für alle Anzeige Winkel großartig?What would look great from all viewing angles?

Nur Logo nur LogoLogo only Logo only

Besser erkennbar durch ein Zeichen, das mit einem Zeichen besser erkennbar istMore recognizable with a character More recognizable with a character

Flacher Ansatz, nicht überraschend, ist ein flacher Ansatz, nicht überraschend, ist flachFlat approach, not surprisingly, feels flat Flat approach, not surprisingly, feels flat

Volumetric-Ansatz zeigt Ihren app- volumetriansatz besser an und zeigt Ihre APP besser anVolumetric approach better showcases your app Volumetric approach better showcases your app

Tipps für gute 3D-ModelleTips for good 3D models

  • Wenn Sie Dimensionen für das App-Start Programm planen, sollten Sie ungefähr einen 30 cm-Cube durchsuchen.When planning dimensions for your app launcher, shoot for roughly a 30-cm cube. Also ein Größenverhältnis von 1:1:1.So, a 1:1:1 size ratio.
  • Modelle müssen unter 10.000 Polygone liegen.Models must be under 10,000 polygons. Weitere Informationen zu Dreiecks Zählungen und Ebenen der Details (LODs)Learn more about triangle counts and levels of details (LODs)
  • Testen Sie auf einem immersiven Headset.Test on an immersive headset.
  • Builddetails in der Geometrie des Modells, soweit möglich – verlassen Sie sich nicht auf Texturen.Build details into your model’s geometry where possible – don’t rely on textures for detail.
  • Erstellen einer "wasserdichten" geschlossenen Geometrie.Build “water tight” closed geometry. Keine Lücken, die nicht in modelliert werden.No holes that aren't modeled in.
  • Verwenden Sie natürliche Materialien in Ihrem Objekt.Use natural materials in your object. Stellen Sie sich vor, Sie erstellen Sie in der Praxis.Imagine crafting it in the real world.
  • Stellen Sie sicher, dass Ihr Modell in unterschiedlichen Entfernungen und Größen gut funktioniert.Make sure your model reads well at different distances and sizes.
  • Wenn Ihr Modell einsatzbereit ist, lesen Sie die Richtlinien zum Exportieren von Assets.When your model is ready to go, read the exporting assets guidelines.

Modell mit geringfügigen Details in der TexturModel with subtle details in the texture
Modell mit geringfügigen Details in der TexturModel with subtle details in the texture

Was Sie vermeiden solltenWhat to avoid

  • Verwenden Sie keine kontrastreichen Details oder kleine, ausgelastete Muster und Texturen.Don't use high-contrast details or small, busy patterns and textures.
  • Verwenden Sie Thin Geometry nicht – es funktioniert nicht gut in einer Entfernung und ist falsch.Don't use thin geometry – it doesn’t work well at a distance and will alias badly.
  • Lassen Sie Teile des Modells nicht zu viel über das Größenverhältnis von 1:1:1 hinaus erweitern.Don't let parts of your model extend too much beyond the 1:1:1 size ratio. Es werden Skalierungsprobleme entstehen.It will create scaling problems.

Vermeiden Sie Muster mit hohem Kontrast und geringer AuslastungAvoid high-contrast, small busy patterns
Vermeiden Sie große Kontraste, kleine, ausgelastete MusterAvoid high-contrast, small, busy patterns

Vorgehensweise beim Behandeln von TypenHow to handle type

  • Es wird empfohlen, dass Ihr Typ ungefähr 1/3 ihres App-Start Programms (oder mehr) annimmt.We recommend your type takes up about 1/3 of your app launcher (or more). Der Typ ist das wichtigste, das den Benutzern eine Vorstellung gibt, dass es sich bei Ihrem Start Programm tatsächlich um ein Start Programm handelt, sodass es sehr schön ist.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.
  • Vermeiden Sie einen Super weiten Typ – versuchen Sie, ihn innerhalb der Grenzen der Kerndimensionen der App-Launcher (mehr oder weniger) zu halten.Avoid making type super wide – try to keep it within the confines of the app launchers core dimensions (more or less).
  • Der flattype kann funktionieren, kann jedoch in bestimmten Winkeln und in bestimmten Umgebungen schwierig angezeigt werden.Flat type can work, but it can be hard to view from certain angles and in certain environments. Möglicherweise sollten Sie ein solides Objekt oder einen Hintergrund dahinter ablegen, um dies zu unterstützen.You might consider putting it a solid object or backdrop behind it to help with this.
  • Das Hinzufügen von Dimensionen zu Ihrem Typ ist in 3D gut.Adding dimension to your type feels nice in 3D. Das Schattieren der Seiten des Typs unterscheidet sich durch die Lesbarkeit.Shading the sides of the type a different, darker color can help with readability.

Ein flacher Typ ohne einen Hintergrund kann in bestimmten Winkeln nicht angezeigt werden, und in bestimmten Umgebungen kann der flache Typ ohne einen Hintergrund in bestimmten Winkeln und in bestimmten Umgebungen schwierig angezeigt werden .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

Der Typ mit einem integrierten Hintergrund kann gut funktionieren, wenn ein integrierter Hintergrund funktionsfähig ist.Type with a built-in backdrop can work well Type with a built-in backdrop can work well

Der Typ "extrudiert" kann gut funktionieren, wenn Sie die Seiten mit dem Typ "extrudiert" gut funktionieren, wenn Sie die Seiten schattierenExtruded type can work well if you shade the sides Extruded type can work well if you shade the sides

Typfarben, die funktionierenType colors that work

  • WhiteWhite
  • SchwarzBlack
  • Helle halb satte FarbeBright semi-saturated color

Typfarben, die funktionieren.Type colors that work.
Typfarben, die funktionierenType colors that work

Zu vermeide FarbenColors to avoid

Typfarben, die Probleme verursachen, sind:Type colors that cause trouble include:

  • MitteltöneMid-tones
  • GrauGray
  • Über satte Farben oder nicht satte FarbenOver-saturated colors or desaturated colors

Typfarben, die Probleme verursachen.Type colors that cause trouble.
Typfarben, die Probleme verursachenType colors that cause trouble

BeleuchtungLighting

Die Beleuchtung für das App-Start Programm stammt aus der Umgebung "Klippe House".The lighting for your app launcher comes from the Cliff House environment. Stellen Sie sicher, dass Sie das Start Programm an mehreren Stellen im ganzen Haus testen, damit es in Licht und Schatten gut aussieht.Be sure to test your launcher in several places throughout the house so it looks good in both light and shadows. Die gute Nachricht ist, dass Sie, wenn Sie den anderen Entwurfs Leit Faden in diesem Dokument befolgt haben, das Start Programm für die meisten Beleuchtung im Klippe-Haus in guter Form aufweisen sollte.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.

Ein guter Ausgangspunkt, um zu testen, wie das Start Programm in den verschiedenen Lichtern in der Umgebung aussieht, sind Studio, der Medienraum, an einer beliebigen Stelle außerhalb und auf der Rückseite (der konkrete Bereich mit dem Rasen).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). Ein weiterer guter Test besteht darin, den halblicht-und Halbschatten zu platzieren und zu sehen, wie er aussieht.Another good test is to put it in half light and half shadow and see what it looks like.

Stellen Sie sicher, dass das Start Programm sowohl in Beleuchtung als auch in Schatten angezeigt wird.Make sure your launcher looks good in both light and shadows.
Stellen Sie sicher, dass das Start Programm in Licht und Schatten gut aussiehtMake sure your launcher looks good in both light and shadows

TexturierungTexturing

Erstellen von TexturenAuthoring your textures

Das Endformat des 3D-App-Start Programms ist eine. GLB-Datei, die mithilfe der PBR-Pipeline (physisch basiertes Rendering) erstellt wird.The end format of your 3D app launcher will be a .glb file, which is made using the PBR (Physically Based Rendering) pipeline. Dies kann ein kniffliger Prozess sein. jetzt ist es ein guter Zeitpunkt, einen technischen Künstler zu verwenden, wenn Sie dies noch nicht getan haben.This can be a tricky process - now is a good time to employ a technical artist if you haven't already. Wenn Sie ein mutiger DIY sind und sich die Zeit nehmen, sich mit der PBR-Terminologie vertraut zu machen und zu erfahren, was im Hintergrund passiert, bevor Sie beginnen, können Sie häufige Fehler vermeiden.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.

Beispiel: neue Notiz-AppExample: Fresh Note app
Neues Hinweis Beispiel für 3D-App-Start Programm (fiktive APP)Fresh Note 3D app launcher example (fictional app)

Es wird empfohlen, den Substanz Maler von allethmic zu verwenden, um Ihre endgültige Datei zu verfassen.We recommend using Substance Painter by Allegorithmic to author your final file. Wenn Sie nicht mit der Erstellung von PBR-Shadern in der Inhalts Malerin vertraut sind, finden Sie hier ein Tutorial.If you’re not familiar with authoring PBR shaders in Substance Painter, here’s a tutorial.

(Alternativ kann 3D-Coat, Quixel Suite 2oder marthset auch verwendet werden, wenn Sie mit einer der beiden vertraut sind.)(Alternately 3D-Coat, Quixel Suite 2, or Marmoset Toolbag would also work if you’re more familiar with one of these.)

Bewährte MethodenBest practices

  • Wenn das App-Start Programmobjekt für PBR erstellt wurde, sollte es einfach sein, es für die Umgebung "Felsen Umgebung" zu konvertieren.If your app launcher object was authored for PBR, it should be straightforward to convert it for the Cliff House environment.
  • Unser Shader erwartet einen Metal/roughness-Workflow – der Unreal PBR-Shader ist ein schließende Fax.Our shader is expecting a Metal/Roughness work flow – The Unreal PBR shader is a close facsimile.
  • Beachten Sie beim Exportieren der Texturen die empfohlenen Textur Größen .When exporting your textures, keep the recommended texture sizes in mind.
  • Stellen Sie sicher, dass Sie die Objekte für die Echtzeitbeleuchtung erstellen – Dies bedeutet Folgendes:Make sure to build your objects for real-time lighting—this means:
    • Vermeiden gebackener Schatten – oder gezeichnete SchattenAvoid baked shadows – or painted shadows
    • Vermeiden Sie eine gebackenes Beleuchtung in den TexturenAvoid baked lighting in the textures
    • Verwenden Sie eines der Pakete zur Erstellung von PBR-Materialien, um die richtigen Zuordnungen für den Shader zu erhalten.Use one of the PBR material authoring packages to get the right maps generated for our shader

Weitere InformationenSee also