desyatykh 11. ožujka 2015. u 17:08

Materijalni dizajn: Do Mjeseca i natrag

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

• Tutorial

"Je li ovaj dosadni dijalog doista potreban?"

U ovom sam članku opisao glavne principe materijalnog dizajna i dao savjete o tome kako ih implementirati. Tekst je nastao na tragu master tečaja za programere koji smo mi, Robots, organizirali zajedno s ruskim uredom Googlea (Think Mobile).

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

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

Što Kennedy ima s tim?

Legenda je sljedeća: predsjednik Kennedy pokrenuo je program za let čovjeka na Mjesec (ako vjerujete da se taj let uopće dogodio). I veliki šef u Googleu, Larry Page, zagovara načelo da nema smisla poboljšavati proizvode za 10% - oni bi trebali biti 10 puta bolji od konkurentskih. Ako namjeravate lansirati proizvod, idite ravno na Mjesec. I ovdje je odlučeno sve radikalno ponoviti.

Rezultat je prvenstveno utjecao na web, ali i na neke mobilne proizvode. Istovremeno se zasebno radilo na dizajnu Androida - Holo, koji je zamijenio ne baš estetski dopadljiva sučelja starog Androida.
Ali postojao je jedan problem: Holo se još uvijek razlikovao od Projekta Kennedy.


Korisnici su se morali prilagoditi novom sučelju prilikom prebacivanja, naviknuti se na izgled, raspored kontrola i tako dalje.
Stoga se u jednom trenutku grupa dizajnera iz različitih dijelova Googlea okupila i počela hrvati s ovim problemom kako bi ga jednom zauvijek riješila.

2014. godine na I/O konferenciji predstavljen je novi sustav dizajna, pristup nazvan Material Design. Novi sustav dizajna omogućuje stvaranje dosljednog korisničkog iskustva na svim zaslonima: desktop, pametni telefon, tableti, satovi, TV, automobili. Za Android aplikacije, Material Design je evolucija Holo vizualnog jezika i smjernica za dizajn. Na mnogo načina to je fleksibilniji sustav, dizajniran s očekivanjem da će ga drugi dizajneri koristiti - Google je bio samo prvi korisnik.

Materijalni dizajn omogućuje vam objektivniji pristup donošenju dizajnerskih odluka: kako nešto izgleda, kako nešto funkcionira, kako se radi animacija i tako dalje. Postavlja razumna ograničenja, ali ne i nepotrebna ograničenja.

4 principa materijalnog dizajna

Materijalni dizajn temelji se na četiri glavna principa:

1. Taktilne površine. U materijalnom dizajnu, sučelje se sastoji od opipljivih slojeva takozvanog "digitalnog papira". Ti se slojevi nalaze na različitim visinama i bacaju sjene jedni na druge, što pomaže korisnicima da bolje razumiju anatomiju sučelja i način na koji s njime komuniciraju.
2. Dizajn tiska. Ako o slojevima razmišljamo kao o komadima “digitalnog papira”, onda kada je u pitanju “digitalna tinta” (sve što je prikazano na “digitalnom papiru”), koristi se pristup preuzet iz tradicionalnog grafičkog dizajna: na primjer, časopis i poster oblikovati.
3. Smislena animacija. U stvarnom svijetu predmeti se ne pojavljuju niotkuda i ne nestaju niotkuda - to se događa samo u filmovima. Zato u Material Designu stalno razmišljamo o tome kako koristiti animaciju u slojevima i digitalnu tintu kako bismo korisnicima dali savjete o tome kako sučelje funkcionira.
4. Adaptivni dizajn. Radi se o tome kako prethodna tri koncepta primjenjujemo na različite uređaje s različitim razlučivostima i veličinama zaslona.

Dakle, krenimo redom.

Taktilne površine

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

Površinski

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

Nema potrebe ići predaleko i koristiti teksturu ili primijeniti gradijente za prikaz chiaroscura. Nema potrebe davati vizualna svojstva kože poput vrata bakinog stana - uredna sjena može izraziti puno. Ali svaka površina ima svoju visinu - mjesto na osi Z. I svaka od površina baca sjenu na dno, baš kao u stvarnom svijetu.

Dubina

U tradicionalnom "ravnom dizajnu" takve se sjene izbjegavaju kao bilo kakva manifestacija volumena, ali obavljaju važnu funkciju označavanja strukture i hijerarhije elemenata na ekranu. Na primjer, ako je uspon elementa veći, veća je i njegova sjena. Ova povećana dubina pomaže usredotočiti pozornost korisnika na kritične stvari i to graciozno.

Dubina također daje naznake o interakciji. Ovdje, dok se korisnik pomiče, zelena traka se lijepi za gornji sloj i dodaje se sjena. To pokazuje da se ne miče samo "tinta", već da je bijela pozadina ispod i da se u potpunosti kreće.

Važno je napomenuti da dubina ima "dno". Pretpostavlja se da je ograničena debljinom samog mobilnog uređaja. Odnosno, ako je na pametnom telefonu centimetar od stakla do stražnje stijenke, a imate kreditnu karticu u sučelju, ne možete je jednostavno okrenuti - naslonit će se na staklo i stražnju stijenku.

NB!

1. Dubina mora imati smisla. Postavite si pitanje: "Zašto je to tako, a ne drugačije?" Ako nema odgovora, ima smisla potražiti drugo rješenje.
2. Pobrinite se za logistiku. Plutajući gumbi, alatne trake i dijaloški okviri nalaze se na određenoj visini. Ponekad se moraju kretati duž osi Z kako bi izbjegli sudare kad se nešto dogodi. S ovom koreografijom morate biti izuzetno oprezni.
3. Nema potrebe za pritiskom na gumb. Plutajući gumb vrlo je osebujan element. Mnogi misle da ga vrijedi dodati u sučelje: ovo odmah postaje Materijalni dizajn. Ali trebao bi se koristiti samo za ključnu radnju u vašoj aplikaciji. Ako trebate zatvoriti prozor ili potvrditi radnju, tada ne morate koristiti plutajući gumb. Za to postoje i drugi elementi.
4. Ne mora sve biti na kartici. Ako predmet ima mnogo oblika i sadrži puno različitih sadržaja, tada je kartica prikladna. A ako ne, onda bi možda bilo bolje to učiniti s čistim tekstom ili tekstualnom listom?
5. Je li ovaj dosadni dijalog doista potreban? Googleovi dizajneri pokušali su poboljšati dijaloške okvire, ali Bottom Sheets još uvijek su prikladniji za većinu zadataka. Tu su i snackbarovi. Dijaloški okviri potrebni su samo za postavljanje pitanja korisniku.
6. Koristite proširenje popisa. Ovo je podcijenjen uzorak, ali prilično je materijal i dobro rješava problem.

Dizajn tiska

Budući da u materijalnom dizajnu površine nazivamo “digitalnim papirom”, onda je sve što se na njih postavi – tekst, slike, ikone – ispisano “digitalnom tintom”. I Material Design koristi klasična načela dizajna tiska u dizajnu sučelja.

Elegantna tipografija

U dizajnu tiska, tipografija igra temeljno važnu ulogu. Uzmite bilo koji časopis i primijetit ćete da tipografija ima dvije važne funkcije. Prvo, izbor i kompozicija fonta je stilski element 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.

Imamo veliko zaglavlje i skup manjih elemenata koji se razlikuju po svojoj zasićenosti - oni važniji su tamniji. Istodobno, jasno razlikujemo grupiranje zbog činjenice da su neki pravokutnici smješteni blizu, a postoji značajna uvlaka između blokova. Općenito, sve je u najboljim tradicijama!

Veličina fonta

Web stranica google.com/design/spec ima standardnu ​​paletu fontova koju možete sigurno koristiti. Paleta koristi Roboto font, ali se može zamijeniti vlastitim potpisnim fontom za podršku brendu. Važno je sve pažljivo testirati jer renderiranje fonta može raditi drugačije na različitim uređajima. Obično OTF fontovi rade bolje od TTF-a.

Kontrastna tipografija

Još jedno načelo iz svijeta tiska koje se dobro uklapa u materijalni dizajn je kontrastna tipografija - stvarno primjetan kontrast između veličine fonta naslova i slaganog teksta. Lijepo je i dobro ističe ono glavno.

Modularna rešetka i vodilice

Sada na mjesto sadržaja na zaslonu. U dizajnu tiska koriste se modularne mreže; u dizajnu ekrana to su jednostavnije mreže s vrlo malim modulima. Dakle, Material Design koristi mrežu s korakom od 8 dp. DP je piksel neovisan o gustoći, jedinica slična jedinici točke u iOS-u.

Ali glavna značajka razlikovanja postavljanja sadržaja u skladu s načelima materijalnog dizajna je postavljanje ključnih vodiča. Oni postavljaju udubljenja od rubova zaslona, ​​strukturiraju informacije i kontroliraju pogled korisnika. Ako ste upoznati s dizajnom višestranih publikacija ili ste čitali Tschicholda, onda vjerojatno znate mnogo o rešetki i marginama i razumijete odakle potječu noge.

Zapravo, vidimo stupac teksta u sredini i veliku marginu s lijeve strane, što omogućuje fokusiranje na glavni sadržaj i ostavljanje pratećih elemenata na marginama.

Geometrijska ikonografija

Govoreći o ikonografiji, u Androidu se već neko vrijeme koriste jednostavne ikone, no u Material Designu postale su još jednostavnije i prijateljskije. Na neslužbenom izvoru materialdesignicons.com, dizajneri mogu pronaći ikone za svoje potrebe i dati doprinos gdje je to moguće.

Boja

Kao iu dizajnu tiska, boja je važno sredstvo izražavanja u dizajnu sučelja. U starom Androidu boja je bila nešto ekstra, ali sada igra istaknutiju ulogu. U materijalnom dizajnu, zadana paleta boja za aplikaciju sastoji se od primarne boje i boje naglaska.

Glavni se koristi za velika područja kao što je akcijska traka, a statusna traka obojena je u tamnijoj varijanti. Svjetlije naglašene boje koriste se na mjestima na kontrolama, gumbima, prugama, indikatorima itd. Boja naglašavanja osmišljena je da privuče pozornost korisnika na ključne elemente, kao što je plutajući gumb.

Koliko boje koristiti? Akcenti se postavljaju točkasto, u malim količinama. Postoji jednostavno osnovno pravilo za bojanje ostatka sučelja. Kada ima puno teksta, kao što je popis e-pošte, vrijedi ostaviti traku aplikacije standardne veličine i obojiti je kako bi se korisnik mogao usredotočiti na sadržaj. Ako nema puno sadržaja, na primjer, detaljan prikaz pojedinog elementa, fotografije ili kalkulatora, onda je ovo izvrsna prilika za korištenje velikih pločica u boji - 2 ili 3 puta veće od trake aplikacije.

Android podržava biblioteku pod nazivom Palette koja vam omogućuje izdvajanje boja iz fotografija. Odnosno, moguće je dinamički bojati sučelje na temelju foto ilustracija u aplikaciji.

Snimili smo fotografiju, a algoritam je iz nje identificirao 6 boja s različitim karakteristikama:
- postoje 3 bogate i 3 prigušene boje;
- dijele se na svijetle, standardne i tamne tonove;
- svaka boja pozadine ima svoju boju teksta, koja se također može koristiti.

Prekrasne fotografije

Konačno, baš kao i print dizajn, Material Design potiče korištenje fotografije i ilustracije u punom sjaju. Slike su većinom postavljene bez okvira, često “kroz”. Čak je i statusna traka posebno prozirna kako ne bi smetala. Štoviše, svaka kap "digitalne tinte" na ekranu ima svoju funkciju; gotovo ništa nije samo za ukras.

NB!

1. Brendirajte sa zadovoljstvom. Google je u boljoj poziciji da koristi svijetle boje kao brendiranje, ali to se ne bi trebalo smatrati problemom. Možete odabrati boje iz korporativne marke knjige i općenito koristiti logotip.
2. Ne zaboravite na udubljenja i "dajte malo zraka". Osnovna rešetka od 8 dp i lijeva margina od 72 dp uglavnom je pravilo. Neka sadržaj bude dobar i besplatan.
3. Izražajne fotografije čine razliku. Fotografije i ilustracije naš su izbor kao sredstvo izražavanja.

Značajna animacija

U stvarnom svijetu, objekti se ne mogu samo pojaviti niotkuda ili nestati u nigdje. To bi izazvalo zabunu i zbunilo ljude. Zato Material Design koristi smislenu animaciju kako bi prikazao točno ono što se upravo dogodilo.

Primjer 1. Animacija pokazuje da je ova kartica, kada se klikne, došla u prvi plan, otvorila se i postalo je vidljivo više informacija.

Primjer 2. Nakon klika događaj u kalendaru izlazi s površine, pretvara se u zaseban sloj “papira”, počinje se transformirati i otkriva u obliku detaljnih informacija o događaju.

Zanimljivo je da aktivno kretanje privlači oko - to je prirodno za naš vid. Pomoću animacije kontroliramo pažnju korisnika.

Asimetrija

Budući da je dubina sučelja ograničena debljinom uređaja, sve transformacije objekta moraju se izvoditi u ravnini. To također dovodi do činjenice da animacija transformacije mora biti asimetrična – odnosno promjena širine i visine objekta mora biti neovisna. U protivnom se javlja iluzija približavanja ili daljeg kretanja od gledatelja, i to na vrlo veliku udaljenost.

Reakcija

Drugi vrlo važan princip animacije u materijalnom dizajnu je odgovor na akcije korisnika. Gdje je to moguće, epicentar promjena sučelja trebao bi biti dodirivanje zaslona uređaja. Na primjer, val koji se pojavljuje i ide od točke kontakta s prstom. Ovaj efekt implementiran je bez problema u Android L.

Mikroanimacije

U Androidu L možemo animirati svaki element aplikacije - bili to prijelazi između sadržaja ili male akcijske ikone. Svaki detalj aplikacije je važan, a mikro-animacije dodaju više detalja i osjetljivost na svaku radnju korisnika.

Jasnoća i oštrina

I zadnje, ključno načelo animacije: kretanje treba biti brzo i jasno. Za razliku od banalnog ubrzanja na početku i usporavanja na kraju, krivulja animacije u Material Designu je prirodnija i zanimljivija. Objekti brže reagiraju i postižu ciljno stanje, vraćaju se brže, ali im je potrebno malo više vremena da na kraju dostignu stanje mirovanja. Kao rezultat toga, korisnik mora čekati manje (manje dosadno). Istodobno, tamo gdje je objekt već izašao iz sfere interesa korisnika, dopušta sebi prirodnije ponašanje.

NB!

1. Ne ostavljajte animaciju za kraj. Animaciju ne treba ostavljati do samog kraja - ona može biti ključni faktor u korisničkom iskustvu i o njoj treba unaprijed razmisliti.
2. Upoznajte svoje granice. Previše animacije također je loše. Kontrolirajte se i zapamtite da to mora biti smisleno.

Adaptivni dizajn

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

Od općeg prema specifičnom

Najčešća tehnika je smanjenje količine informacija prikazanih na zaslonu uz smanjivanje zaslona. Ako si na velikom ekranu možemo priuštiti prikaz i popisa i detaljnih informacija o odabranom elementu, onda se na pametnim telefonima prvo prikazuje popis, a za detalje nam treba poseban ekran. U slučaju tableta, traka s aplikacijama ponekad se može povećati kako bi se barem malo nosila s viškom slobodnog prostora.

Udubljenja

Postavljanje sadržaja pomoću blokova znatno olakšava rad sa slobodnim prostorom na velikim zaslonima. Znamo sadržaj svakog bloka, razumijemo koliko može biti širok da ne izgubi čitljivost, ali i koliko uzak da ne bude prevelika gužva. Na širokim zaslonima blokovi se razvlače do granica čitljivosti, a zatim se dodaju margine s rubova, koje mogu biti velike. Mogu se puniti plutajućim gumbom i matricama u boji.

Bijeli okviri

Ideje za organiziranje prostora i razmaka za različite zaslone možete pronaći na web stranici google.com/design/spec u odjeljku Whiteframes. Ovo je odlično mjesto za početak, stjecanje opće ideje i zatim nastavak vlastitih eksperimenata.

Vodiči

Vodiči nam daju uvlake za "tintu" na zasebnim listovima "papira". Na pametnom telefonu imamo jedan list i jedno dobro udubljenje s lijeve strane, ali na tabletu su dva iu oba slučaja postoji udubljenje. Važno je da će uvlačenje biti različito za ova dva faktora oblika. Na tabletu je 80dp, a na pametnom telefonu 72dp. Margine od rubova zaslona također su različite.

Dimenzije

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

Blokovi

Razmišljanje u blokovima općenito može biti od pomoći. Ako postavite takvu modularnu mrežu blokova djeljivih s 8dp, dobit ćete izvrstan vizualni ritam i lakše ćete donositi odluke. Idite na stranicu s bijelim okvirima i pogledajte materijale.

Alatna traka

Akcijska traka jedan je od najvažnijih dijelova sučelja. Sadrži zaglavlje, akcijske gumbe i navigaciju. U Androidu Lollipop, akcijska traka se pretvorila iz ograničene trake na vrhu u punopravni widget - funkcionalan i lijep kontrolni blok aplikacije. To je postalo moguće zahvaljujući činjenici da sada možete postaviti mnoge funkcionalne elemente na alatnu traku o kojima prije niste mogli ni sanjati:
- polja za unos, obrasci;
- plutajući gumb glavne akcije;
- alatna traka je skrivena proširenom navigacijom, ali ovdje vidimo potpuno funkcionalan widget;
- alatna traka je prikladna za upravljanje ako je potrebno.

NB!

1. Ladica za navigaciju nije uvijek potrebna. Google vrlo često koristi kliznu navigaciju u svojim aplikacijama, pa je možete vidjeti u raznim primjerima. Ali Google ima puno problema koji se mogu riješiti uz njegovu pomoć: postavljanje pomoći, postavke, prijava/odjava, podaci o korisniku i tako dalje. Ako imate slične zadatke, onda je sve u redu, ali ako radite jednostavan alat, onda se ne isplati.
2. Budite hrabriji i duhovitiji s alatnim trakama. Mogućnost dinamičke promjene veličine alatne trake, čineći je dvostrukom ili trostrukom, vrlo je zgodna i praktična. Većina dizajnera se boji nositi s tim i odabrati jednu veličinu jednom zauvijek, ali ovdje možete i trebate biti hrabriji.
3. Nema potrebe praviti geto od donjeg kuta za plutajući gumb. Plutajući gumb može biti bilo gdje: dolje, gore, desno, lijevo. Naravno, može biti zgodno doći do njega u kutu, ali to nije jedina opcija. Gumb se može pomicati s mjesta na mjesto ovisno o zadatku.
4. I pametni telefoni i tableti; i okomito i vodoravno. Raspon 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 ako govorimo o pametnim telefonima). Ovaj trenutak treba razraditi.

Ovo je materijalni dizajn. Ne bojte se eksperimentirati i griješiti: nemojte se zadržavati na kopiranju postojećih rješenja. Probaj!

Oznake:

• dizajn materijala
• android
• dizajn sučelja

Dodaj oznake

Označite objavu vlastitim oznakama Oznake je bolje odvajati zarezom. Na primjer: programiranje, algoritmi

Komentari 121

• • • • • • • • • • Držite li i vi, poput Googlea, telefon samo vodoravno?
                    

                    U okomitom se koristi samo 50-70% zaslona

                    
                    

                    • Na ovom ekranu ima dosta teksta.

                      Ima li ovo puno teksta? Što je Twitter učinio ljudima...

Što će biti ako čovjek djetinjstvo provede slušajući filmove gdje pametnija računala neminovno pobiju cijelo čovječanstvo, a kad malo poraste taj isti čovjek čita o NSA-i i drugim zlikovcima koji mu danonoćno čitaju SMS poruke i šalju ih u SAD? Bit će oprezan prema Googleu.

Nedavno je Good Corporation svijetu pokazala svoju viziju korisničkih sučelja budućnosti. Materijalni dizajn je objedinjeni koncept za konstruiranje logike rada i izgleda servisa i aplikacija, objedinjujući sve Googleove proizvode kako bi ih korisnicima učinili što jednostavnijim i intuitivnijim za percipiranje.

Ideja je toliko velika da će promijeniti ne samo izgled svih Googleovih proizvoda. Dolaskom novog koncepta promijenit će se i uloga same tvrtke u životima ljudi.

Što će Google postati?

Da, Google je za sada samo hrpa usluga. Međutim, s materijalnim dizajnom, tvrtka zapravo stvara drugu stvarnost unutar naših računala i mobilnih uređaja. Sa svojom logikom, sa svojim pravilima i zakonima, sa svojom fizikom.

Kada stvarate fizičke stvari, oslanjate se na tisuće godina ljudskog iskustva. Ali dizajn softvera tek je u povojima. Pogledali smo sav naš softver i zapitali se od čega je napravljen? John Wiley, Google Search Design Lead

Koje su Google usluge sada za ljude? Živi li to traka za pretraživanje u pregledniku? Ili je to vaš Android mobilni uređaj?

Google se može definirati na mnogo načina, a mnogi od njih će biti istiniti. Ova tvrtka stvorila je sustav usluga koji je postao temelj naše digitalne infrastrukture.

Ali u bliskoj budućnosti na Google se više neće gledati samo kao na Chrome ili Android.

Pojedinačne Google usluge i proizvodi razvijaju se u jedan informacijski 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 sljedećeg vlaka. Međutim, ovaj isti sat upozorit će vas na važno pismo uprave ako ga pogledate na poslu. Ovaj sat će zamijeniti vašu lozinku za prijavu na vaš račun na vašem računalu, na čijem će ekranu odmah biti prikazano tijelo tog važnog pisma vašeg šefa. Morate hitno otići i nemate vremena dovršiti tekst odgovora? Nema problema, jer je vaš pametni telefon ili tablet već otvorio mail sučelje s napola ispisanim tekstom, a čak je i pokazivač na mjestu gdje ste stali.

Radni dan je završio i idete kući. Isti zasloni sada obavljaju potpuno različite funkcije. Podsjetit će vas da dođete po djecu, kupite namirnice za večeru i obavijestiti vas o izlasku nove epizode vaše omiljene TV serije.

Takva nevjerojatna raznolikost funkcija i zadataka koji se izvode radit će u jedinstvenom digitalnom okruženju koje je korisniku intuitivno, postupno se stapajući sa stvarnim svijetom.

Jedna od ključnih ideja Material Designa je stvoriti intuitivni osjećaj za korisnika da radi sa stvarnim fizičkim objektima unutar digitalnog okruženja. U biti, radi se o emulaciji trodimenzionalnog prostora u ravnini ekrana, ali sa svim prednostima koje virtualno okruženje može pružiti. Gumbi i prozori ovdje, poput kartonskih kartica, mogu rasti i smanjivati ​​se, raspadati se i preuređivati.

Najdojmljivija stvar kod ovog koncepta je da će svojstva i ponašanje objekata na ekranu biti predvidljivi i razumljivi ljudima kao i bilo koji jednostavan događaj u fizičkom svijetu. Za razliku od postojećih sučelja, gdje pritisak na gumb ne uzrokuje nikakve promjene na ostatku zaslona, ​​svaka radnja u Androidu L uzrokuje odgovarajući učinak koji utječe na cijelo sučelje. Dodirnite određeni dan na kalendaru i on će se povećati, gurajući ostale dane svojim rastućim volumenom i masom. Pritisnite tipku za reprodukciju u playeru i otvorit će se poput omota od bombona na kontrolnoj ploči.

Ovaj koncept rezultat je pažljivog proučavanja tvrtke o tome kako papir funkcionira u stvarnosti. Tim koji radi na projektu izradio je fizičke ikone aplikacija od pravog papira. Htjeli su vidjeti kako svjetlost i sjena mogu komunicirati s ravnim (poput paravana), ali stvarnim materijalom.

Virtualno okruženje pak omogućuje kršenje pravila. Malo je vjerojatno da je itko vidio kako se papir cijepa na dijelove, čiji se komadi preuređuju i stapaju u jedan objekt. To pruža dodatne mogućnosti, ali postoji rizik stvaranja previše nerealnog sustava, predaleko od fizikalnih zakona. Kako bi se održala prirodna intuitivnost, sva tipografija, slike i boje su izbačene tijekom procesa razvoja. Tim se usredotočio isključivo na performanse čudesnog papira.

Ne morate biti dizajner da uočite kršenje pravila u stvarnom svijetu. Pada li papir na stol kao komad stijene? Očito tu nešto nije u redu i svakome će biti jasno.

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

Ako postoji dovoljno jasan sustav pravila, moguće je dodati nove materijale. Papir je bio očigledan izbor zbog lakoće prikaza na ekranu. Bez izražene teksture, praktički bez volumena. Ali pokušajte zamisliti, na primjer, tkaninu ili tekućine.

Filozofija skeuomorfizma, koju je Apple aktivno koristio i naposljetku napustio, odmah pada na pamet, zar ne? Appleov pristup također je bio usmjeren na to da digitalni svijet učini lakšim za korisnike, ali u usporedbi s Googleovim djeluje prilično površno. Appleov skeuomorfizam samo je nagovijestio sličnost aplikacije s njezinom kopijom iz stvarnog života.

Google ne želi samo povući neke analogije za bolju percepciju. Njihov cilj je objasniti korisnicima što se događa kada se određeni element sučelja pojavi ili nestane s ekrana.

Materijalni dizajn nije samo pokušaj stvaranja identično dizajniranih usluga za različite uređaje. Google stvara paralelni svijet čija je svaka čestica djelić nečeg materijalnog. Kada primite poruku na svoj pametni sat sa svog pametnog telefona, ne vidite samo mrtvi dio teksta. To je komad kartona s porukom na sebi, a ta poruka dolazi s vašeg pametnog telefona na vaše zapešće.

Interakcija s digitalnim svijetom moguća je na potpuno različite načine. To može biti nešto okruglo na našem zapešću ili nešto pravokutno u našoj ruci. Materijalni dizajn ima za cilj osigurati zajamčen pristup relevantnim i relevantnim podacima, bez obzira na kombinaciju uređaja koju osoba koristi.

Ovako, bez nametanja i pritiska, tvrtka jednostavno stvara tehnologije temeljene na ključnom principu “fokusiraj se na korisnika, a sve ostalo će doći samo”.

Zanima nas vaše mišljenje. Smatrate li takav koncept zlom ili takve inicijative doživljavate kao obećavajući način interakcije s informacijskim okruženjem u budućnosti?

Tko razvija mobilne aplikacije i web stranice, napisao nam je kolumnu i postavio sve na svoje mjesto što se tiče flat i material designa.

Uglavnom, razlika između Flat dizajna i Material Designa je suptilna. Osobi koja nema dubokog znanja o grafičkom dizajnu oni se doista mogu činiti vrlo sličnima. U ovom ću članku pokušati “baciti svjetlo” na neke od razlika među njima. Dobit ćete dodatna znanja koja su toliko potrebna da ne biste slučajno povrijedili delikatnu prirodu dizajnera.

Malo povijesti

Prije nego počnemo govoriti o razlikama između dva najpopularnija dizajnerska trenda, saznajmo odakle one potječu. Postoji mišljenje da je materijalni dizajn stvoren na temelju ravnog. Odakle onda flat dizajn?

Skeuomorfizam

Kada je riječ o korisničkom sučelju i web dizajnu, koncept skeuomorfizma odnosi se na pristup čija je glavna ideja imitacija. Ne ulazeći u previše detalja, sjetimo se samo Appleovih sučelja prije iOS 7 s njihovim “realističnim teksturama, osvjetljenjem i bombastičnim efektima”.

Pokušaj da se digitalni objekti učine sličnim svojim primjercima iz stvarnog svijeta bio je motiviran potrebom da se olakša interakcija korisnika s uređajem. Zapravo, to je razlog zašto sva sučelja s realističnim teksturama godinama dominiraju digitalnim svijetom. Skeuomorfni dizajn odlično pomaže korisnicima u prijelazu iz stvarnog svijeta u digitalni.

Međutim, s porastom mobilne tehnologije, postupno se javlja potreba da se prvenstveno usredotočite na praktičnost i jednostavnost korištenja. Slažem se, u ovom području potreba za stvaranjem mobilnih rješenja dostupnih s različitih uređaja značajno raste. Upravo u ovom trenutku jednostavnost postaje novi standard dizajna.

Napomena: Nemojte ni pod kojim uvjetima misliti da je skeuomorfizam potpuno nestao. Naširoko se koristi u igrama u kojima je potrebno stvoriti realističan svijet i pomoći igračima da osjete svoj karakter kako bi duboko uronili u proces igre.

Ravni dizajn

Ovaj stil je potpuno lišen bilo kakvih trodimenzionalnih objekata. Grubo govoreći, ravnom dizajnu nedostaju takvi stilski elementi kao što su padajuće sjene, teksture, gradijenti, ali obraća pažnju na igru ​​fontova i boja i ikona. Ali zašto je sve to bilo potrebno? Odgovor je jednostavan.

Prvo, ravni dizajn značajno smanjuje vrijeme učitavanja stranice. Odsutnost "teških" skeuomorfnih detalja (mislite: slojevi, serifni fontovi, gradijenti) čini ravne elemente dizajna "lakšima", što zauzvrat značajno ubrzava vrijeme učitavanja. Štoviše, ravni elementi izgledaju jednako atraktivno na zaslonima visoke i niske rezolucije.

Drugo, jednostavne slike mogu prenijeti vašu ideju korisnicima brže nego detaljne ilustracije: one su nedorečene i stoga ih je prilično lako razumjeti.

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

Danas je flat dizajn dobio zasluženo priznanje, ali i dalje ima svojih problema. Najočitiji primjer takvih problema bilo je izdanje Windowsa 8 od strane Microsofta. Ovaj operativni sustav smatra se pionirom ravnog dizajna i podržava koncept Metro dizajna. Ono što je dovelo do problema je to što je tvrtka smatrala potrebnim obratiti više pažnje na tipografiju nego na samu grafiku.

Rezultati testa upotrebljivosti sustava Windows 8 koji je provela NN Grupa pokazali su da korisnici imaju poteškoća u razlikovanju objekata na koje se može kliknuti od onih na koje se ne može kliknuti. Korisnici su se žalili da se objekti koji izgledaju statični zapravo mogu kliknuti. Kao rezultat toga, glavna misija tvrtke - pomoći korisnicima da ispravno protumače sustav - nije uspjela.

Još jedna tvrtka koja se često povezuje s ravnim dizajnom je Apple. Odmaknuli su se od skeuomorfnih elemenata dizajna u mobilnom operativnom sustavu iOS 7, objavljenom 2013. godine. Ovoga puta prijelaz je primljen malo bolje, uglavnom zbog činjenice da tvrtka nije pokušala potpuno ažurirati koncept korisničkog sučelja, već je jednostavno dodala nekoliko promjena prema ravnom dizajnu. To je omogućilo korisnicima da koriste proizvod oslanjajući se na svoje prethodno iskustvo s operativnim sustavima i web stranicama.

Dizajn materijala

Odmah da razjasnimo: materijalni dizajn je više brendirani proizvod nego spontani dizajnerski trend koji je stekao široko prihvaćanje. To je ono što ga uglavnom razlikuje od njegovog ravnog dizajna.

Nazivajući dizajnerski materijal "brendiranim", mislim na to da on ima čitav niz jasno definiranih preporuka i načela kojih se pridržava svaki dizajner koji drži do sebe. Sasvim je očito zašto je Google predstavio svoj materijalni dizajn: postojala je potreba za unificiranjem dizajna tako da aplikacije izgledaju jednako na bilo kojem od mnogih Android uređaja.

Iako prilično funkcionalan, ravni dizajn još uvijek se smatra teškim za razumijevanje. Istina je da ravni objekti na ekranu mogu zbuniti korisnike (osobito one koji nemaju iskustva u korištenju mobilnih i web sučelja). Stoga materijalni dizajn nastoji vratiti elemente skeuomorfizma, ali u znatno pojednostavljenom obliku. Slike izgledaju ravno, posebno kada je riječ o bojama, ali su i dalje višedimenzionalne zahvaljujući prisutnosti Z-osi.

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

Za i protiv ravnog dizajna

Ostavimo iza sebe povijest evolucije stilova i prijeđimo na nešto značajnije - nabrojimo prednosti i slabosti ravnog dizajna.

• Minimalizam i stil
• Intuitivnost. Lakše ćete svoju ideju prenijeti korisnicima.
• Ušteda vremena i resursa. Stranice se učitavaju puno brže uz manju potrošnju propusnosti.
• Usredotočite se na sadržaj. Sučelje je bez nepotrebnih detalja koji mogu odvratiti pažnju od istinski vrijednih informacija.
• Jednako dobro izgleda na raznim uređajima, bilo da se radi o PC pregledniku ili pametnom telefonu.
• Ubrzava proces razvoja dizajna web stranice ili aplikacije eliminirajući nepotrebne detalje dizajna.

• Minimalistički stil.
• Prilično intuitivno na intuitivnoj razini. Materijalni dizajn bit će jednako lak za uočiti i iskusnim korisnicima i početnicima.
• Umjereni skeuomorfizam. Sve izgleda realističnije zahvaljujući korištenju Z-osi (jedinstven Google koncept).
• Postoji set priručnika koji se stalno ažuriraju. Stoga im se svaki dizajner uvijek može obratiti ako se tijekom radnog procesa pojave poteškoće.
• Potiče se animacija za web rješenja. Nema potrebe podsjećati koliko ljudi vole kretanje. Osim toga, animacija vam omogućuje da sučelje učinite jasnijim i intuitivnijim.

• Ima vlasnika (Google tvrtka). Stoga sva pitanja i prijedloge za poboljšanje treba uputiti vlasniku.
• Zbog osi Z, proces projektiranja može potrajati dulje.
• Animirani elementi zahtijevaju više resursa.
• Čvrsto pridržavanje smjernica može ograničiti originalnost dizajna.

Rezimirati

Zapravo, ne bi se trebalo smatrati da jedan od razmatranih pristupa dizajnu ima jasnu prednost nad drugim, budući da ravni i materijalni stilovi idu jedan uz drugog. Oba su nevjerojatno popularna i oba su lišena pretjeranog realizma. Materijalni dizajn nasljednik je flat dizajna, dok je sam flat dizajn bio reakcija na preteška i realistična rješenja. Materijalni dizajn dodao je nešto od čega se ravni dizajn oduvijek pokušavao odmaknuti - mali skeuomorfizam. Iako će jedna stvar uvijek biti različita između ovih pristupa: materijalni dizajn je Googleov vlasnički proizvod, a ravni dizajn rezultat je spoja nekoliko dizajnerskih praksi koje prvenstveno teže sveukupnoj jednostavnosti.

Zapravo, ravni dizajn je dosta evoluirao posljednjih godina, od potpuno "ravnog" stila do "polu ravnog" stila. Sada dopušta korištenje slojeva i suptilnih sjena kako bi objekti izgledali dublje nego što su se prije činili. Dakle, ti i ja smo sretni suvremenici flat dizajna 2.0.

Na kraju, ništa vas ne sprječava da pokušate kombinirati ova dva pristupa kako biste stvorili istinski funkcionalan proizvod prilagođen korisniku. Dakle, uzmite malo inspiracije od gurua za dizajn stana i materijala i bacite se na posao!

Googleov potpredsjednik dizajna Matias Duarte u intervjuu za The Verge govori o osnovnim principima novog dizajna koji se zove Material. Ovo je potpuno drugačiji pristup, pruža jedinstven skup pravila, u rasponu od vrste softvera do funkcija. Za sada se dizajn čini pomalo čudnim i treba se malo naviknuti.

Dizajnerski tim u Googleu osjetio je potrebu osmisliti unificirani izgled i funkcionalnost softvera koji bi se mogao koristiti u svim proizvodima: Android, Chrome OS, web usluge. Umjesto da počnu s razvojem palete boja, započeli su s pitanjem: "Što je softver?"

Materija i oblik

Odgovor je stigao iz odjela dizajna, kada su Jon Wiley, glavni dizajner Googleove tražilice, i njegov kolega Nicholas Jitcoff pogledali dizajn Google Nowa. Pogledali su sučelje kartice i pomislili: "A ako pomaknete karticu, što je iza nje?"

“Ovo nedužno pitanje zapalilo je snažnu iskru!” - rekao je Duarte. Cijeli je tim počeo razmišljati o novom načinu interakcije s elementima softvera. Umjesto da samo koristi piksele na ekranu i apstraktne slojeve, tim je počeo razmišljati o dizajnu kao o stvarnom, opipljivom objektu. Stoga karte moraju imati fizička svojstva. Vrijeme je da osmislimo pravila koja bi definirala kako bi se sve trebalo ponašati i kretati na ekranu. Razvojni tim želio je postići učinak da korisnik komunicira s fizičkim objektima.

Tako je započeo rad na metaforičkom materijalu nalik papiru - ravna i bijela s realističnim sjenama. Ovo je bilo sjeme iz kojeg je izrastao ostatak dizajna, čija se implementacija može vidjeti u Androidu L. Materijalni dizajn odnosi se na hrabre, svijetle boje, minimalizam i osjećaj dosljednosti.

Wiley i Zhitkoff kažu da je to estetska evolucija cjelokupne Googleove filozofije dizajna. U 2012. i 2013., unutar zidova sjedišta internetskog diva, započeo je rad na Projektu Kennedy, koji bi objedinio dizajn svega.

Kreativnost i ograničenja

Materijalni dizajn okuplja sve najbolje ideje. Matias Duarte vidi naš novi stil kao niz ograničenja koja, po njegovom mišljenju, čine rad dizajnera aplikacija lakšim i dosljednijim. Na primjer, gesta okretanja kartice kako bi se vidjelo što piše na poleđini. U normalnom svijetu to nije moguće zbog nedostatka prostora. Softver je kao da su stvarni fizički objekti unutar uređaja. I očito nema mjesta na vašem telefonu da okrenete karticu, pa Google ograničava ovu vrstu manipulacije.

Uvelike se oslanjamo na fiziku, a softver se često ponaša na načine koji remete naše razumijevanje svijeta, poput nekog znanstveno-fantastičnog filma koji prkosi osnovnoj logici. Duarte izravno komentira Appleovu novu iOS filozofiju dizajna.

Ne jurimo kroz prostor i vrijeme nadzvučnom brzinom. Oblikovati - je potraga za rješenjem unutar strogih ograničenja. Dizajn je umjetnost.

Googleovi dizajneri tvrdoglavo odbijaju imenovati korišteni fiktivni materijal. Rješenje koje im daje veću fleksibilnost i dodaje sloj metafizičkog misticizma u suštinu. Quantum paper - ovo je rečeno u nekim curenjima prije Google I/O. To je važno jer se materijal pokorava fizici i neće upasti u zamku skeuomorfizma. To nije baš imitacija fizičkih objekata, kako to Duarte kaže, to je nešto "magično".

Materijal u našem dizajnu može činiti stvari koje fizički papir ne može, poput rasta i smanjivanja s animacijama. Te su animacije važne za Google jer pomažu korisnicima da shvate da su unutar softvera. Wiley uspoređuje softver s 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.

Materijalizirati

Druga važnija stvar koju donosi Material Design je unifikacija. Google već godinama radi na algoritmima za sve svoje proizvode, a to je postalo sastavni dio nove filozofije dizajna. Umjesto da korisnik sve mora sam konfigurirati, Material Design ih tjera da vjeruju da će ono što trebaju na zaslonu biti ono što im treba u pravom trenutku.

Zbog toga Android Wear korisnicima ne daje ništa osim interakcije s obavijestima. Alex Faaborg, dizajner platforme, kaže:

Ne provodite puno vremena u interakciji sa satom. Samo želite moći baciti pogled na svoje zapešće i odmah dobiti potrebne informacije ili izvršiti radnju glasovnom naredbom. Obavili smo ogromnu količinu posla na cijeloj Google platformi.

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

To smo učinili jer je to najjednostavnije rješenje. Želimo dizajnirati što jednostavniji dizajn za korisnika.

Parc 3.0

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

Duarte kaže da je Xerox PARC napravio briljantan posao stvaranja poznatog iskustva prozora i kursora. To je bilo inovativno jer je tvrtka uspjela stvoriti virtualnu verziju stvarne radne površine. Ljudi su razumjeli kako računalo radi i mogli su udobno raditi s njim. Ovo se također odnosi na ono što je Apple napravio sa zaslonima osjetljivim na dodir.

Sada Google vjeruje da je uspio učiniti isto. Wiley kaže da ljudi danas imaju mnogo tehnologije: ekrane osjetljive na dodir, geste, glasovne naredbe, inteligentne algoritme. Material Design kombinira svu tu raznolikost u jednu intuitivnu stvar. To će vam pomoći da ga lako koristite na OS-u Chrome, Androidu ili webu.

9 načela

1. Materijal je metafora

Material Design je sustav koji racionalizira prostor i kretanje. Dizajn se temelji na taktilnoj stvarnosti, inspiriran mogućnostima papira i tinte, ali otvoren mašti i magiji.

2. Površine su intuitivne

Plohe i rubovi prenose vizualne signale temeljene na našoj percepciji stvarnosti. Korištenje poznatih taktilnih atributa ulazi u prvobitne dijelove našeg mozga i pomaže nam da brzo shvatimo što se zamišlja.

3. Dimenzija stvara interakciju

Osnove svjetla, površine i kretanja ključne su za interakciju objekata. Realno osvjetljenje dijeli prostor i usmjerava pozornost na pokretne dijelove.

4. Unificirani responzivni dizajn

Jedan dizajn za sve. Svaki uređaj odražava drugačiji pogled na iste osnovne elemente. Svaki prikaz je prilagođen veličini i interakciji za svaki uređaj. Boje, ikonografija, hijerarhija i prostorni odnosi ostaju nepromijenjeni.

5. Fontovi, grafika, boje

Prepoznatljiv dizajn stvara hijerarhiju, razumijevanje i pomaže fokusiranju. Posebno odabrane boje, korištenje prostora od ruba do ruba, veliki fontovi i namjerno/namjerno korištenje bijele boje omogućuju potpuno uronjenje korisnika u proces interakcije, čineći ga jasnijim i razumljivijim.

6. Primarne radnje

Radnja korisnika bit je dizajna. Primarne radnje transformiraju cijeli dizajn. Fokusiraju se na temeljnu funkcionalnost i odmah upadaju u oči korisnika.

7. Korisnici pokreću promjene

Promjene u sučelju nastaju zbog radnji korisnika. Kretanje pojačava doživljaj primarne radnje.

8. Animirana koreografija

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

9. Kretanje daje smisao

Pokret ima značenje i neophodan je za privlačenje pažnje. Prijelazi su učinkoviti.

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

Postavili smo si cilj stvoriti vizualni jezik za naše korisnike koji kombinira poznata načela klasičnog dizajna s inovacijama.

Vjerojatno ste više puta čuli izraz "material design". Koncept materijalnog dizajna nije nov i već je čvrsto etabliran na tržištu web dizajna, prvenstveno zbog svoje privlačnosti korisničkom iskustvu. Materijalni dizajn prvi je u ljeto 2015. godine predstavio Google i od tada je neraskidivo vezan pojam s ovom tvrtkom. Koje su njegove posebnosti, osnovni principi i je li tako dobar kao što o njemu govore? Više o tome kasnije u članku.

Materijalni dizajn nije samo ideja, on je svojedobno natjerao dizajnere da potpuno preispitaju svoje poglede na proces izrade web stranica i aplikacija. Moderne web stranice u potpunosti koriste Googleove okvire dizajna i materijalnu dokumentaciju dizajna. Ali prije nego što prijeđemo na desert, definirajmo koncept materijala za dizajn, njegove svrhe i glavne karakteristike.

Što je materijalni dizajn?

Materijalni dizajn grafički je jezik i stil dizajna koji je stvorio Googleov dizajnerski tim kako bi pomogao dizajnerima u stvaranju web stranica i aplikacija koje su pristupačne, praktične i korisne. Koncept se temelji na živoj dokumentaciji koja je javno dostupna i mogu je koristiti svi zainteresirani za koncept materijalnog dizajna. Do danas se dokumentacija neprestano ažurira kako bi odražavala promjene u dizajnu i razvoju. Zahvaljujući tome, dizajn materijala ostaje relevantan i stalno se razvija kao smjer.

Materijalni dizajn ima niz ciljeva i načela koje su naveli njegovi kreatori. Popis može izgledati pomalo idealistički, ali ipak ćemo u nastavku predstaviti njegove glavne ideje.

Ciljevi dizajna materijala

1. Stvorite vizualni jezik koji kombinira klasična načela dobrog dizajna s inovacijama i mogućnostima znanosti i moderne tehnologije.
2. Razvijte jedan osnovni sustav koji vam omogućuje stvaranje univerzalnih dizajna za različite platforme i uređaje. Mobilni principi su temeljni, ali dodir, glasovne naredbe, unos mišem i tipkovnica primarni su načini unosa i interakcije koji će se uzeti u obzir pri razvoju dizajna.

Načela dizajna materijala:

1. Materijalni dizajn je metafora: vizualni signali i svi elementi grafičkog dizajna moraju biti zasnovani i međusobno povezani s okolnom stvarnošću, materijalnim svijetom.
2. Grafički, jasni, svrhoviti: Osnovna teorija dizajna (korištenje tipova, mreža, organizacija prostora, mjerilo, proporcija, boja i slike) trebala bi voditi vizualne elemente i činiti vizualnu osnovu dizajnerskog materijala.
3. Svaki pokret ili radnja je važna: kretanje predmeta ili druge radnje koje se izvode ne bi trebale ometati korisnika, naprotiv, trebale bi osigurati pogodnost i dosljednost radnji koje se izvode.

Uz gore navedene ciljeve i načela, postoje mnogi drugi vodeći čimbenici. Koji definiraju materijalni dizajn. Dokumentacija materijalnog dizajna podijeljena je na mnoge specifične koncepte i tehnike. Tako je, na primjer, Google razvio skup specifičnih pravila za stvaranje animacija, stilova, izgleda, komponenti itd.

Sve ove preporuke temelje se na osnovnim svojstvima dizajna materijala. Najvažnije je da se materijalni dizajn temelji na stvarnosti, u kojoj su objekti smješteni u gotovo trodimenzionalnom prostoru. U smislu estetike, materijalni dizajn nalazi se negdje između ravnog dizajna i skeuomorfizma.

Boja i tipografija materijalnog dizajna

Boje u materijalnom dizajnu imaju mnogo toga zajedničkog s . Palete materijala prilično su odvažne i svijetle. , isto kao u ravnom dizajnu, jednostavan sans serif.

« Materijalni dizajn pun je prigušenih tonova, pristup koji se oslanja na modernu arhitekturu, prometne znakove, trake za označavanje i sportske terene”, navodi se u Googleovoj dokumentaciji o materijalnom dizajnu. “Naglasite hrabre sjene i svijetle dijelove. Koristite neočekivane i svijetle boje».

A najbolja stvar kod koncepta boja materijalnog dizajna je korištenje jasnog kontrasta. Za praktičnost korisnika, Google nudi kompletnu paletu boja s uzorcima dostupnima za preuzimanje. Koncepti boja toliko su jednostavni da se pitate misli li Google da su dizajneri potpuno zaboravili teoriju boja.

Smjernice za odabir i korištenje fontova također su vrlo osnovne i jednostavne. Zadani font za sve aplikacije – Roboto – dostupan je za preuzimanje ovdje, gdje možete pronaći i tablicu kombinacija i odabira fontova.

Predlošci, struktura i dizajn

U svojoj strukturi i rasporedu elemenata, materijalni dizajn uvelike posuđuje koncept dizajna tiska. Materijalni dizajn potiče dizajnere na stvaranje i korištenje osnovne mreže i matematičke strukture za postavljanje elemenata na temelju uzoraka.

Zatim se predložak raščlanjuje na područja, za svako od kojih dokumentacija daje niz preporuka koje su usmjerene na poboljšanje korisničkog iskustva na stranici ili aplikaciji (postoje i preporuke o tome koliko je pojedini element važan).

Osnovni elementi oblikovanja materijala

Svaki element od kojeg se može sastojati stranica izrađena u materijalnom stilu detaljno je opisana u dokumentaciji. Počevši od toga kako ga izraditi i kako bi trebao izgledati, do mjesta, načina i trenutka pojavljivanja na ekranu korisnika. Općenito, teško je smisliti nešto što je kreatorima promaklo ili nije. Popis uključuje 19 glavnih strukturnih komponenti, a neke od njih su navedene u nastavku.

• Donji zaslon (donji slojevi dizajna)
• Gumbi
• Kartice
• Dijalozi
• Separatori
• Rešetke
• Popisi
• Trake napretka i aktivnosti
• Klizači
• Podnaslovi
• Prekidači
• Kartice
• Tekstna polja
• Skočni prozori

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

Praktičnost, pristupačnost i korisničko iskustvo

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

Dokumentacija materijalnog dizajna uvelike se fokusira na pristupačnost, upotrebljivost i korisničko iskustvo, što je sve vrlo važno. Dok se mnoga estetska svojstva materijalnog dizajna iskusnim dizajnerima mogu činiti prilično primitivnima, neki od koncepata korisničkog iskustva i interakcije implementirani su na najvišoj razini.

Posebno je koristan odjeljak o modelima interakcije. Otkriva ideje kojima je cilj učiniti pojedine elemente dizajna univerzalnima u odnosu na sve moguće web projekte. Na primjer, format za određivanje datuma i vremena ili radnju pretraživanja. Oni se mogu razlikovati od mjesta do mjesta, ali razlike su male i općenito su ti elementi prilično univerzalni. Ako posjetitelj vidi povećalo, on razumije da je pred njim pretraga koja se može koristiti, čak i ako pored nje nema kazala teksta. Zato Material Design sadrži neke od najjednostavnijih alata koje korisnici očekuju vidjeti na bilo kojoj web stranici i s kojima su navikli raditi.

Dostupnost i razumljivost dizajna još je jedan aspekt koji je naširoko pokriven u dokumentaciji materijalnog dizajna. 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 je važno uzeti u obzir mogućnost pregledavanja dizajna na uređajima s visokim kontrastom, velikim zaslonom, bez vidljivog zaslona, ​​samo glasovnom kontrolom ili kombinacijom svih ovih elemenata.

10 Resursi materijalnog dizajna

Materijalni dizajn popularna je tema za raspravu i izvor inspiracije za mnoge blogove, forume i druga mjesta na kojima se okupljaju web dizajneri. Postoji mnogo korisnih stvari koje se mogu preuzeti izravno s Googleovih resursa, ali osim toga postoje mnogi resursi koji objavljuju svoje radove u stilu materijalnog dizajna. Ovdje su neke stranice koje vam mogu pomoći da naučite koncepte materijalnog dizajna i preuzmete besplatne materijale.

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

1. dio: Galerija materijalnog dizajna za web-mjesta i aplikacije – besplatni materijali

Kako bismo pojednostavili zadatak onim čitateljima koji su se odlučili za projekt u stilu materijalnog dizajna, odlučili smo stvoriti galeriju s gotovim razvojem i rješenjima. Samo zgrabite jedan ili više besplatnih setova, zahvaljujući dizajnerima diljem svijeta. Ispod ćete pronaći opsežnu zbirku takvih predmeta.

Materijalni dizajn UXPin-a

Materijalni dizajn Creative Tim

Besplatan izbor materijala iz Designtoryja

UIDE – besplatni materijal za skice Mateusza Dembeka

Google resurs skica materijalnog dizajna

L Bootstrap dizajn materijala u Android stilu Vitaly Chernega

Resurs skica za dizajn materijala iz Boilerplate-a

Materijalni dizajn za EL Passion

Froala blokovi u materijalnom stilu

Free Landing 1.0 u materijalnom stilu

Dizajn mobilnog materijala

avsc dizajn materijala

Dizajn UI materijala Jakub Kośla

Materijalni dizajn za Android by Ivan Bjelajac

Materijalni dizajn Ultralinx

Dizajn mobilnih materijala od Emme Drews

Besplatan izbor materijala od Adriana Goije

Materijalni dizajn iz UI8

Dizajn materijala za Photoshop od Psddd

Android materijal dizajn PSD iz Nine Hertz

Druge zbirke materijalnog dizajna koje bi mogle biti korisne

Dizajn interaktivnog materijala stanice Nelson Sakwa

Widgeti u stilu materijala iz Elad Izaka

Materijalna skica Benjamina Schmidta

Materijal za izbor boja Birač boja

Sažmimo to

Koncept materijalnog dizajna dobro je osmišljeno rješenje za izradu modernog dizajna web stranice ili aplikacije. Dodatno, postoji prilično detaljan vodič za materijalni dizajn koji će biti vrlo koristan dizajnerima početnicima, ali se može činiti pomalo primitivnim za iskusne dizajnere.

Moguće je da će se sutra pojaviti potpuno novi dizajn koji će izbrisati materijalni dizajn iz sjećanja programera, kao što je svojedobno izbrisao Flash tehnologiju. Nitko nije imun na ovo. Ali kao dizajneri, imate pravo sami odlučiti koliko vam je dizajn materijala zanimljiv i potreban u vašim sljedećim projektima, kao i koristiti se njegovim razvojem i elementima za vlastite eksperimente.

Zabavite se stvarajući dizajne, a ako imate što dodati članku, slobodno napišite svoje prijedloge u komentarima.