Viimeisen 2014 I / O-tapahtuman aikana Google palasi uusiin yllätyksiin. Lisäksi julkisesti julkaistiin uusi Android-päivitys koodinimellä Lollipop, Google esitteli myös tuoreen uuden muotoilukielensä, Material Designin . Se on suunnittelujärjestelmä, joka ei ole tarkoitettu vain uusille Lollipop-käyttöliittymän parannuksille, vaan myös kaikille laitteille ja ympäristöille.
Materiaalisuunnittelussa on joitakin merkittäviä ominaisuuksia, jotka erottavat sen muista suunnittelusuunnitelmista omilla ainutlaatuisilla tavoillaan. Aivan kuten nimensä, se oli innoittamana todellisista materiaaleista ja yhdistänyt ne yhdeksi muotoilujärjestelmäksi, joka loi tyylikkään, intuitiivisen, kauniin ja interaktiivisen käyttäjäkokemuksen. Tässä viestissä tarkastelemme materiaali-suunnittelun sisältöä ja annamme sinulle nopean oppaan siitä, miten se voidaan toteuttaa. Mainitsemalla Googlen blogin sanon: "Tämä on materiaali".
Esittely
Material Design on yhtenäinen suunnittelujärjestelmä, joka tarkoittaa sitä, että se tehtiin kaikkien nykyisten laitteiden ja alustojen kanssa. Tabletista, älypuhelimesta työpöydälle ja Androidista, iO: sta, Windowsista Web-alustoihin. Kaikkien muotoilujen tulee olla samoja, missä se onkin.
Tärkeimmät periaatteet
Materiaalisuunnittelun rakentamisessa on kolme pääperiaatetta. Nämä ovat olennaisinta osaa siitä, mitä Materiaali tarjoaa yleensä.
- Materiaali on metafora . Materiaalin kehittämisen innoittamana käytimme jokapäiväisiä kosketuselementtejä, paperia ja mustetta . Se tekee kohteen valosta, pinnasta ja liikkeistä parempia, kun vuorovaikutuksessa keskenään.
- Lihavoitu, graafinen ja tahallinen . Typografia, ruudukot, tila, mittakaava, väri ja kuvien käyttö, joita käytettiin tulostussuunnittelussa, tekevät materiaalin sisällöstä paremman.
- Motion tarjoaa merkityksen . Tämä on yksi merkittävimmistä asioista. Materiaalissa pitäisi olla mielekäs ja asianmukainen liike, hienovarainen ja selkeä palaute ja tehokas ja johdonmukainen siirtyminen.
Komponentit
Material Design kiinnittää huomiota kaikkiin komponenttien yksityiskohtiin, jotta niitä voidaan käyttää yleisesti. Nämä komponentit auttavat sinua rakentamaan hämmästyttävää sovellusta ja sivustoa. Materiaalissa on niin paljon komponentteja, kuten painikkeet, kytkin, kortti, tekstinsyöttö, fab (kelluva toiminta-painike), valintaikkuna, paahtoleipä, alivalikko, välilehti ja paljon muuta. Jokaisella heillä on oma sääntö ja opas niiden rakentamisesta, joten sinulla ei ole mitään epäolennaisia elementtejä.
Kuviot
Komponenttien lisäksi Materiaali tarjoaa myös joitakin perusmalleja ylimääräiselle käyttöliittymälle. Nämä mallit parantavat materiaalin komponenttien avulla luotua käyttöliittymää. Mallit, mukaan lukien tietomuoto, navigointilaatikko, virheet, eleet, vieritystekniikka, haku, asetukset, kuvien lataaminen, pyyhkäiseminen päivittääksesi ja lisää.
Materiaalisuunnittelun värit
Materiaalin värit olivat olleet muotoiltuja niin, etteivät sinut tunne olosi epämukavaksi, oudoksi ja tasaiseksi. Materiaalisuunnittelu tuo inspiraation päivittäisistä ympäristöistämme, kuten tienviittoja, nykyaikaisesta arkkitehtuurista, jalkakäytävän merkinnänauhasta ja urheilukentistä. On niin paljon väripalettia, joka antaa sinulle enemmän mukavuutta sovellusten tai sivustojen kehittämisessä. Voit myös ladata värilliset mallit paikalliseen käyttöön, kuten Photoshop-kokoelmaan.
Materiaalin kuvake
Jos olet Android-kehittäjä, sinun täytyy tuntea joitakin ilmaisia kuvakkeita, joita Google on toimittanut. Niitä käytetään yleensä vain pääelementissä ja toimintopalkissa. Muiden resurssien kohdalla meidän on etsittävä muita kuvakkeita, kuten kansio, tiedosto, kopiointi ja liittäminen jne. Manuaalisesti. Materiaalisuunnittelussa Google on ratkaissut ongelman, jossa on käytettävissä useita ikonipaketteja .
Jokainen kuvake on käynyt läpi jonkin verran suunnittelumenetelmää, joka käyttää myös kosketusmateriaalien tutkimusta. Ne säilyttävät myös Materiaaliperiaatteen, joka on johdonmukainen. Voit ladata nämä kuvakkeet GitHubiin, jossa on joitakin vaihtoehtoja eri käyttökohteisiin, kuten iOs, web, Android tai svg. Jos haluat laajemman vaihtoehdon helposti räätälöintiä varten, luultavasti haluat nähdä Material Design -kuvakkeet FlatIconissa. Paketin sisällä saat kuvakuvektorin (SVG & EPS), PSD- ja PNG-version.
Materiaalin animaatio
Tämä on materiaalin ominaisuuksia, joista pidän eniten. Materiaalin animaatiot ovat niin todellisia ja intuitiivisia. Jokaisella animaatiolla on merkitykselliset, johdonmukaiset ja oikeat ajoitussiirtymät. Alla näkyväsi gif-demo on vain yksi kauniista Materiaali-animaatiosta. Google-tiimi luo myös vedenkestävän kaltaisen animaation käyttäjälähtöiselle ja reagoivalle vuorovaikutukselle. Sitä käytetään enimmäkseen painikkeilla ja korteilla.
Nämä selittämäni piirteet ovat vain pieni osa materiaalisuunnittelun tarjoamaa. Saat lisätietoja Materiaalimaailmasta vain siirtymällä dokumentointisivulle.
täytäntöönpano
Oletusarvoisesti Material Design tulee uuteen UI-päivitykseen Android Lollipopille. Kaikki ohjeet, joita Materiaali on ollut sen sisällä. Koska Materiaali on suunnattu kaikenlaisiin ympäristöihin, sen toteuttaminen toiseen järjestelmään ei ole vaikeaa. Ja yhteisöjen ansiosta se on vielä helpompaa joidenkin luomien työkalujen avulla.
Nämä ovat useita tapoja, joilla voit saavuttaa aineellisen suunnittelun Androidin, esimerkiksi webin ulkopuolella.
CSS-kehysten käyttö
Tämä on helpoin tapa, jos haluat toteuttaa Materiaalisuunnittelun web-alustalla. Kehysten avulla sinun tarvitsee vain aloittaa se ja kirjoittaa sitten tarvitsemasi elementit. On olemassa monia kehyksiä, joita voit käyttää kuten Materialize, Material UI tai Polymer. Minun henkilökohtainen valintani kuuluu Materialize. Se on helpompi käyttää ja ymmärtää, ja siinä on hienoja asiakirjoja mukavan demon avulla.
Seuraa ohjeita
Jos haluat käyttää materiaalia ilman kehyksen apua ja mieluummin sekoittaa koodit eniten, sinun on noudatettava Materiaalin ohjeita. Siellä löydät kaikki tehtävät ja kiellot, jotka sinun pitäisi huomata, jotta saavutat aineelliset periaatteet. Näet kaikki perusoppaat, joiden avulla voit luoda komponentteja, ulkoasua, animaatioita, värejä, kuvioita ja paljon muuta. Saatat haluta nähdä jonkin materiaalin tarkistuslistan helpomman kehityksen vuoksi.
johtopäätös
Materiaalisuunnittelu on loistava muotoilujärjestelmä ja siitä on tullut yksi vuoden odotetuimmista trendeistä. Seuraavien parin kuukauden aikana voimme nähdä sen kaikkialla. Lisää uusia sovelluksia ja sivustoja kiillotetaan tämän uuden Googlen suunnittelun päivityksen avulla.
Materiaalisuunnittelun ansiosta Google on osoittautunut paremmaksi kuin yksi suurimmista teknologiayrityksistä. Se tekee Googlesta johtajuuden vain hakukoneiden ja mobiilisovellusten alueella, mutta myös suunnittelun alalla. Tähän mennessä ei ole muita yrityksiä, jotka kehittävät tätä suurta asiaa, kuten Google. Mutta kokemus sanoo, se ei kestä kauan. Odota vain, että toinen yritys vastaa Googlen materiaalisuunnitteluun.
