8pt predloške GUI dizajna materijala

Prolaz vizualnog dizajna i osnovnih mjernih podataka Design Inc.

Osam..8, 16, 24, 32, 40, 48, 56, 64, 72, 80, 88, 96. To su brojevi koji mi noću prolaze kroz glavu. Koristim 8pt od svojeg vremena na Android Auto-u i uživao sam u primjeni osnovnih metodologija Material Design na korisničkim sučeljima Design Inc. Prošli tjedan u našoj tjednoj emisiji UNDO, dizajner, Danaan Clarke, pitao je o mrežici od 8pt, i da li smo imali ili nismo imali iskustva s tim. Uvijek sam "zavaran" na strukturu koja podržava dizajn i mislio sam da će biti zabavno dijeliti neke "iza kulisa".

1. Osnovna mreža

Prvi i najvažniji korak je osigurati strukturu jezgre za vašu mrežu dokumenata. Vrijednosti rešetke možete definirati navigacijom View> Canvas> Postavke rešetke ...

Tim za dizajn materijala Google Material obavlja sjajan posao definirajući način na koji ta bazna crta utječe na vrijednosti ostalih vrsta elemenata jezgre korisničkog sučelja. Sve od navigacijskih traka, tipografije, keilina, razmaka i minimalne veličine ciljne veličine za akcije strukturirano je oko ove osnovne crte. Ovdje bih dodao još, ali ovaj vodič pratim poprilično pomno. Ako se ne pokvari, nemojte popraviti.

Izvor: Google Material Design: https://material.io/guidelines

2. Predlošci izgleda

Sljedeći je korak definiranje sustava stupaca za rasporede na različitim ekranima. Nastojim biti konzervativni na svojim veličinama platna, ali uvijek pokušavam koristiti rešetku stupaca od 4, 8 ili 16 s olukom od 8pt (ili bilo kojeg multiplikatora toga). Za vertikalne ritmove imam jednostavnu mrežu s ponavljanjem od 48 oka. Vrijednosti izgleda možete odrediti navigacijom View> Canvas> Postavke izgleda ...

Ispod je jednostavan primjer kako koristim mrežu rešetki stupaca (8 stupaca, oluk 16pt), osnovne metrike (8pt) i vertikalni ritam (48pt) na novom svjedočanstvenom sučelju koje smo isporučili ovaj tjedan.

3. Ikone

Ikone su ogroman dio ispravnog funkcioniranja rešetke osnovne linije na korisničkom sučelju. Postoji puno škakljive matematike za postizanje ovog savršenog, ali ako se pravilno napravi integritet vaše ikone održavat će se u spektru gustoće zaslona (Retina, 1x, 2x, MDPI-XXXHDPI… ako ovo nema smisla pročitati ovo) , Ključno za izvršavanje ikona na ovaj način je osigurati da su svi oblici, potezi i rubovi "ravnomjerni" (2, 4, 6, 8), tako da vam ostaje izostavljena ikona s centrom u području 24 x 24pt koja može također se množe (x2, x3, x4) i razmjera ravnomjerno.

https://material.io/guidelines/style/icons.html#icons-system-icons

Tu su i toni besplatnih seta ikona koji su već dizajnirani tako da se uklapaju u osnovnu vrijednost od 8pt. Materijalni dizajn još jednom ima nevjerojatne resurse za ovo, ali možete sami dizajnirati. U nastavku je prikazan način indeksiranja svih naših ikona u našem osnovnom GUI predlošku.

4. Struktura GUI-ja

Zapravo ne postoje propisana pravila kako najbolje stvoriti ove vodiče, ali ovi su dokumenti izvor istine koji mi daju (i nadam se da su moji inženjerski kolege) bezbrižni. Cilj je imati "savršenu pikselu" verziju svake osnovne komponente sve u jednom dokumentu, tako da svaki ekran i stanje aplikacije ne moraju biti crtani za proizvodnju. Na mreži se može naći mnoštvo sjajnih primjera i resursa, ali ako želite početi ispočetka, možete preuzeti moju osnovnu datoteku s definiranim mrežama i strukturom stupaca.

PREUZIMITE DIJELE IZVORA

Hvala!

Ovaj je post bio kratak, ali želio sam podijeliti malo o mom procesu. Ako vam je to bilo korisno, podijelite s prijateljima koji će imati koristi. Također, ako ste uživali u videu, objavljujem i tjedni vlog ... volio bi se pretplatiti.

Ako vam je potrebna pomoć u sljedećem projektu, dodajte zahtjev dizajnu Inc. Ako ste dizajner i želite se prijaviti, rado bismo vidjeli vaš rad.