Design av Hologram

Anteckning

Tillåt ett litet inläsningsfönster för att ta hänsyn till alla coola GIF-filer och inbäddade videor på den här sidan.

Learning att designa för mixad verklighet kan vara svårt eftersom mediet inte alltid översätter väl till 2D-designprocesser. Här på Microsoft har vi skapat en kostnadsfri app för HoloLens 2 som hjälper dig att lära dig grunderna i Mixed Reality UX Design i första hand. Den unika metoden för design Hologram appen ger en djupdykning i beteenden, tips och rekommendationer för mixad verklighet som hjälper dig att skapa engagerande och fantastiska HoloLens egna appar. Ladda ned appen kostnadsfritt från Microsoft Store och lär dig av Microsofts Mixed Reality Design Team!


Animerad GIF av huvudspårningsscenen i Design hologrammets demorum

Utforma Hologrammets demorum (även kallat hus)

Designa för mixad verklighet

Precis som många av er har jag använt för att utforma mobilappar. Att komma från en 2D-designvärld, att gå in i full med rumslig databehandling, där allt nu finns i världen, var en betydande förändring. I mixad verklighet är apparna inte längre begränsade till en 2D-skärm. I själva verket är de nästan kostnadsfria, placerade i verkligheten och interagerar med verkliga objekt.

För mig är anslutning av 3D-upplevelser till konventionella 2D-designprocesser den mest utmanande aspekten av utveckling med mixad verklighet. I konversationer med kunder skulle jag få höra saker som "Jag vet vilka funktioner som ska ingå och hur de kan komma igång. Det är kod, jag kan följa dokument och självstudier, men användarupplevelsen? Så många funktioner, olika indataalternativ, olika scenarier och fysiska miljöer, det är överväldigande".

Bild från HoloLens 2 Design Workshop i San Francisco Image från HoloLens 2 Design Workshop i San Francisco

En möjlighet att lära ut

Det var inte uppenbart först, men en utmärkt möjlighet visades att använda mixad verklighet som medium för att lära den.

Design Hologram är en visuell upplevelse som förklarar designbegrepp och rekommendationer för mixad verklighet. Det är bara du och en virtuell lärare som demonstrerar designbegrepp för mixad verklighet. Allt är från ett tredje personsperspektiv med erfarenhet i ditt eget utrymme.


Designa Hologram trailervideo

Utforska hus

Detta hus är den virtuella miljö som vi använder i hela appen. Miljön är ett rum på 80 x 60 x 40 cm som innehåller de grundläggande element som de flesta rum har gemensamt, t.ex. väggar, väggar, möbler, en tabell och en TV. Det stora hus är det viktigaste i appupplevelsen, så vi behövde se till att det skulle fungera bra i alla miljöer. Se det som ett litet demorum för visualisering av alla typer av begrepp inom mixad verklighet.

Video om beteendet för justering avHouse

1:1 jämfört med 1:10 prototyper

Vårt första antagande var att 1:1-demonstrationer skulle vara fantastiska, nästan som att titta på en verklig lärare. Användaren ser allt som läraren ser i verklig skala. Men vi insåg direkt att det skulle uppstå några problem:

  • De flesta utvecklare kommer att köra sina appar på kontor eller rum som är mindre än demorummet, så det passar inte.
  • Skärmar är additiva, vilket innebär att hela den virtuella miljön överlagras över en användares rum. Det kan bli förvirrande med två tabeller, kanske dubbla soffor och väggar som inte justeras.
  • Och sämst av alla virtuella miljöer som är starkt begränsade av ett synfält.

När vi testade en miniskala på 1:10 var resultatet en fantastisk vy över ett realistiskt rum. Du kan se allt som påade sig från valfri vinkel på samma gång. Det som var mest överraskande är att de flesta testare tycker att det är så mycket mer integrerande att se en liten version, sedan gick de aldrig tillbaka till skalan 1:1. Därför bestämde vi oss för att faktiskt ta bort version 1:1 och undvika det extra arbete som krävs för att anpassa användargränssnittet och andra aspekter av appen.

Visningsfält med 1:1-skalningsfält med 1:1-skala

Visningsfält med 1:10-skalningsfält med 1:10-skala

Använda Inspelning av mixad verklighet

En av de mest typiska funktionerna i den här appen är användningen av Inspelning av mixad verklighet att lära ut och demonstrera designbegrepp för mixad verklighet.

Microsoft har en Inspelning av mixad verklighet Studio i San Francisco. Microsoft licensierar även den här tekniken till andra studior, bland annat Avatar Dimension i Washington D.C., Metastage i Los Angeles, Dimension Studios i London, SK Telecom i Seattle och Volucap i Berlin. Du hittar mer information på vår Inspelning av mixad verklighet Studio här.


Råsekvenser av Daniel Escudero från en av de 106 kamerorna i Inspelning av mixad verklighet Studio i San Francisco.

Avskiljningsprocessen genererar ett nyckelbildnät, ett normalnät och en struktur som kan levereras som OBJ/PNG-filer för ytterligare efterproduktion eller redo för uppspelning som en H.264-komprimerad MP4-fil. Dessa filer kan importeras till Unity-, Unreal-, Native- och WebXR-projekt. Filer kan köras på Windows, iOS, Mac, Android, Magic Leap ochStav VR.


Capture Player tillhandahålls för att analysera mp4-filer som innehåller video med ljud och inbäddade nät.

Manipulera infångade och virtuella objekt

Mixed Reality Captures skapar virtuella representationer av människor eller djur, men ibland kan du behöva dessa tecken för att interagera med andra virtuella objekt. I följande två exempel visas olika sätt på vilka vi manipulerade scener för att åstadkomma detta.

Justering av huvud blick

Med headgaze-justering kan du flytta en avbildad persons huvud vid körning, vilket innebär att du kan ha ett avskiljt ansikte mot en användare. I vårt fall använde vi det för att visa vy- och intressefält. Det du ser nedan är ett flyttande gameobject som fungerar som ett mål för huvudet att titta på. När vi flyttar målet från sida till sida följer huvudet för avskiljning efter.

Vi har använt det här tricket för att se till att den inaktiva avskiljen alltid skulle möta hologram som placerats i olika delar av husen.

Avskiljarens huvud flyttas vid körning efter ett målspelobjekt i Unity

Avskiljarens huvud flyttas vid körning efter ett målspelobjekt i Unity.

Synkronisera animerade objekt

Det andra var att animera objekt som skulle synkroniseras med en capture-rörelse. I olika delar av appen importerade vi sekventiella OBJs för en specifik avskiljning var femte bildrutor. OBJs animerades sedan i scenen för att se till att de matchar motsvarande bildruta för avskiljning. Det är en omstöslig process för att animera och nyckelbilda, men resultatet är bra. Nu kan du se en Inspelning av mixad verklighet interagerar med objekt som inte har avbildats.

Synkroniserad animering mellan en Inspelning av mixad verklighet- och användargränssnittspanel

Synkroniserad animering mellan en Inspelning av mixad verklighet- och användargränssnittspanel

Skapandeprocess för användargränssnitt

När vi startade ui-designen ville vi visa en del av den magi och möjlighet som hologram har att erbjuda. Att bara visa statiska 2D-fönster och textrutor känns inte rätt i 3D-världen. Många av möjligheterna visas bara inte, så redan från början bestämde vi oss för att flytta från det och utnyttja det holografiska 3D-utrymmet fullt ut.

Först började vi med att lägga till tjocklek i panelerna, ikonerna och textinformationen. Som användare ser jag fortfarande en textruta. Textrutor med bilder, men vi är inte där. Vi gick vidare genom att använda MRTK-skuggarna (Mixed Reality Toolkit). MRTK-skuggarna blev ett kraftfullt verktyg och vi använder dess stencilfunktioner för att lägga till negativt djup i panelerna. Det innebär att ikonerna nu visas bakom en transparent panel i stället för att lägga till element framför en textruta. Det jag ser nu som användare är något som jag inte kan replikera längre i den verkliga världen, och det är här som den holografiska magin började ske. Som användare gillar jag inte heller att läsa, men jag gör mycket redan i den fysiska världen.

Självklart fungerar ikoner mycket bättre än enkel text. För att ge en ännu kraftfullare vägledning började jag skapa en uppsättning animerade objekt och avatarer som var och en berättar en liten historia om vad som görs i respektive scenario och hur det används.

Animerad GIF av ett interaktivt holografiskt menysystem

Huvudkoncept

Huvudspårning och ögonspårning

Handspårning

Rumslig medvetenhet

Holografisk ram

Animerad GIF för en användare som tittar runt i radlokalen med den holografiska ramen markerad

Koordinatsystem

Animerad GIF för en användare som tittar runt i radlokalen med koordinatsystemen markerade

Ögonspårning

Animerad GIF för en användare som tittar på stationära hologram med ögonögonbilden markerad

Visualisering av rumsgenomsökning och rumslig mappning

Animerad GIF av alla ytor inuti det lager som mappas

Scenförståelse

Animerad GIF av objekt i det radegi som känns igen

Peka och genomför med handbilder

Animerad GIF av en användare som höjer sin hand med en hand ray markerad

"Prova" en stund

Designa Hologram lär dig begrepp inom mixad verklighet, men du kan också prova dem i ditt rum. Efter några av dessa förklaringar pausar vi och tar dig ut ur huse och in i en interaktiv stund. Här följer några exempel på dessa interaktiva ögonblick:

Animerad GIF av handspårningsramen som visar när händer identifieras och när de kommer till synfältet

Handspårningsramen visar när händer identifieras och när de kommer till visningsfältet.

Animerad GIF som interagerar med kollisionskristaller genom långt interaktion

Interagera med krockande crystals genom långt interaktion

Animerad GIF för att utforska nära interaktions-priser

Utforska priser för nära interaktion

Om teamet

Picture of Daniel Escudero Daniel Escudero
Teknisk designer för lead
Dan är Creative Director på Designing Hologram och arbetar för närvarande som designchef för Microsofts Mixed Reality Academy i San Francisco och var tidigare designer i en av Microsofts Mixed Reality Studios i London.
Picture of Martin Wettig MartinRuttig
Senior 3D-artist
Martin leder 3D Art and UI Design på Designing Hologram och var tidigare senior 3D-artist på en av Microsofts Mixed Reality Studios i Berlin.

Ett stort tack till Mixed Reality Design-teamet för att du har delat med dig av så mycket kunskap och till de fantastiska på Object Theory för att de är viktiga teammedlemmar genom varje steg i projektet. Tack alla för din fantastiska förmåga, för din passion och ditt fantastiska designögon.