2014–nykyhetki

Material Design

Designjärjestelmä, ei tyyli. Pinnoilla on fysiikka. Liikkeellä on merkitys.

Periaatteet

Materiaali metaforana

Jokainen pinta Material Designissa on 'materiaalin' arkki — digitaalista paperia joka noudattaa fyysisiä sääntöjä. Sillä on paksuus (1dp). Se heittää varjoja. Sitä voi nostaa, siirtää, jakaa, yhdistää. Tämä ei ole skeuomorfismia (todellisten esineiden jäljittelyä) — se on fysiikkaa sovellettuna abstraktioon.

Metafora antaa käyttäjille intuition: korkeammat pinnat ovat tärkeämpiä. Varjot osoittavat syvyyttä. Liike seuraa hitautta. Sinun ei tarvitse oppia järjestelmää — kehosi tietää jo miten paperi käyttäytyy.

Korkeus hierarkiana

Bauhausissa hierarkia tulee koosta. Swiss Internationalissa lihavuudesta. Material Designissa hierarkia tulee korkeudesta — siitä kuinka korkealla pinta leijuu maatason yllä.

Kortti 2dp:ssä on sisältöä. Dialogi 24dp:ssä on kiireellinen. Navigaatiolaatikko 16dp:ssä on rakenteellinen. Jokaisella elementillä on tietty korkeus, ja tuo korkeus tarkoittaa jotain.

Tarkoituksellinen liike

Mikään Material Designissa ei liiku ilman syytä. Jokainen animaatio viestii: mistä elementti tuli, minne se on menossa, mikä sai sen liikkumaan. Liike ei ole koristelua — se on informaatiota.

Easing-käyrä `cubic-bezier(0.4, 0, 0.2, 1)` on Materialin tunnusomainen — nopea alkamaan, lempeä lopettamaan. Se tuntuu luonnolliselta koska se jäljittelee miten fyysiset objektit hidastuvat.

Systemaattinen väri

Material Design ei valitse värejä tunnelman tai tunteen mukaan. Se generoi ne järjestelmästä: pääväri, toissijainen väri, pintavärit ja virhevärit — kaikki johdettuna algoritmisesti kontrastin, saavutettavuuden ja harmonian varmistamiseksi.

Tämä on ero jokaiseen muuhun tämän sivuston tyyliin. Art Deco valitsee kullan koska se tarkoittaa luksusta. Material valitsee violetin koska algoritmi sanoo että se toimii.

Miksi tämä tyyli on olemassa

Google I/O, kesäkuu 2014. Matías Duarte esittelee Material Designin — ei visuaalisena tyylinä vaan yhtenäisenä designkielenä kaikille Google-tuotteille kaikilla alustoilla. Puhelin, tabletti, työpöytä, kello, auto — yksi järjestelmä.

Kunnianhimo oli ennennäkemätön: yksi designspesifikaatio joka voisi hallita miljoonia käyttöliittymiä tuhansien suunnittelijoiden tekeminä. Ei ohjeita (kuten Applen HIG) vaan järjestelmä — säännöin tarpeeksi täsmällisin koodilla toteutettaviksi.

Where it appeared

  • Android — pääalusta. Jokainen Android-sovellus noudattaa Material-ohjeita
  • Googlen verkkotuotteet — Gmail, Drive, Maps, kaikki uudelleensuunniteltu Materialin alla
  • Material Components — avoimen lähdekoodin UI-kirjastot webille, iOS:lle, Androidille, Flutterille
  • Material You (2021) — dynaaminen väriteemoitus johdettuna käyttäjän taustakuvasta

Legacy

Material Design todisti että designjärjestelmä voi skaalautua miljardeille käyttäjille tuhansien tuotteiden läpi. Se ei ole kaunein järjestelmä — mutta se on systemaattisin. Jokainen päätös on dokumentoitu. Jokainen komponentti on määritelty. Jokainen vuorovaikutus on määritetty.

Sen vaikutus ulottuu Googlea pidemmälle: ajatus että designin tulisi olla järjestelmä (ei yksittäisten päätösten kokoelma) hallitsee nyt jokaisen suuren teknologiayrityksen lähestymistapaa tuotesuunnitteluun. Koko spesifikaatio on saatavilla osoitteessa material.io.

Typografia

Material Design -typografia on Roboto — Googlen oma kirjasin, suunniteltu nimenomaan ruuturenderöintiin. Ei valittu kauneuden tai luonteen vuoksi vaan maksimaalisen selkeyden vuoksi jokaisessa koossa jokaisella ruudulla.

Tyyppiskaala ei ole sattumanvarainen. Se on matemaattinen järjestelmä: 13 esimääriteltyä tyyliä (Display Largesta Label Smalliin), jokaisella tietty koko, lihavuus, rivinkorkeus ja kirjainväli. Suunnittelijat eivät valitse — he valitsevat järjestelmästä.

  • Yksi kirjasinperhe — Roboto (tai brändikohtainen vaihtoehto). Johdonmukaisuus kaikilla pinnoilla.
  • Medium-lihavuus otsikoille — 500, ei 700. Material-otsikot ovat itsevarmoja muttei aggressiivisia.
  • Esimääritelty tyyppiskaala — ei sattumanvaraisia kokoja. Jokainen tekstielementti vastaa nimettyä tyyliä järjestelmässä.
  • Materialin easing kirjainvälistyksessä — tiiviimpi suurissa koissa, väljempi pienissä. Optinen korjaus sisäänrakennettu spesifikaatioon.

Väri

Material Design -väri on algoritmista. Et valitse värejä — valitset siemenvärin, ja järjestelmä generoi koko paletin: pää-, toissijainen, tertiäärinen, pinta-, tausta-, virhe- ja kaikki niiden on-värivariantit.

Tämä on perustavanlaatuisesti erilaista kuin jokainen muu tämän sivuston tyyli. Victorian valitsee mahongin koska se evokoi kirjastoja. Memphis valitsee törmäävät värit energiaan. Material valitsee värit koska matematiikka sanoo että ne toimivat yhdessä.

  • Pääväri — brändi-identiteetti. Käytetään avainkomponentteihin (FAB, aktiivitilat, näkyvät painikkeet).
  • Pintavärit — johdettu pääväristä. Sävytettyjä neutraaleja jotka luovat hienovaraisen brändiläsnäolon ylikuormittamatta.
  • On-värit — teksti-/ikoniväritit jotka on taattu luettaviksi taustaansa vasten. Saavutettavuus ei ole valinnaista — se on laskettu.
  • Korkeussävytys — korkeammat pinnat ovat hieman vaaleampia. Järjestelmä lisää läpinäkyvän pääväripeitteen jokaisella korkeustasolla.
  • HCT-väriavaruus — Material käyttää omaa väriavaruuttaan (Hue, Chroma, Tone) RGB:n tai HSL:n sijaan. 40:n ero sävyssä takaa WCAG 3.0 -kontrastin; 50 takaa 4.5:n. Saavutettavuus on sisäänrakennettu matematiikkaan.
  • Sävypaletti — yhdestä lähdeväristä järjestelmä generoi 13 sävyä (0–100). Nämä sävyt kartoitetaan sitten rooleihin (pääväri, toissijainen, pinta, virhe). Palettia ei suunnitella — se johdetaan.

Muodot

Material Design -muodot ovat luokiteltuja koon mukaan. Pienet komponentit (chipit, painikkeet) saavat pienen pyöristyksen. Keskikokoiset komponentit (kortit, dialogit) saavat keskikokoisen pyöristyksen. Suuret komponentit (arkit, navigaatio) saavat suuren pyöristyksen. Järjestelmä on suhteellinen, ei tasainen.

Tämä eroaa tyyleistä jotka käyttävät yhtä pyöristystä kaikkialla (Glassmorphismin 16px, Nordicin 8px). Materialin pyöristys viestii komponentin tyyppiä.

  • Suhteellinen pyöristys — pyöristys skaalautuu komponentin koon mukaan. Chip (pieni) saa 8px. Kortti (keskikokoinen) saa 12px. Pohja-arkki (suuri) saa 28px.
  • Ei reunoja — Material käyttää korkeutta (varjoa) reunojen sijaan määrittääkseen pinnat. Reunat on varattu tiettyjen komponenttien ääriviivavariantteihin.
  • Varjo rakenteena — varjo ei ole koristeellinen. Se viestii korkeuden, joka viestii tärkeyden ja interaktiivisuuden.
  • Muototeemoitus — pyöristysarvot ovat tokeneita joita voi säätää brändin mukaan. Järjestelmä on joustava sääntöjensä sisällä.

Kontrasti

Material Design -kontrasti on laskettua, ei suunniteltua. Järjestelmä takaa WCAG AA -kontrastisuhteet jokaisen tekstivärin ja sen taustan välillä. Tämä ei ole suunnitteluvalinta — se on spesifikaation valvoma vaatimus.

Korkeus ja varjo

Korkeammat pinnat heittävät suurempia varjoja. Kontrasti kortin (2dp varjo) ja dialogin (24dp varjo) välillä ei ole visuaalinen mieltymys — se on semanttinen. Varjon koko kertoo komponentin tärkeyden ja interaktiivisuuden.

Pääväri ja pinta

Aksenttiväri (#6200EE) neutraalia pintaa (#FFFFFF) vasten. Material takaa että tämä kontrasti täyttää saavutettavuusstandardit. Pääväri on aina luettava sille osoitettua pintaa vasten.

Käytössä ja pois käytöstä

Aktiiviset elementit täydellä peittävyydellä. Pois käytöstä olevat elementit 38 %:n peittävyydellä. Kontrasti tilojen välillä on täsmällinen — ei 'hieman himmeämpi' vaan täsmälleen 38 %. Järjestelmä ei jätä mitään tulkinnalle.

Rytmi

Material Design -rytmi on 8dp:n grid. Jokainen mitta — välistys, koko, sijainti — on 8dp:n kerrannainen. Tämä luo johdonmukaisen visuaalisen rytmin kaikkien komponenttien, kaikkien ruutujen, kaikkien tuotteiden läpi.

8dp:n peruslinja

Marginaalit: 16dp (2×8). Täyte: 16dp tai 24dp (2×8 tai 3×8). Korttiväli: 8dp. Kaikki linjautuu samaan näkymättömään gridiin. Rytmi on matemaattinen, ei intuitiivinen.

Liikkeen rytmi

Animaatiot noudattavat kestosääntöjä: pienet muutokset 100ms, keskikokoiset 250ms, suuret 300ms. Easing on aina sama käyrä. Tämä luo ajallisen rytmin — käyttöliittymä liikkuu johdonmukaisessa tempossa.

Komponenttitiheys

Material tarjoaa kolme tiheystasoa: oletus, mukava, kompakti. Jokainen säätää 8dp:n gridiä suhteellisesti. Rytmi pysyy johdonmukaisena — vain mittakaava muuttuu.

Hierarkia

Material Design -hierarkia on moniulotteista. Ei vain koko (kuten Bauhaus) tai valoisuus (kuten Dark Luxury). Material käyttää korkeutta, väripainotusta, kokoa ja sijaintia samanaikaisesti — mutta jokainen on määritelty, ei improvisoitu.

Korkeus

Ensisijainen hierarkkinen työkalu. FAB 6dp:ssä. Kortti 1dp:ssä. Sovelluspalkki 4dp:ssä. Jokaisella komponentilla on osoitettu korkeus joka viestii sen roolin hierarkiassa.

Väripainotus

Pääväri = korkein painotus. Toissijainen = keskitaso. Pinta = matalin. Värijärjestelmä luo kolme visuaalisen tärkeyden tasoa, jokainen taattu saavutettavaksi.

Typografinen skaala

Display > Headline > Title > Body > Label. Viisi tasoa, jokaisella esimääritelty koko, lihavuus ja välistys. Suunnittelija valitsee sopivan tason — hän ei keksi uusia.

Tila

Material Design -tila on 8dp:n grid tehtynä näkyväksi komponenttien kautta. Tila ei ole tyhjää — se on pintojen välinen etäisyys, mitattuna täsmällisinä 8:n kerrannaisina. 16dp korttien välillä. 24dp sivumarginaalit. 8dp listan kohteiden välillä.

Tämä täsmällisyys on Materialin määrittelevä piirre. Siinä missä Nordic Minimal käyttää tilaa tunteeseen ja Art Deco käyttää tilaa seremoniaan, Material käyttää tilaa johdonmukaisuuteen. Sama välistys jokaisella ruudulla, jokaisessa tuotteessa, jokaisella alustalla.

Valo

Material Designilla on yksi virtuaalinen valonlähde — sijoitettuna ruudun yläosaan, heittäen varjot alaspäin. Tämä ei ole tunnelmallista (kuten Art Decon vinjetti) tai poissa (kuten Bauhausin litteä valo). Se on fyysistä — simuloitu lamppu joka antaa jokaiselle pinnalle johdonmukaisen varjosuunnan.

Valonlähde ei koskaan muutu. Varjot lankeavat aina alas ja hieman oikealle. Tämä johdonmukaisuus on se mikä tekee korkeusjärjestelmästä luettavan — jos varjot osoittaisivat eri suuntiin, syvyysilluusio romahtaisi.

Tunnusomaiset piirteet

Material Design tunnistetaan ei visuaalisista ominaisuuksista vaan systemaattisesta täsmällisyydestä — tunteesta että jokainen pikseli on määritelty, jokainen vuorovaikutus dokumentoitu, jokainen päätös perusteltu.

Spesifikaatio

Material Design on yli 1000-sivuinen spesifikaatio. Jokainen komponentti, jokainen tila, jokainen animaatio, jokainen välistysarvo on dokumentoitu. Tämä ei ole tyyliopas — se on insinööridokumentti. Millään muulla tämän sivuston tyylillä ei ole tätä täsmällisyyden tasoa.

Korkeusjärjestelmä

24 korkeustasoa, 0dp:stä (maa) 24dp:hen (dialogi). Jokaisella tasolla on tietty varjo, tietty käyttötapaus, tietty merkitys. Tämä on Materialin ainutlaatuinen panos: hierarkia fysiikan kautta.

Liikejärjestelmä

Materialin easing-käyrä (0.4, 0, 0.2, 1) esiintyy jokaisessa animaatiossa. Elementit kiihtyvät nopeasti ja hidastuvat lempeästi — jäljitellen miten fyysiset objektit liikkuvat kitkan alla. Tämä yksi käyrä yhdistää tuhansia eri animaatioita.

Järjestelmä, ei tyyli

Material Design ei ole visuaalinen tyyli — se on designjärjestelmä. Ero: tyyli kertoo miltä asiat näyttävät. Järjestelmä kertoo miksi ne näyttävät siltä, milloin käyttää kutakin vaihtoehtoa ja miten laajentaa sitä uusiin tapauksiin. Material on ainoa tämän sivuston kohde joka on järjestelmä eikä tyyli.

Designtokenit

Material 3 järjestää jokaisen arvon tokeneiksi kolmella tasolla: viitetokenit (raaka-arvot kuten 'purple-40'), järjestelmätokenit (semanttiset roolit kuten 'primary') ja komponenttitokenit (tietyt sovellukset kuten 'FAB container color'). Tämä kolmitasoinen arkkitehtuuri mahdollistaa systemaattisen mukauttamisen — muuta yksi viitetoken ja sadat komponenttiarvot päivittyvät automaattisesti.

Miten tämä tyyli rikkoutuu

Material Design rikkoutuu kun suunnittelijat kohtelevat sitä tyylinä joka on tulkittavissa eikä järjestelmänä jota on noudatettava.

Epäjohdonmukainen korkeus

Kortti 4dp:ssä yhdessä paikassa ja 2dp:ssä toisessa — ilman semanttista syytä. Materialin korkeus ei ole koristeellista. Jokainen taso tarkoittaa jotain. Korkeuden käyttäminen 'koska se näyttää nätiltä' rikkoo järjestelmän logiikan.

Mukautetut easing-käyrät

Materialin liikekäyrä ei ole ehdotus. Lineaarisen, ease-inin tai mukautetun bezierin käyttäminen rikkoo ajallisen johdonmukaisuuden. Jokaisen animaation tulisi tuntua siltä että se kuuluu samaan fyysiseen maailmaan.

Koristeellinen väri

Päävärin käyttäminen koristeluun funktion sijaan. Materialissa väri signaloi interaktiivisuutta ja tärkeyttä. Violetti otsikko joka ei ole interaktiivinen sekoittaa järjestelmän semantiikan.

Sen kohteleminen valinnaisena

Material-komponenttien poiminta noudattamatta järjestelmää. Material-korttien käyttö mukautetulla välistyksellä. Material-typografian käyttö mukautetuin värein. Järjestelmä toimii koska se on täydellinen. Osittainen omaksuminen luo epäjohdonmukaisuutta joka on pahempaa kuin ei järjestelmää lainkaan.