Kako Google dizajneri prilagođavaju materijal

Materijalni dizajn pruža skup alata i smjernica koji će vam pomoći da donesete informirane odluke o različitim UX dizajnerskim uputama koje biste mogli poduzeti pri stvaranju aplikacije. Ali što se događa kada smjernice ne odgovaraju vašim proizvodima? A što se događa s Googleom kada dizajner radi na proizvodu koji ne odgovara baš smjernicama?

Smjernice Materijala prilagođavaju se. U ovom ćemo članku razmotriti dvije Googleove aplikacije - Keep i Inbox - da bismo shvatili kako one ne samo da sakrivaju neka pravila, već kako pomažu u oblikovanju smjernica Materijalnog dizajna u cjelini.

Inbox: Istraživanje tipografske mreže

Izrada nove web-aplikacije za e-poštu izrazito je ambiciozan posao pri Googleu, pogotovo kada se pojavljuje zajedno s etabliranim proizvodom kao što je Gmail. Inbox tim je za cilj stvorio gušće korisničko sučelje, kao i jedinstveno korisničko iskustvo i identitet marke, igrajući po novim pravilima Materijalnog dizajna. Dok je Inbox dizajnerski tim sastavljao svoje početne dizajne, Material Design još uvijek se razvijao. Ovo je timu pružilo sjajnu priliku: Potencijal da utvrde kakvi bi mogli biti web-standardi Material Design, rješavajući problem dizajniranja za gusto korisničko sučelje.

Projektiranje gustih korisničkih sučelja

Početni dizajn Inboxa nije bio dovoljno fleksibilan, jer je mreža imala samo sedam e-poruka na 13-inčnom zaslonu. To je bilo premalo u usporedbi s Gmailom koji bi mogao prikazivati ​​16-20 poruka e-pošte. Tim Smith, voditelj vizualnog dizajna za inbox, objašnjava:

"Ako Gmail i Inbox otvorite jedan pored drugog, velika je razlika u gustoći vida. To se također pokazalo jednim od najvećih izazova; pronalaženje idealne ravnoteže sadržaja i prostorije za disanje. "

Izvršavajući mrežu, visine redova i način prezentiranja, Inbox je uspio postaviti standard dizajna za gusta web sučelja i prikazati e-poštu od 12 do 17, svaka unutar kartice Material Design. Veličina fonta i sučelje također su dizajnirani kako bi se promijenili i prilagodili uređaju osobe. Na primjer, naslov teme u e-poruci povećavat će veličinu fonta, ovisno o povećanju veličine zaslona.

Inbox je dizajniran tako da stane što više informacija čak i na malim ekranima, postavljajući Standard Material Design za gusta web sučelja.

Upotrebom boja, slika i ikona za pružanje konteksta korisniku

Vizualno razlikovanje Inboxa od Gmaila obrađeno je upotrebom slika iz zaglavlja, koje se odnose na sadržaj u paketu e-pošte. Ako, primjerice, osoba koja koristi Inbox planira putovanje u New York City, prikazat će im se slika obrisa Manhattana. Inbox također koristi ogroman niz ikona u lijevoj navigacijskoj ladici koje su obojene prema funkciji u aplikaciji. Na primjer, kada korisnik klikne ili dodirne zeleni gumb "Gotovo", boja pozadine zaglavlja također se mijenja u zelenu, obavještavajući korisnika o promjeni i kontekstu.

Upotreba kontekstualnih slika još je jedna definirajuća značajka različitog iskustva s markom Inbox.

Inbox će dodavati slike na hrpu e-poruka kako bi im se dao smisao. Na primjer, avionske karte i e-adrese za rezervaciju hotela za put u New York prikazuju sliku obrisa grada.

Dizajniranje zaglavne trake za web

Drugi izazov za tim bio je dizajn app bara. Početni prijedlog bio je varijabilno zaglavlje koje se nije protezalo kako bi popunilo puni prozor preglednika, već je odgovaralo širini sadržaja.

"Proradili smo kroz desetak različitih varijacija ovog koncepta, sve do konačnog sletanja na zaglavlje pune širine koje danas vidite. Također smo radili kroz nekoliko prototipova da bismo odredili najbolje oblikovanje polja pretraživanja. "
Tim Smith, voditelj vizualnog dizajna, Inbox

Budući da se kartice u Inboxu proširuju i ugovaraju, to je značilo prilagodbu zaglavlja svaki put kada korisnik komunicira s e-poštom. Traka aplikacija također sadrži polje za pretraživanje i izbornik koji prikazuje ostale Googleove aplikacije. Ovaj pristup omogućuje Inboxu da ostane odgovoran bez kompliciranja sučelja.

Čuvajte: Prilagođavanje navigacijskih obrazaca

Keep je cross-platforma, aplikacija za bilješke koja proširuje i sažima Materijalne kartice na zaslonu kako bi usmjerila pažnju korisnika dok dodaje bilješke. Izmijenjena navigacijska traka na dnu također omogućuje ljudima da brzo stvore novu bilješku jednim dodirom.

Poticanje akcija s praznim stanjima i kretanjem

Prazna stanja obično se javljaju kada nema sadržaja koji bi se korisniku prikazivao. Nastavite koristiti ovaj obrazac dizajna tako što ljudima daje prazno platno na kojem crtaju svoje misli. Dostupnost korisničkog sučelja potiče korisnika da istraži različite elemente u traci aplikacije, što se proširuje i otkriva filtere ikona; izbornik za razvrstavanje koji omogućava korisnicima da se prebacuju s prikaza popisa i prikaza rešetke; i lijevu navigacijsku ladicu za prilagođavanje glavnih postavki aplikacije. Kartice se proširuju i ugovaraju kako bi korisnicima pružile kontekst.

Prazna stanja držite da biste potaknuli ljude da stvaraju nove bilješke
"Kretanje je nešto u što smo uložili mnogo truda - od načina na koji se bilješke animiraju u prikaz struje, do načina na koji prolaze kada ih otvorite i zatvorite."
Genevieve Cuevas, softverski inženjer, Google Keep

Korištenje pravih obrazaca materijala za vašu aplikaciju: donja navigacija u odnosu na FAB

Prilikom redizajniranja aplikacije, tim dizajnera i razvojnih programera Keep-a nadmašio je obrasce Materijalnog dizajna i na kraju primijenio komponente poput kartica koje pomažu u razlikovanju bilješki jedna od druge, lijevu navigacijsku ladicu koja olakšava dostupnost postavki aplikacije i kontekstualne izbornike koji se mijenjaju da odgovara kontekstu svake bilješke - poput bilješke s potvrdnim okvirima koji prikazuju izbornik za provjeru svih stavki na popisu. U kombinaciji, ovi različiti dizajnerski obrasci stvaraju čist i funkcionalan doživljaj korisnika koji se prilagođava ovisno o kontekstu i potrebama korisnika, ključni čimbenik u Keepovoj jednostavnosti i laganom sučelju.

Tijekom procesa redizajna, tim Keep-a eksperimentirao je s nekim osnovnim navigacijama materijala testirajući proširivi FAB umjesto postojeće navigacije na dnu. U kontekstu, dna navigacija nudi jednostavan poziv jednim potezom za akciju za stvaranje novih bilješki. Za novi FAB bila su potrebna dva dodirivanja: jedno za proširenje opcija i drugo za stvaranje bilješki.

"Kada smo pokrenuli FAB, neki se naši korisnici žalili kako su izgubili ponašanje jednim dodirom radi stvaranja bilješki."
Genevieve Cuevas, softverski inženjer, Google Keep

Ova promjena činila se regresivno za ljude koji su prethodno koristili aplikaciju i bili navikli na navigaciju jednim dodirom. Nastavite putovati, testirati i na kraju odustati od osnovnih sastavnih dijelova materijala poput FAB-a, predstavlja sjajan primjer odabira Vodiča za materijal koji najbolje funkcionira za razliku od ponašanja obuće koje ne odgovara proizvodu.

Vodiči ne pravila

I Inbox i Keep timovi koristili su smjernice Dizajn materijala, koristeći ih za dizajn i razvoj svojih aplikacija. Kad su naišli na slučaj upotrebe koji nije radio za njihov proizvod, prilagodili su im dizajn. Material Dizajn nudi puno smjernica, temeljenih na iskustvima UX-a na cijelom Googleu, ali ne može pokriti sve. Nadamo se da ovi gornji primjeri pokazuju da to možete prilagoditi svojim potrebama, a još uvijek sukladni cjelokupnom duhu smjernica.