Misschien heb je de afgelopen maanden veel gehoord over”Material You”. Dat is de officiële naam van de ontwerptaal van Android 12. Nu de nieuwste versie van Android OS beschikbaar is voor de Pixel-telefoons van Google, is het bedrijf klaar om de bijgewerkte ontwerptaal naar Android-apps van derden te brengen.
Tijdens de Android Dev Summit 2021 eerder deze week, heeft Google heeft het Material Design 3 (technische naam voor Material You), ook bekend als M3, aan ontwikkelaars uitgelegd. Het toonde de nieuwe, op Material You gebaseerde UI-componenten die ontwikkelaars in hun apps kunnen gebruiken. Google heeft de meeste first-party Android-apps al geüpdatet met de nieuwe ontwerptaal.
Google geeft details van Material You UI-componenten aan ontwikkelaars
Onderste navigatiebalk
Beginnend met de onderste navigatiebalk, is deze nu groter dan bij de vorige iteratie, namelijk M2. Google heeft dit jaar de slagschaduw verwijderd en markeert actieve staten met”gevulde pictogrammen en een contrasterende pilvormige”indicator. Inactieve staten worden weergegeven met’omlijnde pictogrammen’.
Advertentie
As 9to5Google opmerkingen, Android-apps die het materiaal dat u opnieuw hebt ontworpen al hebben opgepikt, hebben dit onderdeel overgenomen. Gmail is daar een van, hoewel Google later de hoogte van de navigatiebalk heeft verlaagd tot hetzelfde formaat als in de M2-ontwerptaal. Het rapport suggereert dat Gmail de tekstlabels zou kunnen verwijderen om de hoogte verder te verkleinen.
Navigatierail
Navigatierail, een verticale navigatiebalk voor grote schermen, ondergaat ook een soortgelijke verandering. Actieve toestanden worden nu gemarkeerd met een pilvormige indicator in plaats van gekleurde pictogrammen zoals op M2. Navigatierails kunnen ook een FAB (zwevende actieknop) aan de bovenkant hebben, terwijl de achtergrond afgeronde hoeken kan hebben. Er is nog geen app die dit ontwerp heeft geïmplementeerd.
Advertentie
Bovenste app-balk
Voor de bovenste app-balk biedt Google vier verschillende ontwerpen: gecentreerd, klein, medium en groot. Er is hier ook geen slagschaduw. Google vervangt verder contrasterende kleuren die de bovenste balk scheiden van de inhoud eronder door een”overlay met kleurvulling”.
Advertentie
FAB
Wat FAB’s betreft, schakelt Google over van een cirkelvormig ontwerp tot boxier, met afgeronde hoeken. Er zijn twee soorten FAB’s: klein en groot. De eerste wordt gebruikt bij het bewerken van widgets, terwijl de laatste toepassingen heeft in gebieden waar we meestal grote knoppen zien, zoals het starten van een spraakrecorder of het instellen van een alarm. FAB’s hebben geen tekstlabels, dus ze moeten’functioneel expliciet’zijn, merkt Google op.”FAB zou op het scherm moeten blijven staan wanneer de inhoud scrolt.”
Uitgebreide FAB
Voor een visueel meer prominente knop brengt M3 uitgebreide FAB’s die dezelfde hoogte hebben als gewone FAB’s en een optioneel icoon. Op M2 zijn verlengde FAB’s pilvormig en hebben ze verschillende hoogtes en hoogtes.
Knoppen
Google biedt verschillende pilvormige knopontwerpen aan, waaronder verhoogde, gevulde, gevulde tonale, omlijnde, en tekst. Ze zijn iets groter dan op M2 en hebben meer afgeronde hoeken. Ook zijn knoplabels nu in hoofdletters in plaats van in hoofdletters.
Advertentie
Kaarten
Materiaalontwerp 3 brengt ook drie soorten kaarten: verhoogd, gevuld en omlijnd. De laatste wordt gebruikt door Google Keep. De inhoud in kaarten heeft een”lagere hoogte”en bevat standaard geen schaduw.
Chips
De nieuwe Android-ontwerptaal heeft vier soorten chips: assist, filter, input en suggestie. Het zijn nu allemaal afgeronde rechthoeken. Vroeger waren kleinere chips pilvormig, terwijl grotere een rechthoekige vorm aannamen met afgeronde hoeken. Google heeft ook de actiechips van M2 gescheiden in hulpchips en suggestiechips op M3. Choice-chips zijn nu een’subset van filterchips’.
Advertentie
Dialogen
Ten slotte biedt Material You van Android 12 twee soorten dialogen: standaard en volledig scherm. Google zegt dat de eerste”grotere opvulling zal hebben om rekening te houden met de grotere hoekradius en titelgrootte”. Zoals u kunt zien in de bijgevoegde afbeelding hieronder, wordt dit type dialoogvenster gebruikt door de Recorder-app wanneer u een audiobestand verwijdert.
Advertentie
