11. mart 2015. u 17:08

Dizajn materijala: do mjeseca i nazad

• Redmadrobot blog,
• razvoj mobilnih aplikacija,
• Android razvoj

• tutorial

„Da li je ovaj turobni dijaloški okvir zaista neophodan?“

U ovom članku iznio sam glavne principe dizajna materijala i dao savjete kako ih implementirati. Tekst je napisan na tragu majstorske klase za programere, koju smo mi, Roboti, dogovorili zajedno sa ruskom kancelarijom Google-a (Think Mobile).

Nekada su svi Google proizvodi izgledali loše na različite načine. Čak je i jedan proizvod na različitim platformama izgledao nedosljedno.

Sve se počelo mijenjati 2011. godine, kada je Google počeo vrijedno raditi na objedinjavanju vizualnog dijela ekosistema svojih proizvoda i nazvao ga Project Kennedy.

Šta je s Kennedyjem?

Legenda je sledeća: predsednik Kenedi je pokrenuo program leta sa ljudskom posadom na Mesec (ako verujemo da se ovaj let ikada dogodio). A veliki šef u Googleu, Larry Page, ispovijeda princip da nema smisla poboljšavati proizvode za 10% – oni bi trebali biti 10 puta bolji od konkurencije. Ako lansiramo proizvod, onda odmah na mjesec. I ovdje je odlučeno da se sve prepravi cool.

Rezultat je prvenstveno uticao na web, ali i na neke mobilne proizvode. Istovremeno, postojao je poseban rad na dizajnu Androida - Holo, koji je zamijenio ne baš estetski ugodna sučelja starog Androida.
Ali postojao je jedan problem: Holo se i dalje razlikovao od projekta Kennedy.


Korisnici su morali da se prilagode novom interfejsu prilikom prebacivanja, naviknu na izgled, raspored kontrola itd.
Tako se u jednom trenutku grupa dizajnera iz različitih kutaka Google-a okupila i počela da se bori oko ovog problema kako bi ga jednom zauvijek riješila.

2014. godine na I/O konferenciji predstavljen je novi sistem dizajna, pristup koji je nazvan Material Design. Novi sistem dizajna vam omogućava da kreirate konzistentno korisničko iskustvo na svim ekranima: desktop, pametni telefon, tableti, satovi, televizori, automobili. Za Android aplikacije, Material Design je evolucija Holo vizuelnog jezika i smjernica za dizajn. Na mnogo načina, to je fleksibilniji sistem koji je dizajniran imajući na umu druge dizajnere - Google je bio tek prvi korisnik.

Materijalni dizajn omogućava objektivniji pristup donošenju dizajnerskih odluka: kako nešto izgleda, kako nešto funkcionira, kako se izvodi animacija itd. Postavlja razumna ograničenja, ali ne i pretjerana ograničenja.

4 Principa dizajna materijala

Dizajn materijala zasniva se na četiri glavna principa:

1. taktilne površine. U Material Design-u, interfejs se sastoji od opipljivih slojeva takozvanog "digitalnog papira". Ovi slojevi se nalaze na različitim visinama i bacaju senke jedan na drugi, što korisnicima pomaže da bolje razumeju anatomiju interfejsa i način interakcije sa njim.
2. Dizajn štampe. Ako o slojevima razmišljate kao o komadima "digitalnog papira", onda kada je u pitanju "digitalno mastilo" (sve što je prikazano na "digitalnom papiru"), pristup je preuzet iz tradicionalnog grafičkog dizajna: na primjer, časopis i poster.
3. Promišljena animacija. U stvarnom svijetu, objekti se ne pojavljuju niotkuda i ne nestaju niotkuda - to se dešava samo u filmovima. Zato u Material Design-u uvijek razmišljamo o tome kako koristiti animacije u slojevima i digitalno mastilo da bismo korisnicima dali nagoveštaje o tome kako radi interfejs.
4. Adaptivni dizajn. Radi se o tome kako primjenjujemo prethodna tri koncepta na različitim uređajima s različitim rezolucijama i veličinama ekrana.

Dakle, krenimo redom.

Taktilne površine

Počnimo s taktilnim površinama. To su upravo oni komadi "digitalnog papira", koji za razliku od običnog papira imaju supermoći - mogu se rastezati, spajati i mijenjati oblik. Inače se ponašaju u potpunosti u skladu sa zakonima fizike i zakonodavstvom Ruske Federacije.

Površina

Šta je površina? U suštini to je "kontejner" sa sjenom i ničim drugim. Ali to je sasvim dovoljno da se jedan objekt razlikuje od drugog i pokaže kako se nalaze jedan u odnosu na drugi. Filozofija materijalnog dizajna teži jednostavnosti i čistom dizajnu.

Nema potrebe ići predaleko i koristiti teksturu, preklapajuće gradijente za predstavljanje chiaroscuro. Nema potrebe da dajete vizuelna svojstva koži poput bakinih vrata u stan - uredna senka može mnogo toga da izrazi. Ali svaka površina ima svoju visinu - lokaciju na osi Z. I svaka od površina baca sjenu na dno, baš kao u stvarnom svijetu.

Dubina

Tradicionalni "ravni dizajn" izbjegava takve sjene kao bilo koju manifestaciju volumena, ali oni obavljaju važnu funkciju označavanja strukture i hijerarhije elemenata na ekranu. Na primjer, ako je visina elementa veća, tada je i njegova sjena veća. Ova povećana dubina pomaže da se usredsredi pažnja korisnika na kritične stvari i uradi to graciozno.

Dubina takođe daje naznake o interakciji. Ovdje, dok korisnik skroluje, zelena tačka se lijepi za gornji sloj i dodaje se sjena. Ovo pokazuje da se ne samo da se "mastilo" kreće, već je bela pozadina ispod i da se pomera u potpunosti.

Važno je napomenuti da dubina ima „dno“. Pretpostavlja se da je ograničen debljinom samog mobilnog uređaja. Odnosno, ako je na pametnom telefonu centimetar od stakla do zadnjeg zida, a u sučelju imate kreditnu karticu, onda je ne možete samo preokrenuti - naslonit će se na staklo i stražnji zid.

NB!

1. Dubina mora imati smisla. Postavite sebi pitanje: "Zašto je ovo, a ne drugačije?" Ako je odgovor ne, ima smisla tražiti drugo rješenje.
2. Vodite računa o logistici. Plutajuća dugmad, trake sa alatkama i dijaloški okviri su na određenoj visini. Ponekad se moraju kretati po z-osi kako bi izbjegli sudare kada se nešto dogodi. Sa ovom koreografijom morate biti izuzetno oprezni.
3. Nema potrebe da silom pritiskate dugme. Plutajuće dugme je vrlo karakterističan element. Mnogi ljudi misle da ga vrijedi dodati u interfejs: on odmah postaje Material Design. Ali treba ga koristiti samo za ključnu radnju u vašoj aplikaciji. Ako trebate zatvoriti prozor ili potvrditi radnju, onda ne morate koristiti plutajuće dugme. Za to postoje i drugi elementi.
4. Ne mora sve biti na kartici. Ako objekt ima mnogo oblika i sadrži mnogo različitih sadržaja, tada je kartica prikladna. A ako ne, onda je možda bolje to učiniti s običnim tekstom ili spiskom teksta?
5. Da li je ovaj turobni dijaloški okvir zaista potreban? Google dizajneri su pokušali da poboljšaju dijaloške okvire, ali donji listovi su i dalje prikladniji za većinu zadataka. Tu su i Snackbarovi. Dijaloški okviri su potrebni samo za postavljanje pitanja korisniku.
6. Koristite proširenje liste. Ovo je potcijenjen obrazac, ali je prilično Materijal i dobro rješava problem.

Dizajn štampe

Budući da površine nazivamo digitalnim papirom u Material Design-u, sve što se na njih stavi - tekst, slike, piktogrami - nanosi se "digitalnim mastilom". A Material Design koristi klasične principe print dizajna u dizajnu interfejsa.

Graciozna tipografija

Tipografija igra vitalnu ulogu u dizajnu štampe. Uzmite bilo koji časopis i primijetit ćete da tipografija tamo služi dvije važne funkcije. Prvo, izbor i kompozicija fonta je element koji oblikuje stil brenda publikacije. Drugo, tipografija postavlja strukturu sadržaja.


Na ovom ekranu ima dosta teksta. Ali ako odbacite ikone i pretvorite tekst u sive blokove, postaje očito da je struktura prilično prepoznatljiva.

Pred nama je veliko zaglavlje i skup manjih elemenata koji se razlikuju po svojoj zasićenosti - važniji su tamniji. Istovremeno, jasno razlikujemo grupisanje zbog činjenice da se neki pravokutnici nalaze blizu, a između blokova postoji značajna uvlaka. Općenito, sve je u najboljoj tradiciji!

Veličina slova

Stranica google.com/design/spec ima standardnu ​​paletu fontova koju možete bezbedno koristiti. Paleta koristi Roboto font, ali se može zamijeniti vlastitim korporativnim fontom kako bi podržao brend. Važno je sve pažljivo testirati, jer renderiranje fontova može raditi drugačije na različitim uređajima. Obično OTF fontovi rade bolje od TTF fontova.

Kontrastna tipografija

Još jedan princip iz svijeta grafičke umjetnosti koji dobro funkcionira u dizajnu materijala je kontrastna tipografija - zaista primjetan kontrast između veličine fonta zaglavlja i pisanja teksta. Prelijepo je i dobro ističe ono glavno.

Modularna mreža i vodilice

Sada na lokaciju sadržaja na ekranu. U dizajnu štampe koriste se modularne mreže, u dizajnu ekrana to su osnovne mreže sa vrlo malim modulima. Dakle, u dizajnu materijala koristi se mreža sa korakom od 8 dp. DP je piksel neovisan o gustoći, jedinica koja je slična tački u iOS-u.

Ali glavna karakteristika postavljanja sadržaja u skladu s principima materijalnog dizajna je lokacija ključnih vodiča. Oni postavljaju margine od ivica ekrana, strukturiraju informacije i kontrolišu pogled korisnika. Ako ste upoznati sa dizajnom publikacija na više stranica ili ste čitali Tschicholda, onda vjerojatno znate mnogo o mreži i marginama i razumijete odakle noge rastu.

Zapravo, vidimo stupac teksta u sredini i veliko polje na lijevoj strani, što omogućava fokusiranje na glavni sadržaj, a davanje pomoćnih elemenata na marginama.

geometrijske ikonografije

Kada je u pitanju ikonografija, jednostavne ikone su prisutne u Androidu već neko vrijeme, ali Material Design ih je učinio još jednostavnijim i prijateljskim. Na neslužbenom resursu materialdesignicons.com, dizajneri mogu pronaći piktograme za svoje potrebe i dati svoj doprinos gdje je to moguće.

Boja

Kao iu dizajnu štampe, boja je važno sredstvo izražavanja u dizajnu interfejsa. U starom Androidu boja je bila nešto ekstra, ali sada igra značajniju ulogu. U Material Design-u, zadana paleta boja aplikacije sastoji se od primarne i akcentne boje.

Glavni se koristi za velika područja kao što je traka sa radnjama, a statusna traka je obojena u tamnijoj varijanti. Svjetlija akcentna boja se tačno koristi u kontrolama, dugmadima, trakama, indikatorima i tako dalje. Boja akcenta je dizajnirana da skrene pažnju korisnika na ključne elemente kao što je plutajuće dugme.

Koliko boje nanijeti? Naglasak je stavljen tačkasto, u maloj količini. Postoji jednostavno osnovno pravilo za bojenje ostatka interfejsa. Kada ima puno teksta, kao što je lista e-pošte, vrijedno je zadržati traku aplikacije standardne veličine i obojiti je kako bi se korisniku omogućilo da se fokusira na sadržaj. Ako nema puno sadržaja, na primjer, detaljan prikaz pojedinog elementa, fotografije ili kalkulatora, onda je ovo odlična prilika za korištenje velikih kockica u boji - 2x ili 3x visine trake aplikacije.

Android podržava biblioteku pod nazivom Palette koja vam omogućava da izvučete boju iz fotografija. Odnosno, moguće je dinamički slikati interfejs na osnovu foto ilustracija u aplikaciji.

Napravili smo fotografiju, a algoritam je iz nje izdvojio 6 boja sa različitim karakteristikama:
- postoje 3 sočne i 3 prigušene boje;
- dijele se na svijetle, standardne i tamne tonove;
- za svaku boju pozadine definira se vlastita boja teksta, koja se također može koristiti.

Lijepe slike

Konačno, baš kao i print dizajn, materijalni dizajn ohrabruje korištenje fotografije i ilustracija u potpunosti. Slike se uglavnom postavljaju bez okvira, često "kroz". Čak je i statusna traka posebno napravljena transparentno da ne smeta. I svaka kap "digitalnog mastila" na ekranu ima funkciju, gotovo ništa nije samo za dekoraciju.

NB!

1. Brend sa zadovoljstvom. Google je u boljoj poziciji da koristi svijetle boje kao brendiranje, ali to ne treba shvatiti kao problem. Boje se mogu birati iz korporativnog brend booka, a logotip se može koristiti općenito.
2. Ne zaboravite uvlake i "ajmo malo zraka". Osnovna mreža od 8dp i lijevi padding od 72dp je praktično pravilo. Neka sadržaj bude dobar i besplatan.
3. Izražajne fotografije čine vrijeme. Fotografije i ilustracije kao izražajna sredstva su naš izbor.

Smislena animacija

U stvarnom svijetu, objekti se ne mogu jednostavno pojaviti niotkuda ili nestati u nigdje. Ovo bi zbunilo i zbunilo ljude. Stoga se u dizajnu materijala koristi smislena animacija da pokaže šta se upravo dogodilo.

Primjer 1 Animacija pokazuje da je ova kartica nakon klika došla do izražaja, otvorila se i više informacija postalo vidljivo.

Primjer 2 Događaj u kalendaru nakon pritiska silazi s površine, pretvara se u poseban sloj „papira“, počinje se transformirati i otkriva se u obliku detaljnih informacija o događaju.

Zanimljiva stvar je da aktivno kretanje privlači oko - to je prirodno za naš vid. Uz pomoć animacije kontrolišemo pažnju korisnika.

Asimetrija

Budući da je dubina interfejsa ograničena debljinom uređaja, sve transformacije objekata moraju se raditi u ravni. Ovo također uzrokuje da animacija transformacije bude asimetrična – to jest, promjena širine i visine objekta mora biti nezavisna. U suprotnom, postoji iluzija približavanja ili udaljavanja od posmatrača, i to na veoma velikoj udaljenosti.

Reakcija

Još jedan vrlo važan princip animacije u dizajnu materijala je reakcija na radnje korisnika. Gdje je moguće, dodirivanje ekrana uređaja treba biti epicentar promjena u interfejsu. Na primjer, talas koji se pojavljuje i ide od tačke dodira prstom. Ovaj efekat je implementiran bez problema u Android L.

mikroanimacije

U Androidu L možemo animirati svaki element aplikacije, bilo da se radi o prijelazima između sadržaja ili ikonama malih akcija. Svaki detalj aplikacije bitan je, a mikroanimacije aplikaciji dodaju više detalja i odziva za svaku radnju korisnika.

Jasnoća i oštrina

I posljednji, ključni princip animacije: pokret treba biti brz i jasan. Za razliku od banalnog ubrzanja na početku i usporavanja na kraju, kriva animacije u Material Designu je prirodnija i zanimljivija. Objekti brže reaguju i dostignu ciljno stanje, vraćaju se oštrije, ali treba malo duže da se na kraju odmore. Kao rezultat, korisnik mora manje čekati (ovo je manje neugodno). Istovremeno, tamo gdje je objekt već izašao iz sfere interesa korisnika, dozvoljava sebi da se ponaša prirodnije.

NB!

1. Ne čuvajte animaciju za kraj. Ne ostavljajte animaciju do samog kraja – ona može biti ključni faktor u korisničkom iskustvu i o tome treba unaprijed razmisliti.
2. Znajte meru. Previše animacije je takođe loše. Držite se pod kontrolom i zapamtite da to mora imati smisla.

Adaptivni dizajn

Posljednji glavni aspekt materijalnog dizajna je koncept responzivnog dizajna. Odnosno, kako možemo primijeniti sva tri prva koncepta na različitim uređajima i ekranima u različitim faktorima oblika.

Od opšteg do specifičnog

Najčešća tehnika je smanjenje količine informacija prikazanih na ekranu zajedno sa smanjenjem ekrana. Ako na velikom ekranu možemo priuštiti da prikažemo i listu i detaljne informacije o odabranoj stavci, onda se na pametnim telefonima prvo prikazuje lista, a za detalje je potreban poseban ekran. U slučaju tableta, traka aplikacija se ponekad može povećati kako bi se barem malo izborila s viškom slobodnog prostora.

Udubljenje

Postavljanje sadržaja pomoću blokova uvelike pojednostavljuje rad sa slobodnim prostorom na velikim ekranima. Znamo sadržaj svakog bloka, razumijemo koliko on može biti širok da ne izgubi čitljivost, a također i koliko uzak da ne bude prevelika gužva. Na širokim ekranima, blokovi se protežu do granica čitljivosti, a zatim se dodaje padding sa ivica, koje mogu biti velike. Mogu se ispuniti plutajućim gumbom i šarama u boji.

Whiteframes

Ideje za organiziranje prostora i dopuna za različite ekrane možete pogledati na google.com/design/spec u odjeljku Whiteframes. Ovo je sjajno mjesto za početak, razumijevanje općeg značenja i nastavak vlastitih eksperimenata.

Vodiči

Vodiči nam daju uvlake za "tintu" na posebnim listovima "papira". Na pametnom telefonu imamo jedan list i jedno dobro udubljenje lijevo, a na tabletu dva i u oba slučaja postoji udubljenje. Važno je da će udubljenje biti različito za ova dva faktora oblika. Na tabletu je 80 dp, a na pametnom telefonu 72 dp. Margine od ivica ekrana su takođe različite.

Dimenzije

Preporučljivo je uzeti višestruke proporcije za sve elemente. Konkretno, odabir veličine trake aplikacije je mnogo praktičniji ako je učinite višestrukom: 1x, 2x, 3x. Na pametnim telefonima i tabletima ova veličina je drugačija, ali se aplikacija prilagođava bez problema.

Blokovi

Razmišljanje u blokovima općenito može biti od pomoći. Ako postavite takvu modularnu mrežu blokova koji su višestruki od 8dp, dobit ćete odličan vizualni ritam i bit će praktičnije donositi odluke. Idite na web stranicu s bijelim okvirima i pogledajte materijale.

traka sa alatkama

Akciona traka je jedan od najvažnijih delova interfejsa. Sadrži naslov, dugmad za radnju i navigaciju. U Android Lollipop-u, akciona traka se pretvorila iz okovane trake na vrhu u punopravni widget - funkcionalan i lijep blok za kontrolu aplikacija. To je postalo moguće zahvaljujući činjenici da sada u alatnu traku možete staviti mnoge funkcionalne elemente o kojima prije niste mogli ni sanjati:
- polja za unos, obrasci;
- plutajuće dugme glavne akcije;
- traka sa alatkama je skrivena proširenom navigacijom, ali ovdje vidimo potpuno funkcionalan widget;
- alatna traka je zgodna za upravljanje ako je potrebno.

NB!

1. Ne treba vam uvijek fioka za navigaciju. Google u svojim aplikacijama vrlo često koristi navigaciju koja se uvlači, tako da to možete vidjeti na mnogim primjerima. Ali Google ima puno zadataka koji se mogu riješiti uz njegovu pomoć: pomoć za mjesto, postavke, prijava/odjava, informacije o korisnicima itd. Ako imate slične zadatke, onda je sve u redu, ali ako pravite jednostavan alat, onda ne biste trebali.
2. Odvažnije i duhovitije sa alatnim trakama. Mogućnost dinamičke promjene veličine alatne trake, čineći je dvostrukom i trostrukom, vrlo je cool i zgodna. Većina dizajnera se boji petljati s ovim i odabrati jednu veličinu jednom zauvijek, ali ovdje možete i trebate biti hrabriji.
3. Nema potrebe da pravite geto iz donjeg ugla za plutajuće dugme. Plutajuće dugme može biti bilo gdje: dolje, gore, desno, lijevo. Naravno, u uglu može biti zgodno doći do njega, ali to nije jedina opcija. Dugme se može pomicati s mjesta na mjesto ovisno o zadatku.
4. I pametni telefoni i tableti; i vertikalno i horizontalno. Asortiman Android uređaja je velik, a to ne olakšava život programerima. Ali istina je da korisnici imaju sve te uređaje koje okreću ovako i onako (čak i kada su pametni telefoni u pitanju). Ovaj trenutak se mora razraditi.

Ovo je materijalni dizajn. Nemojte se plašiti eksperimentisanja i grešaka: nemojte se zadržavati na kopiranju postojećih rešenja. Pokušajte!

Tagovi:

• dizajn materijala
• android
• dizajn interfejsa

Dodaj oznake

Označite objavu svojim oznakama Oznake je najbolje odvojiti zarezom. Na primjer: programiranje, algoritmi

Komentari 121

• • • • • • • • • • Da li, kao i Google, držite telefon samo horizontalno?
                    

                    U vertikali se koristi samo 50-70% ekrana

                    
                    

                    • Na ovom ekranu ima dosta teksta.

                      Je li to puno teksta? Šta je Twitter učinio ljudima?

Šta će se desiti ako detinjstvo čoveka prođe ispod filmova u kojima će mudriji kompjuteri neminovno ubiti čitavo čovečanstvo, a sazrevši malo, ova ista osoba će čitati o NSA i ostalim zlikovcima koji mu danonoćno čitaju SMS i šalju ih na SAD? On će biti oprezan prema Guglu.

Ne tako davno, Good Corporation je pokazala svijetu svoju viziju korisničkih interfejsa budućnosti. Material Design je jedinstven koncept za izgradnju logike rada i izgleda servisa i aplikacija, koji objedinjuje sve Google proizvode kako bi ih učinio što lakšim i intuitivnijim za korisnike.

Ideja je toliko ambiciozna da će transformisati ne samo izgled svih Google proizvoda. Dolaskom novog koncepta promijenit će se i uloga same kompanije u životima ljudi.

Šta će Google postati?

Da, za sada je Google samo gomila usluga. Međutim, sa materijalnim dizajnom, kompanija zapravo stvara drugu stvarnost unutar naših kompjutera i mobilnih uređaja. Sa svojom logikom, sa svojim pravilima i zakonima, sa svojom fizikom.

Kada stvarate fizičke stvari, oslanjate se na hiljade godina ljudskog iskustva. Ali dizajn softvera je u povojima. Pogledali smo sav naš softver i pitali se od čega je napravljen? John Wylie, šef dizajna Google pretraživanja

Šta su sada Google usluge za ljude? Da li je to traka za pretraživanje koja živi u pretraživaču? Ili je to vaš mobilni Android uređaj?

Mnogo definicija se može dati Googleu, a mnoge od njih će biti tačne. Ova kompanija je kreirala sistem usluga koji je postao temelj naše digitalne infrastrukture.

Ali u bliskoj budućnosti, Google se više neće doživljavati samo kao Chrome ili Android.

Odvojene Google usluge i proizvodi se razvijaju u jedinstveni informativni kanal, gdje se podaci koji su relevantni za osobu jednostavno pojavljuju na pravom ekranu u pravo vrijeme.

Kada pogledate na sat dok stojite na željezničkoj stanici, na ekranu vidite vrijeme dolaska vašeg sljedećeg voza. Međutim, isti sat će vas obavijestiti o važnom pismu od uprave ako ga pogledate na poslu. Ovaj sat će zamijeniti vašu lozinku za prijavu na vaš račun na računaru, na čijem će ekranu odmah biti prikazano tijelo tog važnog pisma od šefa. Trebate li hitno otići, a nema vremena da dovršite tekst odgovora? Nema problema, jer je vaš pametni telefon ili tablet već otvorio interfejs za poštu sa ispisanim tekstom, a čak je i kursor na mestu gde ste stali.

Radni dan je završio, a vi ste na putu kući. Isti ekrani sada obavljaju potpuno različite funkcije. Podsjetit će vas da pokupite djecu, kupite namirnice za večeru i obavijestit će vas kada izađe nova epizoda vaše omiljene TV serije.

Ovakva nevjerovatna raznolikost funkcija i zadataka radit će u jednom digitalnom okruženju koje je intuitivno za korisnika, postepeno se stapajući sa stvarnim svijetom.

Jedna od ključnih ideja Material Design-a je stvoriti intuitivan osjećaj za korisnika da radi sa stvarnim fizičkim objektima unutar digitalnog okruženja. Zapravo, ovo je emulacija trodimenzionalnog prostora na ravni ekrana, ali sa svim prednostima koje virtuelno okruženje može dati. Slično kao na kartonskim karticama, dugmad i prozori ovdje mogu rasti i skupljati se, raspadati se i obnavljati.

Najimpresivnija stvar u vezi sa ovim konceptom je da će svojstva i ponašanje objekata na ekranu biti predvidljivi i razumljivi osobi kao i svaki jednostavan događaj u fizičkom svijetu. Za razliku od postojećih interfejsa, gde pritisak na dugme ne izaziva nikakve promene na ostatku ekrana, bilo koja radnja u Androidu L izaziva odgovarajući efekat koji utiče na ceo interfejs. Dodirnite određeni dan u kalendaru i on će se povećavati, gurajući ostale dane svojim rastućim volumenom i masom. Pritisnite dugme za reprodukciju u plejeru i on će se, poput omota slatkiša, otvoriti u kontrolnoj tabli.

Ovaj koncept je rezultat detaljne studije kompanije o tome kako papir funkcioniše u stvarnosti. Tim koji radi na projektu kreirao je fizičke ikone aplikacija od pravog papira. Hteli su da vide kako svetlost i senka mogu da stupe u interakciju sa ravnim (kao ekran) ali stvarnim materijalom.

Virtuelno okruženje vam zauzvrat omogućava da prekršite pravila. Malo je vjerovatno da je itko vidio da se papir dijeli na dijelove, čiji se komadi preuređuju i ponovo spajaju u jedan objekt. Ovo daje dodatne mogućnosti, ali postoji rizik od stvaranja sistema koji je previše nerealan, predaleko od fizičkih zakona. Kako bi se održala prirodna intuitivnost, sva tipografija, slike i boje su izbačene tokom procesa razvoja. Tim se fokusirao isključivo na rad čudotvornog papira.

Ne morate biti dizajner da biste uočili kršenje pravila iz stvarnog svijeta. Pada li papir na sto kao komad kamena? Očigledno, tu nešto nije u redu, i to će svakome biti jasno.

Na osnovu tako očiglednih i svima razumljivih zakona, Google tim je odlučio koristiti stvarni svijet kao osnovu za svoje koncepte.

Uz dovoljno jasan sistem pravila, postaje moguće dodavati nove materijale. Papir je bio očigledan izbor zbog lakoće prikaza na ekranu. Bez izražene teksture, gotovo bez volumena. Ali pokušajte zamisliti, na primjer, tkivo ili tekućine.

Odmah mi pada na pamet filozofija skeuomorfizma, koju je Apple aktivno koristio i na kraju je napustio, zar ne? Appleov pristup je također imao za cilj da digitalni svijet učini razumljivijim za korisnika, ali u poređenju sa Googleovim rješenjem izgleda prilično površno. Skeuomorfizam iz Apple-a samo je nagovijestio sličnost aplikacije sa svojim pravim kolegom.

Google ne želi samo da povuče neku vrstu analogije za bolju percepciju. Njihov cilj je da objasne korisnicima šta se dešava kada se određeni element interfejsa pojavi ili nestane sa ekrana.

Material Design nije samo pokušaj kreiranja slično dizajniranih usluga za različite uređaje. Google stvara paralelni svijet, čiji je svaki dio fragment nečeg materijalnog. Kada na pametnom satu primite poruku sa pametnog telefona, vidite više od mrtvog teksta. To je komad kartona koji ima poruku na sebi, a ta poruka je stigla sa vašeg pametnog telefona na vaš zglob.

Interakcija s digitalnim svijetom moguća je na potpuno različite načine. To može biti nešto okruglo na našem zglobu ili nešto pravokutno u našoj ruci. Material Design, s druge strane, ima za cilj da obezbijedi zajamčen pristup pravim i relevantnim podacima, bez obzira na kombinaciju uređaja koje osoba koristi.

Tako je, bez nametanja i pritiska, kompanija jednostavno kreira tehnologije, po ključnom principu „fokus na korisnika, a sve ostalo će doći samo od sebe“.

Zanima nas Vaše mišljenje. Smatrate li takav koncept zao ili takve inicijative doživljavate kao obećavajući način za interakciju sa informatičkim okruženjem u budućnosti?

Tko razvija mobilne aplikacije i web stranice, napisao nam je kolumnu i stavio sve na svoje mjesto u odnosu na flat i materijalni dizajn.

Uglavnom, razlika između ravnog dizajna (Flat dizajn) i materijalnog dizajna (Material Design) je suptilna. Osobi koja nema duboko znanje o grafičkom dizajnu, oni zaista mogu izgledati vrlo slični. U ovom članku pokušat ću baciti svjetlo na neke od razlika između njih. Dobit ćete dodatna znanja koja su toliko neophodna da slučajno ne povrijedite delikatnu prirodu dizajnera.

Malo istorije

Prije nego počnemo govoriti o razlikama između dva najpopularnija trenda dizajna, hajde da saznamo odakle dolaze. Postoji mišljenje da se materijalni dizajn stvara na osnovu stana. Odakle onda flat dizajn?

Skeuomorfizam

Kada je u pitanju korisnički interfejs i web dizajn, koncept skeuomorfizma se odnosi na pristup čija je glavna ideja imitacija. Ne ulazeći u previše detalja, prisjetimo se samo Appleovih sučelja prije iOS-a 7 sa njihovim "realističnim teksturama, osvjetljenjem i pretencioznim efektima".

Pokušaj da digitalni objekti izgledaju kao njihovi pandani u stvarnom svijetu opravdan je potrebom da se olakša interakcija korisnika s uređajem. Zapravo, upravo iz tog razloga sva sučelja sa realističnim teksturama dominiraju digitalnim svijetom dugi niz godina. Skeuomorfni dizajn je napravio odličan posao pomažući korisnicima da nesmetano pređu iz stvarnog svijeta u digitalni svijet.

Međutim, s porastom mobilne tehnologije, postepeno postaje neophodno fokusirati se prvenstveno na praktičnost i jednostavnost korištenja. Slažem se, u ovoj oblasti, potreba za kreiranjem mobilnih rješenja dostupnih s različitih uređaja eksponencijalno raste. Upravo u ovom trenutku, jednostavnost postaje novi standard dizajna.

Napomena: Nikako nemojte misliti da je skeuomorfizam potpuno nestao. Široko se koristi u igrama gdje je potrebno stvoriti realističan svijet i pomoći igračima da osete svoj karakter kako bi se uronili u proces igre.

ravni dizajn

Ovaj stil je potpuno lišen bilo kakvih trodimenzionalnih objekata. Grubo govoreći, u flat dizajnu nema takvih stilskih elemenata kao što su senka, teksture, gradijenti, već se pažnja poklanja igri fontova i boja i ikona. Ali zašto je sve ovo bilo potrebno? Odgovor je jednostavan.

Prvo, ravan dizajn značajno smanjuje vrijeme učitavanja stranice. Odsustvo "teških" skeuomorfnih detalja (zamislite samo: slojevi, serifi, gradijenti) čini elemente ravnog dizajna "lakšima", što zauzvrat značajno ubrzava vrijeme učitavanja. Štaviše, ravni elementi izgledaju podjednako privlačno i na ekranima visoke i niske rezolucije.

Drugo, jednostavne slike mogu prenijeti vašu ideju korisnicima brže od detaljnih ilustracija: one su skicirane i stoga prilično lako razumljive.

I, naravno, ravne ikone s relativno jednostavnim fontom mogu usmjeriti pažnju korisnika na zaista važan sadržaj.

Danas je flat dizajn dobio zasluženo priznanje, ali ipak nije prošao bez problema. Najočigledniji primjer takvih problema bilo je izdavanje Windows 8 od strane Microsofta. Ovaj operativni sistem se smatra pionirom ravnog dizajna i podržava koncept dizajna Metro. Ono što je dovelo do problema je to što je kompanija smatrala da je potrebno više pažnje posvetiti tipografiji nego stvarnoj grafiki.

Rezultati testa upotrebljivosti Windows 8, koji je sprovela NN grupa, pokazali su da korisnici imaju poteškoća da razlikuju objekte na koje se može kliknuti od onih na koje se ne može kliknuti. Korisnici su se žalili da se na objekte koji izgledaju statično zapravo može kliknuti. Kao rezultat toga, glavna misija kompanije - da pomogne korisnicima da pravilno interpretiraju sistem - nije uspjela.

Još jedna kompanija koja se često povezuje sa ravnim dizajnom je Apple. Odmaknuli su se od skeuomorfnih elemenata dizajna u mobilnom operativnom sistemu iOS 7, objavljenom 2013. godine. Ovog puta, tranzicija je primljena malo bolje, uglavnom zato što kompanija nije pokušala da u potpunosti preuredi koncept korisničkog sučelja, već je samo dodala nekoliko promjena prema ravnom dizajnu. Ovo je korisnicima dalo priliku da koriste proizvod, oslanjajući se na prethodno iskustvo sa operativnim sistemima i web stranicama.

dizajn materijala

Budimo jasni odmah: materijalni dizajn je više brendirani proizvod nego spontani trend dizajna koji je stekao široko prihvaćenost. To je ono što ga u osnovi razlikuje od ravnog dizajna.

Pod nazivom materijalni dizajn “potpis” mislim da on ima čitav niz jasno definisanih preporuka i principa koje svaki dizajner koji poštuje sebe slijedi. Sasvim je očigledno zašto je Google predstavio svoj Material Design: postojala je potreba da se dizajn objedini tako da aplikacije izgledaju isto na bilo kojem od mnogih Android uređaja.

Iako prilično funkcionalan, ravni dizajn se i dalje smatra teško razumljivim. Istina je da ravni objekti na ekranu mogu zbuniti korisnike (posebno one koji nemaju iskustva sa mobilnim i web interfejsima). Stoga materijalni dizajn pokušava vratiti elemente skeuomorfizma, ali u znatno pojednostavljenom obliku. Slike izgledaju ravno, posebno kada su u pitanju boje, ali su i dalje višedimenzionalne zahvaljujući prisutnosti z-ose.

Drugim riječima, materijalni dizajn se može nazvati poboljšanom verzijom ravnog dizajna s elementima skeuomorfizma - animacijom, sjenama i slojevima. Na taj način možete učiniti proizvod intuitivnijim u smislu navigacije i izbjeći nepotrebnu složenost u smislu stila općenito.

Prednosti i nedostaci flat dizajna

Ostavimo iza sebe istoriju evolucije stilova i pređimo na nešto značajnije - nabrojimo prednosti i mane ravnog dizajna.

• Minimalizam i stil
• Intuitivnost. Biće vam lakše prenijeti svoju ideju korisnicima.
• Ušteda vremena i resursa. Stranice se učitavaju mnogo brže uz manju potrošnju propusnog opsega.
• Fokusirajte se na sadržaj. Interfejs bez nepotrebnih detalja koji može odvratiti pažnju od zaista vrijednih informacija.
• Izgleda podjednako dobro na raznim uređajima, bilo da se radi o pretraživaču na računaru ili pametnom telefonu.
• Ubrzava proces dizajna web stranice ili aplikacije oslobađajući se nepotrebnih dizajnerskih dodira.

• Minimalistički stil.
• Prilično intuitivno. Dizajn materijala će biti podjednako lak i za iskusne korisnike i za početnike.
• Umjereni skeuomorfizam. Sve izgleda realnije zahvaljujući upotrebi Z-ose (Googleov jedinstveni koncept).
• Postoji set priručnika koji se stalno ažuriraju. Stoga im se svaki dizajner uvijek može obratiti ako ima poteškoća u procesu rada.
• Ohrabruje se animacija za web rješenja. Nema potrebe da vas podsećamo koliko ljudi vole kretanje. Osim toga, animacija vam omogućava da interfejs učinite razumljivijim i intuitivnijim.

• Ima vlasnika (Google). Stoga, sva pitanja i sugestije za poboljšanje treba uputiti vlasniku.
• Zbog prisustva Z ose, proces projektovanja može potrajati duže.
• Animirani elementi zahtijevaju više resursa.
• Strogo pridržavanje smjernica može ograničiti originalnost dizajna.

Sažmite

Zapravo, ne treba smatrati da jedan od pristupa dizajnu koji se razmatra ima jasnu prednost u odnosu na drugi, budući da ravni stil i stilovi materijala idu jedan pored drugog. Oboje su ludo popularni i obe su lišene preteranog realizma. Materijalni dizajn je nasljednik ravnog, dok je sam flat dizajn bio reakcija na preteška i realistična rješenja. Dizajn materijala je dodao nešto od čega se ravni dizajn oduvijek trudio odmaknuti - malo skeuomorfizma. Međutim, jedna stvar će se uvijek razlikovati između ovih pristupa: materijalni dizajn je vlasnički proizvod Google-a, dok je ravni dizajn rezultat fuzije nekoliko dizajnerskih praksi koje prvenstveno teže ukupnoj jednostavnosti.

Istina, ravni dizajn je dosta evoluirao posljednjih godina, od potpuno "ravnog" stila do "poluravnog". Sada omogućava upotrebu slojeva i suptilnih senki kako bi objekti izgledali dublje nego što su ranije izgledali. Dakle, mi smo sretni savremenici flat dizajna 2.0.

Konačno, ništa vam ne brani da pokušate kombinirati ova dva pristupa kako biste stvorili istinski funkcionalan i jednostavan proizvod. Zato se inspirirajte guruima dizajna stanova i materijala i krenite na posao!

Google potpredsjednik dizajna Matias Duarte u intervjuu za The Verge govori o osnovnim principima novog dizajna, koji se zove Material. To je potpuno drugačiji pristup, koji pruža jedinstven skup pravila od softvera do funkcionalnosti. Iako se dizajn čini malo čudnim i potrebno je naviknuti se.

Dizajnerski tim u Google-u osjetio je potrebu da osmisli dosljedan izgled i osjećaj za softver koji bi se mogao koristiti u svim proizvodima: Android, Chrome OS, web usluge. Umjesto da počnu sa razvojem palete boja, počeli su pitanjem: "Šta je softver?"

Materija i forma

Odgovor je stigao iz odjela za dizajn kada su Jon Wiley, glavni dizajner Googleovog pretraživača, i njegov kolega Nicholas Jitcoff gledali dizajn Google Nowa. Pogledali su interfejs kartice i pomislili: “A ako pomjerite kartu, šta se onda krije iza nje?”

„To nevino pitanje je zapalilo moćnu iskru!“ rekao je Duarte. Cijeli tim je počeo razmišljati o novom načinu interakcije sa softverskim elementima. Umjesto da samo koristi piksele na ekranu i apstraktne slojeve, tim je počeo razmišljati o dizajnu kao stvarnom opipljivom objektu. Stoga kartice moraju imati fizička svojstva. Vrijeme je da smislimo pravila koja bi određivala kako sve treba djelovati i kretati se na ekranu. Razvojni tim je želeo da postigne efekat da korisnik komunicira sa fizičkim objektima.

Tako je započeo rad na metaforičkom materijalu nalik papiru - ravna i bela sa realističnim senkama. Bio je to sjeme iz kojeg je izrastao ostatak dizajna, čija implementacija se može vidjeti u Androidu L. Materijalni dizajn je sve o hrabrim, svijetlim bojama, minimalizmu i osjećaju konzistentnosti.

Wylie i Jeetkoff kažu da je to estetska evolucija cijele Googleove filozofije dizajna. 2012. i 2013. godine u zidinama sjedišta internet giganta započeli su radovi na projektu Kennedy, koji bi ujedinio dizajn svega.

Kreativnost i ograničenja

Materijalni dizajn objedinjuje sve najbolje ideje. Matias Duarte vidi naš novi stil kao niz ograničenja za koja vjeruje da dizajnerima aplikacija olakšavaju konzistentniji rad. Na primjer, pokret okretanja kartice kako biste vidjeli šta piše na poleđini. U običnom svijetu to nije moguće zbog nedostatka prostora. Kao da je softver pravi fizički objekt unutar uređaja. I očito na vašem telefonu nema mjesta za okretanje kartice, pa Google ograničava takve manipulacije.

Jako smo ovisni o fizici, a softver se često ponaša na način koji narušava naše razumijevanje svijeta, poput nekog naučno-fantastičnog filma koji krši elementarnu logiku. Duarte direktno komentira Appleovu novu filozofiju dizajna iOS-a.

Ne jurimo kroz prostor i vrijeme nadzvučnim brzinama. Dizajn je potraga za rješenjem unutar strogih ograničenja. Dizajn je umjetnost.

Googleovi dizajneri tvrdoglavo odbijaju imenovati fiktivni materijal koji se koristi. Rješenje koje im daje veću fleksibilnost i dodaje nivo metafizičkog misticizma supstanci. Kvantni papir - tako je zvučalo u nekim curenjima prije Google I/O. Ovo je važno jer je materijal podložan fizici i neće pasti u zamku skeuomorfizma. To nije baš imitacija fizičkih objekata, kako Duarte kaže, to je nešto "magično".

Materijal u našem dizajnu može učiniti stvari koje fizički papir ne može, kao što je rast i smanjenje s animacijama. Ove animacije su važne za Google jer pomažu korisnicima da shvate da su unutar softvera. Wylie upoređuje softver sa filmovima, gdje postoje oštri skokovi između scena. Korisnik gubi osjećaj za vrijeme i prostor. U softveru je važno da korisnik razumije principe prelaska s jednog na drugi.

materijalizovati

Još jedna važnija stvar koju Material Design donosi je unifikacija. Google već godinama radi na algoritmima za sve proizvode i postao je sastavni dio nove filozofije dizajna. Umjesto da korisnik sam sve konfigurira, Material Design vas tjera da vjerujete da će na ekranu vidjeti ono što mu treba u pravo vrijeme.

Zbog toga Android Wear korisnicima ne daje ništa više od interakcije s obavještenjima. Alex Faaborg, dizajner platforme, kaže:

Ne provodite puno vremena u interakciji sa satom. Vi samo želite da možete pogledati svoj zglob i odmah dobiti informacije koje su vam potrebne ili izvršiti radnju glasovnom komandom. Uradili smo ogromnu količinu posla za cijelu Google platformu.

Google traži previše zasluga za sebe i svoj "magični" papirni materijal, ali Duarte je siguran da za to postoje dobri razlozi.

Ovo smo uradili jer je to najjednostavnije rešenje. Želimo dizajnirati najjednostavniji mogući dizajn za korisnika.

Parc 3.0

Materijalni dizajn ima mnogo više od dizajna Androida L, Android Weara i svega ostalog u šta je Google uključen. Govorimo o senzacijama u odnosu čovjeka i tehnologije.

Duarte kaže da je Xerox PARC napravio briljantan posao kreiranja principa za rad sa prozorima i kursora koji su svima poznati. Ovo je bilo revolucionarno jer je kompanija bila u mogućnosti da kreira virtuelnu verziju pravog desktopa. Ljudi su shvatili kako računar radi i mogli su udobno raditi s njim. Ovo se odnosi i na ono što je Apple uradio sa ekranima osetljivim na dodir.

Sada Google vjeruje da je učinio isto. Wylie kaže da danas ljudi imaju puno tehnologija: ekrane na dodir, pokrete, glasovne komande, inteligentne algoritme. Materijalni dizajn kombinuje svu ovu raznolikost u jednu intuitivnu stvar. Ovo će vam pomoći da jednostavno koristite istu stvar na Chrome OS-u, Androidu ili na webu.

9 principa

1. Materijal je metafora

Material Design je sistem koji racionalizuje prostor i kretanje. Dizajn se oslanja na taktilnu stvarnost inspirisanu mogućnostima papira i mastila, ali otvoren za maštu i magiju.

2. Površine su intuitivne

Ravnine i ivice prenose vizuelne znakove zasnovane na našoj percepciji stvarnosti. Korištenje poznatih taktilnih atributa omogućava vam pristup primarnim dijelovima našeg mozga i pomaže vam da brzo shvatite "predstavljeno".

3. Dimenzija stvara interakciju

Osnove svjetlosti, površine i kretanja ključni su za interakciju objekata. Realistična rasvjeta dijeli prostor i ističe pokretne dijelove.

4. Jednostruki responzivni dizajn

Jedan dizajn za sve. Svaki uređaj odražava drugačiji pristup istim osnovnim elementima. Svaki pogled je prilagođen veličini i interakciji za svaki uređaj. Boje, ikonografija, hijerarhija i prostorni odnosi ostaju nepromijenjeni.

5. Fontovi, grafike, boje

Prepoznatljiv dizajn stvara hijerarhiju, razumijevanje i pomaže u fokusiranju. Posebno odabrane boje, korištenje prostora od ruba do ruba, veliki fontovi i namjerna/namjerna upotreba bijele boje omogućavaju korisniku da u potpunosti uroni korisnika u proces interakcije, čineći ga jasnijim i razumljivijim.

6. Primarne radnje

Korisnička akcija je suština dizajna. Primarne radnje transformiraju cijeli dizajn. U njima je naglasak na glavnoj funkcionalnosti i odmah upada u oči korisniku.

7. Korisnici pokreću promjenu

Promjene u interfejsu dolaze iz radnji korisnika. Pokret pojačava iskustvo primarne akcije.

8. Koreografija animacije

Sve radnje se odvijaju u jednom okruženju. Objekti koje korisnik vidi ne narušavaju ostatak korisničkog iskustva, čak ni nakon transformacija i reorganizacija.

9. Kretanje daje smisao

Kretanje ima smisla i neophodno je za privlačenje pažnje. Prelazi su efikasni.

Dizajn je umjetnost stvaranja. Naš cilj je da zadovoljimo širok spektar ljudskih potreba. Kako se ove potrebe razvijaju, tako se moraju razvijati i naši projekti, ideje i filozofije.

Postavili smo sebi cilj da kreiramo vizuelni jezik za naše korisnike koji kombinuje poznate principe klasičnog dizajna sa inovacijama.

Vjerovatno ste više puta naišli na izraz „dizajn materijala“. Koncept materijalnog dizajna nije nov i već je prilično dobro uspostavljen na tržištu web dizajna, prvenstveno zbog privlačnosti korisničkom iskustvu. Materijalni dizajn je prvi put uveo Google u ljeto 2015. godine i od tada je sastavni dio Googlea. Koje su njegove karakteristike, osnovni principi i da li je tako dobar kao što o njemu pjevaju? Više o tome kasnije u članku.

Dizajn materijala nije samo ideja, on je primorao dizajnere da potpuno preispitaju način na koji razmišljaju i proces kreiranja web stranica i aplikacija. Moderne web stranice intenzivno koriste dizajnerske obrasce i dokumentaciju o materijalnom dizajnu iz Googlea. Ali prije nego što prijeđemo na desert, definirajmo koncept materijalnog dizajna, njegove ciljeve i glavne karakteristike.

Šta je dizajn materijala?

Materijalni dizajn je jezik i stil grafičkog dizajna koji je kreirao Google Design tim kako bi pomogao dizajnerima da kreiraju web stranice i aplikacije koje su dostupne, upotrebljive i korisne. Koncept je baziran na živoj dokumentaciji koja je u javnom vlasništvu i može je koristiti svi zainteresovani za koncept materijalnog dizajna. Do danas se dokumentacija stalno ažurira kako bi odražavala promjene u dizajnu i razvoju. Zahvaljujući tome, dizajn materijala ostaje relevantan i stalno se razvija kao pravac.

Dizajn materijala ima niz ciljeva i principa koje navode kreatori. Lista može izgledati donekle idealistički, ali ipak ćemo u nastavku dati njene glavne ideje.

Ciljevi dizajna materijala

1. Kreirajte vizuelni jezik koji kombinuje klasične principe dobrog dizajna sa inovacijom i snagom nauke i moderne tehnologije.
2. Razvijte jedinstveni osnovni sistem koji vam omogućava da kreirate univerzalne dizajne za različite platforme i uređaje. Principi mobilnih uređaja su fundamentalni, ali dodir, glasovne komande, unos mišem i unos sa tastature su primarne metode unosa i interakcije koje će se uzeti u obzir pri razvoju dizajna.

Principi dizajna materijala:

1. Materijalni dizajn je metafora: vizuelni signali i svi elementi grafičkog dizajna moraju biti zasnovani i međusobno povezani sa okolnom stvarnošću, materijalnim svetom.
2. Grafika, jasnoća, svrsishodnost: Osnovna teorija dizajna (upotreba tipova, mreža, organizacija prostora, razmere, proporcije, boja i slike) treba da vodi vizuelne efekte i formira vizuelnu osnovu materijala za dizajn.
3. Svaki pokret ili radnja su bitni: pokretni objekti ili druge poduzete radnje ne bi trebale ometati korisnika, naprotiv, trebale bi osigurati pogodnost i dosljednost poduzetih radnji.

Pored gore navedenih ciljeva i principa, postoje mnogi drugi faktori koji vode. Koji definiraju dizajn materijala. Dokumentacija za dizajn materijala podijeljena je na mnoge specifične koncepte i metode. Tako je, na primjer, Google razvio skup specifičnih pravila za kreiranje animacija, stilova, izgleda, komponenti i tako dalje.

Sve ove preporuke temelje se na osnovnim svojstvima dizajna materijala. Ono što je najvažnije, materijalni dizajn je zasnovan na stvarnosti, u kojoj se objekti nalaze u gotovo trodimenzionalnom prostoru. U smislu estetike, materijalni dizajn spada negdje između ravnog dizajna i skeuomorfizma.

Boja i tipografija materijalnog dizajna

Boje u dizajnu materijala imaju dosta zajedničkog sa . Matijalne palete su prilično smele i svetle. , baš kao u ravnom dizajnu, jednostavno bez serifa.

« Materijalni dizajn je pun, u kombinaciji sa prigušenim tonovima, ovaj pristup vuče korijene iz moderne arhitekture, putokaza, traka za obilježavanje i sportskih terena”, stoji u Googleovoj dokumentaciji materijalnog dizajna. “Naglasite podebljane sjene i svjetla. Koristite neočekivane i žive boje».

A najbolja stvar u konceptu boja materijalnog dizajna je korištenje jasnog kontrasta. Za praktičnost korisnika, Google pruža kompletnu paletu boja sa uzorcima dostupnim za preuzimanje. Koncepti boja su toliko jednostavni da bi se moglo zapitati da li Google misli da su dizajneri potpuno zaboravili na teoriju boja.

Preporuke za odabir i korištenje fontova također su prilično osnovne i jednostavne. Zadani font za sve aplikacije - Roboto - dostupan je za preuzimanje na linku, tamo možete pronaći i tabelu kombinacija i izbor fontova.

Obrasci, struktura i dizajn

Što se tiče strukture i rasporeda elemenata, materijalni dizajn mnogo je posudio iz koncepta print dizajna. Material Design poziva dizajnere da kreiraju i koriste osnovnu mrežu i matematičku strukturu za postavljanje elemenata na osnovu uzoraka.

Dalje, predložak je podijeljen na područja, za svako od kojih dokumentacija pruža niz preporuka koje imaju za cilj poboljšanje korisničkog iskustva na stranici ili u aplikaciji (postoje i preporuke koliko je važan ovaj ili onaj element).

Osnovni materijalni elementi dizajna

Svaki element od kojeg se može sastojati stranica kreirana u materijalnom stilu detaljno je opisan u dokumentaciji. Počevši od toga kako ga kreirati i kako bi trebao izgledati, do njegovog mjesta, kako i kada se pojavljuje na ekranu korisnika. Generalno, teško je smisliti nešto što su kreatori propustili ili nisu. Lista uključuje 19 glavnih strukturnih komponenti, neke od njih ćemo istaknuti u nastavku.

• Donji ekran (donji slojevi dizajna)
• Dugmad
• Karte
• Dijalozi
• Separatori
• Mreže
• Liste
• Trake napretka i aktivnosti
• Klizači
• titlovi
• Prekidači
• Tabs
• Tekstualna polja
• Popup prozori

Dizajneri kojima se sviđa izgled predloženih komponenti mogu čak preuzeti svoj izvorni kod za ili Illustrator. Ikone i drugi detalji su upareni sa stilovima i prilagođavaju se odabranom predlošku.

Pogodnost, pristupačnost i korisničko iskustvo

„Proizvod je dostupan kada svi ljudi – bez obzira na sposobnosti – mogu da ga koriste za postizanje svojih ciljeva. Zaista uspješan proizvod dostupan je najširoj mogućoj publici.”

U materijalnoj projektnoj dokumentaciji velika pažnja je usmjerena na pristupačnost, praktičnost i korisničko iskustvo, što je vrlo važno. Iako se iskusnim dizajnerima mnoge estetike materijalnog dizajna mogu činiti prilično primitivnima, neki od koncepata korisničkog iskustva i interakcije su vrhunski.

Odjeljak o modelima interakcije je posebno koristan. Otkriva ideje da se neki elementi dizajna učine univerzalnim u odnosu na sve moguće web projekte. Na primjer, format za određivanje datuma i vremena ili operacija pretraživanja. Mogu se razlikovati od lokacije do lokacije, ali razlike su male i uglavnom su ovi elementi prilično univerzalni. Ako posjetitelj vidi lupu, razumije da je ispred njega pretraga koja se može koristiti, čak i ako pored nje nema tekstualnog pokazivača. Zato Material Design sadrži neke od najjednostavnijih alata koje korisnici očekuju da vide na bilo kojoj stranici i s kojima su navikli raditi.

Pristupačnost i razumljivost dizajna je još jedan aspekt koji se široko pokriva u dokumentaciji za dizajn materijala. Dizajn materijala mora uzeti u obzir korisnike koji s njim mogu komunicirati ne samo kroz boje i oblike, već i kroz zvukove i glasovno pretraživanje. Također, važno je razmotriti da li se dizajni mogu gledati na uređajima s visokim kontrastom, velikim ekranom, bez vidljivog ekrana, samo glasovnom kontrolom ili kombinacijom svih ovih elemenata.

10 Resursi za dizajn materijala

Dizajn materijala je popularna tema za diskusiju i inspiracija za mnoge blogove, forume i druge stranice na kojima se okupljaju okupljališta web dizajna. Mnogo je korisnih stvari koje se mogu preuzeti direktno sa Google resursa, ali postoje i mnogi resursi koji objavljuju svoje radove u stilu materijalnog dizajna. Evo nekoliko web stranica koje će vam pomoći da naučite koncepte dizajna materijala i preuzmete besplatne materijale.

1. Setovi elemenata u stilu materijalnog dizajna za pametne telefone i druge mobilne uređaje (vidi dolje).

Dio 1: Galerija materijalnog dizajna za web stranice i aplikacije - besplatni materijali

Kako bismo pojednostavili zadatak onim čitateljima koji se odluče na projekt dizajna materijala, odlučili smo napraviti galeriju s gotovim razvojima i rješenjima. Samo uzmite jedan ili više besplatnih kompleta zahvaljujući dizajnerima širom svijeta. U nastavku ćete pronaći opsežnu kolekciju takvih predmeta.

Dizajn materijala od strane UXPin

Dizajn materijala Creative Tim

Besplatan izbor materijala iz Designtoryja

UIDE - besplatni materijal za skice Mateusza Dembeka

Google resurs skice dizajna materijala

L Bootstrap materijalni dizajn u Android stilu od Vitalija Černegija

Resurs skice dizajna standardnog materijala

Dizajn materijala za EL Passion

Blokovi u stilu Froala

Free Landing 1.0 u materijalnom stilu

Dizajn mobilnih materijala

avsc materijalni dizajn

Dizajn materijala korisničkog sučelja Jakub Kośla

Matrix dizajn za android Ivan Bjelajac

Dizajn materijala od strane Ultralinxa

Dizajn mobilnih materijala od Emme Drews

Besplatna kompilacija materijala od Adriana Goie

Dizajn materijala iz UI8

Dizajn materijala za Photoshop od Psddd

Android Material Design PSD od Nine Hertz

Drugi izbori dizajna materijala koji vam mogu pomoći

Dizajn interaktivnog materijala stanice Nelson Sakwa

Elementi stila materijala Elad Izak

Skica materijala Benjamina Schmidta

Birač boja Birač boja materijala

Sažimanje

Koncept materijalnog dizajna je dobro osmišljeno rješenje za kreiranje bilo kojeg modernog dizajna web stranice ili aplikacije. Osim toga, postoji prilično detaljan vodič za dizajn materijala koji će biti od velike pomoći dizajnerima početnicima, ali može izgledati pomalo rudimentarnim za iskusne dizajnere.

Moguće je da će se sutra u potpunosti pojaviti, što će izbrisati materijalni dizajn iz sjećanja programera, na isti način na koji je u svoje vrijeme izbrisana Flash tehnologija. Niko nije imun od ovoga. Ali kao dizajneri, imate pravo da sami odlučite koliko je dizajn materijala zanimljiv i potreban za vaše sljedeće projekte, kao i da koristite njegove razvoje i elemente za vlastite eksperimente.

Kreirajte dizajne sa zadovoljstvom, a ako imate nešto da dodate članku, slobodno napišite svoje prijedloge u komentarima.