Sisällä Microsoft Design Experiment

Tuo ulottuvuus jokapäiväisiin sovelluksiin kaikissa laitteissa

Dimensionality. Se on suunnittelukonsepti, joka on lähellä ja rakastaa Microsoft Design -tiimin sydäntä, etenkin kun jatkamme sujuvan suunnittelumme kehittämistä. Aikaisemmin se oli se ulottuvuus - tuo kiehtova, vuorovaikutteinen tunne - odotettiin pelaamisessa, tarinan lopussa. Mutta nyt kysymme: kuinka omaksut tämän kokemuksen jokapäiväisissä sovelluksissa ottamalla ihmiset mukaan millä tahansa laitteella? Pieni joukkue suunnittelijoista, teknisistä taiteilijoista ja sovelluskehittäjistä vastasi kysymykseen Universal Windows -käyttöympäristöä ja nöyrää sääsovellusta.

Spoilerihälytys: se oli haaste. Se on edelleen elävä kokeilu skaalautuvuuden ja transcendenssin alueilla: opimme, räätälöimme, hienosäädämme, epäonnistumme, voitamme ja opimme uudelleen. Tässä on katsaus mitä tarkoittaa rakentaa ulottuvuuksia.

Rakennus holografinen

Valitsimme lähtökohtana HoloLens-rakennuksen, joka rakentaa 3D-kokemuksen seka todellisuudessa, jonka tulokkaiden on helppo ymmärtää ja nauttia. Sieltä pohdimme, kuinka tuo kokemus saadaan 2D-sovellukseen. Koko idea on: kutsutaan ihmisiä sisään; Käytä samoja komponentteja kokemuksissa rakentamaan tuntemusta, reagointia ja paikkatunnetta.

Miksi sääsovellus? Osoittautuu, että sinulla voi olla hauskaa sen kanssa ja rakentaa jotain erittäin kiinnostavaa lyhyessä ajassa. Lisäksi se perustuu todellisuudessa, kaikkien tuntemaan ja antoi meille mahdollisuuden tutkia hienoja paikkoja. Kohdensimme huomioni puhelimeen, tietokoneeseen / tablet-laitteeseen ja HoloLens-laitteeseen, ja lensimme sieltä suorittamalla muutamassa viikossa työtä, joka tutkii erilaisia ​​tapoja tuoda ulottuvuus ja ilahduttava yleismaailmallinen kokemus.

Projekti käynnistyi toukokuussa, kosteana ja viileänä täällä Seattlen alueella (järkyttävää), joten aivoissa oli aurinkoisia rannikkoalueita. Kokeilimme vähän löytääksemme oikean mittakaavan ja yksityiskohtaisuuden rakentaaksesi neljä ilmakehän dioramaa HoloLensiin: Toscana, Mykonos, Kap Cod ja Monument Valley. Kokemus aukeaa jokaisen kohtauksen reunoilta: viipale miniatyyrimaailmaa putosi jokapäiväiseen ympäristöösi. Sieltä sinut kutsutaan vuorovaikutukseen esineiden kanssa - niistä tulee totta kohtauksia, jotka mukautuvat liikuttaessasi lähemmäksi ja kävelemällä niiden ympärillä. Operatiivinen teemamme tässä on sitoutuminen. Aloitat tietoarkkitehtuurin tasolta: mikä on Toscanan lämpötila? Sitten kutsumme sinut sisään. Tule lähemmäksi maastoa. Nyt näet valon ja ilmapiirin. Seuraavaksi yksityiskohtaiset liike- ja tilaäänet. Nyt kerronnan yksityiskohdat. Joku heiluttaa sinua, puut huojuvat.

Koska olet sekoitetussa todellisuudessa HoloLens, on mahdollista, että joku todellisesta maailmasta kävelee hologrammin läpi. Ja huudot ehdottomasti! kuten tapahtuu, koska nyt asut tässä ympäristössä. Se tapahtuu nopeasti: tunnet jotain, olet siinä ja olet emotionaalisesti yhteydessä. Se on eräänlainen kuin eksyminen lumimaailmaan. Dynaaminen, lumoava paikka paikassa.

Oikean koon, mittakaavan ja sijoituksen saamiseksi luotimme 3D-taiteilijamme kanssa tiiviin yhteistyöhön Mayan (3D-animaatio-ohjelmisto) suunnittelijoiden kanssa. Täällä esimme estääksemme objektien oikean koon, laajuuden ja sijoituksen suuremmassa kohtauksessa, kuten ohjaamalla elokuvaa. Jokainen elementti piti mitoittaa vain siten, että realistiset mittasuhteet säilyvät katseluetäisyydestä tai kulmasta riippumatta.

Konseptikuvio Cape CodilleKap Codin kohtauksen varhainen estäminen elementtien laajuuden määrittämiseksi

Saimme parhaat tulokset - ja muutimme nopeasti - kun paistimme varjoja kuvioihin. Kunkin kohtauksen realismi tuli huolellisesta huomiosta yksityiskohtiin ja taiteelliseen silmään. Esimerkiksi aaltojen erottuva koko, suunta ja liike auttoivat erottamaan Atlantin rannikon Egeanmeren saaresta (yksityiskohdilla on merkitystä!). Siirtyminen dioramioiden välillä on suhteellisen nopea ja yksinkertainen, pitäen keskittymisen kohtaukseen ja sen aiheuttamaan tunteeseen, ei itse liikkeeseen.

Lopputaide on valmis valaistusta ja animaatioita varten

Mikä vielä tekee ulkonäöstä? Auringonpalvojien. Merimies. Lokit, lehmät, traktori. Meillä oli hauskaa kertoa tarina ja kutsua ihmisiä sisään. Lisäsimme hienoisia animaatioita ja oppimme, että monikulmion lukumäärä, tekstuurin koko ja ohjattavien nivelten lukumäärä vaikuttivat kaikki animaation sujuvuuteen. Ympäristön äänet (kaattavat aallot) ja erilliset äänet (moo!) Olivat viimeisiä kosketuksia kaiken herättämiseksi elämään.

Yksinkertainen, minimaalisesti animoitu lokki ja auringonottajat Mykonos-kohtauksessa.

Skaala se 2D: ksi

Joten loimme hienon, hauskan, vuorovaikutteisen asian HoloLensille. Nyt miten skaalata se takaisin puhelimeen ja tablettiin ja tehdä luonnollisesti rinnakkain esiintyvästä 2D- ja 3D-sisällöstä? Voisimmeko käyttää hologrammia uudelleen tasaisessa käyttöliittymässä ja saada sen silti tuntemaan kiinnostavaa? Olemme onnekkaita, että Universal Windows -käyttöympäristö tekee tästä helpon - tutustu tähän yksityiskohtaiseen ohjeeseen toisessa sääsovelluksessa, Atmosphere.

Yhden askeleen muuntaminen on edelleen unelma, ja jouduimme tekemään joitain manuaalisia räätälöintejä, jotta diorama näyttäisi hyvältä 2D-laitteissa. Säädämme majakkapalkin varjostimet realistisen ilmeen säilyttämiseksi ja sammutimme MIP-kartan pakkauksen dioraamakuvioille. Kokeilimme myös dioramaa vastaavilla väreillä ennen laskeutumista harmaasävyiselle taustalle.

Cape Cod diorama optimoitu 2D-sovellukselle

Mukautuva tulo

Sujuva suunnittelujärjestelmä on kaikki tekemistä käännöksestä ja yhteenkuuluvuudesta. Tavoitteenamme tässä kokeilussa oli saada jokainen elementti kääntämään käytetyn laitteen tyypin ja ensisijaisen tulon (kosketus, hiiri, katse) mukaisella tavalla. Suunnittelimme ylläpitää kokemuksen jatkuvuutta sekä visuaalisesti että vuorovaikutteisesti, varmistaen samalla, että asiat toimivat luonnollisesti ja tutulla tavalla jokaisessa laitteessa. Halusimme, että HoloLens-kokemus pysyy uskollisena holografiselle ja 3D-muodolle, mutta on silti tavoitettavissa ja helppo uusille käyttäjille - tekemällä ele, katse ja ääni niin tutuksi kuin tietokoneen käyttäminen. 2D-kokemus, jota tarvitaan optimoimaan käytettävissä oleva näyttökiinteistö ja tuntemaan olonsa luonnolliseksi kosketus- ja hiiren kanssa tapahtuvan vuorovaikutuksen avulla, tunteen olonsa silti yhtä kiehtova kuin sekoitettu todellisuus. Suunnittelu laatikon ulkopuolella, laatikon sisällä, sellaisena kuin se oli.

Tässä on välähdys joihinkin teoksiin! Ota huomioon painike vaihtaaksesi kohtausten välillä - yhteinen suunnitteluelementti kaikille kolmelle muodotekijälle, joka auttaa suuntaamisessa.

Varhaiset luonnokset adaptiivisesta käytöksestä

Sekoitettu todellisuuden vuorovaikutus oli täynnä tilavuus- ja mittakokeiluja - kuten kytkinpainikkeen tuominen lähemmäksi katsojaa. Mutta kaikesta ei ole hyötyä tilavuudesta; Pidimme tyypin tasaisena luettavuuden vuoksi:

2D-kokemuksessa käytimme joitain uusia Fluent Design System -komponentteja auttaaksemme tuottamaan jatkuvuuden samalla kun optimoimme laitteen kokemusta - asiat, kuten valo, syvyys ja liike, asettavat asiat elämään jopa tasaisessa tilassa.

Täällä fyysinen akryylikalvo näyttää vaikutuksen, joka inspiroi akryyliä:

Ja tässä on akryyli, jota käytetään sääsovelluksessa näyttää yksityiskohtainen ennuste pitäen samalla dioraman konteksti hienovaraisessa näkymässä.

Puhelinkokemuksessa, jossa pienempi näytön koko tarkoittaa navigointielementtien ja sisällön erottamista, kytketty animaatio antaa jatkuvan, elokuvallisen navigoinnin, joka toistaa 3D-upotuksen.

Tässä on mitä olemme oppineet tästä kokeilusta:

  • Jos olet kuin me, olet uusi HoloLens-ohjelmiston kehittäjä ja haluat kokeilla omaa sovellustasi, sekoitetun todellisuuden suunnitteluohjeet ja Mixed Reality Design Labs -koodinäytteet ovat hyviä lähteitä aloittamiseen.
  • Neljän kauniin 3D-kohtauksen muotoilu ja toteuttaminen HoloLensiin oli projektin työvoimavaltaisin osa.
  • Sovelluksen 2D-osa tuli todella nopeasti yhteen sujuvan suunnittelun järjestelmän rakennuspalikoiden kanssa.

Mitä haluaisimme tutkia tarkemmin:

  • Tässä kokeessa käytetyillä painikepaneeleilla on johdonmukaisuus ja tuntemus 2D: n ja 3D: n välillä, mutta ne eivät ehkä ole mittakaavassa sekoitettuun todellisuussääsovellukseen, jossa on kymmeniä tai satoja paikkoja. Suuremman sijaintiluettelon avulla meidän on todennäköisesti siirryttävä 2D-painikepaneelien tuntemuksesta jotain, joka on optimoitu sekoitetun todellisuuden suhteen. Miltä se näyttää? Onko 2D: ssä muita navigointimalleja, jotka muuttaisivat sujuvasti sekoitetun todellisuuden kokemukseen?
  • Millä muilla tavoilla voimme tuoda 3D-kohtausten ilo 2D-kokemukseen? Mitkä ovat välivaiheet 2D: n ja sekoitetun todellisuuden välillä, sekä käyttäjälle että kehittäjälle?

Huuda luova johtaja Ramiro Torres, Oscar Murillo ja peloton joukkue heidän työstään tässä sovelluksessa. Seuraavan kerran lisäämme hain.

Rakastamme yhteisön palautteen kuulemista. Mitä mieltä olet pienestä sääkokeestamme? Mitä muuta haluat nähdä meidän tutkittavan? Mitä olet rakentanut Fluent Design -sovelluksella ja miten se meni? Ota yhteyttä meihin alla olevissa kommenteissa, aloita keskustelu LinkedIn-ryhmässämme tai paina meitä Twitteriin @MicrosoftDesign. En voi odottaa nähdäksesi luomasi.

Pysyäksesi tietävänä Microsoftin suunnittelusta, seuraa meitä Dribbblessa, Twitterissä ja Facebookissa tai liity Windows Insider -ohjelmaan. Ja jos olet kiinnostunut liittymään tiimimme, siirry osoitteeseen aka.ms/DesignCareers.