Tijdens het laatste I / O-evenement van 2014 kwam Google terug met zijn nieuwe verrassingen. Naast officieel de nieuwe Android-update met codenaam Lollipop, introduceerde Google ook haar frisse nieuwe designtaal Material Design . Het is een ontwerpsysteem dat niet alleen is bedoeld voor de nieuwe verbeteringen in de gebruikersinterface van Lollipop, maar ook voor alle apparaten en omgevingen.
Material Design heeft enkele belangrijke kenmerken die het onderscheiden van andere designtrends met zijn eigen unieke manieren. Net als zijn naam, werd hij geïnspireerd door echte materialen en gecombineerd tot één ontwerpsysteem om een slanke, intuïtieve, mooie en meest interactieve gebruikerservaring te creëren. In dit bericht bekijken we wat zich binnen Material Design bevindt en geven we u een korte handleiding voor het implementeren ervan. Door het citaat van Google's blog ga ik zeggen: "This is Material Design".
Een introductie
Material Design is een uniform ontwerpsysteem, wat betekent dat het is gemaakt om te werken met alle beschikbare apparaten en platforms van vandaag. Van tablet, smartphone tot desktop en van Android, iOs, Windows tot webplatforms. Alle design-looks en -gevoelens moeten overal hetzelfde zijn.
Hoofdprincipes
Er zijn drie hoofdprincipes die Material Design construeren. Dit zijn de meest fundamentele onderdelen van wat Material in het algemeen biedt.
- Materiaal is de metafoor . De ontwikkeling van Material is geïnspireerd op de studie van tactiele elementen die we dagelijks gebruiken, papier en inkt . Het maakt het object licht, het oppervlak en bewegingen zijn beter bij interactie met elkaar.
- Vet, grafisch en opzettelijk . Typografie, rasters, ruimte, schaal, kleur en gebruik van afbeeldingen die zijn gebruikt in de op druk gebaseerde ontwerpgrondslag, maken de inhoud van het materiaal beter.
- Beweging geeft betekenis . Dit is een van de meest bekende dingen. In Materiaal moet je zinvolle en passende beweging, subtiele en duidelijke feedback en een efficiënte en coherente overgang hebben.
De onderdelen
Material Design besteedt aandacht aan elk detail van de componenten zodat ze universeel kunnen worden gebruikt. Deze componenten helpen je bij het bouwen van een geweldige app en site. Er zijn zoveel componenten geleverd door Material zoals knoppen, schakelaar, kaart, tekstinvoer, fab (zwevende actieknop), dialoog, toast, submenu, tabblad en meer. Elk van hen heeft zijn eigen regel en handleiding over hoe ze te bouwen, zodat je geen onbeduidende elementen zult hebben.
Patronen Ding
Naast componenten biedt Material ook enkele basispatronen voor extra gebruikersinterface. Deze patronen verbeteren de gebruikersinterface die u hebt gemaakt met de componenten van Material. De patronen omvatten gegevensformaat, navigatielade, fouten, gebaren, scrolltechniek, zoeken, instellingen, afbeeldingen laden, vegen om te vernieuwen en meer.
Materiaalontwerp Kleuren
De kleuren in Materiaal waren zo ontworpen dat je je niet ongemakkelijk, vreemd en plat zult voelen. Geïnspireerd door onze dagelijkse omgevingen, zoals verkeersborden, hedendaagse architectuur, stoepmarkeringstape en sportvelden, biedt Material Design onverwachte en levendige kleuren. U kunt kiezen uit zoveel kleurenpalet dat u meer gemak krijgt bij het ontwikkelen van apps of sites. U kunt de kleurstalen ook downloaden voor lokaal gebruik zoals voor uw Photoshop-verzameling.
Materiaalsymbool
Als u een Android-ontwikkelaar bent, moet u bekend zijn met enkele gratis pictogrampakketten die Google heeft verstrekt. Ze worden meestal alleen gebruikt voor het hoofdelement en de actiebalk. Voor andere bronnen moeten we andere pictogrammen zoals voor map, bestand, kopiëren en plakken, enz. Handmatig doorzoeken. In Material Design heeft Google het probleem opgelost met een groot aantal pictogrampakketten die u kunt gebruiken.
Elk van de iconen is door een ontwerpaanpak gegaan, die ook de studie van tactiele materialen gebruikt. Ze houden ook het Material-principe aan, dat is consistent. Je kunt deze pictogrammen downloaden op GitHub, ze hebben een optie voor verschillend gebruik, zoals voor iOs, web, Android of svg. Als u een bredere optie voor eenvoudige aanpassing wilt, wilt u waarschijnlijk Material Design-pictogrampakketten op FlatIcon zien. In het pakket krijgt u de pictogramvector (SVG & EPS), PSD en PNG-versie.
De animatie van materiaal
Dit zijn de functies van het materiaal die ik het leukst vind. De animaties in Materiaal zijn zo echt en intuïtief. Elke animatie heeft zinvolle, consistente en juiste timingovergangen. De gif-demo die hieronder wordt getoond, is slechts een van de prachtige materiaalanimatie. Om aantrekkelijke en responsieve interactie te bieden, maakt het Google-team ook waterrimpelingachtige animatie voor gebruikersinvoereffecten. Het wordt meestal gebruikt op knoppen en kaarten.
De functies die ik heb uitgelegd, vormen slechts een klein deel van wat Material Design aanbiedt. Ga naar de documentatiepagina voor meer informatie over Material World.
Implementatie
Standaard wordt Material Design geleverd als de nieuwe gebruikersinterface-update voor Android Lollipop. Alle richtlijnen die Materiaal in het heeft toegepast. Omdat materiaal is bedoeld voor alle soorten omgevingen, zal de implementatie ervan in een ander systeem niet moeilijk zijn. En dankzij de community's is het zelfs nog eenvoudiger met sommige tools die ze hebben gemaakt.
Dit zijn verschillende manieren om Material Design buiten Android, web bijvoorbeeld, te krijgen.
CSS-kaders gebruiken
Dit is de gemakkelijkste manier om Material Design in webplatform te implementeren. Met frameworks, alles wat je hoeft te doen is het initialiseren en dan de elementen schrijven die je nodig hebt. Er zijn veel frameworks die u kunt gebruiken, zoals Materialise, Material UI of Polymer om er maar een paar te noemen. Mijn persoonlijke keuze valt in Materialize. Het is gemakkelijker te gebruiken en te begrijpen en heeft geweldige documentatie met een mooie demo.
Volgt de richtlijnen
Als u materiaal wilt implementeren zonder de hulp van een raamwerk en het liefst met de codes knoeit, moet u de richtlijnen voor materialen volgen. Daar vindt u alle do's en don'ts die u zou moeten opmerken om de Material-principes te bereiken. U ziet de basisgids om componenten, lay-out, animatie, kleur, patronen en meer te maken. Misschien wilt u een Material-checklist zien voor eenvoudiger ontwikkeling.
Conclusie
Materiaalontwerp is een geweldig ontwerpsysteem en is een van de meest geanticipeerde trends van het jaar geworden. In de komende paar maanden kunnen we het overal zien. Meer apps en site worden opgepoetst met de ontwerpupdate van deze nieuwe Google.
En met Material Design heeft Google zijn superioriteit bewezen als een van de grootste technologiebedrijven. Het maakt Google niet alleen toonaangevend op het gebied van zoekmachines en mobiele besturingssystemen, maar ook op het gebied van ontwerpen. Inmiddels zijn er geen andere bedrijven die zoiets als Google hebben ontwikkeld. Maar de ervaring zegt dat het niet lang zal duren. Laten we wachten op andere bedrijven die reageren op Material Design van Google.
