Material Design

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

Material Design (koodnimega Quantum Paper)^[1] 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.^[2]

Ü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.^[3][4][5]

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.^[6][7][8] Material Designi põhieesmärk on luua uus visuaalne keel, mis kombineerib omavahel hea disaini põhimõtted ning tehnilist ja teaduslikku innovatsiooni.^[9]

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.^[10] 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".^[11]

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.^[12]

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.^[13][14][15]

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.^[13][16]

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

Viited

1. "Exclusive: Quantum Paper And Google's Upcoming Effort To Make Consistent UI Simple". Techcrunch. Vaadatud 11. juuni 2014.
2. "Material Design Foundation". Material Design. Google. Vaadatud 29. november 2018.
3. "Google's new 'Material Design' UI coming to Android, Chrome OS and the web". Engadget. Vaadatud 26. juuni 2014.
4. "Google's New, Improved Android Will Deliver A Unified Design Language". Co.Design. Vaadatud 26. juuni 2014.
5. "Google Reveals Details About Android L at Google IO". Anandtech. Vaadatud 26. juuni 2014.
6. Chris Smith (30. juuli 2014). "Google's Material Design is about to change the way we look at the worldwide web". BGR.
7. "We just played with Android's L Developer Preview". Engadget. AOL. Vaadatud 26. juuni 2014.
8. "Google's next big Android redesign is coming in the fall". The Verge. Vox Media. Vaadatud 26. juuni 2014.
9. "Material Design Introduction". Material Design. Google. Vaadatud 29. november 2018.
10. "Polymer paper elements". Google. Originaali arhiivikoopia seisuga 14.02.2015.
11. "Material design with Polymer". Google. Originaali arhiivikoopia seisuga 20.08.2014.
12. "How Google created a custom Material theme". Material Design. Google. Vaadatud 2. oktoober 2018.
13. "Material-UI Installation". Material-UI. Google. Vaadatud 29. november 2018.
14. "Material-UI". Material-UI. Google. Vaadatud 29. november 2018.
15. "Material-UI GitHub Repository". GitHub. GitHub. Vaadatud 29. november 2018.
16. "Material-UI Usage". Material-UI. Google. Vaadatud 29. november 2018.

Välislingid

• Material.io