Binnen een Microsoft Design Experiment

Dimensionaliteit brengen voor dagelijkse toepassingen op verschillende apparaten

Dimensionaliteit. Het is een ontwerpconcept dat het hart van het Microsoft Design-team na aan het hart ligt, vooral als we ons Fluent Design-systeem blijven ontwikkelen. Vroeger werd die dimensionaliteit - dat meeslepende, interactieve gevoel - verwacht in gaming, einde verhaal. Maar nu vragen we: hoe omarm je die ervaring in alledaagse toepassingen, door mensen op elk apparaat te betrekken? Een klein team van onze ontwerpers, technische artiesten en app-ontwikkelaars hebben het Universal Windows Platform en de bescheiden weer-app gebruikt om die vraag te beantwoorden.

Spoiler alert: het was een uitdaging. Het blijft een levend experiment op het gebied van schaalbaarheid en transcendentie: we zijn aan het leren, afstemmen, afstemmen, falen, triomferen en opnieuw leren. Hier is een glimp van wat het betekent om over verschillende dimensies te bouwen.

Holografisch bouwen

We kozen HoloLens als onze startlijn, het bouwen van een 3D-ervaring in mixed reality die nieuwkomers gemakkelijk kunnen begrijpen en genieten. Van daaruit zouden we uitzoeken hoe we die ervaring in een 2D-toepassing kunnen brengen. Het hele idee is: laten we mensen uitnodigen; gebruik dezelfde componenten tijdens ervaringen om vertrouwdheid en reactievermogen en een gevoel van plaats op te bouwen.

Waarom een ​​weer-app? Blijkt dat je er veel plezier mee kunt hebben en in een kort tijdsbestek iets super leuks kunt bouwen. Bovendien is het in de realiteit gebaseerd, voor iedereen kenbaar en gaf het ons de kans om een ​​aantal coole plekken te onderzoeken. We richtten onze aandacht op telefoon, pc / tablet en HoloLens, en vlogen vandaar uit, werk in een paar weken voltooid dat verschillende manieren verkent om dimensionaliteit en genot in een universele ervaring te brengen.

Het project begon in mei, een vochtige en koele tijd hier in de omgeving van Seattle (schokkend), dus we hadden zonnige, kustlocaties in de hersenen. We hebben een beetje geëxperimenteerd om de juiste schaal en het juiste detailniveau te vinden om vier sfeervolle diorama's in HoloLens te bouwen: Toscane, Mykonos, Cape Cod en Monument Valley. De ervaring begint aan de randen van elke scène: een deel van een miniatuurwereld viel in je dagelijkse omgeving. Van daaruit wordt u uitgenodigd om te communiceren met de objecten - echte scènes te worden die zich aanpassen naarmate u dichterbij komt en er omheen loopt. Ons operatieve thema hier is betrokkenheid. Je begint op het niveau van informatiearchitectuur: wat is de temperatuur in Toscane? Dan nodigen we je uit. Kom dichter bij het terrein. Nu zie je het licht en de atmosfeer. Vervolgens de gedetailleerde beweging en ruimtelijke geluiden. Nu, verhalende details. Iemand zwaait naar je, bomen zwaaien.

Omdat je je in een HoloLens met een gemengde realiteit bevindt, is het mogelijk dat iemand in je echte wereld door je hologram loopt. En je zult absoluut nee schreeuwen! omdat het gebeurt omdat je nu in deze omgeving leeft. Het gebeurt snel: je voelt iets, je zit erin en je bent emotioneel verbonden. Het is alsof je verdwaalt in een sneeuwbol. Een dynamische, betoverende plek binnen een plek.

Om de juiste maat, schaal en plaatsing van objecten te krijgen, vertrouwden we op onze 3D-kunstenaar om nauw samen te werken met de ontwerpers in Maya (3D-animatiesoftware). Hier hebben we de blokkering uitgevoerd om de juiste grootte, schaal en plaatsing van de objecten in een grotere scène te bepalen, net zoals het regisseren van een film. Elk element moest precies worden gedimensioneerd om realistische verhoudingen te behouden, ongeacht de kijkafstand of hoek.

Concept schets voor Cape CodVroege blokkering van de scène van Cape Cod om de schaal van elementen te bepalen

We hebben de beste resultaten - en snel verplaatst - toen we schaduwen in de texturen bakten. Het realisme van elke scène kwam van zorgvuldige aandacht voor detail en een kunstzinnig oog. De verschillende grootte, richting en beweging van de golven hielpen bijvoorbeeld bij het onderscheiden van de Atlantische kust van een eiland in de Egeïsche Zee (details zijn belangrijk!). De overgang tussen diorama's is relatief snel en eenvoudig, waarbij je je aandacht op de scène en het gevoel ervan houdt, niet op de beweging zelf.

Laatste kunst klaar voor verlichting en animaties

Wat verschijnt er nog meer? Zonaanbidders. Een zeiler. Meeuwen, koeien, een tractor. We hebben veel plezier beleefd aan het vertellen van het verhaal en het uitnodigen van mensen. We hebben subtiele animaties toegevoegd en hebben geleerd dat het aantal polygonen, de textuurgrootte en het aantal controlerende verbindingen de soepelheid van de animatie beïnvloedden. Omgevingsgeluiden (beukende golven) en verschillende geluiden (moo!) Waren de laatste hand om alles tot leven te brengen.

Eenvoudige, minimaal geanimeerde meeuw en zonnebaders in de Mykonos-scène.

Schalen naar 2D

Dus hebben we een mooi, leuk, interactief ding voor Hololens gemaakt. Hoe kun je dat nu terugschalen naar telefoon en tablet en 2D- en 3D-inhoud maken die op natuurlijke wijze naast elkaar bestaat? Kunnen we het hologram binnen een vlakke gebruikersinterface hergebruiken en het toch aantrekkelijk maken? We hebben het geluk dat het Universal Windows Platform dit eenvoudig maakt - bekijk deze gedetailleerde handleiding in een andere voorbeeldweer-app, Atmosphere.

Conversie in één stap is nog steeds een droom en we moesten handmatig aanpassen om de diorama er geweldig uit te laten zien op 2D-apparaten. We hebben de schaduwen voor de vuurtorenstraal aangepast om een ​​realistisch uiterlijk te behouden en de MIP-kaartcompressie voor de diorama-structuren uitgeschakeld. We hebben ook geëxperimenteerd met kleuren die overeenkomen met het diorama voordat we op een grijswaardenachtergrond landden.

Cape Cod diorama geoptimaliseerd voor de 2D-app

Adaptieve invoer

Bij het Fluent Design System draait alles om vertaling en samenhang. Ons doel in dit experiment was om elk element te laten vertalen op een manier die geschikt is voor het type apparaat en primaire invoer (aanraking, muis, blik) die wordt gebruikt. We hebben ontworpen om de continuïteit van de ervaring te behouden vanuit zowel visuele als interactieve perspectieven, terwijl we ervoor zorgden dat alles op een natuurlijke en vertrouwde manier op elk apparaat werkte. We wilden dat de HoloLens-ervaring trouw bleef aan de holografische en 3D-vorm, maar toch toegankelijk en gemakkelijk zou zijn voor nieuwe gebruikers - gebaar, blik en stem net zo vertrouwd maken als het gebruik van een pc. De 2D-ervaring moest worden geoptimaliseerd voor het beschikbare schermvastgoed en voelt natuurlijk aan met aanraak- en muisinteracties, terwijl het nog steeds meeslepend voelt als mixed reality. Als het ware buiten de doos ontwerpen, binnen een doos.

Hier is een kijkje in een deel van het werk! Let op de knop om tussen scènes te schakelen - een gemeenschappelijk ontwerpelement voor alle drie vormfactoren om te helpen bij het vinden van een weg.

Vroege schetsen van adaptief gedrag

De mixed reality-interactie was vol met volume- en schaalexperimenten - zoals het dichter bij de kijker brengen van de schakelknop. Maar niet alles heeft baat bij volume; we hebben het type vlak gehouden voor de leesbaarheid:

In de 2D-ervaring hebben we enkele van de nieuwe ingrediënten van het Fluent Design-systeem gebruikt om de continuïteit te vergroten en tegelijkertijd de ervaring op dat apparaat te optimaliseren - dingen zoals licht, diepte en beweging brengen dingen tot leven, zelfs in een vlakke ruimte.

Hier toont een fysiek vel acryl het effect dat acryl heeft geïnspireerd:

En hier wordt Acryl toegepast in de weer-app om de gedetailleerde voorspelling weer te geven terwijl de context van het diorama in subtiel zicht blijft.

In de telefoonervaring, waarbij een kleiner schermformaat betekent dat de navigatie-elementen en de inhoud moeten worden gescheiden, geeft verbonden animatie een continue, filmische navigatie die lijkt op 3D-onderdompeling.

Dit is wat we hebben geleerd van dit experiment:

  • Als je net als wij nieuw bent in het ontwikkelen voor HoloLens en wilt experimenteren met een eigen app, zijn de mixed reality-ontwerprichtlijnen en de codevoorbeelden van Mixed Reality Design Labs geweldige hulpmiddelen om je op weg te helpen.
  • Het samenstellen van vier prachtige 3D-scènes en deze in de HoloLens te implementeren was het meest arbeidsintensieve deel van het project.
  • Het 2D-gedeelte van de app kwam heel snel samen met de bouwstenen van het Fluent Design-systeem.

Wat we verder willen onderzoeken:

  • De knoppenpanelen die we in dit experiment hebben gebruikt, hebben samenhang en vertrouwdheid in 2D en 3D, maar zijn mogelijk niet opgeschaald naar een weer-app met mixed reality met tientallen of honderden locaties. Met een grotere locatielijst zouden we waarschijnlijk moeten weggaan van de bekendheid van de 2D-knoppenpanelen naar iets meer geoptimaliseerd voor gemengde realiteit. Hoe zou dat eruit zien? Zijn er andere navigatiepatronen in 2D die een soepele overgang naar een mixed reality-ervaring zouden maken?
  • Welke andere manieren kunnen we het plezier van de 3D-scènes in de 2D-ervaring brengen? Wat zijn de tussenstappen tussen 2D en mixed reality, zowel voor een gebruiker als voor een ontwikkelaar?

Schreeuw naar Creative Director Ramiro Torres, Oscar Murillo en het onverschrokken team voor hun werk aan deze app. De volgende keer zullen we die haai toevoegen.

We horen graag feedback van de gemeenschap. Wat vind je van ons kleine weerexperiment? Wat wil je ons nog meer zien verkennen? Wat heb je gebouwd met Fluent Design en hoe ging het? Neem contact met ons op in de reacties hieronder, start een gesprek in onze LinkedIn-groep of bel ons op Twitter @MicrosoftDesign. Ik kan niet wachten om te zien wat je maakt.

Volg ons op Dribbble, Twitter en Facebook of neem deel aan ons Windows Insider-programma om op de hoogte te blijven van Microsoft Design. En als u geïnteresseerd bent om ons team te versterken, ga dan naar aka.ms/DesignCareers.