Designvägledning för 3D-appstartare

När du sätter på dig ett Windows Mixed Reality integrerande (VR) headset går du in i Windows Mixed Reality hem. Hemmet visualiseras som ett hus på en klippa omgiven av berg och vatten, men du kan välja andra miljöer och till och med skapa dina egna). I hemmets utrymme är en användare fri att ordna och organisera 3D-objekt och appar som de bryr sig om hur de vill. En 3D-appstartare är ett "fysiskt" objekt i användarens hus för mixad verklighet som de kan välja för att starta en app.

Example: Floaty Bird 3D app launcher
Exempel på startprogram för Floaty Bird 3D-app (fiktiv app)

Skapandeprocess för 3D-appstartare

Det finns tre steg för att skapa en 3D-appstartare:

  1. Design och koncept (den här artikeln)
  2. Modellering och export
  3. Integrera den i ditt program:

Designbegrepp

Fantastiskt men bekant

Den Windows Mixed Reality miljö som din appstartare lever i är delvis välbekant, delvis fantastisk/sci-fi. De bästa bärraketerna följer världens regler. Tänk på hur du kan ta ett välbekant, representativt objekt från din app, men böja några av reglerna för den faktiska verkligheten. Magi kommer att resultera.

Intuitivt

När du tittar på appstartaren bör dess syfte – att starta appen – vara uppenbart och bör inte orsaka förvirring. Se till exempel till att startprogrammet är en tillräckligt uppenbar representant för din app för att den inte ska förväxlas med en inredning i Cliff House. Appstartaren bör bjuda in personer att röra/välja den.

Example: Fresh Note 3D app launcher
Exempel på ny note 3D-appstartare (fiktiv app)

Hemskala

3D-appstartare finns i Cliff House och deras standardstorlek bör vara meningsfull med de andra "fysiska" objekten i utrymmet. Om du placerar din bärraket bredvid, säg, en husväxt eller några möbler, bör det kännas hemma, storleksmässigt. En bra utgångspunkt är att se hur den ser ut på 30 kubikcentikcentiler, men kom ihåg att användarna kan skala upp eller ned den om de vill.

Egenhanterad

Appstartaren bör kännas som ett objekt som en person skulle vara glad över att ha i sitt utrymme. De kommer att omge sig praktiskt taget med dessa saker, så bärraketen bör kännas som något som användaren tyckte var önskvärt nog att söka efter och hålla sig i närheten.

Example: Astro Warp 3D app launcher
Astro Warp 3D-appstartexempel (fiktiv app)

Igenkännlig

3D-appstartaren bör omedelbart uttrycka "appens varumärke" till personer som ser den. Om du har ett stjärntecken eller ett särskilt identifierbart objekt i din app rekommenderar vi att du använder det som en viktig del av din design. I en värld med mixad verklighet drar ett objekt mer intresse från användare än bara en logotyp. Identifierbara objekt kommunicerar varumärket snabbt och tydligt.

Volymetriska

Din app förtjänar mer än att bara sätta din logotyp på ett platt plan och kalla den en dag. Startprogrammet ska kännas som ett spännande, 3D-, fysiskt objekt i användarens utrymme. Ett bra tillvägagångssätt är att föreställa sig att din app skulle ha en ballong i Macy's Thanksgiving Day Parade. Fråga dig själv, vad skulle verkligen wow folk som det kom ner på gatan? Vad skulle se bra ut från alla betraktningsvinklar?

Logo onlyEndast logotyp

More recognizable with a characterMer igenkännligt med ett tecken

Flat approach, not surprisingly, feels flatPlatt tillvägagångssätt, inte överraskande, känns platt

Volumetric approach better showcases your appVolumetric-metoden visar bättre upp din app

Tips för bra 3D-modeller

  • När du planerar dimensioner för appstartaren skjuter du för ungefär en 30 cm-kub. Så, ett storleksförhållande på 1:1:1.
  • Modellerna måste vara under 10 000 polygoner. Läs mer om antal trianglar och detaljnivåer (LOD)
  • Testa på ett integrerande headset.
  • Bygg in information i modellens geometri där det är möjligt – förlita dig inte på texturer för detaljer.
  • Bygga "vattentät" sluten geometri. Inga hål som inte modelleras i.
  • Använd naturliga material i ditt objekt. Imagine att skapa den i den verkliga världen.
  • Se till att din modell läser bra på olika avstånd och storlekar.
  • När din modell är klar kan du läsa riktlinjerna för exporterande tillgångar.

Model with subtle details in the texture
Modell med diskreta detaljer i strukturen

Vad du bör undvika

  • Använd inte högkontrastdetaljer eller små, upptagna mönster och texturer.
  • Använd inte tunn geometri – den fungerar inte bra på avstånd och kommer att ha ett dåligt alias.
  • Låt inte delar av modellen sträcka sig för mycket utöver storleksförhållandet 1:1:1. Det skapar skalningsproblem.

Avoid high-contrast, small busy patterns
Undvik högkontrast, små, upptagna mönster

Hantera typ

  • Vi rekommenderar att din typ tar upp cirka 1/3 av din appstartare (eller mer). Typ är det viktigaste som ger människor en idé om att din launcher är i själva verket en launcher så det är trevligt om det är betydande.
  • Undvik att göra typen super bred – försök att hålla den inom gränserna för appstartarnas kärndimensioner (mer eller mindre).
  • Platt typ kan fungera, men det kan vara svårt att se från vissa vinklar och i vissa miljöer. Du kan överväga att placera det som ett fast objekt eller en bakgrund bakom det för att hjälpa till med detta.
  • Att lägga till dimension i din typ känns bra i 3D. Skuggning av sidorna av typen en annan, mörkare färg kan hjälpa till med läsbarhet.

Flat type without a backdrop can be hard to view from certain angles and in certain environmentsPlatt typ utan bakgrund kan vara svår att se från vissa vinklar och i vissa miljöer

Type with a built-in backdrop can work wellTyp med en inbyggd bakgrund kan fungera bra

Extruded type can work well if you shade the sidesExtruderad typ kan fungera bra om du skuggar sidorna

Skriv färger som fungerar

  • Vit
  • Svart
  • Ljus halvmättad färg

Type colors that work.
Skriv färger som fungerar

Färger att undvika

Typfärger som orsakar problem är:

  • Mellantoner
  • Grå
  • Övermättade färger eller desaturerade färger

Type colors that cause trouble.
Skriv färger som orsakar problem

Belysning

Belysningen för appstartaren kommer från Cliff House-miljön. Se till att testa din bärraket på flera ställen i hela huset så det ser bra ut i både ljus och skuggor. Den goda nyheten är att om du har följt den andra designvägledningen i det här dokumentet bör startprogrammet vara i gott skick för de flesta belysningarna i Cliff House.

Bra ställen att testa hur bärraketen ser ut i de olika lamporna i miljön är Studio, Media Room, var som helst utanför och på baksidan uteplats (betongområdet med gräsmattan). Ett annat bra test är att sätta den i halvljus och halvskugga och se hur det ser ut.

Make sure your launcher looks good in both light and shadows.
Se till att startprogrammet ser bra ut i både ljus och skuggor

Texturering

Redigera dina texturer

Slutformatet för 3D-appstartaren är en .glb-fil som görs med hjälp av PBR-pipelinen (fysiskt baserad rendering). Detta kan vara en knepig process - nu är ett bra tillfälle att anställa en teknisk konstnär om du inte redan har gjort det. Om du är en modig DIY-er, tar sig tid att forska och lära sig PBR terminologi och vad som händer under huven innan du börjar kommer att hjälpa dig att undvika vanliga misstag.

Example: Fresh Note app
Exempel på ny note 3D-appstartare (fiktiv app)

Vi rekommenderar att du använder Substance Painter från Allegorithmic för att skapa din slutgiltiga fil. Här är en självstudiekurs om du inte är bekant med redigering av PBR-skuggningar i Substance Painter.

(Alternativt skulle 3D-Coat, Quixel Suite 2 eller Marmoset Toolbag också fungera om du är mer bekant med en av dessa.)

Bästa praxis

  • Om appstartobjektet har skapats för PBR bör det vara enkelt att konvertera det för Cliff House-miljön.
  • Vår skuggning förväntar sig ett arbetsflöde av typen Metal/Roughness – Unreal PBR-skuggningen är en nära faksimil.
  • När du exporterar dina texturer bör du ha de rekommenderade texturstorlekarna i åtanke.
  • Kom ihåg att skapa dina objekt för realtidsbelysning – det innebär:
    • Undvik bakade skuggor – eller målade skuggor
    • Undvik bakad belysning i texturerna
    • Använd ett av PBR-materialredigeringspaketen för att hämta rätt kartor som genererats för vår skuggning

Se även