Inde i et Microsoft Design-eksperiment

At bringe dimensionalitet til dagligdags applikationer på tværs af enheder

Dimensionalitet. Det er et designkoncept, der er nær og kært for Microsoft Designteams hjerte, især når vi fortsætter med at udvikle vores flydende designsystem. Det plejede at være denne dimensionalitet - den fordybende, interaktive følelse - var forventet i spil, slutningen af ​​historien. Men nu spørger vi: hvordan omfavner du denne oplevelse i hverdagslige applikationer og engagerer folk på en hvilken som helst enhed? Et lille team af vores designere, tekniske kunstnere og appudviklere brugte Universal Windows Platform og den ydmyge vejr-app til at besvare det spørgsmål.

Spoiler alarm: det var en udfordring. Det fortsætter med at være et levende eksperiment inden for skalerbarhed og transcendens: vi lærer, skræddersy, finjusterer, fejler, sejrer og lærer igen. Her er et glimt af, hvad det betyder at bygge på tværs af dimensioner.

Bygning holografisk

Vi valgte HoloLens som vores startlinje, hvor vi byggede en 3D-oplevelse i blandet virkelighed, der ville være let for nykommere at forstå og nyde. Derfra kan vi finde ud af, hvordan man bringer denne oplevelse ind i en 2D-applikation. Hele ideen er: lad os invitere folk ind; Brug de samme komponenter på tværs af oplevelser til at opbygge fortrolighed og lydhørhed og en følelse af sted.

Hvorfor en vejr-app? Det viser sig, at du kan have det sjovt med det og opbygge noget super-engagerende inden for en kort tidsramme. Plus det er baseret i virkeligheden, kendt for alle og gav os chancen for at undersøge nogle seje steder. Vi fokuserede vores opmærksomhed på telefon, pc / tablet og HoloLens og fløj derfra og afsluttede arbejdet i et par uger, der udforsker forskellige måder at bringe dimensionalitet og glæde til en universel oplevelse.

Projektet startede i maj, en fugtig og kølig tid her i Seattle-området (chokerende), så vi havde solrige kyststeder på hjernen. Vi eksperimenterede lidt for at finde den rigtige skala og detaljeringsniveau til at bygge fire atmosfæriske dioramas i HoloLens: Toscana, Mykonos, Cape Cod og Monument Valley. Oplevelsen åbner på kanterne af hver scene: en skive af en miniatyrverden faldt ned i dit daglige miljø. Derfra er du opfordret til at interagere med objekterne - ved at blive ægte scener, der tilpasser sig, når du bevæger dig nærmere og går omkring dem. Vores operative tema her er engagement. Du starter på informationsarkitektureniveau: hvad er temperaturen i Toscana? Derefter inviterer vi dig ind. Kom tættere på terrænet. Nu ser du lyset og atmosfæren. Dernæst den detaljerede bevægelse og rumlige lyde. Nu fortællende detaljer. Nogen vinker på dig, træer svinger.

Fordi du befinder dig i en blandet virkelighed HoloLens, er det muligt, at nogen i din virkelige verden går gennem dit hologram. Og du vil absolut skrige nej! som det sker, for nu lever du dette miljø. Det sker hurtigt: du føler noget, du er i det, og du er følelsesmæssigt forbundet. Det er som om at gå tabt i en sne klode. Et dynamisk, betagende sted på et sted.

For at få den rigtige størrelse, skala og placering af objekter, var vi afhængige af vores 3D-kunstner til at arbejde tæt sammen med designerne i Maya (3D-animationssoftware). Det var her vi gjorde blokeringen for at bestemme den rigtige størrelse, skala og placering af objekterne i en større scene, ligesom at instruere en film. Hvert element skulle dimensioneres lige så for at opretholde realistiske proportioner uanset synsafstand eller vinkel.

Konceptskitse til Cape CodTidlig blokering af Cape Cod-scene for at bestemme størrelsen på elementerne

Vi fik de bedste resultater - og flyttede hurtigt - da vi bages skygger i strukturerne. Realismen i hver scene kom fra omhyggelig opmærksomhed på detaljer og et kunstnerisk øje. For eksempel hjalp bølgenes forskellige størrelse, retning og bevægelse med at differentiere den atlantiske kyst fra en ø i Det Ægæiske Hav (detaljer betyder noget!). Overgangen mellem dioramas er relativt hurtig og enkel, idet du holder dit fokus på scenen og den følelse, det giver, ikke selve bevægelsen.

Endelig kunst klar til belysning og animationer

Hvad ser andet ud? Solbadere. En sømand. Måger, køer, en traktor. Vi havde det meget sjovt at fortælle historien og invitere folk ind. Vi tilføjede subtile animationer og lærte, at polygontælling, teksturstørrelse og antallet af kontrollerende samlinger alle påvirkede animationens glathed. Omgivende lyde (styrtende bølger) og tydelige lyde (moo!) Var de sidste ting for at bringe alt til live.

Enkel, minimalt animeret måge og solbadere i Mykonos-scenen.

Skalerer det til 2D

Så vi skabte en smuk, sjov, interaktiv ting til HoloLens. Hvordan skal du nu skalere det tilbage til telefon og tablet og lave 2D- og 3D-indhold, der findes eksistens naturligt? Kunne vi genbruge hologrammet i et fladt brugergrænseflade og stadig få det til at føle sig engagerende? Vi er heldige, at den universelle Windows-platform gør det let - tjek denne detaljerede vejledning i en anden prøvevejr-app, Atmosphere.

Ét-trins konvertering er stadig en drøm, og vi var nødt til at gøre noget manuelt skræddersyet for at få diorama til at se godt ud på 2D-enheder. Vi justerede skyggeleggerne for fyrtårnsstrålen for at bevare et realistisk udseende og slukede MIP-kortkomprimering for diorama-strukturer. Vi eksperimenterede også med farver, der matchede dioramaen, før vi landede på en gråskala baggrund.

Cape Cod diorama optimeret til 2D-appen

Adaptiv input

Det flydende designsystem handler om oversættelse og samhørighed. Vores mål i dette eksperiment var at få hvert enkelt element til at oversætte på en måde, der er passende til den type enhed og det primære input (berøring, mus, blik), der bruges. Vi designet til at opretholde kontinuiteten i oplevelsen fra både visuelle og interaktive perspektiver, mens vi sørger for, at tingene fungerer naturligt og velkendt på hver enhed. Vi ønskede, at HoloLens-oplevelsen skulle forblive tro mod holografisk og 3D-form, men alligevel være tilgængelig og let for nye brugere - at gøre gestus, blik og stemme så velkendte som ved at bruge en pc. 2D-oplevelsen, der er nødvendig for at optimere den tilgængelige skærmsejendom og føle sig naturlig med berøring og mus-interaktion, mens den stadig føles så fordybende som blandet virkelighed. Designe uden for kassen, inden i en kasse, som den var.

Her er et glimt af noget af værket! Bemærk knappen for at skifte mellem scener - et almindeligt designelement til alle tre formfaktorer til hjælp med vejfinding.

Tidlige skitser af adaptiv adfærd

Den blandede virkelighedsinteraktion var fuld af eksperimenter i volumen og skalaer - som at bringe switch-knappen tættere på seeren. Men ikke alt drager fordel af volumen; vi holdt typen flad for læsbarhed:

I 2D-oplevelsen brugte vi nogle af de nye ingredienser til Fluent Design System til at skabe kontinuitet, mens vi optimerede til oplevelsen på den enhed - ting som lys, dybde og bevægelse bringer ting til live selv i et fladt rum.

Her viser et fysisk ark akryl virkningen, der inspirerede akryl:

Og her er Acryl anvendt i vejr-appen til at vise den detaljerede prognose, mens konteksten af ​​dioramaen holdes under subtil syn.

I telefonoplevelsen, hvor en mindre skærmstørrelse betyder at adskille navigationselementerne og indholdet, giver tilsluttet animation en kontinuerlig, filmisk navigation, der gentager 3D-nedsænkning.

Her er hvad vi lærte fra dette eksperiment:

  • Hvis du som os er ny til at udvikle til HoloLens og vil eksperimentere med en egen app, er vejledningen til blandet virkelighed og Mixed Reality Design Labs kodeprøver store ressourcer til at hjælpe dig i gang.
  • At lave fire smukke 3D-scener og implementere dem i HoloLens var den mest arbejdskrævende del af projektet.
  • Appens 2D-del kom virkelig hurtigt sammen med byggestene til Fluent Design System.

Hvad vi gerne vil undersøge nærmere:

  • Knappanelerne, vi brugte i dette eksperiment, har sammenhæng og fortrolighed på tværs af 2D og 3D, men skaleres muligvis ikke til en blandet reality-vejr-app med snesevis eller hundreder af placeringer. Med en større lokaliseringsliste er vi sandsynligvis nødt til at bevæge os væk fra 2D-knappanelernes kendskab til noget mere optimeret til blandet virkelighed. Hvordan ser det ud? Er der andre navigationsmønstre i 2D, der vil gøre en jævn overgang til en blandet reality-oplevelse?
  • Hvilke andre måder kan vi bringe glæden ved 3D-scenerne ind i 2D-oplevelsen? Hvad er mellemtrinnene mellem 2D og blandet virkelighed, både for en bruger og for en udvikler?

Kig ud til den kreative direktør Ramiro Torres, Oscar Murillo og det uærlige team for deres arbejde med denne app. Næste gang tilføjer vi den haj.

Vi elsker at høre feedback fra samfundet. Hvad synes du om vores lille vejreksperiment? Hvad ellers vil du se os udforske? Hvad har du bygget ved hjælp af Fluent Design, og hvordan gik det? Kontakt os i kommentarerne herunder, start en samtale i vores LinkedIn-gruppe, eller slå os op på Twitter @ MicrosoftDesign. Kan ikke vente med at se, hvad du opretter.

Følg os på Dribbble, Twitter og Facebook eller tilmeld dig vores Windows Insider-program for at være uvidende om Microsoft Design. Og hvis du er interesseret i at blive medlem af vores team, skal du gå til aka.ms/DesignCareers.