Material Design

Material Design (koodnimega Quantum Paper) on disainikeel, mille Google töötas välja 2014. aastal. Laiendades "kaardi" motiivi mõtet, mis debüteeris Google Now’s, kasutab Material Design rohkem tabelil põhinevat paigutust, kasutaja tegevustele reageerivaid animatsioone ja üleminekuid, vaba ruumi elementide ümber ning sügavusefekte (nt valgustamine ja varjud). Google kuulutas Material Designi välja 25. juunil 2014 Google I/O konverentsil.

Material Androidi rakendus, mis näitab eri tüüpi nuppe, lüliteid, teavitust ja kerimisriba

Ülevaade

Disainer Matías Duarte on selgitanud: "Erinevalt pärispaberist saab meie digitaalne materjal intelligentselt laieneda ja kuju muuta. Materjalil on füüsilised pinnad ning servad. Äärised ja varjud pakuvad mõistmist sellest, mida on võimalik puudutada." Google märgib, et nende uus disainikeel põhineb paberil ja tindil, kuid selle implementatsioon on teostatud arenenud viisil.

Material Designi on võimalik kasutada kõikides Androidi toetatud versioonides või rakendusliideses (API) tasemega 21 (Android 5.0) ja uuemad. Seda kasutatakse virtuaalselt kõikides Androidi seadmetes, mis on toodetud pärast 2009. aastat. Material Designi laiendatakse lõpuks läbi kõikide Google’i veebi- ja mobiilirakenduste, pakkudes järjepidevat kogemust üle kõikide platvormide ja rakenduste. Google on andnud välja rakendusliideseid (API-sid) kolmanda osapoolte arendajate jaoks, et lisada disainikeelt oma rakendustesse. Material Designi põhieesmärk on luua uus visuaalne keel, mis kombineerib omavahel hea disaini põhimõtted ning tehnilist ja teaduslikku innovatsiooni.

Teostus

2015. aasta seisuga oli uus disainikeel kasutusel enamikus Google’i Androidi mobiilirakendustes, mille hulka kuuluvad Gmail, YouTube, Google Drive, Google Docs, Google Sheets, Google Slides, Google Maps, Google Inbox, Google+, kõik Google Play brändirakendused ning kogu Chrome’i brauseri ja Google Keepi ulatus. Samuti on selle üle võtnud Google Drive’i, Docsi, Sheetsi, Slidesi ja Inboxi töölaua veebiliidesed. Hiljuti hakkas see ilmuma Chrome OSi süsteemiseadetes, failihalduris ja kalkulaatoris. Material Designi veebirakenduste kasutajaliideste kanoonilist implementatsiooni kutsutakse Polymeriks. Selle üks osa on väike vaheteek Polymer, mis pakub veebikomponentide rakendusliidest brauseritele, mis algupäraselt seda standardit ei implementeeri. Teine osa on elementide kataloog, mis sisaldab Material Designi visuaalsete elementide aluseks olevat "paberi elementide kollektsiooni".

2018. aastal disainiti ümber mõned Google’i toodete liidesed, nagu Gmail, Google News, Google Pay ja Google Home. Need kasutavad muudetud ning kohandatud Material Designi versiooni, mida kutsutakse Google Material Theme’iks.

Material-UI

Material-UI on maailma kõige populaarsem Reacti kasutajaliidese raamistik. See on avatud lähtekoodiga projekt, mille raames on realiseeritud Material Designi põhjal Reacti komponendid.

Material-UI on võimalik oma projekti installeerida npm paketi kaudu. Pärast seda on komponentide kasutamine väga lihtne, kuna komponendid töötavad isolatsioonis. Need on end ise toetavad ning sisestavad vaid neid stiile, mida komponendid vajavad oma sisu kuvamiseks, ega sõltu globaalsetest stiilidest.

Järgnev näide kujutab väga lihtsa nupu loomist.

import React from 'react';
import ReactDOM from 'react-dom';
import Button from '@material-ui/core/Button';

function App() {
  return (
    <Button variant="contained" color="primary">
      Hello World
    </Button>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));

Vaata ka

• Androidi tarkvara arendus
• Rakendusliides

Välislingid

• Material.io