Materialdesign, UI enligt Google

I det moderna scenariot, om du vill inkludera rörelse, måste du göra det verkligt och respektera fysikens lagar och funktionaliteten i saker i den verkliga världen. Faktum är att användare är vana att känna rörelse i deras dagliga liv. Detta lockar deras uppmärksamhet och hjälper dem att bättre förstå saker och ting.

20 Grundläggande principer för materialdesignen

Materialdesignen är en uppsättning principer och riktlinjer som styr utformningen av moderna och eleganta användargränssnitt (IU). Detta visuella språk startade av Google 2014 och syftar till att skapa sammanhängande och harmoniska gränssnitt på alla enheter, oavsett operativsystem eller gränssnittet som används.

Materialdesignen är baserad på tre huvudpelare: det fysiska universum, färg och rymd. Varje gränssnittskomponent måste smälta in i detta universum och respektera proportioner och färger som är specifika för varje material. Utrymmen måste också vara väl definierade så att användaren enkelt kan navigera från ett element till ett annat.

Vad är materialdesignen ?

Det är vad ?

Materialdesignen är en uppsättning designregler, skapade av Google 2014. Detta instrument underlättar hanteringen av plattformens komponenter. I själva verket har Google -designers förstått att komponenter måste ha specifika fysiska egenskaper.

Materialdesignen innehåller således direktiv för allt:

• Bredden
• Fart
• Skuggan

• Typografin
• Galler
• Plats
• Färgen
• Skalan
• Avbildning

På detta sätt har användare intrycket av att vara i kontakt med fysiska delar i den verkliga världen.

På samma sätt är materialdesignen inte bara en fråga om att visa designers hur man arbetar med uppträdanden av produkter och tjänster. Det gör det också möjligt för designers att skapa avsiktliga mönster.

Varför välja materialdesignen ?

Liksom de flesta designsystem har materialdesign skapats för att ge en bättre användarupplevelse på olika enheter och plattformar. Målet är att användare har en sammanhängande upplevelse .

Materialdesignen är inte en enkel uppsättning stilriktlinjer. Detta är ett komplett designsystem.

Till skillnad från andra mindre kompletta designsystem kan det hantera designsituationer, med komplexa användningsfall.

På samma sätt är materialdesignen ett ganska flexibelt designbibliotek. I direktiv lämnas en stor del av specificiteterna för implementeringen av designen helt till designern.

Lista över principer för materialdesignen

Princip 1: Bekanta dig med nyckelresurser

Om du vill skaffa specifik kunskap om materialdesignen är den bästa lösningen att konsultera den officiella Google -resursen.

Det uppdateras kontinuerligt och innehåller alla fullständiga och nödvändiga detaljer för utformningen av materialdesign.

Den bästa fördelen angående denna resurs är att den inte bara är begränsad till specifika aspekter i Android. Tvärtom, det täcker hela materialdesignaspekten, i alla projekt som helst applikationen eller på webben.

Det är tillrådligt att bläddra åtminstone de första kapitlen i denna resurs, att kunna bekanta dig med dess grundläggande principer.

Princip 2: Vet vad “material” finns i materialdesignen

Namnmaterialdesignen är långt ifrån ofarlig. Materialdesign är en imitation av den materiella och fysiska världen. Hon är inspirerad av sina strukturer, även från reflektion av ljus och projektion av skuggor. De materiella ytorna uppfinner papperet och bläckstöden.

Faktum är att den centrala idén om principerna för materialdesignen är inriktad på att skapa design, imitera verkliga världsobjekt.

Princip 3: Använd skuggor för att definiera visuella hierarkier

Huvudmaterialdesignverktygen är:

• Kanter
• Ytor
• Belysning
• Realistiska skuggor

Till exempel hjälper skuggorna dig att prioritera de olika elementen för att få en fullständig design.

Princip 4: Använd ljusa färger

Materialdesignen är utan tvekan en design gjord i en minimalistisk strategi. Med andra ord behöver du inte använda många design- och stilverktyg.

En av de få materiella sakerna du kan använda är färgen. Exakt den ljusa färgen. Faktum är att ljusa färger spelar en viktig roll för att förbättra materialdesignen. De uppmärksammar användarna och uppmuntrar dem att interagera med design.

Princip 5: Försumma inte primärfärg och accentfärg

Det bästa sättet att anpassa denna princip till alla typer av design är att välja tre nyanser som kommer att fungera som en huvudpalett, med en färg som kommer att fungera som en accent.

De primära färgerna du väljer kan användas i viktiga element i gränssnittet, inklusive:

• Fälten
• Lådor
• Bakgrunden
• Teckensnitt, etc.

Och färgen på accent är, som namnet antyder, betonar och uppmärksammar ett huvudelement. Kom ihåg att den valda accentfärgen borde vara mer kontrasterande än för primärfärger.

Princip 6: utnyttja vita utrymmen bra

Vita utrymmen spelar en nyckelroll i utformningen av texten och typografin. I verkligheten är White Space ett verktyg för att locka uppmärksamhet, användare och rikta sin uppmärksamhet till ett visst element.

Så tveka inte att:

• Använd stor typografi för huvudtitlar
• Lägg till många vita utrymmen
• Håll tillräckligt med tomt utrymme i din globala design.

Princip 7: Följ den nya trenden för kant-till-kantbilder

Materialdesign är helt anpassade till bilden. Så om du har beslutat att lägga till bilder till din design måste de ha en huvudroll.

Bilderna som ingår i materialdesignen måste följa kant-till-kantläget. Det vill säga, det får inte finnas marginaler, som skiljer kanten på en bild från fönsterkanten eller skärmen.

Princip 8: Allt måste vara reaktivt

Gör saker tillgängliga och användbara på varje enhet, oavsett storlek på skärmen, är en av de grundläggande principerna för materialdesignen. Målet är att erbjuda en sammanhängande upplevelse. På detta sätt kommer användaren inte att känna sig förvirrad under övergången från en enhet till en annan, eftersom han inte kommer att få ett nytt gränssnitt varje gång han ändrar enheten.

I detta fall måste designen vara reaktiv. Lyckligtvis, tack vare avancerade ramar, är hälften av ditt arbete redan gjort. Följaktligen kommer skapandet av en reaktiv design inte att vara en svår uppgift för dig.

Princip 9: dimensioner

På webben används Z -axeln för superposition och inte för utsikterna. Å andra sidan är 3D -världen baserad på y -axeln.

Designmaterialet använder huvudsakligen 3D så Y -axeln. Titta bara på Googles design för att märka det isometriska perspektivet. Detta sätt att design är inspirerad av den verkliga världen, därav namnet “Material”.

Princip 10: Kom ihåg att framgång är i detalj

I materialdesignen måste allt vara enkelt. Det bästa exemplet kan vara den skeuomorfa designen . Denna teknik syftar till att imitera verkliga objekt under utformningen av virtuella objekt. Du måste därför se till att varje element i din design ser så mycket som möjligt till saker i det verkliga livet.

Princip 11: Rörelsen måste ha en betydelse

Enligt Google ger rörelse mening till en design. När du arbetar med materialdesignen är rörelse en komponent som måste inkluderas.

I materialdesignen måste rörelsen ha dessa tre egenskaper:

1. Vara informativ: det måste vara känt för användare var och när åtgärden var tillgänglig.
2. Hjälpa till att koncentrera och vägleda användare till de viktigaste delarna av sidan.
3. Vara uttrycksfull och lägg till lite personlighet och dynamik i gränssnittet.

Princip 12: Rörelsen måste vara äkta

I det moderna scenariot, om du vill inkludera rörelse, måste du göra det verkligt och respektera fysikens lagar och funktionaliteten i saker i den verkliga världen. Faktum är att användare är vana att känna rörelse i deras dagliga liv. Detta lockar deras uppmärksamhet och hjälper dem att bättre förstå saker och ting.

Det är därför Google har reserverat ett separat avsnitt av direktiven om materialdesign, för att detaljera begreppet autentisk rörelse.

Princip 13: Acceleration och avmattning i rörelser

Du måste erbjuda en tydlig och praktisk övergång för användare. Rörelseprocessen måste vara trolig och realistisk, eftersom materialdesignen syftar till reproduktionen av verkliga fenomen.

Formgivare måste hitta den bästa tiden för varje objektrörelse.

Å ena sidan kan en överdriven långsamhet av elementen distrahera användare och till och med ha en negativ inverkan på användarnas flöde. Å andra sidan kan alltför dynamiska rörelser störa internetanvändare.

I det här fallet måste du vara i rätt mitt, säkerställa en optimal varaktighet och en bra läsbarhet av animationerna. Det är nödvändigt att ge användare tillräckligt med tid så att de kan märka ändringarna. Men få dem inte att vänta. Forskning bevisar att 200 till 500 ms är de bästa animationshastigheterna.

Princip 14: Dra fördel av ikonanimationer

Ibland kan ikoner skapas med kontextknappar med en cirkulär uppenbarelseffekt.

Det är sant att internetanvändare inte ofta märker dessa detaljer, men de är viktiga för att skapa ett positivt inflytande på den globala användarupplevelsen.

Princip 15: Skapa olika tidpunkter för olika rörelser

De animerade objekten som visas en efter en, är mer intressanta och mer levande. Ett sådant tillvägagångssätt erbjuder användare möjligheten att titta på varje objekt.

Å andra sidan, presentera alla elementen på sidan samtidigt förvirrar användare, eftersom de inte vet var de ska titta.

Materialdesign, UI enligt Google !

Materialdesignen är ett visuellt och interaktivt språk som skapas av Google. Men det är också en guide för att designa ett grafiskt gränssnitt (designsystem). Denna design är “material” eftersom den är inspirerad av riktiga föremål, papper och bläck vad, det skiljer sig från platt design. Google använde materialdesign för att förena den grafiska stilen för dess applikationer och plattformar. Dess gränssnitt har därför fördelen att vara mycket lämplig för användning för alla enheter och alla visningsupplösningar. Hon är också överkomlig. Materialdesignen skulle optimera UX, samtidigt som de erbjuder resurser till utvecklare och gränssnittsdesigners. Som med alla grafiska strömmar har den sina amatörer och motståndare.

Materialdesign är framför allt en metafor. En materiell metafor som en förenande teori om ett rationaliserat utrymme och ett rörelsesystem. Materialet är förankrat i taktil verklighet, inspirerad av studien av papper och bläck, men tekniskt avancerat och öppet för fantasi och magi.

Vad är materialdesignen ?

Namnet “materialdesign” motsvarar en uppsättning av Designregler föreslagen av Google. Det översätts ibland av “Material Design” eller “Contextual Design”. Det var först en design avsedd för mobilapplikationer (mobil först). Han blev sedan en av de viktigaste trenderna inom gränssnittsdesign. Googles tillvägagångssätt påminner om Platt design (eller platt design): minimalism, geometriska former och färgglada, utan överflödigt (till skillnad från skeuomorfism). Men i det här fallet är det en platt design … med tjocklek och lättnad. Här är verkligen de viktigaste egenskaperna:

• En liknelse papper och bläck från digital utrustning.
• En djärv design och Diagram.
• Skapelsen av rörelser För att förbättra priset och UX. Användarens åtgärder orsakar betydande mikrointeraktioner.

Polymerbiblioteket

För att använda de grafiska elementen i materialdesignen (papperselement) och grundläggande komponenter (kärnelement) har Google skapat sitt bibliotek, polymer, avsett för webbapplikationsutvecklare. Sedan dess har Google erbjudit olika webbplatser och verktyg för att hjälpa designers att designa med denna designstil.

Se denna deklaration i form av “manifest”, som finns i införandet av materialreferensplatsen.Io:

“Vi utmanade oss att skapa visuellt språk för våra användare som syntetiserar de klassiska principerna för god design, innovativa och möjligheterna som erbjuds av teknik och vetenskap. Vi kallar det: Materialdesign.»

Webdesign enligt Google

Materialdesignen skiljer sig därför från platt design. Det är en ny typ av webbdesign. Vi kan säga att han är en Lyhörd webbdesign (Auto Adaptive) centrerad på användarupplevelsen. Målet är att få en design:

• Intuitiv För alla användare (inklusive inte erfarna)
• Lämplig för alla stöd (dator, surfplatta, smartphone etc.)
• Interaktiv Tack vare dynamiska animationer.
• Homogen mellan alla gränssnitt

Enligt Google använder denna design tekniska och vetenskapliga möjligheter för att tillhandahålla webblösningar på samtida ergonomi och designproblem. I videon nedan uttrycker Googles designers sina första motivationer, hur de arbetade och de “fysiska” upplevelserna genomförda. Vi noterar att om detta designspråk är förankrat i verklighet, lämnar det en viktig plats för användarens fantasi. Termen “magi” återvänder ofta om materialdesignen.

Omdesign Google

För att fullt ut förstå Googles tillvägagångssätt måste du gå tillbaka till Googles ursprung och vikten som företaget Montain View attackerade design. Tja inte så mycket … enligt initiativtagarna till materialdesignen.

Att se den här videon ger oss en god uppfattning om vikten av att bära en “vision” för att genomföra detta projekt: omdesign Google.

Varför materialdesignen ?

Synlig i version 5.0 av Android presenterades materialdesignen för första gången den 25 juni 2014 av Matias Durate, chef för Android -användarupplevelsen på Google. Det var som en del av Google I/O -konferensen. Med denna nya designstadga skapade Google sin egen visuellt språk, identifierbar oavsett tjänst eller produkten, från mobilapplikationer till anslutna objekt.

Matias Duarte ställde ut metaforen för papper (Android / Material) 2014 2014).

Titta på den här videon för att fira första årsdagen till denna designmetod. Det var en efter lanseringen, i maj 2015. Matias Dotate tar en retrospektiv titt på det senaste året och kunde redan uppskatta med vilka entusiasmdesigners, men också utvecklare, hade anslagit de principer som presenterades ett år tidigare.

För eller mot materialdesignen ?

Denna design var också utformad för att berika användarupplevelsen Och effektiviteten hos gränssnittet (nya teckensnitt som är läsbara på flera språk, bättre priser …) Ett år senare avslöjade Google bland annat materialdesignlitpaketet för webbprojekt (ladda ner satsen här).

Materialdesignen har väckt olika reaktioner. Vissa godkände denna “förbättring” av en platt design som anses förenklad och tråkig. Det är verkligen en “vätska” och rörlig design. Strukturera gränssnittet i kompositionen, gränssnittet. Utrymmen, inriktning och färger är viktiga i designfasen. Alla dessa element prioriterar innehållet och underlättar användarens navigering. Animationer, baserat på fysikens lagar, försäkrar användaren om resultatet av hans handlingar.

Men för andra försöker Google att införa dess grafisk stil, Med risken att begränsa kreativiteten hos designers/grafiska designers. Alla webbplatser skulle då börja se ut som Android -applikationer, till nackdel för Kvaliteten på användarupplevelsen.

Hur det fungerar ? Applikation med Android

Vi måste komma ihåg att det här är “materiella element”. Således är det omöjligt att korsa ett element. Endast den användar påverkade komponenten kommer att reagera. I materialdesignenMiljö är 3D. Varje objekt, eller “material”, har 3 koordinater: x, y, z. Z -axeln avser höjningen av objektet. Vi kan besluta om höjningen av objektet, dess dimensioner och de skadade skuggorna, men tjockleken förblir den för ett pappersark. Det senare kan inte böjas. Å andra sidan rör sig den på alla axlar.

Android tillhandahåller tre teman (mörkt eller lätt material tema, lätt material tema med mörk actionbar) som ska implementeras direkt i applikationen genom att ändra, om du vill, några av attributen. DE underhållning Applicera på objekt/element i gränssnittet är två: Tween -animationen (för övergångar, till exempel genom att rotera på bilden) och ramanimationen (visning av flera bilder). Loadanimationen gör att du kan ladda dem och startanimationen av att aktivera dem/lansera dem.

Exempel på materialdesigngränssnitt

Teoretiska förklaringar – metaforen för intelligent papper som kommer levande och interagerar med användaren – kan verka otydligt. Men observera gränssnitt konkret underlättar att förstå begreppet Google.

Se källorna på Uplabs (berättelser.uplabs.com)

En annan källa, rik på exempel: Material Design Blog

Materialdesignikoner

Detta designsystem var tvungen att producera sina egna ikoner. Ett stort bibliotek finns tillgängligt på olika källor och sparar betydande tid för UI -designers när du känner till komplexiteten i en design av homogena sammanhängande ikoner.

Läs om våra artiklar till detta ämne:

Se Github -guiden för användning av dessa ikoner i olika miljöer.

Andra materiella ikoner (för att ladda ner här)

Du kan ladda ner här många materialdesignikoner

En annan källa till materialdesignikoner att ladda ner här

Stora urval av materiella ikoner i platt design som ska användas på dina projekt, men också guider för att använda dem (här)

Vissa källor och inspiration

• Referensen på materialdesignen: Material.io
  • Rörelse
  • Stil
  • Layout
  • Komponent
  • Mönster
  • Tillväxt och kommunikation
  • Användbarhet
  • Plattformar
  • På Google Design -webbplatsen hittar du fallstudier och praktiska guider (många resurser och möjlighet att prenumerera på ett mycket rikt nyhetsbrev)

  Slutsats

  Googles materialdesign drar nytta av Enkelhet med platt design. Gränssnittet är förfinat och visuellt balanserat. Som platt design uppfyller det kraven på Responsiv design. Men där platt design ofta kritiseras för dess brist på priser, Google ärlig En del av skeuomorfism vid en hög abstraktionsnivå. Således förbättrar den intelligenta användningen av animationer, typografiska val och pappersmetaforen användarupplevelsen. Omfattningen av de grafiska elementen som erbjuds till utvecklare gör det också möjligt att förstå hur Android -materialdesignen har erövrat webben … med risken att vara invasiv. Naturligtvis, som med varje designtrend, beror valet att använda denna typ av design på riktade användare och affärsmål/varumärke. Till designern/designern att bestämma om han måste följa helt Stadga, Att inspireras av det eller vända bort.

  • Google Material Design, en designformalisering
  • Vad är servicedesign ?
  • Vad är designtänkande ?
  • Vad är priset ?
  • Vad är platt design ?
  • Vad är skeuomorfism ?
  • Definition av känslomässig design, platsen för känslor i design

  Se våra tjänster:

  • Vår utbildning för att designa en systemdesign
  • Vår 2 -dagars Thinkingen Design Training.