{"id":249503,"date":"2023-01-02T13:31:00","date_gmt":"2023-01-02T10:31:00","guid":{"rendered":"https:\/\/inform.click\/material-designin-tutkiminen-googlen-uusi-kayttoliittymasuunnittelukonsepti\/"},"modified":"2023-01-02T13:31:00","modified_gmt":"2023-01-02T10:31:00","slug":"material-designin-tutkiminen-googlen-uusi-kayttoliittymasuunnittelukonsepti","status":"publish","type":"post","link":"https:\/\/inform.click\/fi\/material-designin-tutkiminen-googlen-uusi-kayttoliittymasuunnittelukonsepti\/","title":{"rendered":"Material Designin tutkiminen: Googlen uusi k\u00e4ytt\u00f6liittym\u00e4suunnittelukonsepti"},"content":{"rendered":"

\n Pari kuukautta sitten Google esitteli 7. vuotuisessa I\/O-kehitt\u00e4j\u00e4konferenssissaan uuden k\u00e4ytt\u00f6liittym\u00e4suunnittelukonseptin nimelt\u00e4 Material Design.\n<\/p>\n

\n T\u00e4st\u00e4 inspiroivasta, eloisasta ja upeasta suunnittelutyylist\u00e4 on tulossa nopeasti suosittu suunnittelijoiden keskuudessa, ja se on todellakin Googlen suuri pyrkimys yhdist\u00e4\u00e4 visuaalinen, liike- ja vuorovaikutusmuotoilu erityyppisill\u00e4 alustoilla ja laitteilla. T\u00e4m\u00e4 sis\u00e4lt\u00f6\u00f6n keskittyv\u00e4 suunnittelukieli tarjoaa k\u00e4ytt\u00e4jille yhten\u00e4isen, leikkis\u00e4n ja intuitiivisen kokemuksen k\u00e4ytt\u00e4m\u00e4ll\u00e4 rohkeaa graafista suunnittelua, koskettavia pintoja ja sujuvaa liikett\u00e4.\n<\/p>\n

\n Material Design luotiin alun perin Androidin L-julkaisua varten, mutta my\u00f6hemmin Google sovelsi sit\u00e4 Docsin<\/a>, Sheetsin<\/a> ja Slidesin<\/a> aloitusn\u00e4yt\u00f6ille. T\u00e4m\u00e4n innoittamana suunnittelijat alkoivat k\u00e4ytt\u00e4\u00e4 materiaalisuunnittelua luomillaan verkkosivustoilla. T\u00e4ss\u00e4 blogikirjoituksessa otan sinut kiertueelle Material Design -konseptiin ja tutkin my\u00f6s, kuinka voit k\u00e4ytt\u00e4\u00e4 sit\u00e4 tulevissa web-suunnitteluprojekteissasi.\n<\/p>\n

\n Aloitetaanpa!\n<\/p>\n

\n Materiaalisuunnittelun perusperiaatteet\n<\/p>\n

\n Materiaalin metafora:
\n<\/h5>\n

\n Materiaalisuunnittelussa painotetaan valtavasti elementtien, animaatioiden ja siirtymien tekemist\u00e4 niin todellisiksi kuin ne n\u00e4ytt\u00e4v\u00e4t todellisessa el\u00e4m\u00e4ss\u00e4. Tutkittuaan intensiivisesti paperia ja mustetta Google-tiimi p\u00e4\u00e4tti k\u00e4ytt\u00e4\u00e4 materiaalimetaforaa rationalisoidun tilan ja liikej\u00e4rjestelm\u00e4n yhten\u00e4isen\u00e4 periaatteena. P\u00e4hkin\u00e4nkuoressa voimme sanoa, ett\u00e4 materiaalisuunnittelu ei ole muuta kuin yhdistelm\u00e4 erilaisia \u200b\u200bklassisia muotoilukonsepteja ja fysikaalisia perusominaisuuksia.\n<\/p>\n

\n K\u00e4sin kosketeltavat pinnat:
\n<\/h5>\n

\n Materiaalisuunnittelussa materiaalin pinnat ja reunat muodostavat fyysisen rakenteen, joka antaa k\u00e4ytt\u00e4jille visuaalisia vihjeit\u00e4, jotka auttavat heit\u00e4 ymm\u00e4rt\u00e4m\u00e4\u00e4n nopeasti, mit\u00e4 he voivat koskettaa ja siirt\u00e4\u00e4. Painosuunnittelun periaatteita hy\u00f6dynt\u00e4en materiaalisuunnittelu pit\u00e4\u00e4 t\u00e4rke\u00e4n sis\u00e4ll\u00f6n k\u00e4ytt\u00e4j\u00e4n silmien edess\u00e4 ja j\u00e4tt\u00e4\u00e4 huomiotta muun v\u00e4hemm\u00e4n hy\u00f6dyllisen sis\u00e4ll\u00f6n. Tuttujen, intuitiivisten ja luonnollisten ominaisuuksien k\u00e4ytt\u00f6 mahdollistaa k\u00e4ytt\u00e4j\u00e4n aivojen ty\u00f6skentelyn v\u00e4hemm\u00e4n ja kykyjen nopean ymm\u00e4rt\u00e4misen.\n<\/p>\n

\n Ulottuvuudet:
\n<\/h5>\n

\n Jos p\u00f6yd\u00e4ll\u00e4si on pino papereita, ne saavat mittaa ja suojaavat varjojaan. Samoin materiaalisuunnittelussa, kun k\u00e4yt\u00e4t t\u00e4t\u00e4 ominaisuutta k\u00e4ytt\u00f6liittym\u00e4ss\u00e4, sinulla on hierarkia ja varjot, jotka kiinnitt\u00e4v\u00e4t k\u00e4ytt\u00e4j\u00e4n huomion t\u00e4rkeimp\u00e4\u00e4n kohteeseen, jonka kanssa h\u00e4nen tulee olla vuorovaikutuksessa. Valon, pinnan ja liikkeen perusteita hy\u00f6dynt\u00e4en materiaalisuunnittelu v\u00e4litt\u00e4\u00e4, miten esine on vuorovaikutuksessa k\u00e4ytt\u00e4jien kanssa. Lis\u00e4ksi realistinen valaistus antaa k\u00e4ytt\u00e4jille realistisimman kuvan suunnittelemastasi k\u00e4ytt\u00f6liittym\u00e4st\u00e4.\n<\/p>\n

\n Yksi mukautuva muotoilu:
\n<\/h5>\n

\n Materiaalisuunnittelussa k\u00e4ytet\u00e4\u00e4n yht\u00e4 taustalla olevaa suunnitteluj\u00e4rjestelm\u00e4\u00e4 tilan ja vuorovaikutusten j\u00e4rjest\u00e4miseen. Yhden adaptiivisen suunnittelun konsepti tuo johdonmukaisuutta eri laitteissa, eli yhten\u00e4inen muotoilu luo erikoistuneita n\u00e4kymi\u00e4 erityyppisille laitteille. Jokainen n\u00e4kym\u00e4 on r\u00e4\u00e4t\u00e4l\u00f6ity ainutlaatuisella tavalla tietylle laitteelle sopivan vuorovaikutuksen ja koon mukaan. Toisaalta hierarkiaan, ikonografiaan, v\u00e4reihin ja tilasuhteisiin ei tehd\u00e4 muutoksia.\n<\/p>\n

\n Rohkea ja tarkoituksellinen sis\u00e4lt\u00f6:
\n<\/h5>\n

\n Toinen asia, jonka huomaat t\u00e4ss\u00e4 uudessa visuaalisessa kieless\u00e4, on sen rohkea muotoilu ja kirkas v\u00e4rimaailma. Jalkak\u00e4yt\u00e4v\u00e4n merkint\u00e4teipin, nykyaikaisen arkkitehtuurin, liikennemerkkien ja urheilukenttien vihjeit\u00e4 hy\u00f6dynt\u00e4en Google on tuonut markkinoille upeita ja eloisia v\u00e4rej\u00e4, joita et olisi osannut odottaa. Lis\u00e4ksi he ovat kehitt\u00e4neet laajasti Roboto-fonttia<\/a> tehden siit\u00e4 hieman leve\u00e4mm\u00e4n ja py\u00f6re\u00e4mm\u00e4n, jotta lukukokemus olisi parempi. Lis\u00e4ksi harkittu valkoinen tila ja reunasta reunaan ulottuvat kuvat luovat selkeytt\u00e4 ja uppoutumista.\n<\/p>\n

\n Korosta toimia:
\n<\/h5>\n

\n Materiaalisuunnittelussa painotetaan paljon k\u00e4ytt\u00e4jien ja pintojen v\u00e4lisen vuorovaikutuksen tekemist\u00e4 digitaalisemmaksi, maagisemmaksi ja reagoivammaksi. T\u00e4ss\u00e4 suunnittelutyyliss\u00e4, kun joku on vuorovaikutuksessa k\u00e4ytt\u00f6liittym\u00e4n kanssa, koko muotoilu muuttuu yll\u00e4tt\u00e4v\u00e4ll\u00e4 tavalla. Graafinen ilmaisu v\u00e4reill\u00e4, pinnalla ja ikonografialla antaa k\u00e4ytt\u00e4jille selke\u00e4n k\u00e4sityksen siit\u00e4, mit\u00e4 esine voi tehd\u00e4, kun taas reagoiva vuorovaikutus rohkaisee k\u00e4ytt\u00e4j\u00e4\u00e4 tutkimaan k\u00e4ytt\u00f6liittym\u00e4\u00e4 syv\u00e4llisesti: jos kosketan t\u00e4t\u00e4, mit\u00e4 tapahtuu? Ja mit\u00e4 tapahtuu seuraavaksi?\n<\/p>\n

\n K\u00e4ytt\u00e4j\u00e4n tekem\u00e4 muutos:
\n<\/h5>\n

\n Kun ihminen koskettaa veden pintaa ja tekee aaltoja, h\u00e4nen toimistaan \u200b\u200bsaatu energia rajapinnan muutosten tekemiseen antaa h\u00e4nelle todellisen ja konkreettisen kokemuksen. Samalla tavalla materiaalisuunnittelun avulla k\u00e4ytt\u00e4j\u00e4t voivat koskettaa k\u00e4ytt\u00f6liittym\u00e4\u00e4 niin kuin todellisessa el\u00e4m\u00e4ss\u00e4\u00e4n. T\u00e4t\u00e4 varten Google suosittelee suunnittelijoiden ottamaan huomioon vuorovaikutuksen lis\u00e4ulottuvuuden, joka on ”liikkeen palaute”, joten k\u00e4ytt\u00e4j\u00e4 voi tuntea, ett\u00e4 pinta kuulee h\u00e4net vieritys-, vet\u00e4m\u00e4ll\u00e4-, liuku- ja napautuksen aikana.\n<\/p>\n

\n Animaatiokoreografia:
\n<\/h5>\n

\n Todellisessa maailmassa jokaisella teolla on liike, alku ja loppu. Kun esimerkiksi avaat laatikon tosiel\u00e4m\u00e4ss\u00e4, naputat sit\u00e4 jonnekin ja n\u00e4yt\u00e4t, mit\u00e4 sis\u00e4ll\u00e4 on. Samoin kaikki materiaalisuunnittelun k\u00e4ytt\u00e4j\u00e4n toimet tapahtuvat yhten\u00e4isess\u00e4 ymp\u00e4rist\u00f6ss\u00e4. Jokainen kohde esitet\u00e4\u00e4n k\u00e4ytt\u00e4j\u00e4lle nopealla, sujuvalla ja jatkuvalla animaatiolla, joka koreografoidaan jaetulla n\u00e4ytt\u00e4m\u00f6ll\u00e4. Kun kaikki materiaalisuunnittelun resurssit siirtyv\u00e4t rytmiin, n\u00e4ytt\u00f6 n\u00e4ytt\u00e4\u00e4 kiehtovammalta ja interaktiivisemmalta kuin koskaan.\n<\/p>\n

\n Merkitt\u00e4v\u00e4 liike:
\n<\/h5>\n

\n Kuten kaikki tied\u00e4mme, Googlelle k\u00e4ytt\u00f6kokemus on t\u00e4rke\u00e4mpi kuin mik\u00e4\u00e4n muu. Sama s\u00e4\u00e4nt\u00f6 koskee viimeist\u00e4 materiaalisuunnittelun periaatetta. T\u00e4m\u00e4 periaate sanoo, ett\u00e4 liikkeen tulee olla asianmukaista, merkityksellist\u00e4 ja huolellisesti koreografoitua, eik\u00e4 sit\u00e4 saa k\u00e4ytt\u00e4\u00e4 vain vaikutuksen tekemiseen k\u00e4ytt\u00e4jiin. Materiaalisuunnittelun liikkeen ei pit\u00e4isi olla vain kaunista, vaan se my\u00f6s rakentaa merkityst\u00e4 toiminnallisuudelle ja tilasuhteille sek\u00e4 s\u00e4ilytt\u00e4\u00e4 saumattoman k\u00e4ytt\u00f6kokemuksen kauneus ja yksinkertaisuus.\n<\/p>\n

\n Material Design for Webin toteuttaminen polymeerill\u00e4
\n<\/h3>\n

\n Etk\u00f6 viel\u00e4 tunne polymeeri\u00e4<\/a>? Hyvin! Polymer on loistava k\u00e4ytt\u00f6liittym\u00e4ty\u00f6kalusarja, jonka avulla voit tuoda materiaalisuunnittelua verkkoon. Polymerin paperielementtien kokoelman<\/a> avulla saat k\u00e4ytt\u00f6\u00f6si kaikki materiaalisuunnittelun ominaisuudet ja voit tuoda konkreettisia, rohkeita grafiikoita sek\u00e4 sujuvat siirtym\u00e4t ja animaatiot sovelluksiisi verkossa. Voit n\u00e4hd\u00e4 polymeeri- ja materiaalisuunnittelukuvioita toiminnassa Topekan<\/a>, hauskan tietokilpailusovelluksen avulla.\n<\/p>\n

\n Nyt aion tutkia Polymerin paperielementtej\u00e4 ja n\u00e4ytt\u00e4\u00e4 sinulle, kuinka voit hy\u00f6dynt\u00e4\u00e4 t\u00e4t\u00e4 uutta suunnitteluparadigmaa verkkoprojekteissasi.\n<\/p>\n

\n P\u00e4\u00e4st\u00e4 alkuun:
\n<\/h5>\n

\n Polymerin aloitusopas<\/a> sis\u00e4lt\u00e4\u00e4 lyhyen opetusohjelman ja aloitusprojektin, joka auttaa sinua tutustumaan Polymerin avaink\u00e4sitteisiin. Ensinn\u00e4kin sinun on ladattava aloitusprojekti<\/a>, joka sis\u00e4lt\u00e4\u00e4 kaikki riippuvuudet ja kirjastot, joita tarvitaan ty\u00f6skentelem\u00e4\u00e4n Polymerin kanssa. Kun olet ladannut aloitusprojektin, pura se jonnekin paikalliselta asemaltasi.\n<\/p>\n

\n Ennen kuin aloitat, tarvitset nopean HTTP-palvelimen k\u00e4ynniss\u00e4. Jos sinulla on jo Python asennettuna, suorita jokin seuraavista komennoista esimerkkiprojektin ylimm\u00e4ll\u00e4 tasolla.\n<\/p>\n

\n Python 2.x:\n<\/p>\n

python -m SimpleHTTPServer<\/code><\/pre>\n
\n  Python 3.x:\n<\/p>\n
python -m http.server<\/code><\/pre>\n
\n  Lataa nyt projektin valmis versio ja testaa verkkopalvelinta. Jos paikallinen palvelin esimerkiksi kuuntelee porttia 8000:\n<\/p>\n
\n  http:\/\/localhost:8000\/finished\/<\/a>\n<\/p>\n
\n  Asenna paperielementit:
\n<\/h5>\n
\n  Sen j\u00e4lkeen sinun on asennettava paperielementit jollakin seuraavista kolmesta tavasta:\n<\/p>\n